Front-End

react 폴더 구조, jsx, emotion

React ComponentUI 또는 기능을 부품화해서 재사용이 가능해진다. 그렇지 않으면 하나하나 다 만들고.. 중간에 데이터를 바꿔야 하거나 스타일,속성을 바꿔야 할 때 일일이 찾아서 수정해야하는데 컴포넌트는 그럴 필요가 없다! 원본 하나로 여러 컴포넌트를 통제할

API(Application Programming Interface)를 간단히 정의하면 http 요청을 보냈을 때 백엔드에서 제공하는 기능이라고 볼 수 있다. rest와 다르게 서버에 저장된 정보에서 원하는 부분만 받을 수 있어 네트워크 비용 절감api에서 백엔드에 정

가장 중요한 개념인 비동기 처리에 대해 블로그에 복습할 겸 정리해본다. 프론트에서 원하는 데이터를 보여주기 위해서는 백엔드에 데이터를 요청해야 한다. 서버(백엔드) 컴퓨터는 이때 데이터베이스에서 데이터 생성,조회,수정 혹은 삭제와 같은 과정을 거친 후 요청에 대해 브

시작하기 전 참고: Next.js 설치한 방법을 바탕으로 정리했습니다!graphql api에서 요청과 응답을 하기 위해서는 apollo-client라는 라이브러리 세팅이 필요하다.프로젝트 파일/pages/\_app.js에 들어가서 이때 uri가 url이랑 헷갈렸는데 오

0. 라우팅과 정적/동적 라우팅 라우팅은 간단하게 말해서 페이지를 이동시키는 것을 말한다. 엄밀히는 라우터가 객체 타입이다. 이 객체를 사용해서 다른 페이지로 이동하고 싶을 때 '라우팅'한다고 말할 수 있다. 페이지가 넘어갈 때 정해진 페이지가 있는 경우(예: 게

한 페이지에서 기능과 화면 UI 코드를 다 쓰는 것이 아니라 분리해주는 것이 에러를 발견하기 쉽고 유지보수에 용이하다.즉 JS와 JSX의 영역을 나눠서 파일을 나누면 각각 Container, Presenter로 나눌 수 있다.예를 들어 게시판 페이지 파일을 분리한다고

fetch api를 이용해서 데이터를 조회할 때는 async,await로 계속 기다리기 보다는 보여줄 수 있는 내용은 먼저 보여주는게 효율적이다. 이 부분이 '조건부 렌더링'이다.방법은 5가지 정도로 정리해봤다.삼항연산자제일 처음에는 이걸 썼는데, 점점 발전해서 보다

setState 특징/비동기 처리/리렌더링

State의 기본 개념/임시 저장 공간 Prev

리액트는 단방향 데이터 흐름이라서 자식 컴포넌트 요소를 부모 컴포넌트에게 물려주지 못한다. (부모->자식 흐름) 이게 흐름을 파악할 수 있어서 편리하긴 하지만 단점도 있는데 부모 컴포넌트 안에 자식이 여러개 있을때 자식에서 자식으로 state를 넘겨주는 것이 안된다.

페이지 번호를 클릭해서 이동하는 방식의 페이지 처리 방법주로 게시판 페이지에서 많이 사용됨page 인자를 사용해서 게시글 목록 불러오기게시글을 보여주는 api(ex: fetchBoard)를 이용해서 게시글 목록을 불러온다.graph ql의 경우 gql을 이용해서 쿼리문

컴포넌트ui나 기능을 부품화한 것을 컴포넌트라고 한다.이때, 리액트에서는 기존에 클래스형 컴포넌트를 사용했는데 요즘에는 함수형 컴포넌트를 쓰면서 보다 간결하게 컴포넌트를 만들 수 있다. 최신 기술을 적용하려면 함수형 컴포넌트가 적합하지만 기존 서비스 중에 여전히 많이

리액트 컴포넌트에는 생명주기(lifecycle)가 있어서 특정 시점에 나타났다가 사라지도록 할 수 있다.이때 클래스형,함수형 컴포넌트가 각각 다르게 메소드를 제공해서 생명 주기를 나타낼 수 있다.크게는 Mount, Update, Unmount 단계로 나눈다.마운트(Mo

리액트에서는 실제 DOM이 아닌 가상 DOM을 다루기 때문에 바닐라 js에서처럼 document.getElementById() 같은 함수를 쓸수 없다.그래서 리액트는 Ref라는 것을 이용해 태그를 변수에 저장해서 쓰고 특히 함수형컴포넌트는 hook 중에서 useRef을

디바운싱과 쓰로틀링 개념

새로고침 하지 않고(=data fetching 메소드를 다시 실행하지 않고) url을 불러올 수 있는 기능. 이때 업데이트된 pathname과 query를 받아오게 된다.(data fetching method: getServerSideProps, getStaticPro

함수의 리턴 타입이 함수인 경우=함수를 반환하는 함수aaa()를 실행하면 bbb 함수가 반환된다.'저는 bbb예요' 문장을 출력하려면 (=bbb함수 안에 있는 명령문을 실행하려면) aaa()()로 입력<파라미터가 있는 경우><화살표 함수>다른 컴포넌트보다 먼

Redux : 최초, 복잡하고 장황한 코드 필요 리덕스를 보완해서 나온 라이브러리들 ...

페이지를 읽어들이는 시점에 중요하지 않은 리소스 로딩을 추후에 하는 기술스크롤을 할 때 스크롤을 내리면서 이미지가 보일 때만 이미지를 로드하면 데이터의 낭비를 막을 수 있음https://www.npmjs.com/package/react-lazyloadreact

컴포넌트 메모 : memo변수 메모 : useMemo함수 메모 : useCallback사용되는 상황render시 변수 새로 만들어지는 상황 → useMemo함수가 새로 만들어지는 상황→ useCallback부모 리렌더시 자식도 리렌더되는 상황 : 자식의 리렌더링 막는법

optimistic ui 통신이 느린 컴퓨터에 api 요청을 하게될때 요청이 서버에 도달하기도 전에 화면의 값을 바꾸는 것

MPA: 페이지 이동할 때마다 서버에 요청해서 데이터를 받아오므로 속도 느림, 옛날 방식(ex: HTML a 태그)→react,vue 같은 SPA 프레임워크에서 사용하기에는 부적합SPA : 서비스 처음 접속시 모든 페이지의 데이터를 받아옴(ex: next.js에서 ro

사전과제 제출 깃허브 링크 https://github.com/hlezg08/wanted-pre-onboarding-fe 1. 프로젝트 기본 설명 수행 기간 : 2022.08.18~20 사용 라이브러리 설명 Language : TypeScript 사용을 고민했으나 단