본문 바로가기

Front-end64

REACT 컴포넌트 생명 주기 Component Life Cycle ❗ Component Life Cycle을 공부하게 된 계기 리액트를 파다보니 마운트, 언마운트, 업데이트 등 한번에 와닿지 않는 개념들이 많더라. 그래서 정리하기로 결심했다 ! 📌 리액트의 Component Life Cycle 리액트는 UI 중심의 컴포넌트 기반 개발 언어이다. 컴포넌트로 시작해 컴포넌트로 끝낸다고 해도 과언이 아니다. 때문에 리액트에는 컴포넌트 관리 방법과 과정을 명시한 "Component Life Cycle"이 존재한다. 컴포넌트 렌더링 직전 or 직후 또는 컴포넌트 업데이트 전 or 후에 처리해야하는 작업들을 순서에 맞춰 실행시킬 수 있다. 📍 Rendering // HTML // // React DOM은 이 안에 들어가는 모든 엘리먼트들을 "관리"한다. // 는 root DOM .. 2021. 10. 1.
CSS 반응형 브라우저의 텍스트 크기 조절 (-webkit-)text-size-adjust 📌 text-size-adjust 아이폰의 경우 viewport가 변경되면 자동으로 텍스트 크기를 자동으로 조정한다. 이처럼 디바이스의 상태가 변경되었을 때 원치 않는 결과가 렌더링될 수 있기 때문에 이를 방지할 수 있는 장치가 필요하다. 그 장치 중 하나가 바로 text-size-adjust 이다. text-size-adjust: none; 기본값. 텍스트의 크기를 자동으로 조절하지 못하게 한다. text-size-adjust: auto; 화면의 폭에 맞게 텍스트의 크기를 자동으로 조절한다. text-size-adjust: 100%; 폰트 크기를 명시적으로 지정해준다. 모든 디바이스에서 동일한 output을 낼 수 있다. text-size-adjust: inherit; 부모 요소의 속성값을 상속받아 적.. 2021. 9. 30.
Redux Action과 Reducer와 Store의 관계성 📌 파일 구조 📌 actions/index.js // action types export const ADD_TO_CART = "ADD_TO_CART"; export const REMOVE_FROM_CART = "REMOVE_FROM_CART"; // actions creator functions export const addToCart = (itemId) => { return { type: ADD_TO_CART, payload: { quantity: 1, itemId } } } export const removeFromCart = (itemId) => { return { type: REMOVE_FROM_CART, payload: { itemId } } } reducer 함수에 인자로 전해주고싶은 acti.. 2021. 9. 28.
자바스크립트 정규표현식 RegExp 📌 정규 표현식 ? 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어formal language이다. 자바스크립트의 고유 문법은 아니다. 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다. 정규표현식은 문자열을 대상으로 패턴 매칭 기능을 제공하기 때문에 반복문이나 조건문을 사용하지 않고도 간단히 체크할 수 있다. 다만, 여러가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지 않다. ^!^ 📌 정규 표현식 생성 ◾ 정규 표현식 리터럴 const target = 'Is this all there is?'; // 패턴: is // 플래그: i => 대소문자를 구분하지 않고 검색한다. const regexp = /is/i; // test 메서드 // target 문자열에 대해 정규 표현.. 2021. 9. 27.
CSS overflow 속성 📌 overflow 콘텐츠가 너무 커서 element의 Block Format Context를 맞출 수 없을 때의 처리법을 지정한다. 필요한 속성 (택 1) 📍 블록 레벨 컨테이너의 높이 (height / max-height) 📍 white-space: nowrap (※ white-space 속성은 element가 공백 문자를 처리하는 방식을 나타낸다.) ◾ overflow : visible; See the Pen by ciocio97 (@ciocio97) on CodePen. 기본값 / 콘텐츠를 자르지 않는다. ◾ overflow : hidden; See the Pen by ciocio97 (@ciocio97) on CodePen. 해당 element의 크기(정해진 크기)에 맞춰 컨텐츠를 과감히 잘라버.. 2021. 9. 26.
자바스크립트 네이티브 객체와 호스트 객체 Native Object & Host Object 📌 자바스크립트 객체의 분류 (3) 자바스크립트 객체는 크게 네이티브 객체, 호스트 객체, 사용자 정의 객체 이렇게 3가지로 분류할 수 있다. 📌 네이티브 객체 Native Objects / Built-in Objects / Global Objects 란 ? ECMAScript(자바스크립트 언어 규약) 명세에 정의된 객체를 말한다. 애플리케이션의 환경과 관계 없이 언제나 사용할 수 있다. 애플리케이션 전역의 공통의 기능을 제공한다. ex. Object, String, Number, Function, Array, RegExp, Date, Math 📍 네이티브 객체(Global Objects)와 전역 객체(Global Object)는 다르다. 전역 객체는 모든 객체의 최상위 객체를 의미한다. ex. 브라우저.. 2021. 9. 22.
자바스크립트 프로미스와 비동기 처리 Promise & Asynchronous 프로미스를 이해하기 위해서는 자바스크립트가 자료를 어떻게 비동기적으로 받아오는 지, 해당 원리를 이해할 필요가 있다. 2021.09.18 - [개발 공부/Browser] - Event Loop & Task queue 이벤트 루프와 태스크 큐 Event Loop & Task queue 이벤트 루프와 태스크 큐 📌 브라우저 환경 📍 자바스크립트 엔진 (싱글 스레드) 대부분의 자바스크립트 엔진은 크게 2가지 영역으로 구분할 수 있다. ✔ 콜 스택 call stack (실행 컨텍스트 스택) 소스코드 평가 과정에서 code-designer.tistory.com 📌 프로미스 등장 배경 2021.09.20 - [개발 공부/JS] - 자바스크립트 콜백 함수와 비동기 처리 Call back func & Asynchron.. 2021. 9. 21.
자바스크립트 콜백 함수와 비동기 처리 Call back func & Asynchronous 콜백 함수를 이해하기 위해서는 자바스크립트가 자료를 어떻게 비동기적으로 받아오는 지, 해당 원리를 이해할 필요가 있다. 2021.09.18 - [개발 공부/Browser] - Event Loop & Task queue 이벤트 루프와 태스크 큐 Event Loop & Task queue 이벤트 루프와 태스크 큐 📌 브라우저 환경 📍 자바스크립트 엔진 (싱글 스레드) 대부분의 자바스크립트 엔진은 크게 2가지 영역으로 구분할 수 있다. ✔ 콜 스택 call stack (실행 컨텍스트 스택) 소스코드 평가 과정에서 code-designer.tistory.com 📌 비동기 함수에 콜백 함수가 필요했던 이유 // 여기서 흔히 말하는 callback 함수는 successCallback & failureCallback.. 2021. 9. 20.
Event Loop & Task queue 이벤트 루프와 태스크 큐 비동기 프로그래밍 공부 전에 자바스크립트 코드 동작 원리인 실행 컨텍스트 개념부터 잡고 들어가면 좋겠다. 자바스크립트 실행 컨텍스트 Execution Context 뜯어 보기 📌 실행 컨텍스트 공부해야하는 이유 실행 컨텍스트는 자바스크립트 동작 원리를 담고 있는 핵심 개념이다 ⭐⭐⭐ ✔ 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩 된 값을 관 code-designer.tistory.com 📌 브라우저 환경 📍 자바스크립트 엔진 (싱글 스레드) 대부분의 자바스크립트 엔진은 크게 2가지 영역으로 구분할 수 있다. ✔ 콜 스택 call stack (실행 컨텍스트 스택) 소스코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료구조이다. === 실행 컨텍스트 스택 자바스크립트 엔진은.. 2021. 9. 18.

티스토리툴바