Studying Front-end
면접도 붙고, 입사하기 전에 뭘 정리할까 고민하다가 작년에 본 시험 정리를 하려고한당. 기존엔 블로그가 없어서 다른 블로그에 올렸었는데 이젠 내꺼에도 올려야지! 일단 나는 코로나 때문에 공부 기간이 강제로 길었다. 필기부터 실기까지 거의 8개월… 계속해서 시험이 연기되어서 마음잡느라 힘들었다ㅠ_ㅠ. 그래도 공부 기간이 길어서 그런지 필기랑 실기시험 사이의 텀은 없고 모두 한번에 붙게 되었다. 먼저 느낀 점은 […]
React의 러닝커브를 높이는 주범 ‘리덕스 사가’에 대해 간단한 개념과 예시를 정리하려한다. 까먹지말자 😮 Redux-saga란? Redux-saga는 리덕스의 액션을 dispatch하기 전에 해야할 작업들을 처리하는 미들웨어이다. Redux-thunk라는 미들웨어도 있지만, thunk는 여러개의 액션을 디스패치하게 해주지만, 그 외의 기능들은 모두 직접 구현해야 하기 한다. 그러나 Saga는 모두 effect로 구현해놔서 대부분 미들웨어로 saga를 사용한다고 한다. (Redux-saga는 Generator 문법을 기반으로 구현하기 때문에 […]
프레임워크 하나를 배울때마다 에러가 빵빵 터진다. 조용히 넘어가는 날들이 없다. Next.js에서 styled-components를 적용하려는데 SSR로 인해 style이 들어가기도 전에 렌더링이 되어버린다. 이럴 때는 일단 설치한다. 루트 디렉터리에 .babelrc를 생성한다. 3. pages에 _document.js를 생성해서 덮어쓴다.(_document.js가 index.hmtl) 해결이다. 진도 나가고 싶다. 오류 그만 터져라
처음에는 Eslint와 Prettier를 안 썼는데, 점점 세미콜론도 귀찮아지고… 코딩스타일이 뒤죽박죽이 되어가서 적용하기 시작했다. 그런데 할 때마다 순서가 헷갈려서 정리해놓고 이번 글대로만 계속 해야지 (Parsing 에러 검색으로 오신 분들은 밑에 내리다보면 ## 표시부터 보시면 됩니다) vscode에서 eslint, prettier extention 설치하기 2. eslint, airbnb 전부 설치하기(개발할때만 사용할거니까 dev옵션 필수) 3. prettier 설치하기 (마찬가지로 dev) 4. eslint-prettier 플러그인 […]
Redux-saga를 공부하고 나니 GraphQL과 Apollo의 조합에 관한 학습 의욕이 상승했다. 그리고 면접을 볼 때도 GraphQL을 쓰는 곳이 대다수여서 꼭 배워야겠다는 생각이 들었다. 먼저 GraphQL은 페이스북에서 만든 어플리케이션 레이어 쿼리 언어이며, 서버에서는 하나의 endpoint를 가지고 있다. 그렇다면 기존의 원하는 데이터를 받기 위해 여러개의 endpoint를 필요로 하던 경우는 어떻게 대처할까? A. 프론트단에서 query, mutation을 이용해서 원하는 정보를 […]
페이지네이션 포스팅 한 김에 성격이 비슷한 무한스크롤도 정리를 해본다! 무한스크롤은 굉장히 어려울 것 같았는데, pagination을 하고나니 의외로 쉬웠다. 둘의 차이점은 setState에 있다. pagination은 불러온 데이터를 그대로 setState()에 넣어 변경하지만 infinite scroll은 처음에만 그대로 넣고, 그 후에는 전개연산자(spread operator)를 이용해서 기존의 state에 더해서 변경하는 방식이다. 이를 구현하는데에는 post로 정보를 요청할 때 단 한개의 boolean 속성만 추가하면 […]
Vue로 블로그 프로젝트를 시작하면서, react로 구현했던 게시판을 다시 리뷰했는데, 정리해놓으면 유용하게 쓰일 것 같다는 생각에 포스팅하게 되었다. 일단 구현한 환경은 react, nodejs, mongoDB인데 코드는 react만 다룰 것이다. 먼저 pagination.jsx를 구현한다. 게시판에 import될 컴포넌트이다. props와 state가 각각 어떤 의미인지만 알면 pagination은 끝이다. limit : 한 페이지당 나타낼 게시글의 수 currentPage: 현재 사용자가 보고 있는 페이지 (처음엔 […]
React에는 전역변수로 상태관리 하기 위한 라이브러리나 방법이 참 많다. Redux, MobX 그리고 요즘은 Graphql + Apollo Client로 이를 대체하기도 한다. 그럼 Vue.js에서는 어떻게 여러개의 컴포넌트에서 하나의 상태를 사용할까. 답은 Vuex 딱 한가지 라이브러리다. 정말 너~~~~~~~무 편하고 직관적이다. Vuex는 yarn/npm을 이용해서 설치하기로 하자. 그리고 root에서 store 디렉토리를 생성하고 modules 디렉토리를 하나 생성한다. 편리한 상태관리를 위해 필요한 […]
Vue.js는 UI Framework이며, React처럼 SPA, 컴포넌트 구조를 가진다. React를 Redux까지 배워보고 나니, 상태관리가 비교적 쉽다는 Vue.js를 배우고 싶어졌다. 공식문서를 보면서 Youtube에서 기초강의를 해본지 2일째인데, 느낀 점은 (React를 먼저 시작해서 일 수도 있지만) 굉장히 쉽고 생산성이 높다. React로는 많은 보일러 플레이트를 필요로 하는 과정도 굉장히 짧게 이루어진다. 먼저 Vue.js를 시작하기에 앞서, 공식문서가 한글화가 잘 되어있어서 꼭 […]
해당 글에서는 Redux를 통해 기본적인 CRUD를 구현해본다. redux와 react-redux 설치 reducer 디렉토리 생성 후, board.js와 rootReducer.js 생성 기능별로 모듈을 만들기 위해 Ducks Pattern을 이용한다(action과 reducer를 한 세트로 작업) index.js에서 store 생성하고 provider로 컴포넌트에서 state 사용 Store 구독하고, action 실행하기 react-redux에서 제공하는 useSelector와 useDispatch로 store를 구독하고, action을 실행시킬 수 있다. Chrome Redux 개발도구에서 확인하기