본문 바로가기

Front-end64

22.02.14 면접 Q & A 📌 원시 자료형과 참조 자료형의 차이 말해보기 원시 자료형은 (할당 후에) 변경 불가능한 데이터 타입이고, 참조 자료형은 (할당 후에) 변경 가능한 데이터 타입이다. 원시 자료형은 메모리에 저장될 때 값 그 자체가 저장되지만, 참조 자료형은 값의 참조 값, 즉 값의 주소가 저장되는 차이가 있습니다. 📍 과거 학습 내용 복습 2021.08.12 - [Front-end/JS] - 자바스크립트 원시 타입 & 객체 타입 Primitive type & Reference type 자바스크립트 원시 타입 & 객체 타입 Primitive type & Reference type 📌 원시 타입? 객체 타입? 자바스크립트가 제공하는 7가지 데이터 타입들을 크게 원시 타입primitive type과 객체 타입object/re.. 2022. 2. 14.
22.02.13 면접 Q & A 📌 자바스크립트의 자료형[data type]이 필요한 이유 말해보기 모든 언어가 다 그렇지만, 원하는 값을 메모리에 저장하고 읽고, 사용하게 된다. 메모리에 값을 저장하기 위해선 저장되는 데이터의 크기를 알아야한다. 저장하기 위한 공간을 확보해야하기 때문이다. 데이터의 크기를 알 수 있게 하는 지표가 데이터 타입이다. -> 그래서 데이터 타입이 중요하다. 📌 자바스크립트의 자료형[data type]에 대해 말해보기 자바스크립트의 모든 값은 데이터 타입을 갖는다. 1. 숫자 타입 [number] | 모든 수를 64비트 실수 처리. 2. 문자열 타입 [string] | 16비트 유니코드 문자로 표현. 3. 불리언 타입 [boolean] | True / False 4. undefined 타입 [undefine.. 2022. 2. 13.
Cookie 와 Cookie options (Set-Cookie) 📌 Cookie ? 서버에서 클라이언트에 data 를 저장할 수 있는 방법 중 하나로, 작은 크기의 문자열을 말한다. 서버에서 클라이언트에 cookie 를 전송할 수도 있고, 클라이언트에서 서버로 cookie 를 전송할 수도 있다. -> cookie 를 이용해 데이터를 저장하고, 원할 때 불러와 다시 사용할 수 있다. ◾ Cookie 형식 = 쿠키는 name=value 쌍으로 정보를 저장한다. 📌 Cookie Options ? 서버가 클라이언트에 cookie 로 데이터를 저장하는 건 맘대로 할 수 있지만 역으로 클라이언트에서 서버로 다시 불러오는 건, 지정된 조건을 만족할 때만 가능하다. cookie에 데이터를 저장하면서 원하는 조건을 지정해줄 수 있다 ( 조건 설정은 option임 ). ✔ Expire.. 2021. 11. 23.
Redux 3가지 원칙 정리 📍 The truth comes from one source App의 모든 상태는 하나의 저장소에 객체 트리 구조로 저장된다. console.log(store.getState()); /* * { * visibilityFilter: 'SHOW_ALL', * todos: [{ * text: 'Consider using Redux', * completed: true, * }, { *text: 'Keep all state in a single tree', * completed: false * }] * } */ 📍 State is read-only 상태 변경은, 액션 객체(어떤 상태 변화가 일어나야하는 지 기술된 객체)를 통해서만 일어난다. store.dispatch(action: Object) store.dis.. 2021. 11. 4.
Preflight Request : HTTP Message 를 통한 header 공부 📍 HTTP message 를 살펴보기 전, Method 와 Header 그리고 CORS 정책을 짚고 넘어가면 좋다. 2021.09.10 - [개발 공부/Browser] - Client - Server : SOP와 CORS Client - Server : SOP와 CORS 📌 SOP? (Same Origin Policy) 동일 출처 정책으로, 하나의 Origin에서 로드된 문서나 스크립트가 다른 Origin의 자원과 상호작용하지 못하도록 제한하는 것. 여기서 말하는 Origin은 아래 3가지 요소를 조합 code-designer.tistory.com 📌 Preflight Request ◾ HTTP Request : Preflight ✔ Access-Control-Request-Method : Access.. 2021. 10. 27.
직접 서버를 만들면서 배운 Location Header ✔ Location : Location Response header는 "re-direct" 할 url을 명시한다. 3XX(redirection) 이나 201(created) 상태 코드가 응답되었을 때만 적용할 수 있다. 3XX 상태코드가 반환되었을 때, 기존 url에 Location에 명시된 url을 붙여 완성된 새로운 URL에 request를 보낸다 ! (fetch 요청) 📎 303 See Other 상태 코드 언제나 GET 메서드를 사용해 re-direct fetch 요청을 보낸다. (기존의 original 메서드 무시) PUT 이나 POST 메서드가 요청된 이후에 변경된 상황을 "읽고싶을 때" 주로 사용한다. 📎 307 Temporary Redirect 상태 코드 기존의 original 메서드를 변.. 2021. 10. 26.
Simple Request : HTTP Message 를 통한 header 공부 📍 HTTP message 를 살펴보기 전, Method와 Header 그리고 CORS 정책을 짚고 넘어가면 좋다. 2021.09.10 - [개발 공부/Browser] - Client - Server : SOP와 CORS Client - Server : SOP와 CORS 📌 SOP? (Same Origin Policy) 동일 출처 정책으로, 하나의 Origin에서 로드된 문서나 스크립트가 다른 Origin의 자원과 상호작용하지 못하도록 제한하는 것. 여기서 말하는 Origin은 아래 3가지 요소를 조합 code-designer.tistory.com 📌 Simple Request ◾ HTTP Request ✔ Host : : (optional) Host Request header 는 서버의 도메인명과 서버.. 2021. 10. 22.
브라우저와 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.