profile
배운 것을 기록하는 FrontEnd Junior 입니다

자바스크립트 완벽 가이드 (2~3장)

자바스크립트 완벽 가이드, 새롭게 알게된 내용 위주로 정리합니다

2022년 6월 22일
·
0개의 댓글
post-thumbnail

Range 객체를 통해 반응형 댓글 구현하기

Range 객체를 이용해 반응형에 따라 댓글 기능을 수정한 사례와 Range 인터페이스에서 사용한 메서드를 정리하였습니다

2022년 5월 4일
·
0개의 댓글
post-thumbnail

React, 한글 입력시 keydown 이벤트 중복 발생 현상

React 에서 한글 입력 시 keydown 이벤트가 중복으로 발생하는 문제를 해결하는 방법을 소개한다

2022년 3월 31일
·
2개의 댓글
post-thumbnail

이펙티브 타입스크립트(11 ~ 20)

이펙티브 타입스크립트를 공부하며 요약 및 기록한 것을 공유합니다. 부족한 부분은 알려주시면 반영하겠습니다.

2022년 2월 23일
·
0개의 댓글
post-thumbnail

타입스크립트 (1)

해당 강의는 인프런에 올라온 캡틴 판교님의 타입스크립트 입문편을 듣고 정리한 내용입니다.

2022년 2월 10일
·
0개의 댓글
post-thumbnail

모듈 시스템과 Webpack(2)

이전 포스팅이에서 모듈 시스템을 사용하기 위해 webpack 이 필요한 이유와 그 설정 방법에 대해 알아보았다. 이번에는 CSS를 웹팩환경에서 사용하는 방법과 기타 유용한 플러그인 및 설정에 대해 알아본다.

2022년 2월 10일
·
0개의 댓글
post-thumbnail

모듈 시스템과 Webpack(1)

리액트를 공부하고, 리액트 프로젝트를 진행하며 모듈 시스템을 이용해 컴포넌트 주도 개발을 할 때 Webpack과 같은 번들러의 역할이 중요하다는 것을 알게 되었다. 이 글을 통해서 리액트 개발 시 웹팩이 필요한 이유와 웹팩 설정 방법을 정리해본다...

2022년 2월 8일
·
0개의 댓글
post-thumbnail

rel="noopener noreferrer"

글을 작성한 이유 HTML을 어느 정도 공부한 사람들이 웹 페이지에서 다른 페이지로 이동하도록 만드는 링크 버튼을 만들기 위해서는 앵커 태그(a)를 사용해야 한다는 점은 다 알고 있을 것이다. 그러나 HTML을 공부하면서 앵커 태그를 작성하여 페이지 이동을 할 경우

2021년 11월 1일
·
0개의 댓글
post-thumbnail

자바스크립트의 동기와 비동기

이벤트 루프와 관련된 포스팅을 하면서, 자바스크립트가 싱글 스레드의 비동기 방식으로 동작한는 이유가 바로 이벤트 루프 때문이라고 했는데, 이번 자바스크립트 Deep Dive 를 공부하면서 비동기를 자바스크립트에서 어떻게 지원하는지 알게 되어 이를 정리하고자 한다

2021년 10월 26일
·
0개의 댓글
post-thumbnail

클로저를 통한 옵저버 패턴

자바스크립트 파일을 작성하게 되면, 하나의 전역 상태 값을 여러 개의 자바스크립트 파일이 공유하거나 참조해야 하는 경우가 존재한다. 예를 들어서 여러 개의 페이지로 구성된 웹 서비스가 있다고 가정해보자. 해당 웹 서비스의 한 개의 페이지에서 다크 모드를 적용하게 되면,

2021년 10월 18일
·
0개의 댓글
post-thumbnail

웹 스토리지

글을 작성한 이유 최근 프로그래밍 수업을 들으면서, 1명의 팀원과 페어 프로그래밍을 진행하게 되었다. 프로그래밍 구현 내용 중에, 뷰에서 변경된 상태값(State value)를 브라우저가 리랜더링 되어도 유지되도록 구현하는 문제를 발견하게 되었다. DB를 배우지 않

2021년 10월 12일
·
0개의 댓글
post-thumbnail

DOM 조작과 크로스 사이트 스크립팅

브라우저는 서버로부터 자원을 요청하고 이를 받아서 랜더링 엔진에 의해서 파싱 과정을 거쳐 화면에 최종 랜더링을 하게 된다. 이때 서버로부터 받아온 HTML 파일을 파싱하는 과정에서 DOM을 구성하여, HTML의 노드들의 상속 관계를 트리 구조 형태로 만든다고 배웠다.

2021년 10월 4일
·
0개의 댓글
post-thumbnail

브라우저의 렌더링 과정

프로트엔드 개발자는 기본적으로 웹 페이지를 개발하는 사람이다. 따라서 브라우저가 어떻게 화면을 랜더링하는지에 대한 기본적인 이해는 필수이다. 이번 글을 통해서 브라우저의 서버 요청과 응답을 받고, 서버 자원을 통해 웹 페이지를 랜더링하는 과정을 정리하고자 한다. 브라우

2021년 10월 3일
·
0개의 댓글
post-thumbnail

화살표 함수, 뭐가 다를까?

화살표 함수는 ES6 이후 도입되어 함수를 간편하게 정의할 수 있는 방법이다. 일반적으로 함수를 정의하는 방법이 간단하다는 것만 알고 있지만, 실제로 화살표 함수의 내부 동작 원리 역시 일반 함수 정의 방법보다 간소화 되어 있다. 따라서 화살표 함수에 대한 이해를 통해

2021년 9월 27일
·
0개의 댓글
post-thumbnail

Node.js 이벤트 루프(Event-Loop)

우리가 흔히 말하는 자바스크립트는 무엇을 가르키는 것일까? 이를 이해하기 위해서 우선 ECMA Script에 대한 이해가 필요하다. ECMA Script는 95년 브렌던 아이크에 의해서 초창기 버전의 자바스크립트가 마이크로소프트와의 크로스 브라우징 이슈로 인해 비영리

2021년 9월 13일
·
0개의 댓글

웹 바이탈(Core webvital)

웹 바이탈을 구글에서 페이지에 대한 사용자 경험을 측정하기 위해 여러 기준을 두어 페이지를 평가하는 지표를 의미한다. 이중 3가지의 핵심 지표가 사용자의 경험을 좌우하는 중요한 지표라고 할 수 있다. 1) LCP(Largest Contentful Paint) 처음 페이

2021년 9월 1일
·
0개의 댓글

기술 면접 예상 질문

1) svg 파일 안에 해당 svg를 정의할 영역을 def로 지정한다. 2) 지정된 def 영역 안에 고유한 id를 지닌 symbol들을 정의한다. 3) 정의된 icon을 사용하기 위해서 use를 사용한다. use를 사용해 해당 아이콘의 아이디 값을 연결하여 html

2021년 9월 1일
·
0개의 댓글