데굴데굴

⚙️ 오늘 학습한 내용 JavaScript 클로저, 전위 연산자, 후위 연산자 🐹 오늘의 기분 어제 면접 스터디 질문이 클로저였는데 서로의 답변을 들어보면서 리액트의 훅에도 클로저가 쓰였다는 사실을 새롭게 알게 되었다. 면접 연습이 목적인 스터디이긴 하지만 끝나고 나서 이런 이론에 대한 이야기를 나누면서 얻어가는 것도 많아서 좋다. 생각해보니까 `useState`도 쓸 때마다 각자의 상태를 보존하고 있는데 그게 클로저의 개념이었다니 신기했다. 🗝 키워드 클로저, 은닉화, 캡슐화, 전위 연산자, 후위 연산자 🗣 스스로에게 설명 클로저 중첩 함수에서 내부 함수가 외부 함수의 스코프를 보존하고 있는 것을 말한다. 외부 함수가 종료되어도 내부 함수가 외부 함수의 스코프를 보존하고 있어 프라이빗 메소드를 만들 때..

리스트의 크기가 큰 경우에는 보통 페이지네이션이나 무한스크롤로 끊어서 보여줄 수 있다. 내 프로젝트에서는 로컬에 있는 json 파일을 활용하고 있었고, 솔로로 하는 토이 프로젝트였어서 서버까지 구현하기에는 예상했던 것보다 공수가 많이 들 것 같아 어떻게 해야하나 고민이었다. Intersection Observer API를 이용한 무한스크롤 방식으로 slice해서 보여준다고 해도 결국엔 매번 json 파일 전체를 불러왔기에 최선의 방법은 아니라고 생각했다. 따라서 큰 크기의 리스트를 프론트 단에서 효율적으로 보여줄 방법이 필요했다. 리스트 가상화, windowing이란? 참조 react-window로 대형 리스트 가상화 react-window는 대형 리스트를 효율적으로 렌더링할 수 있는 라이브러리입니다. ..

⚙️ 오늘 학습한 내용 `gh-pages` 라이브러리로 github pages에서 SPA 배포하기 🐹 오늘의 기분 하루가 후루룩 지나갔다. 스터디하고 과제하고 하다보니 어느새 저녁.. 원티드 강의까지 듣고 나니 어느새 밤이 되었다. 과제는 배포까지 끝내서 이제 요구사항 점검하고 리팩토링할 부분을 찾고 고쳐나가야 한다. 칸반보드로 이슈 관리하니까 한 눈에 보여서 너무 편했다. 요구사항 쪼개서 이슈에 올려놓은 투두 하나씩 지워나갈때의 쾌감,, 짱이다 👍 🗝 키워드 `gh-pages` 🗣 스스로에게 설명 `gh-pages` 라이브러리로 github pages에서 SPA 배포하기 github pages로 SPA를 배포하니 다른 경로에 들어갔을 때 404 에러를 뱉어냈다. 이건 전에도 한 번 겪었던 문제인데, 기..

⚙️ 오늘 학습한 내용 react-virtuoso로 큰 크기의 리스트 렌더링하기 (windowing) 원티드 프리온보딩 4월 프론트엔드 첫 강의 🐹 오늘의 기분 일어나자마자 코테 문제 풀고 블랙커피 스터디 강의 들으면서 오전을 보냈다. 오후에는 시간 정해놓고 프로젝트 오류 해결을 했다. 가상화 관련 라이브러리를 찾다가 `react-virtuoso`를 알게 되었는데 높이를 지정해줄 필요가 없다는 것에서 현재 프로젝트에 꼭 필요한 라이브러리라고 생각되어 바로 도입했다. 씨름 끝에 렌더링에 성공해서 너무 뿌듯하다. 공식 문서랑 소스코드 보면서 해결한 부분도 있어서 이건 아예 글을 따로 작성할 생각이다. 내일은 배포도 한 번 더 해보고 이미지 크기 최적화를 해봐야지 저녁에는 프리온보딩 4월 챌린지 강의를 들었는..

