즐겁게, 코드

조건부 렌더링 뷰(Vue.js)에서는 특정 조건을 만족할 때만 컴포넌트나 블록을 렌더링하는 조건부 렌더링 을 위해 v-if 와 v-show 라는 두 종류의 지시자(directive)를 사용합니다. v-show를 사용한 블록 v-if를 사용한 블록 그런데, 왜 뷰는 동일한 역할을 수행하는 지시자를 둘이나 구현해둔 걸까요? v-if 지시자 사실 두 지시자는 엄밀히 다른 방식으로 조건부 렌더링을 구현합니다. 먼저 v-if 지시자를 볼까요? v-if를 사용한 블록 [렌더링 결과 : isVisible이 true일 때] v-if를 사용한 블록 [렌더링 결과 : isVisible이 false일 때] v-if 지시자는 조건이 참일 때는 블록을 새로 생성해 DOM 트리에 추가하고, 조건이 거짓으로 변하면 해당 블록을 D..

리액트 개발을 해보신 분들이라면 map 등을 사용해 컴포넌트를 반복적으로 생성할 때 'Warning: Each child in a list should have a unique "key" prop.' 이라는 경고를 보신 적이 있을 것입니다. 과연 key 속성이 왜 필요한 것인지 리액트의 렌더링 원리와 함께 알아보도록 하겠습니다. 요소 트리 리액트는 컴포넌트의 상태나 속성(prop)이 변할 때마다 render() 함수를 호출하는데요, render() 함수는 새로운 리액트 요소 트리를 반환하고 이를 기존의 요소 트리와 비교해 새로운 변경점에 대해서만 재렌더링을 수행합니다. 잠깐 트리를 비교하는 부분을 더 소개하자면 리액트는 O(N) (N = 노드의 개수) 의 시간 복잡도로 두 트리를 비교하기 위해 key 속..

개발을 하다보면 객체를 배열로 바꿔야 할 때, 객체의 키만 필요할 때, 값만 필요할 때 등등 객체와 배열을 넘나들어야 하는 상황이 자주 생깁니다. 객체의 키 목록 추출하기 먼저 객체의 키 목록을 추출하는 경우입니다. Object.keys(대상 객체명) 은 해당 객체가 갖는 키의 목록을 배열로 반환합니다. const productList = { backpack: 1200, pencil: 800, eraser: 600, } Object.keys(productList) // [ 'backpack', 'pencil', 'eraser' ] 객체의 값 목록 추출하기 객체의 값만을 배열로 뽑아낼 수도 있습니다. Object.values(대상 객체명) 은 해당 객체가 갖는 값의 목록을 배열로 반환합니다. const p..

페이스북에서 제작한 전역 상태 관리 라이브러리, recoil.js가 점점 많이 언급되는 것 같아 공식 문서를 살짝 따라가봤습니다. https://recoiljs.org/ko/ A state management library for React. recoiljs.org 따라가다 보니... 헨젤과 그레텔이 과자에 홀린 것처럼 계속 읽게 되었네요. 결론부터 말씀드리면 리코일은 리덕스를 대체할 수 있는 가뭄의 단비같은 라이브러리입니다. 그동안 리액트로 프로젝트를 진행하려 하면 솔직히 리덕스 로직을 작성하기 시작하는게 부담이 되어 컨텍스트 API를 사용하려 하곤 했는데요, 리코일을 사용하면 전역 상태 관리에 대한 부담을 덜 수 있을 것 같다는 희망을 볼 수 있었습니다! 리코일로 간단히 투두앱을 만들어본 후, 리덕스..

/* 적용할 CSS 규칙을 선언한다. */ vue.js는 컴포넌트 파일에 스타일을 함께 작성하곤 하는데, SCSS 문법을 지원해 nested CSS를 쉽게 작성할 수 있다. 다만 SCSS를 적용하는 동안 발생할 수 있는 이슈가 두 가지 있다. 1. "sass" is not defined 첫 번째는 sass 모듈이 인식되지 않을 때다. CRA로 리액트는 node-sass나 sass 모듈을 설치해주기만 하면 사전에 설정된 sass-loader에 의해 sass로 CSS 전처리가 가능하지만, 뷰는 sass와 함께 sass-loader를 함께 설치해줘야 한다. yarn add sass sass-loader​ 2. TypeError : this.getOptions is not a function 두 번째로 맞닥뜨리..

뷰로 크롬 익스텐션을 만들 일이 생겨 구글링을 해봤는데, 생각보다 리소스가 훨씬 적어 놀랐습니다. 😂 그래서 제가 이전의 경험을 살려 간단하게 정리해봤습니다. 크롬 익스텐션에는 크게 두 가지 종류가 있는데, 브라우저의 새 탭을 익스텐션으로 대체하는 탭 타입과 아이콘을 클릭하면 익스텐션이 동작하는 팝업형 타입이 존재합니다. (사실 따로 부르는 명칭은 없습니다...) 크롬 익스텐션의 심장은 바로 manifest.json 파일입니다. { "manifest_version": 2, "version": "0.0.1", "browser_action": { "default_popup": "index.html", "default_title": "Open the popup" }, "short_name": "Popup", ..

강의 링크 : https://classroom.udacity.com/courses/ud884/ 웹 최적화 기법과 브라우저의 원리에 대한 괜찮은 강의가 하나 있어 공유해보고자 합니다! 바로 유다시티의 Website Performance Optimization 무료 강의인데요, 브라우저가 화면에 페이지를 렌더링하는 과정 및 페이지 반응속도를 향상시키기 위한 여러 기법들에 대해 배울 수 있습니다. Vue나 리액트 등 특정 기술에 한정된 내용이 아닌 어떻게 보면 개발자의 기본 소양과도 같은 "최적화" 기법에 대해 익히기 좋으실 듯 한데요, 간단한 맛보기 퀴즈를 하나 보여드리겠습니다. 사진의 세 렌더링 프로세스는 각자 다른 방식으로 자바스크립트를 불러온 결과물인데요, 각 보기가 어떤 방식으로 스크립트를 불러온 것..