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

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

지금 우리가 보고 있는 브라우저의 화면은 브라우저 렌더링 과정을 통해 만들어진 것이다.렌더링 방식은 클라이언트와 서버 중 어느 쪽에서 화면을 만드는지에 다라 CSR, SSR로 나뉜다.두 방식의 차이를 이해하기 위해서는 SPA와 MPA의 이해가 선행되어야 한다.먼저 **SPA, MPA**의 개념을 이해하고 **CSR, SSR**의 차이에 대해 알아보자.SPA와 MPASPA(Single Page Application)하나의 HTML 페이지에서 새로운 페이지를 불러오지 않고 필요한 부분만 동적으로 컨텐츠를 바꾸는 어플리케이션MPA(Multiple Page Application)여러 개의 페이지로 이루어져 있으며 사용자가 페이지를 요청할 때마다 서버에서 렌더링된 HTML를 받아와서 컨텐츠를 변경하는 어플리케이션..

LAN과 WAN이란?보통 인터넷 라우터를 통해 연결된 좁은 범위에서의 연결된 네트워크를 LAN(Local Area Network)라고 부른다.그래서 보통 LAN선이라고 부르는 것이다.이러한 LAN이 모여 세계의 네트워크를 구성하는 방식이 WAN(Wide Area Network)프로토콜(protocol)우리가 일상적으로 사용하는 네트워크의 확장 방식은 크게 두 가지 방법이 있다.한 네트워크를 확장하는 방법네트워크와 네크워크를 연결하는 방법여러 네트워크를 연결하는 방법을 인터네트워킹 이라고하는데 인터네크워킹을 통해서 네트워크의 일부가 고장나도 영향이 광범위하게 퍼지지 않거나, 불필요한 통신이 확산되지 않게 한다는 장점이 있다.이때에 인터넷에 연결되어 있는 컴퓨터들끼리의 소통이 필요한데 이를 위해서 일종의 약..

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..

지난 번 SOPT 에 떨어지고 난 후, 사이드 프로젝트를 2개 정도 진행하면서 다른 IT 연합동아리도 알아보았다. 대외활동 1 - 2024 관광데이터 활용 공모전 참가우선 4월 말, 같은 학교 졸업유예 친구들 및 4학년 학생들과 한국관광공사 x Kakao 에서 주최한 '2024 관광데이터 활용 공모전' 에 참가하기로 했다. 아이디에이션 과정을 거쳐, '여행기와 여행 OOTD를 공유하는 블로그, 트리피' 라는 웹어플리케이션을 개발하기로 결정했다.우리는 여행 관련 정보를 제공하기 위해 TourAPI 와 공공데이터를 활용할 계획이고 나는 이 프로젝트에서 프론트엔드 팀장 역할을 맡았다. 우선 개발하기 전, 제안서 작성을 파트별로 나눠 진행하며 제안배경 및 필요성, 서비스 설명, 공공데이터 활용 방안, 서비스 차..

웹 부트캠프를 끝마치고 코딩테스트와 사이드 프로젝트를 진행하면서 어딘가에 소속되어 있지 않은 것이 자꾸 불안함을 만들었다.제대로된 프로젝트를 더 해보고싶은 마음에 IT 연합 동아리 SOPT의 YB 34기에 지원했지만, 아쉽게도 면접에서 탈락하게 되었다. 면접에서 떨어졌기에 후기를 쓸지 말지 고민했지만 다음 기수에 SOPT 를 지원할 다른 개발자 분들에게 조금이나마 도움이 되었으면 하는 마음과 복기를 통해 스스로 성장하고자 하는 마음으로 서류 및 면접 후기를 남기려 한다. SOPT는 대학생 연합 IT 벤처 창업 동아리로 국내 최대 규모의 대학생 IT 연합 동아리이다.그만큼 경쟁률도 높고 서류합격도 힘들다고 들어서 이번 기수에서 중요하게 생각하는 핵심 가치를 기준으로 자소서를 작성하기로 했다. 이번 기수의 ..