⚙️ 오늘 학습한 내용 면접 스터디 준비, 토이 프로젝트 🐹 오늘의 기분 이번 주부터 월, 수, 금 오전에 면접 스터디를 하고 있다. 확실히 이런 면접 준비는 강제성이 생겨야 열심히 하게 되는 것 같다. 스터디원들 앞에서 직접 내 답변을 뱉어보는 연습을 해보고 피드백을 받으니 혼자 카메라 보고 연습할 때보다 더 좋았다. 답변 말할 때마다 떨리긴 하지만 익숙해져야집 환절기라 그런가(?) 요즘 멘탈이 영 안 좋았다. 블로그도 글이 풍부해야 한다는 압박이 갑자기 느껴져서 쉽사리 글을 올리지 못했다. 다시 시작하는 마음으로 내 템포에 맞춰 나아가야겠다. 부캠 수료하고 너무 쫓겨살았다는 생각이 든다. 부캠 진행하면서 부족하다고 느꼈던 부분부터 채우자 오랜만에 토이 프로젝트도 다시 들여다보았다. 무한 스크롤 구현에..

⚙️ 오늘 학습한 내용 webpack Introduction | 웹팩 핸드북 웹팩을 처음 시작하는 분들을 위한 핸드북입니다 😄 이 사이트에서 다루는 내용은 다음과 같습니다. 📖 웹팩 개요 📖 NPM & Node.js 📖 웹팩 주요 속성 4가지 📖 웹팩 개발 도구 📖 웹팩 고급 웹 joshua1988.github.io CSS 파일 개별 추출 - Webpack 러닝 가이드 이 방법은 최적화에 사용됩니다. 전체 웹페이지의 리소스를 한 번에 로딩하는 것이 아니라, 사용자가 필요할 때까지 미뤄두다 원하는 시점(요구되는 순간)에 리소스를 로딩합니다. 대표적인 예 yamoo9.gitbook.io 🐹 오늘의 기분 webpack을 다시 공부했다. 핸드북을 보면서 `webpack.config.js` 파일을 직접 작성해봤는..

⚙️ 오늘 학습한 내용 custom hooks 🐹 요약 프로젝트에서 부족한 부분이 너무 많이 보여서 글 하나에 정리해두고 하나씩 타파해보려고 한다. 예전에 사뒀던 리액트 유데미 강의를 보면서 custom hooks를 다시 공부했다. 빠르면 오늘 저녁에 custom hooks 작업에 들어갈 것 같다. 글로 정리해가면서 작업해야겠다. 그리고 오늘 프로젝트의 폴더 구조를 개선했다. components 폴더에 폴더 구분 없이 컴포넌트가 한 층에 나열되어있었던 걸 페이지별로 나누는 작업을 했다. components 폴더만 보면 이렇게 바뀌었다. # 전 └── src ├── App.css ├── App.js ├── components │ ├── BookAddModal.js │ ├── BookList.js │ ├──..

부트캠프에서 했던 프로젝트를 개선해볼 수 있을 것 같아서 이것저것 해오다가 정작 코드의 품질에는 신경쓰지 못하고 있었다는 생각이 들었다. 해보고 싶은 작업들을 하나씩 써보고 차근차근 해나가야겠다. 프로젝트 폴더 구조 개편 (2023.03.21 ✅) 리드미에 리팩토링 문구 추가 (2023.04.18 ✅) 초기 `npm start`시 로딩 속도가 오래 걸림 -> lazy loading으로 해결하기 custom hooks으로 axios 요청 빼내기 axios baseURL 설정하기 (2023.04.15 ✅) 버튼 컴포넌트로 빼기 - `styled-components`의 `css` 활용 연습해보기 (2023.04.19 ✅) input도 custom hooks으로 뺄 수 있을지 고민해보기 JS -> TS 마이그레..