본문 바로가기

전체 글105

[Develog] SSR과 CSR 비교 SSR(Server Side Rendering) 서버에서 렌더링 하는 방식 = 서버에서 HTML을 생성하고 클라이언트에게 전송하는 방식 장점 : 서버에서 HTML을 생성하기 때문에 초기 로딩 속도가 빠름 단점: 서버에 부하가 많이 걸릴 수 있다. CSR(Client Side Rendering) 클라이언트에서 렌더링 하는 방식 = 클라이언트에서 HTML을 생성하는 방식 장점: 클라이언트에서 HTML을 생성하기 때문에 페이지를 넘길 때 어색함이 줄어드는 등 사용자 경험이 좋고 SSR보다 더 많은 상호작용을 제공할 수 있다. 단점: 초기 로딩 속도가 느리고 검색엔진이 HTML을 인식하지 못하기 때문에 SEO에 좋지 않다. 2023. 3. 15.
[Develog] JAMStack과 정적 사이트 생성기 JAMStack은 JavaScript, APIs, and Markup의 줄임말로, 정적 웹사이트를 구축하는 방식이다. 이 방식은 기존의 서버 사이드 렌더링 방식과는 달리, 모든 콘텐츠가 미리 생성되어 있으므로, 더욱 빠르고 안정적인 성능을 제공한다. 이를 위해서는 정적 사이트 생성기를 사용해야 한다. 정적 사이트 생성기는 입력 데이터와 사이트 디자인을 결합하여, 미리 생성된 HTML, CSS, JavaScript 파일 등의 정적 파일을 만들어낸다. 이 파일들은 미리 만들어졌기 때문에 서버에서 동적으로 페이지를 렌더링할 필요가 없다. 이를 통해 웹사이트 로딩 시간을 크게 단축할 수 있다. 정적 사이트 생성기에는 여러 종류가 있으며, 가장 많이 사용되는 것은 Jekyll, Hugo, Gatsby 등이 있다... 2023. 3. 14.
[Develog] npm의 --save, --save-dev 등의 플래그와 그 종류 npm은 Node.js 패키지 매니저로서, 프로젝트에 필요한 의존성(dependencies)을 관리하는데 사용된다. 의존성은 다른 모듈이나 라이브러리를 포함할 수 있으며, 해당 모듈이나 라이브러리가 제대로 작동하기 위해서는 그에 따른 의존성이 필요하다. npm에서 플래그란? npm에서 플래그(Flag)란, 특정한 옵션 또는 설정을 전달하기 위해 npm 명령어와 함께 사용되는 특별한 인자(argument)이다. 플래그는 npm 명령어와 함께 사용되며, 명령어와 함께 전달되어 실행되는 옵션과 설정값을 지정한다. 일반적으로 플래그는 "-" 또는 "--"로 시작하며, 다양한 옵션을 지정할 수 있다. 예를 들어, "npm install" 명령을 사용하여 패키지를 설치할 때, "--save" 플래그를 추가하면 해당.. 2023. 3. 12.
[자바스크립트] !! 느낌표 두개 문법 JavaScript에서 !! 연산자는 값을 불리언으로 변환하는 데 사용된다. 일반적으로 값의 존재 여부를 확인하기 위해 사용된다. !! 연산자는 다음과 같이 작동된다. 피연산자의 값을 불리언으로 변환한다. 이후에, 불리언 값이 true일 경우 true를 반환하고, false일 경우 false를 반환한다. 즉, 이 연산자는 항상 불리언 값을 반환하는 것이다. 예를 들어, 다음과 같은 코드가 있다고 가정해보자 const myValue = 'hello'; console.log(!!myValue); // true 위 코드에서 !!myValue는 'hello' 값을 불리언으로 변환한 후, true를 반환한다. 그게 무엇이든 null이나 undefined가 아니고 값이 존재하면 true를 반환한다. 따라서 !! 연.. 2023. 3. 11.
기술 면접 대비 질문과 답 #1 1. 웹의 동작 방식에 대해 설명해주세요. 웹의 동작 방식은 클라이언트-서버 모델로 이루어져 있습니다. 클라이언트는 브라우저에서 실행되며, 서버는 웹 애플리케이션을 호스팅하는 서버입니다. 클라이언트는 서버에 HTTP 요청을 보내고, 서버는 이 요청을 처리한 후 클라이언트에 HTTP 응답을 반환합니다. 클라이언트는 이 응답을 받아서 브라우저에 결과를 렌더링합니다. 2. HTTP와 HTTPS의 차이점에 대해 설명해주세요. HTTP는 인터넷 상에서 데이터를 주고받을 때 사용되는 프로토콜이며, 암호화되지 않은 평문으로 데이터를 전송합니다. 반면, HTTPS는 SSL 또는 TLS 프로토콜을 이용하여 데이터를 암호화하고 인증하는 보안 프로토콜입니다. HTTPS는 기밀성, 무결성, 인증성을 보장하여 중간자 공격이나 .. 2023. 3. 10.
[Develog] D-day와 옵저버 D-day 기능 구현과 옵저버 유저 피드백을 받으면서 D-day가 생겼다. 마감일을 기준으로 프로젝트 모집이 며칠이나 남았는지 보였으면 좋겠다는 피드백이었다. 처음 짠 코드는 이랬다. //디데이 계산 export const getDays = (milliseconds: number) => { const date = new Date(milliseconds); const day = `${date.getDate() - 1}`.padStart(2); return `${day}`; }; 생략 const day = Number(getDays(deadline - today)); return( {isRecruiting && day >= 0 && ( // 현재 모집 중이고 남은 일자가 0일 이상이면 {day === 0 ?.. 2023. 3. 9.
[React] useQuery의 onMutate 옵션 onMutate 속성은 useQuery 또는 useMutation 훅에서 제공하는 옵션 중 하나로, 쿼리 실행 중 mutation이 발생했을 때 수행되는 콜백 함수를 설정하는 역할을 한다. 보통 useMutation 훅을 사용하여 mutation을 처리할 때, optimistic update를 수행하거나, 캐시 업데이트를 수행하거나, 에러 발생 시 처리 등을 수행한다. 이 때, useQuery 훅에서 제공하는 onMutate 속성을 사용하면 mutation 전에 수행할 작업을 정의할 수 있다. onMutate 속성에 전달할 수 있는 값은 함수이다. 이 함수는 다음과 같은 형태를 가진다. onMutate?: (variables: TVariables) => Promise | R | undefined; 여기서.. 2023. 3. 8.
[React] optimistic update(낙관적 업데이트) React Query는 API 호출과 관련된 데이터를 캐시하고 관리하는 라이브러리이다. 이 라이브러리는 optimistic updates(낙관적 업데이트)를 지원하며, 이는 데이터를 서버로부터 성공적으로 업데이트하기 전에도 UI를 업데이트할 수 있도록 한다. optimistic updates는 요청을 보내기 전에 UI를 업데이트하는 기능이다. 예를 들어, 사용자가 게시물을 좋아요 했을 때, UI에서 즉시 좋아요 수가 증가하도록 할 수 있다. 이 때 서버로 요청을 보내기 전에 UI를 업데이트하는 것이 낙관적 업데이트이다. 낙관적 업데이트는 사용자 경험을 개선하고, 서버에서 응답을 받을 때까지 기다리지 않고 사용자에게 빠른 피드백을 제공할 수 있다. 하지만 요청이 실패하면 이전 상태로 되돌려야 하므로, 이를.. 2023. 3. 7.
[Develog] yarn berry Yarn Berry란 무엇인가요? Yarn Berry는 Facebook에서 개발한 오픈소스 자바스크립트 패키지 매니저인 Yarn의 새로운 버전이다. Yarn Berry는 이전 버전인 Yarn Classic에서 겪었던 문제점들을 해결하고 개선된 기능들을 제공한다. 주요 기능으로는 Plug'n'Play (PnP)이 있다. PnP는 의존성 설치 및 관리를 더욱 효율적으로 수행할 수 있도록 도와주고 이를 통해 패키지 설치 속도 상승에 도움을 준다. 또한, PnP를 선택적으로 사용할 수 있기 때문에 기존의 Yarn Classic에서 사용되던 node_modules 디렉토리와 함께 사용할 수 있다. Yarn Berry는 Workspaces를 지원하며 Workspaces는 여러 개의 패키지를 하나의 프로젝트로 관리할.. 2023. 3. 6.

티스토리툴바