아티클
8 posts
React 톺아보기를 톺아보기 - 2

이 글은 스터디에서 리액트 톺아보기 2. Intro를 읽고 정리하며 주관적으로 정리한 글입니다. 글을 읽고 핵심적이거나 더 깊게 보고 싶은 부분을 정리하였습니다. 원문보다 더 가독성이 좋지 못할(?) 수 있으니 원문도 읽어보시는 것을 추천드립니다. 또한, 글을 읽고 이해한 내용을 바탕으로 작성한 글이기 때문에 틀린 내용이 있을 수 있습니다. 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다. ⚛️ 리액트 톺아보기 왜 를 보는가 Next.js를 통해 한층 더 추상화된 React를 사용하다보니, 아이러니하게도 React에 대한 더 깊은 이해가 필요하겠다는 갈증이 들었다. 리액트 공식문서도 혼자서 1번, 스터디에서 1번 읽었지만 뭐랄까… 전반적인 React의 컨셉과 api 사용법은 알겠으나 그 내부 구현에 대한 건 생각보다 깊이 있게 들어가기가 힘들었다. 그러던 중 글을 발견하였고 한국말로 정리된 글 중 가장 깊이있는 글이라고 생각하여 해당 글을 읽기로 했다! 부디 지금 내가 느끼는 …

October 14, 2023
스터디
아티클
React 톺아보기를 톺아보기 - 1

이 글은 스터디에서 리액트 톺아보기 1. Preview를 읽고 정리하며 주관적으로 정리한 글입니다. 글을 읽고 핵심적이거나 더 깊게 보고 싶은 부분을 정리하였습니다. 원문보다 더 가독성이 좋지 못할(?) 수 있으니 원문도 읽어보시는 것을 추천드립니다. 또한, 글을 읽고 이해한 내용을 바탕으로 작성한 글이기 때문에 틀린 내용이 있을 수 있습니다. 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다. ⚛️ 리액트 톺아보기 왜 를 보는가 Next.js를 통해 한층 더 추상화된 React를 사용하다보니, 아이러니하게도 React에 대한 더 깊은 이해가 필요하겠다는 갈증이 들었다. 리액트 공식문서도 혼자서 1번, 스터디에서 1번 읽었지만 뭐랄까… 전반적인 React의 컨셉과 api 사용법은 알겠으나 그 내부 구현에 대한 건 생각보다 깊이 있게 들어가기가 힘들었다. 그러던 중 글을 발견하였고 한국말로 정리된 글 중 가장 깊이있는 글이라고 생각하여 해당 글을 읽기로 했다! 부디 지금 내가 느끼…

October 14, 2023
스터디
아티클
(Vanilla JS로 useState 만들기 by 황준일님) 4편

🎾 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 들어가기에 앞서 이 내용은 개발자 황준일 - Vanilla Javascript로 useState 만들기을 공부하며 작성한 글입니다. 대부분의 내용을 황준일님의 블로그를 참고하였고 몇개의 개념 내용 정도만 추가 혹은 내용 요약이 되어있습니다. 자세한 사항은 황준일님의 블로그를 참고해주세요!(정말 너무 좋은 글이에요~!) Vanilla Javascript로 React useState Hook 만들기 1. React의 useState 1) 의문갖기 useState를 호출하여 state와 setState를 가져온다. 500ms(0.5초)마다 setCount를 실행한다. 값이 1씩 증가한다. setCount가 실행되면 다시 렌더링이 실행된다. 렌더링이 실행되면 Counter가 다시 실행될 것이다. 어떻게 Counter…

May 20, 2023
스터디
아티클
(Vanilla JS로 가상돔 만들기 by 황준일님) 3편

🎾 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 들어가기에 앞서 이 내용은 개발자 황준일 - Vanilla Javascript로 가상돔 만들기을 공부하며 작성한 글입니다. 대부분의 내용을 황준일님의 블로그를 참고하였고 몇개의 개념 내용 정도만 추가 혹은 내용 요약이 되어있습니다. 자세한 사항은 황준일님의 블로그를 참고해주세요!(정말 너무 좋은 글이에요~!) Vanilla Javascript로 가상돔(VirtualDOM) 만들기 1. 브라우저 로딩 과정 -> -> -> -> -> 위 과정이 진행 후, CSS나 JS를 통해 변화가 생길 경우 re-플로우(re-레이아웃) 또는 re-페인트 과정이 진행된다. 1. 파싱 DOM Tree HTML을 토대로 DOM Tree를 생성한다. Bytes: HTML을 바이트 단위로 읽는다. ex) Characters:…

