본문 바로가기
[React.js] Typescript로 초기 셋팅4 - firebase 연동 및 호출 firebase 사용 방법 포스팅 (바로가기) 8. firebase에 json 파일을 올려 최종 프로젝트 호출하기 준비한 json 파일 (참고 : json 파일은 보통 아래와 같이 작성한다.) { "WorkList" : { "first" : [ { "id": "general1", "title": "welcome general1" }, { "id": "general2", "title": "welcome general2" }, { "id": "general3", "title": "welcome general3" } ], "second" : [ { "id": "special1", "title": "welcome special1" }, { "id": "special2", "title": "welcome spec..
[React.js] Typescript로 초기 셋팅3 - firebase로 db 붙이기(Realtime Database) firebase는 백단의 개발 도구의 집합인 SDK를 구축할 수 있는 개발 플랫폼이다. firebase안에 많은 상품이 있는데 그중에서 Realtime Database를 통해 db를 구축해볼 것이다. 1. 회원가입 및 프로젝트 추가 2. 좌측 사이드바에서 빌드 메뉴 > Realtime Database 리전은 한국과 가까운 곳이나 한국이나 마음대로 3. 웹앱에 Firebase 추가 이 모양 버튼이 웹앱 추가 버튼. 4. firebaseConfig 변수 안의 값을 별도 보관 5. 만든 Realtime Database 페이지에서 규칙 텝에 read를 true로 변경하기. false로 두면 읽을 권한이 없어서 데이터가 해당 프로젝트에서 호출되지 않는다. 5. 적용하려는 프로젝트 최상위에 .env 파일 설정 (...
[React.js] Typescript로 초기 셋팅2 - Router 사용 하기 React 하얀 바탕에서 부터 시작(전편)은 아래 링크 참고 https://jintrue.tistory.com/entry/Reactjs-Typescript%EB%A1%9C-%EC%B4%88%EA%B8%B0-%EC%85%8B%ED%8C%85 [React.js] Typescript로 초기 셋팅 타입스크립트로 코드를 작성하면 오류사항이 즉각 보여 개발할 때 좀더 꼼꼼히 작업할 수 있는 이점이 있다. 확장자는 .tsx이며 Typescript로 React를 셋팅 하는 법을 기록하고자 한다. 셋팅 버전 참 jintrue.tistory.com 8. gnb에서 페이지 이동을 위한 라우터 설정 📜Component/Header.tsx styled-components를 이용한 태그 및 스타일 설정 framer-motion를..
[React.js] Typescript로 초기 셋팅 타입스크립트로 코드를 작성하면 오류사항이 즉각 보여 개발할 때 좀더 꼼꼼히 작업할 수 있는 이점이 있다. 확장자는 .tsx이며 Typescript로 React를 셋팅 하는 법을 기록하고자 한다. 셋팅 버전 참고 (참고 : react17 과 react-router-dom5 | react18과 react-router-dom6) "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/node": "^16.18.32", "@types/react": "^18.2.7"..
[VSCode] ctrl + k + f 단축키로 javascript도 줄바꿈 하기 Beautify의 안녕으로 줄바꿈을 찾아보다가 간혹 자바스크립트 파일에는 저 단축키가 적용되지 않는다는 글이 있다. 그래서 시도를 해보았는데 저 단축키 누르고 -> 아래와같은 알럿이 뜬다. 해당 파일의 language가 어떤 것인지 묻는 Configure 버튼을 누르면 vscode 상단에 언어선택이 나오는데 vscode typescript ~~ 어쩌고가 나오고 이걸 선택하면 줄바꿈이 활성화된다. 한번 인식된 언어의 파일은 다음부터 ctrl + k + f 를 누르면 더이상 묻지않고 실행된다. 🙂
[VScode] 자동 줄 맞춤 플러그인 Beautify가 사라졌다... vscode에서 코드 들여쓰기나 줄 맞춤을 정갈하게 도와주는 플러그인 Beautify가 더이상 유지 되지 않는다고 한다.......... 🤔 그래서 다른 플러그인을 찾아보았다. 그러다 단축키 Ctrl + K + F를 누르면 플러그인 Beautify 와 비슷하게 줄맞춤을 해준다! 어디서 나온 단축키일까 찾아보았더니 왼쪽 하단 톱니바퀴모양(manage) > Keyboard Shortcuts 를 들어가서 살펴보니 추측상 vscode에 내장되어있는 것 같다. 앞으로 vscode에서 줄바꿈은 Ctrl + K + F ! 잊지말자~
[CSS] 부모가 display: flex; 일때 특정 내용물 한줄로 나타내기 제목 : 내용 이런 구조가 있는데 제목 부분이 반응형일때 아래처럼 두줄 이상으로 안내려가길 원한다. 이럴땐 flex-shrink 를 사용하면 된다. flex-shrink 란 해당 요소가 화면 크기 변화로 인해 축소될 경우 비율을 선택하는 것인데 이 상황에선 한줄로 표현되길 원하는 것이므로 축소가 되지 않게 아래와 같이 스타일을 적용해주면 된다. flex-shrink: 0; 참고) flex: 1 1 auto 에 대해서 알아보자면, 위의 언급한 flex-shrink가 여기서 가운데 1 자리에 해당된다. 즉, 첫번째 1은 flex-grow 두번째 1은 flex-shirnk 마지막 auto는 이 요소가 최소한으로 줄어들수 있는 min-width 값을 설정해주는 것이다. auto로 할 경우에는 자동으로 비율을 조..
[intelliJ] scss 자동 컴파일 후 라이브 리로딩 기능 해제 html 작업을 할때 라이브로 브라우저를 띄우고, scss로 작업하는 도중 자동 컴파일까지는 괜찮은데 켜둔 라이브 브라우저에 바로 반영되기 때문에 하나의 스타일만 추가해도, 리로딩 되어버리면서 브라우저 검사에서 임의로 잡아둔 스타일이 다 없어져버린다! 따라서 저장버튼을 눌렀을 경우, 자동 컴파일은 되지만 입력을 멈췄을때 자동 컴파일은 원치 않기 때문에 이를 해제할 수 있는 기능을 찾아보았다. [Settings > Tools > File Watchers] 이게 작업 도중 너무 거슬려서 이것저것 눌러보고 다시 인텔리제이를 키고 난리치다가 알게되었다. Settings > Tools > File Watchers 에서 기존 설정해둔 SCSS 클릭, Advanced Options 안의 Auto-save edited..

티스토리툴바