What I studied

Next.js란? 지금까지는 리액트를 사용하여 CSR로 애플리케이션을 구성했다면 지금부터는 next.js라는 프레임워크에 대해 공부한 것을 정리해보려고 한다. 기본적으로 리액트는 SPA이기 때문에 CSR을 기반으로 운영되어지지만 next.js를 이용하면 서버 사이드 렌더링을 간편하게 적용할 수 있게 된다. 클라이언트 사이드 렌더링의 경우 html 파일이 하나이며 나머지가 모두 js 파일로 이루어져 처음에는 흰색 화면을 가지고 온 후, 자바스크립트 번들을 다운 받고 나서 화면을 렌더링하게 된다. 반면에 next.js를 이용하여 SSR로 작동시키면 pre-rendering을 하기 때문에 기본적으로 html을 먼저 불러와 사용자에게 보여주고 그 후에 리액트에 연결해 어플리케이션을 보여주는 식으로 작동된다. 여..

리액트에서 전역상태관리를 하기 위해 redux라는 라이브러리를 사용했었는데 코드의 양도 많고 여러가지 불편한 점이 하나씩 보이기 시작하면서 새로운 라이브러리를 찾게 되었다. 요즘 많이 쓰고 있다는 React-query와 SWR이라는 라이브러리를 알게 되었는데 두가지 중 먼저 시도해보고자 했던 것이 SWR이었다. 리덕스 사용시 불편했던 점 리덕스 흐름에 따라 (View -> Dispatch -> Action -> Reducer -> Store -> State) 작성해야하는 코드의 양이 많음 한번 가져왔던 정보라도 컴포넌트가 마운트 될 때마다 새로 가져와서 갈아끼우는 작업이 비효율적 지속적으로 리덕스 로컬 스토어의 상태를 서버 상태와 맞추기 위해 추가적으로 동기화 작업을 해줘야함 그래서 SWR이란? SWR은..

최종 프로젝트를 진행하던 중 리액트 lazy-loading으로 최적화 작업을 진행했다. 지연로딩(lazy-loading)이라는 것은 로딩을 바로 하지 않고 지연시켰다가 나중에 로딩하게 해준다는 뜻으로 사용자가 사이트에 접속했을 때 보이지 않는 것까지 모두 로드해오는 것이 아니라 보이는 페이지만 로드한 후 다른 페이지에 접속했을 때 그곳의 데이터를 로드해오는 작업을 해주는 것이다. 큰 React 애플리케이션은 일반적으로 많은 구성 요소와 유틸리티 메서드 및 타사 라이브러리로 구성되는데 필요할 때만 애플리케이션의 다른 부분을 로드하려고 노력하지 않으면 사용자가 첫 페이지를 로드하는 즉시 대규모 단일 JavaScript 번들이 사용자에게 전송된다. 이러한 불필요한 작업이 반복되면 페이지 성능에 영향을 줄 수 ..

What I Learned 구현하고자 했던 기능과 함께 1차 배포를 진행한 후 user 테스트를 통해 여러가지 피드백을 받았다. 피드백을 받은 후 2차로 수정해야할 부분들을 정리하여 수정작업에 들어갔는데 본 사이트에는 크리에이터만을 볼 수 있는 페이지가 따로 없는 점, 크리에이터 신청란을 찾기 어렵다는 점, 북마크를 삭제할 때 삭제 알럿을 띄워줬으면 좋겠다 등 유저의 피드백을 반영하여 2차 수정작업을 진행했다. 2차 수정작업을 진행하며 기존 redux를 활용하여 상태관리를 하고 있던 부분을 SWR으로 교체하는 작업도 시도했다. 지금까지 리덕스를 이용하면서 비동기 처리를 위해 redux-thunk라는 미들웨어를 사용했는데 리덕스 흐름에 따른 View -> Dispatch -> Action -> Reduce..

리덕스란? 대표적인 상태관리 Javascript 라이브러리로 컴포넌트 내부에서 사용하는 데이터인 상태를 관리하기 위해 사용한다. 만약 하나의 부모 컴포넌트와 자식 컴포넌트들이 여럿이라는 상황을 가정해보자. 만약 자식 1의 state를 자식 6에서 사용하고 싶다면 자식 1 -> 부모 -> 자식 3 -> 자식 6으로 state를 넘겨줘야하는데 하위 컴포넌트에서 상위컴포넌트로 데이터를 넘겨주는 것은 적절한 방법이 아니다. 그렇기 때문에 전역상태관리를 위한 라이브러리인 리덕스를 이용하여 하나의 스토어에 저장해둔 상태를 원하는 컴포넌트에 불러다 사용하면 되는 것이다. 이렇게 리덕스를 이용하면 컴포넌트끼리 같은 상태를 공유해야할 때도 쉽게 적용할 수 있으며 상태 업데이트 로직을 분리시켜 더욱 효율적인 관리가 가능해..

