서녕이네 개발단지

오랜만에 포스팅을 한다 (베베 너무 귀욥다) 여태 공부한걸 포스팅 했어야 하는데.. 주기적으로 작성하려고 노력해야지🥲 이번엔 socket 포스팅을하려고 하는데, 예전에 한번 따라만들기로 사용해봤지만 제대로 이해하지 못하고 넘어갔음.. 줍줍 프로젝트에서 소켓을 사용했지만 내가 한게 아니기 때문에 면접에서 소켓 질문이 나왔을때 대답을 못한 나 자신이 원망스러웠다 ㅜ 내가 맡은 파트가 아니라도 공부를 제대로 하자라는 다짐을 다시 하며.. WebSocket? Socket.IO? WebSocket 애초에 둘은 다른 개념이다. 웹소켓은 양방향 소통을 위한 프로토콜이다. 프로토콜은 쉽게 말하자면 서로 다른 컴퓨터끼리 소통하기 위한 약속 정도로 이해하면 된다. Socket.IO 반면에, socket.io는 양방햔 통신..

Next.js 13이 2022년 10월에 컨퍼런스에서 다시 발표됐다고 한다. (디렉토리 구조, getServerSideProps 등 Next 정체성이 대거 바뀜) Next 개발팀은 13버전 업을 통해 좀 더 제한없이 동적으로 동작하는 기반을 마련하고자 했다는 게 주요 컨셉이다. 🖐🏻 주요 변경사항 app/Directory(beta) : 쉽고, 빠르고, 적은 클라이언트 JS Layouts(레이아웃) React Server Components (리액트 서버 컴포넌트) Streaming (스트리밍) Data Fetching Turbopack(alpha) : Rust 기반. Webpack 보다 700배, Vite보다 10배 빠른 번들러 새로운 next/image(stable) : 더 빨라진 Lazy Loadin..

NextJS란? - Next.js는 리액트로 만드는 서버사이드 렌더링(SSR) 프레임워크다. - Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 리액트에 없는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 증분 정적 재생성(ISR)과 같은 다양하고 풍부한 기능을 제공한다. ⚠️ React에는 한 가지 큰 문제점이 있는데, 바로 리액트는 기본적으로 클라이언트 사이드에서만 작동한다는 점이다! 사용자의 웹 브라우저에서만 실행되기 때문에 리액트를 사용한 웹 애플리케이션은 검색 엔진 최적화(SEO)의 효과를 거의 볼 수 없으며❌, 첫 화면에 웹 애플리케이션을 제대로 표시하기 위해 애플리케이션 실행 초기에 성능 부담이 생긴다. 웹, 앱을 완전히 표시하려면~ 브라우저가 전체 웹..

ReactNode ReactNode는 TypeScript에서 React 컴포넌트에서 반환될 수 있는 모든 종류의 노드(node)를 나타내는 타입이다. React 컴포넌트의 렌더링 결과로 JSX요소, string, number, array, boolean, null, undefined 등이 포함될 수 있는데, 이러한 모든 데이터 타입을 대표하는 것이 ReactNode이다. ReactNode는 children 속성의 타입으로 가장 많이 사용하는 타입이다. import React, { ReactNode } from "react"; interface Component { children: ReactNode; } const ComponentProps: React.FC = ({ children }) => { ret..