[React] 리액트 reconciliation(재조정) 이란? / 리액트 key
Virtual DOM 리액트에 있어서 reconciliation 의 개념을 이해하려면, 버츄얼 돔의 이해가 필요합니다. Virtual DOM에 대해서는 간단하게만 설명하고 넘어가겠습니다. 이 동영상 은 VDOM을 직관적으로 이해하는데 많은 도움을 주고, React 공식문서 VDOM 을 참고하셔도 좋습니다. 사실 VDOM은 워낙 유명하고 중요한 개념이기 때문에 검색을 통해 쉽게 레퍼런스를 찾으실 수 있을 겁니다. 😀 DOM 트리는 무겁습니다. DOM 트리를 전부 다시 그리는 것은, 브라우저 렌더링에 있어서 매우 큰 코스트를 잡아먹죠. 그래서 리액트는 메모리에 VDOM 이라는 가상의 돔 트리를 존재시키면서, 실제 DOM 트리를 렌더링 하는데에 있어서는, VDOM을 바탕으로 변경시킬 일부 부분만을 리렌더링하게..
2021. 6. 1.
[도서리뷰📘] TDD - 테스트 주도 개발
TDD (테스트 주도 개발) 들어가며 인턴 근무하면서 멘토님께 멘토링 지원비로 이 책을 사고 싶다고 부탁을 드리고 읽게 된 책이다. 많은 책들 중에 이 책을 선택했던 이유는, 안정적인 개발을 하고싶어서였다. 애초에 내 성격부터가, 기억력이 안좋고 꼼꼼하지 못한 타입이라, 무언가 문제를 만들어놓고 해결하는 스타일이다. 코딩을 할 때도, 이런 성격이 작용을 하다 보니, 반복되는 잦은 실수들이 생겨났고, 이를 없애는 방법이 없을까? 하는 의문이 들곤 했다. '함께 자라기' 를 읽으면서 느꼈던 점 중에, 실수가 당장 그 순간에는 나쁜 결과를 가져와도, 길게 보면 결국 성장하는 데에는 도움이 된다는 것이었다. 그렇다면, 실수로부터 오는 불이익을 최소로하면서, 실수를 해결하는 방식으로 코딩을 하면 되지 않을까? 하..
2021. 5. 29.
[CS지식] Non Bloking VS Asynchronous / 논블로킹 vs 비동기
Blocking , Non-Blocking VS Synchronous, Asynchronous 자바스크립트는 Non-Blocking 방식으로 작동하는 언어로서 .... 자바스크립트의 이점은 비동기(Asynchronous) I/O 에서 .... 언뜻 보면 굉장히 비슷한 개념인 것 같기도 하고, 그다지 신경쓰지 않고 넘어가게 되는 부분이다. 일반적인 경우에서는 블로킹 == 동기 , 논블로킹 == 비동기 라고 표현을 해도 사실 커뮤니케이션에 큰 문제는 생기지 않는다. 면접 질문에서 위와 같은 맥락의 질문을 받아 적잖이 당황하고, 조금 늦었지만 이제라도 확실히 알아가고자 여러 자료를 찾아보았다. 그림 으로 이해하는 데에는 이 자료 , 개념 자체를 이해하는 데에는 이 자료 가 많이 도움이 되었다. (감사합니다 🙏..
2021. 5. 20.
[도서리뷰📘] 함께 자라기 - 애자일로 가는 길 🍀
함께 자라기 - 애자일로 가는 길 (김창준 지음) 회사 멘토님께 추천을 받아 읽게 되었다. 내 기억으로는 전문 서적이 아닌 책을 굉장히 오랜만에 읽었던 것 같다. 그럼에도 불구하고 매번 모니터 앞에서 키보드만 두드리는 나에게 책도 나름대로의 읽는 재미가 있었구나 라는 생각을 들게 해준 책이다. 내용이 IT 관련 일하지 않는 사람이 읽어도 무방할 만큼 무겁지 않고, 되게 소박하게 잘 읽히는 말투로 쓰여져 있어서 좋았다. 결국 이 저자분이 궁극적으로 강조하고 있는 커뮤니케이션의 중요성에 걸맞는 전달력이라 느꼈다.(나는 간단한 것을 전달할 때도 어렵게 늘어놓고 있을 때가 있는데 이 책을 보면서 많이 찔렸다...😅) 개발자들은 개발을 하다 보면, 몰입을 하면 할수록 기술과 실력을 갈고닦는 데에 몰두하기 마련이다..
2021. 5. 2.
[IT 면접대비] 개발자 기술면접 대비 🖥️/ 5️⃣ - 프론트엔드 (1)
브라우저 렌더링 과정을 설명해주세요 브라우저에서 렌더링을 담당하는 렌더링 엔진이 돌아가면서, HTML 파서가 HTML을 파싱하고, DOM 트리를 만듭니다. 동시에 Style Sheets도 CSS 파서에 의해서 CSSOM 트리를 구성합니다. 그 구성된 트리들로 렌더 트리가 만들어지고, 이 트리를 배치하고, 그리게 됩니다. 자바스크립트는, HTML 파서에서 스크립트 태그를 만났을 때, 자바스크립트 런타임으로 제어 권한을 넘기면서 그 실행 결과값을 받게됩니다. * 렌더링 엔진은 대표적으로 웹킷 과 개코 가 있다. 읽어보면 좋은 글 : d2.naver.com/helloworld/59361 * 브라우저 구조 - 사용자 인터페이스 - 브라우저 엔진 - 렌더링 엔진 - JS 런타임 - 기타 (통신담당, 벡엔드, 저장..
2021. 4. 22.
[React] Next JS 이미지 최적화, 이미지 컴퍼넌트 / Image Component / Image Optimization
목차 Image Component & Image Optimization Quick look differences Configuration 외부에서 가져오는 이미지인 경우 Loader 설정 Caching 설정 Device Sizes Image Sizes Image Component & Image Optimization 💡 version 10.0.0 부터 이미지 최적화 기능을 사용할 수 있습니다. 대신 next/image 의 모듈을 이용하자! 리사이징, 최적화, 브라우저 호환 등을 지원한다. 최적화는 빌드 타임에 진행되지 않고, on-demand 하게 이루어진다. 즉, 이미지 개수에 따라 빌드 타임이 길어지지 않는다는 뜻이다. Quick look differences Feature Next.js Image ..
2021. 3. 8.
[React] Next JS Pre-rendering / Static Generation(getStaticProps ) / SSR(getServerSideProps)
목차 기본 개념 Static Generation Static Generation 은 언제 사용될까? 예시 External Data 가 없는 경우 External Data 가 존재하는 경우 페이지가 External Data에 종속되는 경우 Fallback 기타 Server-side Rendering 예시 참고 ----- 기본 개념 Next JS 는 모든 페이지를 pre-rendering 한다. 즉, Client-side JS 로딩 방식으로 하지 않고 HTML 을 미리 만든다. 성능개선, SEO 최적화 Static Generation 과 Server-side Rendering 방식으로 나뉜다. 성능상의 차이로 인해 Static Generation 방식이 권장된다. 각각의 방식중 하나만 골라야되는 것이 아니라..
2021. 3. 8.
[React] Next JS 동적 라우팅 / Dynamic Routing
목차 동적 라우팅 (Dynamic Routing) 일반적인 사용 주의할 점 Multiple segment 기타 사용 예시 Catch all routes Optional 하게 사용하기 동적 라우팅 (Dynamic Routing) 일반적인 사용 pages/post/[id].js ⇒ post/1 로 접근가능 예시 1 import { useRouter } from 'next/router' const Post = () => { const router = useRouter() const { id } = router.query return Post: {id} } export default Post 예시 2 pages/post/[id].js 에 대해 post/abc?test=123 로 접근했을 때 갖는 query ob..
2021. 3. 8.
[React] 리액트 reconciliation(재조정) 이란? / 리액트 key
Virtual DOM 리액트에 있어서 reconciliation 의 개념을 이해하려면, 버츄얼 돔의 이해가 필요합니다. Virtual DOM에 대해서는 간단하게만 설명하고 넘어가겠습니다. 이 동영상 은 VDOM을 직관적으로 이해하는데 많은 도움을 주고, React 공식문서 VDOM 을 참고하셔도 좋습니다. 사실 VDOM은 워낙 유명하고 중요한 개념이기 때문에 검색을 통해 쉽게 레퍼런스를 찾으실 수 있을 겁니다. 😀 DOM 트리는 무겁습니다. DOM 트리를 전부 다시 그리는 것은, 브라우저 렌더링에 있어서 매우 큰 코스트를 잡아먹죠. 그래서 리액트는 메모리에 VDOM 이라는 가상의 돔 트리를 존재시키면서, 실제 DOM 트리를 렌더링 하는데에 있어서는, VDOM을 바탕으로 변경시킬 일부 부분만을 리렌더링하게..
[도서리뷰📘] TDD - 테스트 주도 개발
TDD (테스트 주도 개발) 들어가며 인턴 근무하면서 멘토님께 멘토링 지원비로 이 책을 사고 싶다고 부탁을 드리고 읽게 된 책이다. 많은 책들 중에 이 책을 선택했던 이유는, 안정적인 개발을 하고싶어서였다. 애초에 내 성격부터가, 기억력이 안좋고 꼼꼼하지 못한 타입이라, 무언가 문제를 만들어놓고 해결하는 스타일이다. 코딩을 할 때도, 이런 성격이 작용을 하다 보니, 반복되는 잦은 실수들이 생겨났고, 이를 없애는 방법이 없을까? 하는 의문이 들곤 했다. '함께 자라기' 를 읽으면서 느꼈던 점 중에, 실수가 당장 그 순간에는 나쁜 결과를 가져와도, 길게 보면 결국 성장하는 데에는 도움이 된다는 것이었다. 그렇다면, 실수로부터 오는 불이익을 최소로하면서, 실수를 해결하는 방식으로 코딩을 하면 되지 않을까? 하..
[CS지식] Non Bloking VS Asynchronous / 논블로킹 vs 비동기
Blocking , Non-Blocking VS Synchronous, Asynchronous 자바스크립트는 Non-Blocking 방식으로 작동하는 언어로서 .... 자바스크립트의 이점은 비동기(Asynchronous) I/O 에서 .... 언뜻 보면 굉장히 비슷한 개념인 것 같기도 하고, 그다지 신경쓰지 않고 넘어가게 되는 부분이다. 일반적인 경우에서는 블로킹 == 동기 , 논블로킹 == 비동기 라고 표현을 해도 사실 커뮤니케이션에 큰 문제는 생기지 않는다. 면접 질문에서 위와 같은 맥락의 질문을 받아 적잖이 당황하고, 조금 늦었지만 이제라도 확실히 알아가고자 여러 자료를 찾아보았다. 그림 으로 이해하는 데에는 이 자료 , 개념 자체를 이해하는 데에는 이 자료 가 많이 도움이 되었다. (감사합니다 🙏..
[도서리뷰📘] 함께 자라기 - 애자일로 가는 길 🍀
함께 자라기 - 애자일로 가는 길 (김창준 지음) 회사 멘토님께 추천을 받아 읽게 되었다. 내 기억으로는 전문 서적이 아닌 책을 굉장히 오랜만에 읽었던 것 같다. 그럼에도 불구하고 매번 모니터 앞에서 키보드만 두드리는 나에게 책도 나름대로의 읽는 재미가 있었구나 라는 생각을 들게 해준 책이다. 내용이 IT 관련 일하지 않는 사람이 읽어도 무방할 만큼 무겁지 않고, 되게 소박하게 잘 읽히는 말투로 쓰여져 있어서 좋았다. 결국 이 저자분이 궁극적으로 강조하고 있는 커뮤니케이션의 중요성에 걸맞는 전달력이라 느꼈다.(나는 간단한 것을 전달할 때도 어렵게 늘어놓고 있을 때가 있는데 이 책을 보면서 많이 찔렸다...😅) 개발자들은 개발을 하다 보면, 몰입을 하면 할수록 기술과 실력을 갈고닦는 데에 몰두하기 마련이다..
[IT 면접대비] 개발자 기술면접 대비 🖥️/ 5️⃣ - 프론트엔드 (1)
브라우저 렌더링 과정을 설명해주세요 브라우저에서 렌더링을 담당하는 렌더링 엔진이 돌아가면서, HTML 파서가 HTML을 파싱하고, DOM 트리를 만듭니다. 동시에 Style Sheets도 CSS 파서에 의해서 CSSOM 트리를 구성합니다. 그 구성된 트리들로 렌더 트리가 만들어지고, 이 트리를 배치하고, 그리게 됩니다. 자바스크립트는, HTML 파서에서 스크립트 태그를 만났을 때, 자바스크립트 런타임으로 제어 권한을 넘기면서 그 실행 결과값을 받게됩니다. * 렌더링 엔진은 대표적으로 웹킷 과 개코 가 있다. 읽어보면 좋은 글 : d2.naver.com/helloworld/59361 * 브라우저 구조 - 사용자 인터페이스 - 브라우저 엔진 - 렌더링 엔진 - JS 런타임 - 기타 (통신담당, 벡엔드, 저장..
[React] Next JS 이미지 최적화, 이미지 컴퍼넌트 / Image Component / Image Optimization
목차 Image Component & Image Optimization Quick look differences Configuration 외부에서 가져오는 이미지인 경우 Loader 설정 Caching 설정 Device Sizes Image Sizes Image Component & Image Optimization 💡 version 10.0.0 부터 이미지 최적화 기능을 사용할 수 있습니다. 대신 next/image 의 모듈을 이용하자! 리사이징, 최적화, 브라우저 호환 등을 지원한다. 최적화는 빌드 타임에 진행되지 않고, on-demand 하게 이루어진다. 즉, 이미지 개수에 따라 빌드 타임이 길어지지 않는다는 뜻이다. Quick look differences Feature Next.js Image ..
[React] Next JS Pre-rendering / Static Generation(getStaticProps ) / SSR(getServerSideProps)
목차 기본 개념 Static Generation Static Generation 은 언제 사용될까? 예시 External Data 가 없는 경우 External Data 가 존재하는 경우 페이지가 External Data에 종속되는 경우 Fallback 기타 Server-side Rendering 예시 참고 ----- 기본 개념 Next JS 는 모든 페이지를 pre-rendering 한다. 즉, Client-side JS 로딩 방식으로 하지 않고 HTML 을 미리 만든다. 성능개선, SEO 최적화 Static Generation 과 Server-side Rendering 방식으로 나뉜다. 성능상의 차이로 인해 Static Generation 방식이 권장된다. 각각의 방식중 하나만 골라야되는 것이 아니라..
[React] Next JS 동적 라우팅 / Dynamic Routing
목차 동적 라우팅 (Dynamic Routing) 일반적인 사용 주의할 점 Multiple segment 기타 사용 예시 Catch all routes Optional 하게 사용하기 동적 라우팅 (Dynamic Routing) 일반적인 사용 pages/post/[id].js ⇒ post/1 로 접근가능 예시 1 import { useRouter } from 'next/router' const Post = () => { const router = useRouter() const { id } = router.query return Post: {id} } export default Post 예시 2 pages/post/[id].js 에 대해 post/abc?test=123 로 접근했을 때 갖는 query ob..