Codecamp FE07

React(Nextjs) 프로젝트 생성 및 초기세팅

JSX(JavaScript XML)는 JavaScript를 확장한 문법입니다. 또한 React에서 HTML 대신 사용하는 React 전용 HTML 입니다. JSX는 파일 하나에 HTML과 JavaScript를 동시에 작성할 수 있어서 편리합니다.

컴포넌트란 UI 또는 기능을 부품화해서 재사용 가능하게 할 수 있는 것 입니다.컴포넌트 하나를 잘 만들면 계속해서 재사용이 가능함으로 유용하게 쓰일 수 있습니다.이렇게만 보도 Component는 React의 핵심이라고 해도 과언이 아닙니다.

API란 HTTP 요청을 Back-end 컴퓨터에 보냈을 때 실행되는 Back-end 기능입니다.

동기와 비동기 데이터를 주고 받기 위해서 브라우저에서 데이터를 요청하면 요청 받은 백엔드 컴퓨터는 데이터베이스에서 데이터를 처리하여 브라우저에 응답을 돌려줍니다.

라우터(router) 객체란 페이지 이동과 관련된 가능을 가지고 있는 객체입니다.이 객체를 사용해서 A페이지에서 B페이지로 이동할 때, "B 페이지로 라우팅한다"라고 합니다.

state라는 react 컴포넌트에서 데이터를 담기 위한 상자입니다.기존 자바스크립트에서는 변수로 데이터를 저장하고 사용했지만 컴포넌트에서는 state를 사용합니다.

export&import, component, props, 삼향 연산자 등의 개념을 사용하시면 어렵지 않게 하나의 컴포넌트를 재사용할 수 있습니다.

타입스크립트란, 자바스크립트의 타입을 강제시키는 언어입니다. 기존의 자바스크립트 에서는 아래와 같이 변수에 문자열을 할당했다가 이후에 숫자열을 재할당해도 문제가 되지 않습니다.

개발함에 있어서 에러를 줄이고 정확한 개발을 위해 ESLint와 Prettier를 많은 개발자가 사용하곤 합니다. ESLint와 Prettier를 설치하고 연결하는 방법을 알아보겠습니다.

Event Bubbling이란 특정 화면 요소에서 이벤트가 발생하였을때, 해당 이벤트가 더 상위 화면 요소들로 전달되는 특성을 의미합니다.

alert()를 대신 Modal을 이용해서 더 다양한 기능과 디자인으로 경고창으로 만들 수 있습니다. 직접 구현할 수도 있고, ant-Design을 이용할 수도 있습니다.

레이아웃이란 프로젝트 전체의 UI 구조를 의미합니다.쉽게 말하면, Header, Navigation, Menu, Footer, Main 등으로 화면을 쪼개는 일을 의미합니다.레이아웃만 잘 잡아도 프로젝트 전체의 유지보수가 편해집니다.

페이지 번호를 클릭해서 이동하는 방식의 페이지 처리 방법입니다.게시판 형태의 페이지에서 가장 일반적으로 사용되는 방식입니다.

객체를 복사할 때마다 깊은 복사를 따로 해주기는 번거롭고 느릴 수 있습니다. 그래서, 관련 작업을 도와주는 라이브러리가 많이 나와있습니다. 가장 많이 사용되는 기능 모음 라이브러리 중 하나인 lodash를 살펴보겠습니다.

클래스형 컴포넌트와 함수형 컴포넌트의 Life Cycle에 대해서 알아보겠습니다.

오픈 API란, 누구든지 사용할 수 있도록 공개된 API를 의미합니다.예를 들면, 동물 이미지, 날씨 정보, 바이러스 정보, 금융 정보 등 여러정보들을 API를 통해 무료로 데이터를 사용할 수 있습니다.

지난 시간에 Open-API를 끌어 오는 방법에 대해서 학습을 했습니다. 이번에는 Open-API로 새로운 페이지를 만드는 과정을 진행해보겠습니다.

이미지 프로세스에 대해서 이해하고 GraphQL을 이용해 이미지를 업로드하는 방법을 알아보겠습니다.

