뚝딱뚝딱 코딩 기록_

[React_ useLayoutEffect] useEffect와 useLayoutEffect의 차이를 알아보자. 이전 회사에 재직하면서 useLayoutEffect라는 React Hook을 처음 접하게 되었다. 사실 잊고 살다가 얼마 전 면접에서 useEffect와 useLayoutEffect의 차이와 useLayoutEffect를 사용해 본 적 있냐는 질문에 다시 떠올랐다. 사용해 본 적도 없고 개념도 잘 몰라서 솔직하게 모른다고 대답하긴 했지만, 이번 기회에 공부해보는 것도 좋을 것 같아서 정리해 보려고 한다. ❓ useEffect, useLayoutEffect React Component의 Side Effect를 관리하는데 사용되는 Hooks 1️⃣ useEffect(setup, dependenci..

[Firebabse_ 인증] Firebase를 통해 서버리스 애플리케이션으로 쇼핑몰 프로젝트를 진행하고 있다. 사실 쇼핑몰은 예전부터 하고싶은 프로젝트였는데 잠시 미뤄두고 있었다. 그런데 친구가 쇼핑몰을 오픈하려고 한다는 소식을 듣고 괜히 만들어주고 싶어서(?) 드디어 시작하게 되었다. (ㅎㅎ firebase의 인증 시스템을 이용하여 자체 회원가입 및 로그인, 구글 소셜 로그인 기능을 구현하였는데 복습도 할 겸 정리해 보려고 한다. 1️⃣ 파이어베이스 연동하기 파이어베이스에 프로젝트를 생성하고 [프로젝트 설정 - Web App] 부분을 보면 아래 사진처럼 sdk 설정 및 구성 방법이 나온다. 저 부분을 복사해서 src/api/firebase.js 폴더에 붙여넣기 하면 된다. 참고로 firebaseConf..

[redux-toolkit] 리액트로 진행한 프로젝트에서 리덕스를 공부한 적이 있는데 리덕스의 보일러 플레이트 코드를 간소화하기 위해 리덕스 툴킷 (redux-toolkit, rtk)를 사용한 적이 있다. 공부하면서 노션에 정리해놓은 것을 다시 복기할 겸 정리하려고 한다. 상태 관리 라이브러리 (state management library) → redux, modox, recoil 등 state가 상위 component로 올라갈수록 관리하기 복잡해지는 현상 해결 Redux toolkit (RTK) Redux 로직을 작성하고 저장소를 설정하는 프로세스(redux 작업)를 단순화 redux 저장소 구성의 복잡성, 많은 패키지 추가, 상용구 코드 해결 위해 사용하는 도구 API configureStore() ..

[Recoil] ❓ Recoil : 리액트 상태 관리 라이브러리 1. recoil 설치하기 npm install recoil or yarn add recoil 2. RecoilRoot로 컴포넌트 감싸기 - : 상태를 관리하고 사용할 상위 컴포넌트 3. Atom 생성하기 - src 디렉토리에 recoil을 생성한 뒤 state를 정의할 파일(ts / js 모두 가능)을 만든다. - 파일 이름은 임의로 정하면 된다. - key : state를 식별할 id (유일해야 함) - default : 초기 값 ❗ 각 컴포넌트에서 state를 읽고 업데이트 하는 것이 가능하다. ❗ 상태 값을 읽는 컴포넌트들은 해당 atom에 subscribe(구독) 되기 때문에 업데이트 될때마다 리렌더링이 발생한다. 3. 컴포넌트에서..

[React_ axios] 유튜브 클론 프로젝트에서 axios로 통신을 하던 중 baseURL과 api_key가 반복적으로 사용되고 있었다. 반복되는 코드를 줄이기 위해서 axios.create를 통해 instance를 생성하여 사용하기로 했다. 1. 인스턴스 생성 후 export (내보내기) - 폴더 / 파일 이름을 임의로 정하고 axios를 import한다. - axios.create({}) 안에 기본 세팅 값들을 넣어준다. ❕ baseURL : request url (요청 보낼 url) ❕ params : 기본 query params → {key: value} 형태로 넣어준다. 2. 외부에서 import 하여 사용하기 - 기존 axios를 사용하는 것과 동일하게 사용 가능하다. axios.creat..

[React_ eslint 오류] yarn을 생성한 리액트 프로젝트를 수정하고 저장했는데 이런 오류가 발생했다. 이유는cra와 yarn이 충돌했기 때문에 발생하는 문제이다. ❗ 해결 1. eslint-fonfig-react-app 를 설치한다. yarn add -D eslint-config-react-app 2. root 폴더에 .yarnrc.yml 파일을 아래 사진과 같이 생성한다. 3. 캐시 삭제 yarn cache clean 위 명령어로 캐시를 삭제한 후 다시 실행한다.

[Project_HNTECH Hompage Dev] 🚒 프로젝트 소개 🧯 목적 : HNTECH 회사 홈페이지 제작(개발) 🧯기능 제품 정보 확인 (제품 소개 게시판) 자료 업로드 / 다운로드 (사진, 문서) 게시글 업로드 / 댓글 작성 관리자 페이지 - 로그인, 회사 정보 수정 등 PDF 프리뷰어 (미리보기) 반응형 모바일 웹 화면 🧯개발 기간 : 2022.08 - 2022.10 🚒 사용 기술 🧯 front Language : TypeScript, HTML, CSS Library : React, Redux, Material-UI, react-dnd, react-pdf Tool : Redux Toolkit, Vite API : axios 🧯 back Spring Boot (Kotlin), MySQL, Sp..

[React_ useReducer + ContextAPI] ❓ 전역으로 state 관리하기 리액트로 개발을 하면서 느낀 점은 컴포넌트 층이 많아지면 prop로 state를 전달하는 과정(prop drilling)에서 prop을 추적하기 어려워 유지보수에 영향을 미친다는 점이었다. 이러한 현상을 해결하기 위해 상태 관리도구인 Redux, Recoil, Mobx 등을 사용하여 과도한 prop drilling을 줄이는 방법을 사용한다. ❓ useReducer useState를 대체하는 hook으로 state가 여러 하위 값을 포함하는 복잡한 상태거나 다음 state가 이전 상태에 종속되는 경우 선호되는 방법이다. [state, dispatch] 한 쌍으로 반환되며 컴포넌트 밖에 state를 정의하여 사용할 수..

[Material UI_ Grid] ❔ window size 구하기 const [windowSize, setWindowSize] = useState(window.innerWidth); const handleWindowResize = useCallback(() => { setWindowSize(window.innerWidth); }, []); window.addEventListener("resize", handleWindowResize); ❔ 컴포넌트 만들기 const ComponentGrid = () => { let colNum = 4; if (windowSize < 1200) colNum = 3; if (windowSize < 900) colNum = 2; if (windowSize < 600) col..

[CKEditor_ HTML Parser] CKEditor로 입력한 내용을 받아왔을 때 html 태그 속성이 사라지는 현상을 해결하는 방법에 대해 알아보자 ❔ CKEditor 사용법은 이전 포스팅을 참고해 주세요. 👉 [CKEditor5] 리액트에서 CKEditor5 사용하기 CKEditor를 사용하여 게시판 글 등록 페이지를 만들었는데 상세보기로 내용을 넣으니 html 태그 속성이 적용되지 않고 태그가 그대로 노출되는 현상이 발생했다. 예를 들면, 제목 1 속성으로 안녕하세요를 입력했을 때 HTML 삽입 미리보기할 수 없는 소스 이렇게 나타나야 하는데 화면에는 안녕하세요 이렇게 나타났다. 이 현상을 해결하려면 HTML Parser라는 라이브러리가 필요한데 프로젝트에서 리액트로 개발을 진행중이었기 때문에..