Code Playground

< h1 > Code Playground </ h1 >

이 글은 Compound Pattern과 관련된 글의 한글 번역입니다. 원문 링크: https://www.patterns.dev/posts/compound-pattern/ Compound Pattern Create multiple components that work together to perform a single task www.patterns.dev Compound Pattern 어플리케이션에서 우리는 종종 서로에게 속한 컴포넌트를 가지게 된다. 이 컴포넌트들은 공통의 상태를 통해 서로에게 의존되어 있고, 로직을 함께 공유한다. 여러분은 종종 select, dropdown 컴포넌트 또는 메뉴 아이템들에서 이러한 형태를 볼 수 있다. Compound component pattern은 task를 수행..

Next.js Learn 문서 일부분에 대한 한글 번역입니다. [원문 링크] https://nextjs.org/learn/foundations/how-nextjs-works/client-and-server https://nextjs.org/learn/foundations/how-nextjs-works/rendering https://nextjs.org/learn/foundations/how-nextjs-works/cdns-and-edge Client and Server 웹 어플리케이션 맥락에서 client는 어플리케이션 코드를 위해 서버에 요청을 보내는 유저 디바이스의 브라우저를 지칭한다. 요청을 보내고 나면 서버로부터 받은 응답을 유저가 상호작용할 수 있는 인터페이스로 전환한다. Server는 어플리케..

(잘못해서 게시물을 삭제해버려서 다시 업로드합니다.) Next.js 공식 문서에 상단 Learn 버튼 누르면 나오는 튜토리얼 문서인데 좋은 내용인 것 같아서 시리즈로 번역해서 올리려고 한다. [원문 링크] https://nextjs.org/learn/foundations/how-nextjs-works/compiling https://nextjs.org/learn/foundations/how-nextjs-works/minifying https://nextjs.org/learn/foundations/how-nextjs-works/bundling https://nextjs.org/learn/foundations/how-nextjs-works/code-splitting https://nextjs.org/lear..

Next.js Learn 문서 일부분에 대한 한글 번역입니다. [원문 링크] https://nextjs.org/learn/foundations/how-nextjs-works https://nextjs.org/learn/foundations/how-nextjs-works/development-and-production How Next.js Works 좀 더 상급의 Next.js 피쳐에 대해 공부하기 전에, Next.js가 어떻게 동작하는지 기본을 이해하면 더 도움이 될 것이다. 강좌 초반에 리액트가 어플리케이션을 빌드하고 구조화하는데 있어서 얼마나 상대적으로 자율성이 있는지에 대해서 얘기했었다 (리액트로 어플리케이션을 구축하는데 정말 여러가지 방법이 존재한다.) Next.js는 어플리케이션을 구조화할 때 ..

Next.js Learn 문서 일부분에 대한 한글 번역입니다. [원문 링크] https://nextjs.org/learn/foundations/from-javascript-to-react/react-core-concepts https://nextjs.org/learn/foundations/from-javascript-to-react/building-ui-with-components https://nextjs.org/learn/foundations/from-javascript-to-react/displaying-data-with-props https://nextjs.org/learn/foundations/from-javascript-to-react/adding-interactivity-with-state ..

Next.js Learn 문서 일부분에 대한 한글 번역입니다. [원문 링크] https://nextjs.org/learn/foundations/from-javascript-to-react/getting-started-with-react From JavaScript to React (JavaScript에서 React까지) #2 여러분의 프로젝트에 리액트를 사용하기 위해서는 unpkg.com이라고 불리는 외부 웹사이트로부터 두 개의 리액트 스크립트를 로드할 수 있다. react는 리액트 코어 라이브러리이다. react-dom은 리액트를 DOM과 함께 사용할 수 있도록 만들어주는 DOM에 특화된 method를 제공해준다. const app = document.getElementById('app'); 순수 자바..

Next.js 공식 문서에 상단 Learn 버튼 누르면 나오는 튜토리얼 문서인데 좋은 내용인 것 같아서 시리즈로 번역해서 올리려고 한다. [원문 링크] https://nextjs.org/learn/foundations/from-javascript-to-react https://nextjs.org/learn/foundations/from-javascript-to-react/updating-ui-with-javascript [Next.js Learn - 현재까지의 번역본] [#1] From JavaScript to React (React는 선언형 UI 라이브러리이다) [#2] From JavaScript to React (React와 JSX) [#3] From JavaScript to React (React..

Why you should use SWC (and not Babel) - LogRocket Blog In this post, we'll cover the basics of transpilers and we'll compare Babel and SWC based on setup, execution, and speed. blog.logrocket.com 아래 글은 Kasra Khosravi가 작성한 Why you should use SWC (and not Babel)이란 글을 한글로 번역한 글입니다. 오역이 있을 수 있으니 정확한 내용을 읽고 싶다면 원문을 읽어보시길 바랍니다. 왜 여러분은 (바벨이 아니라) SWC를 사용해야 하는가? 바벨은 무엇인가? Babel은 ES6와 같은 자바스크립트 최신 버전의 코드..

싱글 스레드(Single Thread) 언어 자바스크립트는 싱글 스레드 언어라고 불린다. 여기서 스레드(Thread)는 프로세스 내에서 실행되는 흐름을 최소 단위를 말한다. 그리고 스레드는 자신만의 프로그램 카운터와 시스템 레지스터, 그리고 스택을 가진다. 프로그램 카운터는 다음에 실행될 명령어를 계속 추적하는 역할을 하고, 레지스터는 CPU가 요청을 처리하는 데 필요한 데이터를 일시적으로 가지고 있는 기억 장치이며 스택은 함수 호출 시에 전달되는 인자나 실행 종료 후 되돌아갈 주소 값, 함수 내의 변수 등을 저장하는 메모리 공간이다. 스레드는 프로세스에 할당된 메모리나 자원들을 공유하며, 각각의 스레드가 독립적으로 작업을 수행하기 위해 각자의 레지스터, 스택을 가진다. 스레드는 라이트웨이트 프로세스라고..

초창기 웹 렌더링 초창기에는 모든 웹 페이지가 정적인 페이지였다. 대부분의 로직은 서버에서 수행되었고, 브라우저는 서버로부터 전달받은 정적인 HTML과 CSS를 단순히 렌더링하는 방식으로 동작했다. 즉, 우리가 웹 사이트에 접속하면 브라우저는 서버에 간단한 HTTP 요청을 전송하고, 서버로부터 전달 받은 HTML을 렌더링하는 방식인 것이다. 화면에 어떠한 변화를 주려고 화면을 전환하면 그 때마다 서버로부터 새로운 HTML을 전송 받아서 다시 렌더링해야 했다. 당연히 매 번 처음부터 새로 렌더링하기 때문에 성능적인 문제도 많았고 화면이 전환될 때마다 화면이 깜박이는 등의 문제가 있었다. Ajax의 등장 그러다 1999년에 자바스크립트를 통해서 서버와 브라우저가 비동기로 데이터를 주고 받을 수 있는 Ajax..