하나씩 배워나가는 개발일지

CSR이 가진 단점을 극복하기 위해서 SSR 개념을 부분적으로 적용하고 싶을 수 있다.SPA 방식인 React에서 Next.js 프레임워크를 사용하여 SSR을 적용하는 방법에 대해 알아보고 Next.js에서 사용되는 렌더링 방식인 SSR, SSG, ISR 방식의 차이에 대해서 배워보도록 하자. Pre-RenderingNext.js는 렌더링을 할 때 기본적으로 pre-rendering(사전 렌더링)을 수행한다.사전 렌더링이란 서버단에서 DOM 요소들을 Build하여 HTML 문서를 렌더링하는 것을 말한다. 또 하나의 중요한 개념으로는 Hydration이 있다.Hydration이란 이렇게 미리 렌더링된 HTML에 JavaScript를 결합하여서 이벤트가 동작할 수 있도록 만드는 과정을 말한다.하지만 이러한 ..

OSI 7 계층이란?OSI 7 계층은 네트워크에서 통신이 일어나는 과정을 7단계로 나눈 것을 말한다.OSI 7 계층을 나눈이유는?계층을 나눈 이유는 통신이 일어나는 과정을 단계별로 파악할 수 있기 때문이다.흐름을 한눈에 알아보기 쉽고, 사람들이 이해하기 쉽고, 7단계 중 특정한 곳에 이상이 생기면 다른 단계의 장비 및 소프트웨어를 건들이지 않고도 이상이 생긴 단계만 고칠 수 있기 때문이다.ex) PC방에서 오버워치를 하는데 연결이 끊겼다.한 PC만 문제가 있고 오버워치 소프트웨어에 문제가 있다면(7계층 어플리케이션 계층)있다고 판단해 다른 계층에 있는 장비나 소프트웨어를 건들이지 않는 것오버워치 소프트웨어에 문제가 없고, 스위치에 문제가 있으면(2계층 데이터링크 계층)모든 PC가 문제가 있다면 라우터의 ..

불변성이란?메모리에 있는 값을 변경할 수 없는 것을 말한다.원시 데이터(string, number, boolean, null, undefined, Symbol): 불변성 있다.원시데이터는 수정시, 메모리에 저장된 값 자체는 바꿀 수 없고, 새로운 메모리 저장공간에 새로운 값을 저장원시 데이터가 아닌 데이터(Object타입: 객체, 배열, 함수 ..): 불변성 없다.원시데이터가 아닌 데이터는 수정했을 때 기존에 저장되어 있던 메모리 저장공간의 값 자체를 변경리액트에서 상태 불변성리액트에서 불변성의 지키는 것이 중요한 이유리액트가 상태 업데이트를 하는 원리때문리액트가 화면을 리렌더링하는기준state가 변하면 리렌더링!state가 변하지 않으면 리렌더링 xstate가 변했는지 변하지 않았는지 확인하는 방법?s..

Next 13 업데이트에 app directory가 되면서, app directory 내부 모든 컴포넌트는 기본적으로 '서버 컴포넌트'로 동작하게끔 설정되었습니다.app directory 내부에서 '클라이언트 컴포넌트'로 지정하고 싶다면, 아래와 같이 파일 최상단에 'use client' directive를 명시해야 합니다.'use client' // HERE ! import { useState } from 'react' export default function Counter() { const [count, setCount] = useState(0) return ( You clicked {count} times setCount(count + 1)}>Click me ..

Virtual DOM리액트에서는 가상 돔을 사용가상 돔이란, 실제 DOM(Document Object Model)을 조작하는 방식이 아닌, 실제 DOM을 모방한 가상의 DOM을 구성해 원래 DOM과 비교하여 달라진 부분을 리렌더링 하는 방식으로 작동이 때 가상 돔을 잘 이해해야만 **리액트의 상태(state)**에 대해 잘 이해하고 다룰 수 있음Virtual DOM을 사용하는 이유자바스크립트의 모던한 방식(Vanilla Javascript)의 DOM을 조작하는 방식은 무거운 작동방식이다.실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있기 때문그래서 리액트는 깜빡거림 없이 부드러운 UX를 사용자에게 제공하고자 변경사항만 빠르게 파악하고 리렌더링 하기 위해 DOM을 만들어 비교하는 방식을..