1. React Hooks란? 리액트 훅은 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리라고 할 수 있는데 React 16.8버전에 새로 추가된 기능이다. 이는 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능하다. 2. Hook 규칙 1) 최상위에서만 Hook을 호출해야한다. 반복문이나 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다. 리액트 훅은 호출되는 순서에 의존하기 때문에 조건문이나 반복문 안에서 실행하게 될 경우 해당 부분을 건너뛰는 일이 발생할 수도 있기 때문에 순서가 꼬여 버그가 발생할 수 있다. 그렇기 때문에 이 규칙을 따르면 useState 와 useEffect가 여러번 ..

React의 state 와 props 실전 프로젝트가 마무리되어가면서 그동안 공부했던 기본적인 내용들을 하나하나 다시한번 되짚어보려고 한다. 리액트를 사용하게 되면서 가장 기본적이고 중요하게 알아야했던 state와 props의 개념과 차이에 대해서 설명할 것이다. Props props는 properties의 약자로 부모 컴포넌트가 자식 컴포넌트로 내려주는 data를 말한다. 즉 상위 컴포넌트의 데이터를 하위 컴포넌트에 공유하는데 사용하며 자식 컴포넌트는 부모 컴포넌트로부터 props를 받아 사용한다. props는 부모요소에서 설정하는 것으로 상속받은 자식 컴포넌트 내에서 수정이 불가능한데 리액트는 부모에서 자식으로라는 일방향성 상속이라는 특징을 가지고 있기 때문이다. // 페이지네이션에서 넘겨주는 pro..

What I Learned 기본적으로 구현해야하는 MVP 기능을 구현한 후 AWS Amplify console을 통한 배포 자동화를 시도했다. 지금까지는 firebase 웹 호스팅과 AWS S3을 이용해 정적 웹호스팅을 진행했었다면 이번에는 Git과 연결하여 배포를 자동화시켜주는 AWS Amplify를 이용했다. AWS Amplify는 모바일 및 프런트엔드 웹 개발자가 AWS를 기반으로 안전하고 확장 가능한 풀 스택 애플리케이션을 구축 및 배포할 수 있도록 지원하는 제품 및 도구 세트로 프론트엔드뿐만 아니라 백엔드까지 배포자동화 시스템을 구축할 수 있다. Git 브랜치를 연결해놓으면 자동으로 build가 이루어져 배포가 자동화되는 것이다. AWS Amplify 배포자동화 구축 (1) Aws Amplify..

What I Learned MVP개발을 하는 3주동안 프론트엔드 쪽에서는 리액트와 리덕스, axios를 활용한 API 통신, react-h5-audio-player 등의 여러 라이브러리를 다뤘다. 상태관리 라이브러리인 리덕스를 활용해 전역 상태관리가 이루어질 수 있도록 하였고 저번 프로젝트에는 구현하지 못했던 클린업까지 구현했다. CSS 라이브러리로는 mui를 이용했고 필요한 것들을 가져와 커스텀하여 사용했다. 기본적인 MVP 기능 개발은 시간내애 어느정도 마무리했고, 중간 발표를 통해 지금까지 진행된 진행상황을 점검해볼 수 있는 시간을 가졌다. 전체적으로 기능구현에 있어 큰 어려움은 없었지만 프론트쪽에서 처리해야할 부분이 많았던 것 같다. 사소한 부분 하나하나 놓치지 않고 처리하기 위해 꼼꼼하게 기록하..

What I Learned 실전프로젝트를 시작한지 2주차가 시작되면서 기본적인 mvp 기능에 대한 구성이 어느정도 자리잡혔다. MVP 기간을 설정하고 프론트와 디자이너의 협업, 백엔드와의 소통 등의 다양한 과정을 거치며 구현해야하는 기능을 구현해나갔다. 구현해야할 페이지 및 MVP 기능 페이지 메인, 회원가입, 로그인, 마이페이지, 책 목록, 책 상세, 펀딩 목록, 펀딩 상세, 펀딩 등록, 오디오북 등록, 오디오 상세, 1:1 채팅 페이지, 오디오북 요청하기, 판매자 상세페이지 MVP 기능 메인 : 카테고리별 도서, 오늘의 크리에이터, 추천도서, 랜덤 오디오펀딩 get 로그인 & 회원가입 : 로그인 회원가입 유효성 검사, 중복확인, 로그인 유지 책 목록 & 책 상세 : 카테고리별 도서 get, 책 상세페..