본문 바로가기

Front-end66

브라우저와 Node JS : 데이터를 가져올 수 있는 다양한 방법들 (추가중) 📍 클라이언트 단의 API 호출을 도와주는 Node.js 라이브러리 ✔ request ✔ axios ✔ jQuery 📍 클라이언트 단의 API 호출을 도와주는 브라우저 내장 객체 or 함수 ✔ XMLHttpRequest - 객체 ✔ fetch( ) - 함수 📌 XMLHttpRequest 특징 ◾ XML뿐만 아니라 모든 종류의 데이터를 받아올 수 있다. ◾ 오래된 브라우저를 지원하기 위해 아직까지도 쓴다. ◾ fetch가 아직 처리하지 못하는 일들을 위해 쓰인다. ( ex. 업로드 진행 상황 추적하기 ) ◾ 데이터를 동기적으로 불러올 수도 있고, 비동기적으로 불러올 수도 있다. 📌 XMLHttpRequest 사용법 📎 문법 // request를 요청하기 위해서는 3가지 단계가 필요하다. // 01 XMLH.. 2021. 10. 20.
변수, 함수, 클래스 호이스팅 정리 📌 선언하는 모든 식별자는 호이스팅 된다 변수 선언문 (var, let, const), 함수 선언문 (function, function*), 클래스 선언문 (class) 은 모두 호이스팅이 일어난다. 📍 변수 ✔ var // var 키워드로 선언한 변수는 [1.선언 단계] & [2.초기화 단계]가 동시에 실행된다. // 따라서 변수 선언문 이전에 변수를 참조할 수 있다. console.log(VAR); // undefined var VAR; console.log(VAR); // undefined // 할당문에서 [3.할당 단계]가 실행된다. VAR = "var"; console.log(VAR); // "var" ✔ const ❗ const 키워드로 선언한 상수는 반드시 선언과 동시에 초기화 해야한다.❗ .. 2021. 10. 5.
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.

티스토리툴바