데굴데굴

⚙️ 오늘 학습한 내용 styled-components의 css helper 🗝 키워드 css helper 🗣 스스로에게 설명 원티드 프리온보딩을 들으면서 센드버드 레포지토리의 코드를 추천받아 살짝 살펴봤었는데 거기서 styled-components의 상속과 css helper 함수를 적극적으로 활용하고 있었다. styled-components도 맨날 써오던 대로만 써왔어서 다른 기능을 활용해볼 생각을 하지 못한 것에 대해 반성도 조금 했다. 프로젝트에 쓰였던 버튼이 같은 스타일인데도 페이지마다 개별적으로 구현되어 있었고, 코드에서 봤던 것처럼 styled-components의 상속과 css helper를 이용해 Button.js라는 한 파일 안에서 버튼 컴포넌트들을 관리해보고 싶어졌다. 애초에 프로젝트..

⚙️ 오늘 학습한 내용 면접 스터디 및 복기 🗝 키워드 MVC 패턴, 런타임 에러, 컴파일 에러, 전역 상태 🗣 스스로에게 설명 MVC 패턴의 데이터 흐름 MVC 패턴은 모델, 뷰, 컨트롤러로 이루어진 디자인 패턴. 앱 개발 요소를 세 가지 역할로 구분해서 개발 프로세스에서 각각의 구성 요소에만 집중해서 개발 가능 장점: 재사용성과 확장성이 용이하다. 단점: 앱의 규모가 커질수록 복잡해진다. 모델: 애플리케이션의 데이터 (ex. 데이터베이스, 상수, 변수) 뷰: 사용자 인터페이스 요소 (모델이 가지는 정보를 따로 저장하지 않고 화면에 표시하는 정보만 가지고 있어야 한다) 컨트롤러: 모델과 뷰를 잇는 역할. 이벤트 등의 메인 로직을 담당, 모델과 뷰의 생명주기 관리, 모델이나 뷰의 변경 통지를 받으면 이를..

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

⚙️ 오늘 학습한 내용 `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 │ ├──..