복습 정리 노트

이 포스트에서는 당근마켓 클론코딩의 #5.0 ~ #12.7 단원에서 학습한 내용들을 정리한다.  # 5.0 Route Handlers로그인 form을 입력하면 백엔드에서 값을 어떻게 가져가서 확인하고, 로그인을 시켜주는가 API route를 만들고, API URL을 이용해서 데이터를 전송→ 이때 route handler를 만들기 위해서는 파일명을 반드시 route.ts로 해야한다.→ 그래야 NextJS에서 route handler임을 인식한다. 프론트엔드에서 fetch(주소, { method: "POST", body: JSON.stringify({ value: 값 }))로 전송하면, 백엔드에서 request: NextRequest에 대해 await request.json()과 같이 값을 받을 수 있었다..

widget: UI를 구성하는 블록 ex) Center: child를 가운데로 오게 하는 widgetwidget을 만들기 위해서는 flutter에 있는 3개의 core widget 중 하나를 extend 받아서 사용할 수 있다. StatelessWidget: 정적 UI / StatefulWidget: 동적 UI (상태가 변경되는 UI) 모든 widget은 build 메서드를 포함해야 한다. build 메서드: widget의 상태가 변경될 때마다 호출되어 UI를 렌더링 root widget에는 2개의 옵션이 있다. material 앱(from google) > cupertino 앱(from apple) scaffold: 화면을 구성하는 구조 모든 화면은 scaffold를 가져야 한다.  stateful w..

