4전 4전

이번에 패스트캠퍼스X야놀자 프론트엔드 개발 부트캠프에서 숙박 예약 서비스 만들기라는 주제로 백엔드 부트캠프 수강생들과 함께 프로젝트를 진행하였습니다. | 기능 사용자 위치 기준 숙소 추천, 인기 숙소 안내 회원가입, 로그인 숙소 타입, 장소, 추가옵션등 원하는 카테고리를 선택하여 숙소 조회 장바구니, 주문, 결제 결제 내역 확인, 숙소 찜하기 | 역할 이 프로젝트에서 저는 사이트의 장바구니 기능과 결제 완료 후 나오는 결제 완료 페이지를 담당하여 진행하였습니다. | 링크 깃허브: https://github.com/Yanolza-Miniproject/frontend 배포: https://heynolja-mini-4.vercel.app/ | 장바구니 시연 영상 | 이슈 1. 목 데이터 문제 문제: msw를 ..

리액트에서 컴포넌트는 화면에 보이기 전에 반드시 렌더링이 된다고 합니다. 그리고 이 렌더링 과정을 공식문서에는 아래와 같은 세 가지 단계로 설명을 하고 있습니다. 1. 렌더링 트리거 (Triggering a render) 2. 컴포넌트 렌더링 (Rendering the component) 3. DOM에 커밋 (Commiting to the Dom) 먼저 각 단계가 어떤 것을 의미하는지 알아보겠습니다. | 렌더링 트리거 (Trigger a render) 컴포넌트가 렌더링 되는 이유는 2가지가 있다고 하는데 아래와 같습니다. 1. 컴포넌트의 초기에 렌더링 2. 해당 컴포넌트나 상위 컴포넌트의 상태(state)가 업데이트되었을 때 1. 초기 렌더링 앱이 시작되면 초기 렌더링을 트리거하는 것이 필요합니다. 그리..

리엑트에서 onScroll 이벤트를 제외한 모든 이벤트들은 부모 컴포넌트의 자식 컴포넌트에서 발생한 이벤트가 부모컴포넌트로 전파가 됩니다. 이를 "bubbles", "propagates"라고 합니다. | 예시 import React from 'react'; import './style.css'; export default function App() { return ( { console.log('1'); }} > console.log('2')}>children ); } 이런 식으로 부모요소를 클릭하면 콘솔에 1이 출력되고, 자식 요소인 버튼을 클릭하면 콘솔에 2가 출력되도록 해 보겠습니다. 그럼 이런 식으로 부모를 클릭했을 때 1이 출력되고, 자식 버튼을 클릭하면 버블링 현상으로 2와 1이 같이 출력이 됩..

리액트에는 useState, useEffect 같은 내장되어 있는 훅 들이 있고, 이러한 훅들을 사용하여 나만의 로직을 만드는 경우가 자주 있습니다. 이럴 때 반복되는 로직들은 custom hooks로 만들어서 재사용 쉽게 만들면 좋은데 한번 간단한 예시를 통해 만들어 보겠습니다. | 예시 공식 문서에 따르면 커스텀 훅을 만들 때는 앞에 use라는 키워드를 붙여서 만들라고 해서 저도 use키워드를 붙여서 만들어 보겠습니다. 1. useInput input이 바뀔 때 입력값들을 useState를 통해 state로 저장하고 그 값을 input value로 보여주는 코드를 일반적으로 작성하려면 import { useState } from "react"; import { useInput } from "./hoo..

이번에 Node.js에 Nest.js라는 프레임워크로 간단한 백엔드 api를 만들어 보려고 합니다. | 시작 1. 설치 npm i -g @nestjs/cli nest new project-name 먼저 이런 식으로 nest 프로젝트 폴더를 하나 만들어 보겠습니다. 그다음 예시로 user에 관한 api를 만들기 위해 터미널에 nest g co nset g s nest g mo 이런 식으로 입력한 다음 각각 name을 users로 하면 자동으로 users폴더와 하위 파일들이 아래처럼 잘 만들어집니다. 여기에서 spec이라고 쓰여있는 파일들은 테스트를 위한 파일들입니다. 현재 다룰 내용이 아니기 때문에 일단 삭제를 해주겠습니다. 2. app.module.ts app.module.ts에서는 UsersModule..

타입스크립트에서 타입의 범위를 좁혀서 코드가 좀 더 정확하게 동작할 수 있도록 만드는 거를 Narrowing이라고 합니다. | Narrowing 예를 들어 타입스크립트에서는 아래와 같은 함수는 에러가 발생하게 돼있습니다. function 함수(x :string | number){ return x + 1; } 이 함수에서 x가 타입이 하나로 정해진 것이 아니고 string | number라는 union타입이라 그럽니다. 이럴 때 타입을 하나로 narrowing 해주면 에러를 해결할 수 있습니다. 간단하게 조건문을 활용하여 narrowing 해줄 수 있습니다. function 함수(){ if(typeof x === 'number'){ return x + 1; // x가 number타입일경우 } else if..

타입스크립트에서 함수에 타입지정을 해서 사용할 수 있습니다. | 타입지정 먼저 아래처럼 간단한 함수가 있다고 해보겠습니다. function 함수(x){ return x * 5; } 함수(2) // 10 이런 함수에는 파라미터와 리턴 값에 타입 지정을 해줄 수 있는데 아래 코드처럼 타입을 지정해 주면 됩니다. function 함수(x :number) :number{ return x * 5; } 함수(2) // 10 이때 파라미터 타입 지정은 파라미터 옆에 적으면 되고, 리턴값의 타입 지정은 함수명() 오른쪽에 적으면 됩니다. 또한 함수를 만들 때 리턴값이 없는 함수를 만들 수 있는데 이럴 때 void라는 타입을 사용할 수 있습니다. // 리턴값이 없을 때 void타입 function 함수(x :number..

타입스크립트는 변수를 만들 때 타입을 지정해 줄 수 있습니다. | string, number, boolean 타입을 지정하고 싶으면 변수명: 타입 이런 식으로 지정하면 됩니다. let 문자 :string = '안녕'; let 숫자 :number = 25; let 진실 :boolean = true; | array, object array나 object 자료에도 타입을 지정할 수 있는데 먼저 array의 타입 지정은 아래처럼 하면 되고 let arr1 :string[] = ['안', '녕']; let arr2 :number[] = [1, 2]; object자료형의 타입을 지정하려면 아래처럼 하면 됩니다. let obj1 :{ name :string, age :number } = { name : 'Lee', ..