Jaddong's Lab

React로 개발하는 사람들에게는 useEffect는 아주 익숙한 Hook이다. 페이지 뿌려줄 data를 불러오기 위해 api call해서 data set하기도 하고 useEffect(() => { const getData = async () => { const res = await getData(); setData(res); }; getData(); }, []); store에 있는 값을 체크해 페이지 이동을 하기도 하고 useEffect(() => { if (!storeValue) { history.goBack(); } }, []); 처음 페이지가 떴을 때 스크롤의 위치를 셋팅하기도 한다. useEffect(() => { window.scrollTo({ top: 0, behavior: "auto", }..

1. The imports statements : React Import Structure(RIS) import를 사용하여 파일과 모듈을 가져올 수 있습니다 . 대부분의 경우, 특히 대규모 프로젝트로 작업할 때 더 나은 가독성과 리팩토링을 위해 절대 가져오기 를 설정하고 사용하는 것이 좋습니다. 방법 참고링크 : https://bgradecoding.tistory.com/14 Bad example // Note: A not-so-good example for unorganized & relative imports import React from 'react'; import Alert from '@material-ui/lab/Alert'; import GoogleMap from '../../../compo..

갑자기 재택을 하게 되어서 회사 노트북은 아닌 개인 노트북으로 작업을 하게되었다. git 계정 변경하고 노드 버전 nvm 설치하고 오전을 거의 셋팅하는데 시간을 쓴 듯 싶었다. 그런데 clone을 잘하고 나서도 vscode에 빨간줄이 쫘아악나는 걸 볼 수 있었다. 오류는 아니고 typescript버전에 따른 문제였다. F1을 눌러 typescript 입력 TypeScript : Select TypeScript Version...을 클릭한다. 보면 Use VS Code's Version 이 선택되어 있음을 알 수 있다. 요걸 아래에 있는 Use Workspace Version 을 클릭하여 바꿔준다. node_modules 맞춘다는 뜻이다. 그러면 빨간줄이 모두 없어진다! .vscode파일 내에 있는 .se..

useState로 object형태의 상태를 업데이트 하는 방법은 두 가지가 있다. 보기엔 문제없이 동일하게 동작하지만 차이가 있고, 1번보다는 2번은 권장한다. const [userInput, setUserInputs] = useState({ title: '', amount: '', date: '' }); const titleChangeHandler = (event) => { // 방법 (1) : not good setUserInputs({ ...userInput title: event.target.value }); // 방법 (2) : good setUserInputs((prevState) => { return { ...prevState, title: event.target.value } }; } 리액..

서버사이드렌더링을 위한 프레임워크인 Nestjs를 사용해서 프로젝트를 시도해서 개발중이다.🙄 물론 처음이니까 아직 Nextjs를 안다기보단 겉햙기 중인데, 워낙 도큐멘트나 깃에 정리가 잘 되어있는 편이라 조금씩 읽어보면서 셋팅 및 개발해보고 있다. 이번 프로젝트에서 에디터 적용이 필요한 경우여서, 여러 개를 서칭해봤는데 React와 Quill Editor를 많이 사용하고 있는 것 같아서 선택하게 되었다. (summernote만 해본자,,,, 🧐) 허나, 서버사이드렌더링이란 특징때문에 그대로 Quill을 적용하게 되면 아래와 같이 document is not defined라는 에러가 발생하게 될 것이다. 그래서 해결한 소스는 아래와 같다! Next.js는 JavaScript 용 ES2020 dynamic ..

window 에서는 바로 되더니, 오랜만에 맥북을 꺼내 셋팅하려니까 에러가 뜬다.....ㅠ_ㅠ 해결방법!! 터미널에 아래와 같이 명령어를 치면 brew install watchman Homebrew 를 업데이트하기 시작한다. 리액트 네이티브 내부에서 파일들의 변경을 감시하기 위해 watchman을 사용하기때문이라고 한다.

그냥 이메일, 패스워드를 활용한 로그인/로그아웃이 있는가 하면 google, github, facebook 같은 소셜 로그인이 있다. 어드민 같은 경우에는 소셜 로그인을 할 필요는 없을 것 같다고 판단했고, 작업은 이메일과 패스워드로 Create Account를 해서 해당 Account가 firebas Authentication User에 남도록 하는 목표로 수정하였다. 그래도 소셜로그인 테스트도 진행해보았다. 최종코드 : github.com/jayounglee92/react-firebase 1. 선행작업 자세한 선행작업은 스킵하겠다. CRA로 프로젝트 생성 : https://ko.reactjs.org/docs/getting-started.html react-router-dom 설치 : https://r..

매번 하드코딩으로 마크업하던 걸 좀 자동화하기 위해서 회사에서 간단한 어드민을 개발하려고 하는데, 백엔드까지 혼자서 손보기에는 시간과 힘이 너무 들기에,,,,😥 파이어베이스로 백엔드 프로세싱을 하고 프론트만으로 개발할 수 있다는 걸 알게 되서 시작한 프로젝트이다. 혼자서 깃허브에서 테스팅을 완료했고, 실제 사내에서 이용하기 위한 프로젝트를 개발하면서 블로깅할 예정이다. 매번 혼자서 공부하면서 하려니,,,, 좀 시간이 걸릴 것 같다 😂 아무튼 화이텡....! 최종코드 : github.com/jayounglee92/react-firebase 1. 목표설정 우선! 하고자하는 목표는 아래와 같다. (스타일은 나아중에 추가적인 부분....!) - 소스 관리 : GitLab - 호스팅 : Netlify - 백엔드 ..

1. yarn 글로벌 인스톨하기 $ yarn global add npx 2. npx 설치 및 최신화(업그레이드) $ npm i npx -g 3. 리액트 프로젝트 셋팅 $ npx create-react-app {프로젝트 폴더명}

이미 리액트 빌드 되어진 저장소에서 프로젝트는 받아서 작업하여 빌드, 배포합니다. 1. 프로젝드받아서 실행하기 프로젝트의 깃주소로 저장소 프로젝트를 로컬에 clone 및 실행합니다. git clone https://github.com/{username}/{repo-name}.git // 예시 cd {repo-name} // 로컬 프로젝트 폴더로 들어감 yarn yarn start 2. 작업 후에 저장소로 커밋, 푸쉬 git add . // 내가 수정한 전체내역을 git commit -m "커밋메세지" // 커밋하고 git push // 푸쉬 3. 빌드 후 배포 $ yarn build $ yarn run deploy