Blog
view all tagsReact Hook Form 렌더링 성능 최적화 하기
나는 다양한 종류의 input, select 태그를 포함한 form을 다루는 일을 하고 있고, 많은 개발자들이 그렇듯 react-hook-form 라이브러리를 아주 감사하면서 사용하고 있다. React-hook-form의 장점은 ref…
July 17, 20233 minsReact Virtuoso를 사용하여 React-table 의 느린 성능 개선하기
가상화 테크닉을 사용하여 과도한 렌더로 빚어지는 react-table의 성능을 개선하자
June 10, 20232 minsReact CRA에서 prop-types와 jsdoc 함께 사용해서 VS Code의 Auto Suggestion 기능 사용하기
TypeScript를 못쓴다면 PropTypes를 활용하자
December 15, 20221 minsencodeURI VS encodeURIComponent
함수는 URI의 특정한 문자를 UTF-8로 인코딩해 하나, 둘, 셋, 혹은 네 개의 연속된 이스케이프 문자로 나타낸다. encodeURI encodeURIComponent URI의 특정한 문자를 UTF-…
May 06, 20223 mins자바스크립트 Date 오브젝트를 활용해서 시간과 날짜 개념 표현하기
Date object 시간을 나타내는 방법은 아주 다양하고 상대적이다. 이 글을 쓰고 있는 현재는 3월 7일 오후 11시지만, 3월 7일 23시라고 나타낼 수도 있다. 또 한국은 현재 오후 11시이지만 영국은 3월 7일 오후…
March 09, 20227 minsCSS Gradients에 대해
이 글은 Chris Coyier가 작성한 CSS Gradients에서 상당 내용을 참조했습니다 CSS의 gradient란 ? 두개 혹은 그 이상의 색상을 가지고 점진적으로 옅게 하거나 진하게 처리하여 이미지를 생성하는 것을 말한다. gradient…
February 25, 20226 mins디버깅(Debugging)
Chrome 브라우저와 Postman을 이용하여 디버깅 해보기
February 09, 20223 minsVirtual DOM을 사용하는 이유
가상 돔을 왜 쓸까? => 리얼 돔이 비효율적이기 때문에 애초에 DOM은 서버에 의해 렌더링되는 정적인 UI를 염두에 두고 설계되었다. 리얼 돔에서 다음과 같은 스크립트를 통해 DOM에 변경을 가하는 경우를 보자. 브라우저가 HTML…
January 04, 20221 mins웹페이지가 사용자에게 보여지는 과정
22/02/10에 업데이트 되었습니다. 웹페이지가 로드될 때, 웹 클라이언트는 서버에게 리소스(html…
December 17, 20214 minsBig O Explained
Big O 표기법은 무엇이고 왜 Big O를 사용하는지
December 09, 20216 minsCORS란? 그리고 이를 해결하는 방법은?
CORS는 Cross—Origin Resource Sharing(교차 출처 리소스 공유)의 약자이다. 브라우저는 보안상의 이유로 웹 애플리케이션이 리소스를 요청할 때 자신의 출처와 동일한 출처의 리소스만 허락한다. 즉, https://www…
December 01, 20216 minsJavaScript Iterable
객체에 Symbol.iterator 속성을 적용하여 자바스크립트의 어떤 콜렉션도 반복 가능한 객체로 만들 수 있다.
November 23, 20212 minsuseCallback과 React.memo를 통한 리액트 성능 최적화
React useCallback을 통한 성능 최적화 eslint문법을 적용하고 개발을 하다보면 한번씩 react-hooks/exhaustive-deps 에러를 맞닦뜨리는 경험을 하게 된다. 가 넣으라고 해서 넣었는데, 위 코드는 infinite…
November 15, 20213 mins이벤트 버블링과 캡처링
event.target과 event.currentTarget의 차이점은 무엇일까?
November 03, 20215 minsJavaScript Map and Set
Map is similar to . But the main difference is that allows keys of any type. – creates the map. – stores the value by the key…
September 05, 20213 minsUsing currying to handle event handlers in React
Suppose we have parent and child component and parent has handler which gets activated when child component’s onChange event is called. The…
August 02, 20213 minszsh, bash에서 파일의 권한 설정하는방법
…
July 21, 20211 minsJavaScript 클래스 정적 메서드에 대해 알아보자
Static method…
July 07, 20211 minsHTTP 메시지, 메서드, 캐시
네트워크 공부 - HTTP
July 04, 202112 minsCodeWars 알고리즘 문제 풀기
자바스크립트 어레이 reduce 메서드를 활용한 알고리즘 풀이
May 09, 20213 minsReact Virtual DOM 이해하기
왜 가상돔이 효율적인지 그리고 리액트의 기본 구조가 어떻게 동작하는지에 대해 정리
January 17, 20215 minsJavaScript 프로토타입
자바스크립트의 함수 원형(prototype)이 어떻게 프로퍼티와 메서드를 인스턴스에 전달하는지에 대해
January 16, 20213 minsESLint + Prettier + React(CRA) + TypeScript + AirBnB 설정하기
ESLint + Prettier 타입스크립트 기반 리액트 프로젝트에서 설정하기
January 07, 20214 mins자바스크립트 This, call / apply / bind 메서드에 대해 정리
코어 자바스크립트를 읽고 this에 대해 다시 정리해보았다
November 14, 20205 minsSSH port 22 gitlab 접속 시 permission error 해결방법
port 22 차단되었을 때 해결 방법
September 27, 20201 mins자바스크립트 Reduce 메서드 뽀개기
자바스크립트 어레이 메서드 Reduce()를 이해해보자.
September 02, 20202 minsTypeScript Programming - 1) 타입
타입스크립트 프로그래밍을 읽고 안정적인 자바스크립트 활용을 위한 타입스크립트 활용 방법에 대해 정리하기
August 25, 20206 minsC언어 입문하기 (CS50 MOOC 강의를 듣고 정리) - 2
C언어 기초 - 소스 코드가 컴파일 되는 과정과 배열에 대해 알아보기
August 21, 20204 minsC언어 입문하기 (CS50 MOOC 강의를 듣고 정리) - 1
C언어 기초 - 입문
August 18, 20206 minsReact 인라인 스타일링에 객체를 넣으면 안되는 이유
리액트에서 인라인 스타일링을 할 때 보통 아래처럼 코드를 작성한다. 하지만 위처럼 코드를 작성하게 되면 MyApp이 매번 렌더링 될 때마다 객체인 이 재정의되며, div…
July 05, 20201 mins간단한 예제를 통해 함수형 프로그래밍 알아가기
함수형 프로그래밍은 성공적인 프로그래밍을 위해 순수함수를 만들고 모듈화 수준을 높이는 프로그래밍 패러다임이다.
April 12, 20205 minsReact-redux) 리액트-리덕스에서 비동기 액션을 처리하는 방법
Redux에서 비동기 처리를 위해 미들웨어를 사용해야 하는 이유
September 22, 20193 minsHTML5 label 태그 기능 알아보기
입력 폼을 작성할 때 label 태그를 활용하여 입력 범위를 넓히고 마우스 사용자의 편의를 증진할 수 있다.
August 04, 20192 minsSemantic UI Create-React-App에서 쉽게 사용하는 법
UI 컴포넌트 라이브러리인 Semantic UI를 create-react-app에서 사용해보자
August 01, 20191 minsTIL - 자바스크립트 실행 컨텍스트(Execution Context)와 호이스팅(Hoisting)
자바스크립트 코드가 실행되는 환경인 실행 컨텍스트와 호이스팅에 대해 정리
July 20, 20194 minsTIL - 자바스크립트 스코프(Scope)
스코프란 자바스크립트 런타임 내의 코드에 있는 변수나 함수 혹은 객체에 대한 접근성을 일컫는다.
July 18, 20192 mins리액트 최신기능 Hooks를 이용하여 네비게이션 바 토글 기능 구현하기
클래스형 컴포넌트에서만 가능하던 state 기능을 Hooks를 이용하여 함수형 컴포넌트에서 구현할 수 있다.
July 02, 20191 minsCSS3 - 마우스 hover에 따라 그래픽적인 효과 줘보기
CSS Transition 속성을 활용하여 마우스 hover에 따라 달라지는 효과 적용
June 19, 20191 mins자바스크립트 This 이해하기
자바스크립트와 This 자바스크립트는 컴파일 과정을 필요로 하지 않는 스크립트 언어이다. 인터프러터(웹 브라우저 등)가 코드를 읽고 행 by 행으로 자바스크립트를 실행 시킨다. 이 때 각각의 코드가 실행되는 환경-aka scope…
June 18, 20192 minsReact - Password Validation -리액트로 비밀번호 재입력 폼 만들기
사이트의 회원가입 시 자주 보게 되는 비밀번호 재확인 기능을 리액트로 구현해보자
May 27, 20193 minsReact - 자식 컴포넌트(Child Component) 값을 부모 컴포넌트(Parent Component)에게 전달하기
부모 컴포넌트에게 자식 컴포넌트의 데이터를 전달하고 싶다면?
April 17, 20192 mins