상태관리 라이브러리의 필요성 Redux와 같은 상태관리 라이브러리는 전역 상태 저장소를 제공해줍니다. 기존의 React에서는 자식 컴포넌트에 props를 내려줘서 상태를 전달해줬습니다. 이 경우에는 해당 상태를 사용하지 않는 컴포넌트들도 오로지 상태를 전달해주기 위해서props를 받아야 했고, 이를 props drilling이라고 합니다. 상태 관리 라이브러리는 전역 상태 저장소를 제공해줌으로써 이 props drilling 문제를 해결해줍니다. 전역 상태 저장소가 있다면 props를 내려줄 필요없이 바로 이 저장소에 접근해서 필요한 상태 를 가져다 사용하면 되기 때문입니다. Redux의 주요 개념들과 연결 관계 Redux의 주요 개념으로는 Action, Dispatch, Reducer, Store가 있..

Semantic Elements? 시맨틱 요소는 브라우저와 개발자 모두에게 그 의미를 명확하게 설명한다. 비의미적 요소 의 예 : 및 - 내용에 대해 아무 것도 알려주지 않는다. 의미론적 요소 의 예 : , 및 - 내용을 명확하게 정의한다. Semantic Elements in HTML 많은 웹 사이트에는 탐색, 머리글 및 바닥글을 나타내는 와 같은 HTML 코드가 포함되어 있습니다. HTML에는 웹 페이지의 다른 부분을 정의하는 데 사용할 수 있는 몇 가지 시맨틱 요소가 있습니다. 1. 기계와 사람의 일치 Semantic 하게 마크업을 한다는 것은 적절한 의미의 태그들을 사용하여 문서를 정보 구조에 맞게 마크업한다는 것이다. 좋은 정보구조는 해당 문서를 사람과 기계가 동일하게 이해하도록 도와준다. 사람..

State와 Props state는 컴포넌트 자기 자신이 가지고 있는 값이다. 변화가 필요할 경우 setState()함수를 통해 값을 변경해줄 수 있다. const 배열 = useState (데이터 초기값); 배열[0]: 데이터 초기값이 들어간 변수 배열[1]: 데이터를 수정할 수 있는 Set 함수 const [변수명, Set함수명] = useState (데이터 초기값); useState를 사용하여 할당받은 변수는 불변값(Immutable)이다. 따라서 해당 값은 직접 수정이 불가능하며 해당 값을 변경하기 위해서는 반드시 Set 함수를 사용한다. const App = () => { const [count, setCount] = useState(0); return setCount(count + 1)}>+ ..

순수함수란? 사이드 이펙트가 없어야 합니다. 몇번을 호출해도 반환 값이 동일해야 합니다. 전역변수를 건들거나, DOM 을 편집하거나, console.log 처럼 로그를 찍거나, new Date() 와 같이 시간에 의존해서도 안됩니다. 현대 프로그래밍에서 불변성(immutability)이 주목받으며 함께 부각된 개념 중 하나입니다. 순수함수의 장점 유닛테스트에 용이합니다. 외부 환경에 의존하지 않기 때문에 코드를 테스트하기 굉장히 쉬워집니다. 신뢰할 수 있습니다. 실행 시점이나 실행 컨텍스트에 따라서 결과가 변경되지 않기 때문에 신뢰할 수 있습니다. SRP(Single Responsibility Principal) 를 지키기 쉽습니다. 함수를 순수하게 구성하다보면, 함수가 짧게 작성되고 하나의 역할만할 확..

쿠키는 브라우저에 저장되는 작은 크기의 문자열로, RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부입니다. 쿠키는 주로 웹 서버에 의해 만들어집니다. 서버가 HTTP 응답 헤더(header)의 Set-Cookie에 내용을 넣어 전달하면, 브라우저는 이 내용을 자체적으로 브라우저에 저장합니다. 이게 바로 쿠키입니다. 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버(사이트)에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달합니다. 쿠키는 클라이언트 식별과 같은 인증에 가장 많이 쓰입니다. 사용자가 로그인하면 서버는 HTTP 응답 헤더의 Set-Cookie에 담긴 “세션 식별자(session identifier)” 정보를 사용해 쿠키를 설정합니다. 사용자가 동일 도메인에 접속..

useRef () 는 리렌더링하지 않는다. 컴포넌트의 속성만 조회&수정한다. 특정 DOM 선택하기 컴포넌트 안의 변수 만들기 리렌더링 방지하기 1. useRef 가 무엇인가요? 📑 useRef는 .current프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. 본질적으로 useRef는 .current프로퍼티에 변경 가능한 값을 담고 있는 상자와 같습니다. 2. useRef 를 언제 사용하나요? 2-1. 특정 DOM 선택하기 🎯 사진 출처: learnjavascriptfast.com JavaScript 를 사용할 때는, 특정 DOM 을 선택해야 하는 상황에 getElementById, querySel..