May 12, 2023
스터디
아티클
(Vanilla JS로 상태관리 시스템 만들기 by 황준일님) 2편

🎾 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 들어가기에 앞서 이 내용은 개발자 황준일 - Vanilla Javascript로 상태관리 시스템 만들기을 공부하며 작성한 글입니다. 대부분의 내용을 황준일님의 블로그를 참고하였고 몇개의 개념 내용 정도만 추가 혹은 내용 요약이 되어있습니다. 자세한 사항은 황준일님의 블로그를 참고해주세요!(정말 너무 좋은 글이에요~!) Vanilla Javascript로 상태관리 시스템 만들기 1. 중앙 집중식 상태관리 현대 프론트엔드 개발에서 제일 중요한 것은 어플리케이션의 규모가 커질수록 컴포넌트의 depth가 깊어지며 더불어 상태관리도 굉장히 어려워진다. 이 때, 상태를 위에서 아래로 하나하나 전달하지 않고 을 하면서 동시에 으로 다룰 수 있다면 어떨까? 참고: Redux 공식문서 2. Observer Pattern에 …

April 26, 2023
스터디
아티클
(Vanilla JS로 웹 컴포넌트 만들기 by 황준일님) 1편

🎾 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 들어가기에 앞서 이 내용은 개발자 황준일 - Vanilla Javascript로 웹 컴포넌트 만들기 1편을 공부하며 작성한 글입니다. 대부분의 내용을 황준일님의 블로그를 참고하였고 몇개의 개념 내용 정도만 추가 혹은 내용 요약이 되어있습니다. 자세한 사항은 황준일님의 블로그를 참고해주세요!(정말 너무 좋은 글이에요~!) Vanilla Javascript로 웹 컴포넌트 만들기 - 1 1. 컴포넌트와 상태관리 크로스 브라우징 웹 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게 나오는 작업(호환성 해결) 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽으로 최적화 되어 치우치지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기 단순하게 말하…

April 19, 2023
스터디
아티클
How-Browsers-Work-D2

📚 NAVER D2의 이 글은 브라우저는 어떻게 동작하는가?를 한국어로 요약한 정리 글입니다. 공부 목적으로 요약한 주관적인 내용입니다. 😀 브라우저의 주요 기능 유저가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것 자원은 보통 HTML 문서이고 떄로는 PDF, 이미지, 기타 등등일 수 있다. 브라우저는 웹 표준화 기구인 W3C에서 정한 명세에 따라 HTML, CSS를 해석하여 표시한다. 브라우저의 기본 구조 브라우저의 주요 구성 요소 사용자 인터페이스(UI): 주소 표시줄, 이전/다음 버튼 등 요청 페이지를 보여주는 창을 제외한 나머지 부분 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이 동작 제어 렌더링 엔진: 요청한 콘텐츠를 표시.(HTML 요청시 HTML과 CSS를 파싱하여 화면에 표시) 통신: HTTP 요청과 같은 네트워크 호출에 사용됨. UI 백엔드: select/input 등의 기본적인 위젯을 그린다. OS UI를 사용 자바스크립트 해석기: 자바스크립트 …

November 09, 2022
아티클
Getting Started With React

📚 Taniarascia의 getting-started-with-react 이 글은 Taniarascia의 getting-started-with-react를 한국어로 요약한 정리 글입니다. 공부 목적으로 요약한 주관적인 내용입니다. 😀 리액트란? 리액트는 자바스크립트 라이브러리이다.(프레임워크가 아니다.) 리액트는 페이스북(현 메타)에서 개발된 오픈소스 프로젝트이다. 리엑트는 프론트엔드에서 User Interface(UI)를 제작하기위해 사용된다. 리액트는 MVC(Model View Controller) 어플리케이션에서 View를 담당한다. 리액트의 가장 중요한 측면은 당신이 당신만의, 재사용가능한 HTML 요소인 를 빠르고 효과적으로 만들 수 있다는 것이다. 또한 리액트는 와 를 사용하여 데이터의 저장과 조작을 유연하게 할 수 있다. 리액트 앱 만드는 방법 npm과 yarn 모두 리액트 어플리케이션 제작을 지원한다. 기본적으로 index.html 내부에 id가 root인 div …

November 09, 2022
아티클