profile
성장 중인 프론트엔드 개발자

z-index 와 stacking context (natural stacking order)

refhttps://www.zerocho.com/category/CSS/post/5a18b330e9c0ec001b08238ehttps://mytory.net/archives/10997https://erwinousy.medium.com/z-in

2022년 5월 29일
·
0개의 댓글

JavaScript Module System 자바스크립트 모듈 시스템

플러그인 파일이나 잘게 쪼개진 자바스크립트 코드 조각을 재사용하기 위해서 각각의 파일을 등록하고, 등록된 파일을 자바스크립트에서 불러와서 사용할 수 있게 해주는 시스템'엄격모드' (use strict)로 실행 된다선언되지 않은 변수에 값을 할당하는 등의 코드는 에러를

2022년 5월 22일
·
0개의 댓글

react 에서 debounce, throttle 이용하기

기본 개념 debounce 짧은 간격으로 연이어 호출되는 함수들 중 마지막 함수만 호출되도록 하는 것 예 검색어를 빠르게 입력하는 동안 검색 잠시 미루기 throttle 마지막 함수가 호출된 후 일정 시간이 지나기 전까지 다시 호출되지 않도록 하는 것 예 스크롤

2022년 5월 16일
·
0개의 댓글

Characteristics of JavaScript 자바스크립트의 특징

고급 언어인터프리터 언어(클라이언트의 웹 브라우저에 의해 해석되고 실행)컴파일 과정을 거치지 않는 인터프리터 언어 형태이기 때문에 비교적 자료형 조사를 철저하게 하지 않는다객체 지향형 프로그래밍과 함수형 프로그래밍을 어느정도 모두 표현할 수 있다동적 프로토타입 기반 객

2022년 5월 2일
·
0개의 댓글

Web Accessibility 웹 접근성

웹사이트에서 제공하는 정보를 차별 및 제한 없이 동등하게 이용할 수 있도록 보장하는 것고려해야할 대상장애인 및 고령자 등을 포함한 모든 사람다양한 플랫폼 및 장치, 웹 브라우저 등의 모든 환경장애인, 고령자 등을 포함한 사용자층 확대규정과 법적 요구 사항 준수다양한 환

2022년 5월 2일
·
0개의 댓글

How JavaScript Engine Works 자바스크립트 엔진 동작 방식

자바스크립트 소스코드를 기계어로 변환, 실행시켜주는 존재인터프리터와 컴파일러 혼합되어 있다single thread 싱글 스레드 프로그래밍 언어참조 타입(객체 등) 데이터가 메모리에 할당된다동적으로 할당되는 변수의 경우, 컴파일러는 얼마나 많은 메모리를 필요로 할지 알

2022년 5월 2일
·
0개의 댓글

How to Define Functions 함수를 정의하는 방법들

Function Declaration 함수 선언문Function Expression 함수 표현식Arrow Function 화살표 함수Function Constructor 함수 생성자함수 선언문이 평가되면, 함수이름으로 식별자가 암묵적으로 생성되고, 객체가 할당되기 된다

2022년 5월 2일
·
0개의 댓글

JavaScript Variables Lifecycle 자바스크립트 변수 라이프사이클

변수를 실행 컨텍스트의 Environment Record 환경 레코드에 등록한다환경 레코드에 등록된 변수를 위한 공간을 메모리에 확보한다이 단계에서 변수는 undefined로 초기화\*\*된다undefined로 초기화된 변수에 실제 값을 할당한다var 키워드로 선언된

2022년 5월 2일
·
0개의 댓글

React Virtual DOM 리액트 가상 돔

HTML 문서의 내용과 구조가 객체 모델로 만든 것HTML (혹은 XML) 문서에 접근하기 위한 일종의 인터페이스트리 형태로 되어 있어서 특정 노드를 찾거나, 수정, 제거할 수 있다DOM을 좀더 추상화시킨 자바스크립트 객체매번 실제 DOM에 접근하여 조작하는 대신에,

2022년 5월 2일
·
0개의 댓글

Website Rendering Process 웹사이트 렌더링 과정과 최적화

서버로 부터 리소스 요청, 받기Render Tree 형성DOM, CSSOM 를 결합Layout 처리Paint 처리브라우저가 HTML, CSS, Javascript, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다DOM 및 CSSOM을

2022년 5월 1일
·
0개의 댓글

react-svg 이용해서 next.js에서 svg 편하게 이용하기 (emotion, storybook)

색상을 emotion theme 를 이용해서 동적으로 지정하고 싶다사이즈를 동적으로 지정하고 싶다새로운 icon svg 파일이 추가될 때마다 해야할 작업을 최소화하고 싶다여러가지 설정이 귀찮다react-svg 을 이용하기로 했다https://www.npmjs.

2022년 4월 23일
·
0개의 댓글

요소의 크기와 박스 모델

요소의 크기와 박스 모델에 대해서 알아보자

2022년 4월 21일
·
0개의 댓글

Margin Collapse 마진 병합

margin은 상하간 둘 이상의 요소의 margin 값이 둘 중 더 큰 margin 값으로 합쳐지는 특징이 있다.위 요소의 하단 margin과 아래 요소의 상단 margin의 병합이 일어난다.최종 마진 결정 방식양수값, 양수값더 큰 값 즉, 절댓값이 가장 큰 값으로 합

2022년 4월 13일
·
0개의 댓글

Next.js 의 SSR 에서 redux 사용하기 (next-redux-wrapper)

Next.js 에서 SSR 서버사이드렌더링로 특정 페이지를 제대로 렌더링해서 클라이언트로 보내주고 싶었다.

2022년 4월 6일
·
0개의 댓글

SSG, SSR 을 통해 구현한 링크 공유 미리보기 이미지 (og image)

next.js 에서 dynamic routes 를 통해 여러 테스트에 대한 페이지를 렌더링하고자 한다이 페이지를 링크로 공유했을 때 각 테스트에 대한 미리보기 이미지를 og (open graph) 로 구현하고자 한다코드 예www.도메인.com/tests/\[testId

2022년 3월 30일
·
0개의 댓글

Cookie, Web Storage 쿠키와 웹 스토리지

브라우저에 데이터를 저장하는 Cookie, Web Storage (local storage, session storage) 에 대해 정리했습니다

2022년 3월 20일
·
0개의 댓글

Session, JWT 세션과 JWT

웹사이트에서 사용자 인증을 위해 사용되는 Session, JWT 에 대해 정리했습니다

2022년 3월 20일
·
0개의 댓글

브라우저에 웹사이트 주소 입력했을 때 일어나는 일

유저가 브라우저에 웹사이트 주소 입력하고 웹사이트가 눈에 보여질 때까지의 과정을 요약했습니다

2022년 3월 20일
·
0개의 댓글
post-thumbnail

Next.js 에서 Markdown 에디터 이용하기

현재 블로그를 직접 구현하는 개인 프로젝트를 진행 중이다. 그런데 생각보다 markdown editor 를 이용하는게 단순하지 않아서 내가 구현한 코드를 여기 적어두고자 한다. 라이브러리 선정 마크다운 에디터 라이브러리 후보 https://www.npmjs.com/p

2022년 3월 16일
·
0개의 댓글

DOM Event Phase & Event Delegation 이벤트 단계와 이벤트 위임

DOM Event Phase & Event Delegation 이벤트 단계와 이벤트 위임

2022년 3월 6일
·
0개의 댓글