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가 요청을 처리하는 데 필요한 데이터를 일시적으로 가지고 있는 기억 장치이며 스택은 함수 호출 시에 전달되는 인자나 실행 종료 후 되돌아갈 주소 값, 함수 내의 변수 등을 저장하는 메모리 공간이다. 스레드는 프로세스에 할당된 메모리나 자원들을 공유하며, 각각의 스레드가 독립적으로 작업을 수행하기 위해 각자의 레지스터, 스택을 가진다. 스레드는 라이트웨이트 프로세스라고..