이번 포스트에서는 NextJS가 무엇인지에 대해 알아보고, NextJS를 이용하여 간단한 영화 정보 사이트를 만들고 실제 웹사이트를 배포하는 과정까지 수행해 보겠습니다. 완성 결과 미리보기 먼저 완성된 웹사이트의 형태를 같이 보겠습니다. API를 제공하는, 데이터가 저장된 사이트로부터 데이터를 잘 fetch 해 와서 정보를 잘 나타내어주는 것을 확인할 수 있습니다. 주의깊게 살펴볼 부분은 렌더링이 진행되는 과정에서, 먼저 로딩이 끝난 컴포넌트부터 렌더링이 부분적으로 완료될 수 있다는 것입니다. (물론 이 부분은 NextJS만의 기능이 아닌 React의 기능을 이용한 것이지만, 이러한 컴포넌트별 렌더링 기능을 포함하여 페이지의 빠른 로딩을 위한 다양한 기능이 사용되므로, 더 좋은 사용자 경험을 제공할 수 ..

이번 포스트에서는 Firebase를 이용해 나만의 소셜 미디어 서비스를 구현하여 실제 웹사이트로 배포하는 과정까지를 다루어보겠습니다. 완성 결과 미리보기 먼저 완성한 결과부터 gif 파일로 확인해 봅시다. 실제 도메인이 등록되어 있는, 어디서나 접속 가능한 웹 페이지입니다. 메인 페이지 살펴보기, 피드 읽고 사진 확대하기 회원가입하기 (계정 생성하기) 새로운 글 작성하고 이미지 첨부하기, 작성한 글 삭제하기 프로필 사진 수정하기, 닉네임 수정하기, 수정 후 새로운 글 작성하기 Firebase Firebase는 구글에서 제공하는 데이터베이스 서비스입니다. DB에 접근하고 데이터를 관리하기 위한 다양한 함수들을 간편하게 제공하기 때문에 코드를 쉽게 구현할 수 있다는 장점이 있습니다. 또한, 일정 데이터 사용..

이번 포스트에서는 SocketIO를 이용해 실시간 채팅 사이트를 만들고, 실제 웹사이트 배포까지 하는 과정을 다루어보겠습니다. 먼저 완성된 웹사이트의 작동 화면은 다음과 같습니다. HTTP vs WebSocket 모두들 HTTP에 대해서는 많이 들어보셨을 것입니다. 우리가 인터넷 주소 맨 앞에 작성하는 'http'는 클라이언트(우리)가 웹 서버에 요청을 보내고, 서버가 응답을 보내는 하나의 정해진 통신 규칙입니다. 우리가 한글을 사용하는 것과 같이 http라는 프로토콜에 따라 서버에 요청을 보내고 웹 페이지를 받아와서 우리가 화면을 볼 수 있는 것입니다. WebSocket은 HTTP와 비교되는 개념입니다. HTTP에서 페이지가 업데이트 되려면 클릭을 하거나 페이지를 이동하는 등 새로운 '요청'을 보내야 ..

이 포스트에서는 Node.js의 여러 가지 버전을 설치하고, 또 원하는 버전으로 언제든 변경하는 방법을 다룹니다. NVM(Node Version Manager)이란? 다양한 모듈이나 라이브러리를 설치하면 위와 같이 Node.js 버전이 맞지 않아 서로 호환이 되지 않는 상황이 발생할 수 있습니다. 그렇다고 해서 이 모듈과의 호환성 하나만을 위해 기존의 node 버전을 삭제하고 다시 다른 버전을 설치하는 과정을 반복하는 것은 매우 번거롭습니다. 이런 경우 NVM(Node Version Manager)를 이용하면 다양한 버전의 NodeJS를 설치하고 원할 때마다 프로젝트의 버전을 바꾸어 사용할 수 있습니다. 필요한 node.js 버전 확인하고 새로운 버전 설치하기 먼저 다음의 링크로 들어가서 원하는 Node..

이번 포스트에서는 GraphQL에서 데이터에 접근하는 Query와, 데이터를 추가하고 삭제하는 간단한 Mutation을 구현해 보고 테스트를 해 보도록 하겠습니다. 개요: 구현할 기능 먼저 구현할 기능은 다음과 같습니다. Person이라는 객체 타입을 정의하고, 각 Person은 고유한 id, 이름, 나이를 값으로 가지도록 작성할 것입니다. 모든 Person들은 group이라는 배열에 저장됩니다. (실제 프로젝트에서는 group이라는 이름을 가지는 데이터베이스에 저장이 되겠죠?) Query는 group을 반환받아 전체 Person들을 받아오는 group 쿼리와, 특정 이름을 가진 Person이 있는지 체크하는 person 쿼리가 있습니다. 마지막으로 Mutation에는 2가지를 작성할 것입니다. grou..

GraphQL GraphQL에는 typeDefs와 resolvers가 있습니다. typeDefs에는 우리가 사용할 데이터들의 자료형을 정의합니다. resolvers에는 데이터를 변경하는 등 백엔드에 어떤 조치를 취할 때 작동할 함수를 정의합니다. 물론 실제 서비스를 개발할 때는 분량이 매우 많아지므로, 각각의 typeDefs들과 resolvers들을 개별적인 파일들로 분할하여 정리해 두는 것이 좋습니다. typeDefs들은 다음과 같은 형식으로 작성합니다. import { gql } from "apollo-server"; const typeDefs = gql` type User { id: ID! username: String! } type Message { id: ID! author: User! text..

이번 포스트에서는 create-react-app을 이용하여 리액트에서 프로젝트를 생성하고, 필요한 파일만 남기는 방법에 대해 다루어보겠습니다. create-react-app create-react-app은 리액트에서 제공하는 React 어플리케이션을 생성하기 위한 툴입니다. npx 명령어를 통해 create-react-app을 실행할 수 있는데, 이를 위해서는 NodeJS가 설치되어 있어야 합니다. 따라서 NodeJS가 설치되어 있지 않다면 공식 사이트로 가서 안정적인 버전의 NodeJS를 설치해주면 됩니다. NodeJS를 설치하였다면 이제 터미널 등에서 프로젝트를 생성할 폴더로 이동하고, 다음의 명령어를 실행하면 됩니다. npx create-react-app (프로젝트 이름) 그럼 (프로젝트 이름)이라..

이번 포스트에서는 React(리액트)의 props라는 기능에 대해 알아보고, 예시를 통해 props가 어떻게 활용되는지 설명해보도록 하겠습니다. Props(속성) React(리액트)에서 props는 properties, 즉 속성이라는 뜻으로 컴포넌트에 전달할 수 있는 데이터라는 뜻을 가지고 있습니다. 우리는 변수와 같이 컴포넌트에 유동적으로 변형을 주어야 할 때, props를 통해 값을 전달하여 컴포넌트가 원하는 값을 나타낼 수 있도록 설정해 줄 수 있습니다. 이렇듯 props를 활용하면 동일한 코드를 가지고도 여러 컴포넌트들의 서로 다른 부분들만을 필요에 따라 다른 props 값을 전달하여 구현할 수 있으므로, 코드의 재사용성이 높아진다는 장점이 있습니다. 예를 들어 5개의 디자인이 비슷한 서로 다른 ..