Promise비동기 작업의 완료 또는 실패를 나타내는 객체callback 방식의 call back 지옥을 해결하기 위해 사용Promise의 3가지 상태Pending (대기): 초기 상태로, 이 상태에서는 작업이 아직 완료되지 않음Fulfilled (이행): 작업이 성공적으로 완료된 상태로, 결과값이 존재Rejected (거부): 작업이 실패한 상태로, 실패 원인(에러)가 존재Promise의 장점비동기 처리 시점 명확히 표현연속된 비동기 처리 작업 수정, 삭제, 추가 유연비동기 작업 상태 쉽게 확인 가능유지보수 쉬움후속 처리 메소드thenthen 메소드는 두 개의 콜백 함수를 인자로 전달받음첫 번째 콜백 함수: 성공(fulfilled, resolve 함수가 호출된 경우)시에 실행두 번째 콜백 함수: (re..

패스트캠퍼스 x 야놀자 웹 프론트엔드 부트캠프 파이널 프로젝트를 준비중인데, 팀원 중 한 분이 상태관리로 React Query를 쓰는 것이 어떻겠냐고 하셔서 React Query가 무엇인지 공부하고 정리하고자 한다. React Query 란 ? 공식 문서에 따르면, 아주 강력한 비동기 상태를 관리하는 툴이라고 한다. 그럼 이 상태가 무엇인지 알아보자. 상태(State) 란 ? 주어진 시간에 대한 시스템을 표현한 것 문자열, 배열, 객체 등 다양한 형태로 Application에 저장된 데이터 이를 프론트 개발자 입장에서 본다면, 페이지가 로드되거나 렌더링된 이후 사용자가 수행한 모든 동작에 대한 결과라 할 수 있다. 사용자가 액션을 취하면 그 액션에 따라 상태(state)가 바뀔거고 변경된 상태에 따라 V..

리팩토링 내용 2주간의 프로젝트 기간이 끝나고 다시 2주동안 리팩토링을 진행하기로 했다. 전에는 객실(룸) 이미지가 없었기에 기본 숙소 이미지로 대체했었지만, 이번엔 오픈 api에서 더 많은 정보를 불러와서 해당 내용들을 추가하는 방식으로 진행하기로 했다. 내가 진행한 리팩토링 내용은 다음과 같다. 카카오맵 API 추가 -> 숙소 위치 마커 렌더링 마커 클릭 시 커스텀 오버레이 렌더링 -> 클릭 시 길찾기 페이지 생성 숙소상세정보 API 변경에 따른 추가 정보 get 객실 추가 정보 처리 장바구니 API 변경에 따른 로직 처리 예약하기 API 변경에 따른 로직 처리 리팩토링 기간 2023년 12월 4일 ~ 2023년 12월 15일 결과물 - 객실 이미지 슬라이더 구현 - 이미지 없을 시 기본 이미지 렌더..

프로젝트 내용 패스트캠퍼스x야놀자 웹 프론트엔드 부트캠프 미니프로젝트를 진행했다. 주제는 다음과 같다. 본 프로젝트는 숙박 예약 서비스를 완성하는 것을 목표로 함 본 프로젝트의 개발 범위는 다음과 같다 - 회원 인증 ◼ 회원가입 ◼ 로그인 - 상품 조회 ◼ 전체 숙박 상품 목록 조회 (옵션) 카테고리를 임의 생성하여 분류하여 출력 ◼ 개별 숙박 상품 상세 소개 - 상품 선택 및 장바구니 담기 ◼ 숙박 상품 옵션 선택 ◼ 장바구니 담기 ◼ (또는) 바로 결제하기 - 장바구니 ◼ 장바구니 보기 ◼ 장바구니에서 주문하기 버튼 클릭 시, 예약(주문) 페이지로 이동 - 예약(주문) 하기 ◼ 만 14세 이상 이용 동의 (상세 설명서 X, 체크박스로만 간단히 처리) ◼ 결제하기 버튼 클릭 시, 상품을 주문한 것으로 ..

리덕스란? 자바스크립트 어플리케이션을 위한 상태 관리 라이브러리 리덕스 Data Flow Action: 간단한 JS 객체. 작업 유형을 지정하는 type 속성이 있으며 선택적으로 redux 저장소에 일부 데이터를 보내는 데 사용되는 payload 속성도 가질 수 있음 Reducer: 어플리케이션 상태 변경 사항을 결정하고 업데이트된 상태를 반환하는 함수. 인수로 조치를 취하고 store 내부 상태 업데이트함 Redux store: 이들을 하나로 모으는 객체 저장소는 어플의 전체 상태 트리를 보유. 내부 상태를 변경하는 유일한 방법은 해당 상태에 대한 Action을 전달하는 것. Redux store는 클래스가 아님. 몇 가지 메소드가 있는 객체일 뿐 Dispatch: 스토어 내장 함수 중 하나로 리듀서에..