우리가 평소에 사용하는 웹서비스의 검색은 어떻게 이루어지는 것일까요? Browser 에서 검색을 요청하면 Back-end 에서 DB 내부의 수 많은 Data 들 속에서 요청받은 keyword 를 가지고 full-scan` 하게 됩니다.

보통은 state props를 통해 자식 컴포넌트로 데이터 값을 내려줍니다. 근데 props가 컴포넌트가 여러개를 거쳐서 내려야 한다면 거쳐가는 모든 컴포넌트에 명시해줘야 합니다. 그럼 매번 props로 내려줄까요? 이럴 때 사용하는 것이 글로벌 스테이트입니다.

브라우저의 쿠키/세션을 활용한 로그인 기능과 JWT를 활용한 로그인 기능을 알아보겠습니다. 그리고 로그인 정보를 Recoil에 저장하여 활용하는 방법 또한 알아보도록 하겠습니다.

로그인을 위한 accessToken을 브라우저 저장소에 저장하여 사용해 보겠습니다. 그리고 스택, 큐, 클로저 등 권한분기를 다루기 위한 기본 지식을 알아보겠습니다.

데이터를 불러올때 조금 더 편리한 useApolloClient를 사용해보겠습니다. 그리고 회원가입, 로그인 등을 진행할때 조건에 맞는 데이터를 유도할 수 있는 검증 및 폼 라이브러리를 알아보겠습니다.

위와 같은 객체에서 name, age, school 이라는 변수를 만들고 싶다고 합시다.그럼 우리는 const name = child.name const age = child.age const school = child.school 이런식으로 하나씩 생성해주었습니다

지금까지 배운 타입스크립트의 타입을 간단하게 정리해보겠습니다.1\. 문자2\. 숫자3\. any인자에 string, number, boolean 등 어떤 타입이 들어가도 전부 any라고 반환됩니다.이 때, 인자에 들어오는 값에 따라 반환되는 타입이 결정되도록 할 수는

게시물을 등록하는 게시물 등록 페이지를 만들어봅시다. 등록 페이지에는 기본적으로 글을 작성한 작성자와 작성할 내용을 담는 부분이 필요할 것입니다.

우리가 인터넷 서비스에서 결제를 통해 포인트를 충전하는 과정은일반적으로 다음과 같습니다.사용자가 브라우저에서 충전하기 버튼을 클릭충전하기 창에서 원하는 금액을 선택하고 결제 진행개인 결제수단(신용카드/카카오페이 등)에서 빠져나간 금액 만큼 사용자의 포인트가 증가여기서,

인터넷에 특정 장소를 검색하면 위와 같이 지도가 뜨는걸 보실 수 있으십니다. 이렇게 지도를 띄워줌으로써 사용자에게 조금 더 좋은 편의성을 제공해줄 수 있습니다.

AccessToken 은 사용자의 로그인 정보를 담고 있는 JWT토큰 데이터 입니다.이전에 학습했던 로그인 인증/인가 과정을 다시 한 번 살펴볼까요?AccessToken 데이터는 일정 시간 동안만 사용할 수 있도록 만료 기한이 정해져 있습니다.만료 기한이 지나고 사용자

자바스크립트에서 이미지를 보기 위해서는 이미지 경로(주소)가 필요합니다. 이미지 경로(주소)를 상대주소 ../../ 와 같은 형식으로 사용하곤 했습니다.하지만 위와 같은 경로에는 단점이 하나 있습니다.다른 사람 컴퓨터에 해당 이미지가 없을 경우에는 오류가 뜨는 것이죠.

이렇게 만들어 놓은 후 let과 state의 버튼을 눌러 보도록 하겠습니다.콘솔을 보시면, let은 버튼을 누르면 콘솔의 값은 올라가지만 리렌더는 일어나지 않아 “컨테이너가 렌더링 됩니다.”라는 콘솔이 찍히지 않고 있으며, 화면은 여전히 0 입니다.하지만 state는

우리가 한 게시물을 보고 좋아요를 누르게 되면 환경에 따라 좋아요의 수가 올라가는 속도가 다릅니다. 왜 그런지는 아래의 그림을 통해 자세히 알아보도록 하겠습니다.

빌드(build)는 간단히 말해서 우리가 작성한 코드, 프로젝트를 실행 할 수 있는 형태로 만들어 주는 것입니다.

Simple Storage Service (단위: 1 Bucket)무제한 용량을 제공하는 온라인 스토리지 서비스 입니다.

HTTPS는 SSL/TLS 인증서가 있어야 사용할 수 있습니다.AWS에서는 웹서비스 제작을 위해 필요한 기본적인 퍼블릭 인증서를 무료로 제공하고 있습니다.

마지막으로 CloudFront와 로드밸런서를 연결하여, SSG + SSR 하이브리드 배포를 완성해 보도록 하겠습니다.기존에 S3과 연결했던 CloudFront에 로드밸런서 연결을 추가해야 합니다.

게시글 등록, 회원등록 등과 같은 api요청을 하게 될때, 등록 버튼을 여러번 누르게 된다면 의도치 않은 api 요청이 중복되어 실행됩니다.이번시간에는 이러한 api 중복 요청을 어떻게 해결하는지 알아보겠습니다.await에 포함되는 함수들은 Task/Que에서 작업을

약 한 달 반 동안 프론트 스택들을 학습해온 것을 바탕으로 팀 프로젝트를 시작하기로 했습니다! 대부분 NextJs를 통해 웹 서비스 구현을 목표로 했지만 저희 팀은 React Native를 사용하여 클론 아닌 클론 코딩을 하기로 결정했습니다.