서녕이네 개발단지

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

이번 포스팅은 자바스크립트의 '이벤트 루프'에 대해 포스팅하려고 한다. 이벤트 루프를 알아보기에 앞서 JavaScript의 특징부터 알아야 한다! JavaScript는 *싱글 스레드 언어라고 알려져 있다. *싱글 쓰레드란? - 여러 개의 작업이 있더라도 한 번에 하나의 작업만 수행할 수 있다. ❗️하지만 JavaScript를 사용해 보면 멀티 스레드처럼 동시에 여러 작업을 수행할 수 있다는 것을 알 수 있다. 그렇다면 JavaScript는 정말 싱글스레드 언어가 맞을까??😲 자세히 알아보자! JavaScript는 정말 싱글 쓰레드 언어일까? 그렇다! 정확하게 말하면 👉🏻 자바스크립트의 메인 스레드인 이벤트 루프가 싱글 스레드이기 때문에 자바스크립트를 싱글 스레드 언어라고 부른다. 하지만 이벤트 루프만 독..

React.FC란? Function Component 타입의 줄임말로, React + Typescript 조합으로 개발할 때 사용하는 타입이다. 함수형 컴포넌트 사용 시 타입 선언에 쓸 수 있도록 React에서 제공하는 타입이다. React 18버전 이전까지 FC 사용을 지양했던 이유는? 1. children React.FC를 사용하면 컴포넌트 props는 type이 ReactNode인 children을 암시적으로 가지게 된다. type TagName = { name: string; }; const Tag: React.FC = ({ name }) => ( {name} {children} ); 👉🏻 타입스크립트를 쓰는 이유중 하나가 정확한 타입을 지정 해주면서 JS코드의 안전성을 향상 시키는 부분인데, F..

Type Alias와 Interface의 차이? type alias type ButtonProps = { onClick: () => void; label: string; }; const Button = (props: ButtonProps) => { return {props.label}; }; interface interface ButtonProps { onClick: () => void; label: string; } const Button = (props: ButtonProps) => { return {props.label}; }; Type Alias와 Interface의 차이점? 1. 확장 가능성 Type Alias : type은 기존 타입을 조합하여 새로운 타입을 만드는 데 좀 더 강력한 기능을 제..