const 키워드 선언은 블록 범위로 상수를 선언한다. 상수 값은 재할당 할 수 없으며 다시 선언할 수도 없다. const cars = ['BMW', 'Benz', 'Volvo']; cars = ['Audi', 'Tesla', 'Kia']; // 재할당 // Uncaught TypeError: Assignment to constant variable. const로 선언된 상수는 재할당 및 재선언할 수 없다. 따라서 const로 선언한 배열 또한 재할당 및 재선언될 수 업새다. const로 선언된 배열에 값을 재할당하려고 하면 위와 같이 에러가 난다. 에러 메세지에는 변경할 수 없는 값을 수정하려고 할 때 발생하는 TypeError가 뜨며, '상수에 할당을 했습니다.'고 나온다. const cars = [..

require / exports 와 import / export 키워드 자바스크립트 개발을 하다보면 모듈을 불러오는 문법 두가지를 접하게 된다. 이 둘은 비슷하며내서도 달라서 혼돌을 줄 수 있다. 둘 다 외부의 파일이나 라이브러리의 코드를 불러온다는 같은 목적을 가지고 있지만, 전혀 다른 문법 구조를 가지고 있다. require / exports : Node.js에서 사용되고 있는 CommonJS 키워드이고 Ruby 언어 스카일과 비슷하다고 할 수 있다. /* CommonJS */ const name = require('./module.js'); /* CommonJS */ const name = '고양이'; module.exports = name; import / export : ES6에서 새롭게 도입된..

브라우저 저장소 웹 스토리지 : 웹 데이터를 클라이언트에 저장하기 위해 만들어진 키-밸류 형식의 저장소 쿠키 : 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 키-밸류 형식의 저장소 | 웹 스토리지 로컬 스토리지 세션 스토리지 데이터 유지 브라우저 종료시 보관 브라우저 종료시 삭제 데이터 범위 동일한 도메인 전역 공유 브라우저간 공유 안됨 로컬 스토리지와 세션 스토리지의 차이점은 영구성과 범위에 있다. * 도메인이 같더라도 브라우저가 다르면(탭 브라우저, 다른 브라우저) 브라우저 컨택스트가 다르기 때문에 각각의 세션 스토리지가 형성되어 데이터 공유가 되지 않는다 | 쿠키 우리가 HTTP 요청을 보낼때 서버에 특정 요청을 보내면 서버는 요청 자체만으로는 이 요청이 누가 보낸 것인지 알 수 없..

this 사용 규칙 JavaScript에서 가장 난해하게 쓰이는 곳 마다 바뀌는 this 이다. | this 는 4가지 규칙으로 쓰이고 그 공식을 바탕으로 정해진 결과를 가져온다. 함수안에서 this를 쓰면 함수의 내용만으로는 this가 어떤 값을 가져오는 지 알 수 없다. 함수가 어떤 방식으로 실행하느냐에 따라 this 결정된다. 1. 일반 함수 실행 방식 아래 있는 strict mode가 아닌 이상 무조건 글로벌 객체를 가리킵니다. var age = 1; // global object function foo() { console.log(this.age); //this === global object : 브라우저에서는 window를 가리킨다. } foo(); // 1 (글로벌 객체 실행) new foo..

Position 속성 4가지 static relative fixed absolute 1. Static 따로 정하지 않아도 모든 박스(태그)들은 position:static으로 지정되어있다. 태그를 작성한 순서대로, 위에서 아래로~ 왼쪽에서 오른쪽으로~ 배치되는 특징이 있다. 2. Relative 현재위치(static)를 기준으로 좌표속성을 사용하여 위치를 이동시킨다.(top, bottom, left, right) 좌표속성(offset) top : 10px 위에서부터 10px 만큼 아래로이동 left : 10px 왼쪽에서부터 10px 만큼 오른쪽으로 이동 bottom : 10px 아래에서부터 10px 만큼 위로이동 right : 10px 오른쪽에서부터 10px 만큼 왼쪽으로 이동 3. Fixed 브라우저의..

※ HTTP 와 HTTPS 의 개념과 차이점 HTTP란? HTTP(Hyper Text Transfer Protocol)란 서버/클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜이다. 즉, HTTP는 인터넷에서 하이퍼텍스트를 교환하기 위한 통신 규약으로, 80번 포트를 사용하고 있다. 따라서 HTTP 서버가 80번 포트에서 요청을 기다리고 있으며, 클라이언트는 80번 포트로 요청을 보내게 된다. HTTP는 1989년 팀 버너스 리(Tim Berners Lee)에 의해 처음 설계되었으며, WWW(World-Wide-Web) 기반에서 세계적인 정보를 공유하는데 큰 역할을 하였다. HTTP는 암호화가 되지 않은 평문 데이터를 전송하는 프로토콜이였기 때문에, HTTP로 비밀번호나 주민등록번호 등을 주고 받..