웹 개발 썸네일형 리스트형 zustand(쥬스탠드)로 사용으로 전역상태 관리하기 (사용법) https://zustand-demo.pmnd.rs/ Zustand zustand-demo.pmnd.rs 프론트엔드에서 자주사용 하는 전역상태를 관리하는 라이브러리가 몇 개 있다 대표적으로 Redux, recoil, zustand 세 가지가 있는데 그중 현재 내가 자주 사용하고 있는 zustand의 사용법이다 먼저 zustand는 store란 개념이 있는데 쉽게말해 store에 내가 사용하는 상태와 상태를 조작할 수 있는 함수를 넣고 필요한 컴포넌트에서 사용하는 방식이다 zustand의 장점을 말해보자면 1. 불필요한 상태변화에 따른 렌더링을 최소화 한다 (속도 개선) 2. 쉽다!! root 경로여도 되고 next.js라면 page경로여도 상관없다 Store set을 관리할 store 폴더를 만들어주고 .. 더보기 교차 출처 리소스 공유(CORS) 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다. 출처란? 웹 콘텐츠의 출처(origin)는 접근할 때 사용하는 URL의 스킴(프로토콜), 호스트(도메인), 포트로 정의 됩니다. 두 객체의 스킴, 호스트, 포트가 모두 일치하는 경우 같은 출처를 가졌다고 말합니다. 일부 작업은 동일 출처 콘텐츠로 제한되나, CORS를 통해 제한을 해제할 수 있습니다. CORS 정책은 우리가 가져오는 리소.. 더보기 Javascript 호이스팅에 대해 알고 계신가요? 호이스팅은 코드가 실행하기 전 변수선언 / 함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다. 자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정(실행 컨텍스트를 위한 과정)을 거친다 자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한 과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록한다 코드 실행 전 이미 변수선언 / 함수선언이 저장되어 있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작한다. (정확히는 var 키워드로 선언한 변수와 함수 선언문일 경우 오류 없이 동작한다. 이는 선언이 파일의 맨 위로 끌어올려진 것 처럼 보이게 한다.) *실행 컨텍스트는 실행 가능한 코드가 실행되기.. 더보기 실행 컨텍스트에 대해 알고 계시나요? 실행 컨텍스트에 대해 조금이라도 이해 하고자 한다 단번에 알 수 있는 개념은 아니기에 조금씩 알아가게 되는 부분을 추가 하도록 한다 실행 컨텍스트 실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다 실행 컨텍스트를 바로 이해하지 못하면 코드 독해가 어려워지며 디버깅도 매우 곤란해 질 것이다 실행 컨텍스트를 ECMAScript 스펙에 따르면 이렇게 정의하고 있다 "실행 가능한 코드를 형상화하고 구분하는 추상적인 개념" 쉽게 말하자면 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경이라고 말할 수 있겠다 여기서 말하는 실행 가능한 코드는 아래와 같다 전역 코드 : 전역 영.. 더보기 싱글 스레드와 멀티 스레드의 장점과 단점 싱글 스레드의 장점과 단점, 멀티스레드의 장점과 단점을 알고 이해한다 스레드란? 위키백과의 나와있는 정의를 살펴보자면 스레드란 프로세스 내에서 실행되는 흐름의 단위다 일반적으로 한 프로그램은 하나의 스레드를 가지고 있지만, 프로그램 환경에 따라 둘 이상의 스레드를 동시에 실행할 수 있다 하나의 스레드 방식은 싱글 스레드 방식, 둘 이상의 스레드 방식은 멀티 스레드 방식이라고 한다 두 개 이상의 멀티 스레드 방식으로 사용하는 게 여러 측면에서 빠르고 좋지 않을까라고 생각 하지만 꼭 그렇지만은 않다 각각 적합한 상황에 맞는 스레드 방식을 사용해야 효율적인 스레드 사용이라고 할 수 있다 싱글 스레드와 멀티 스레드의 장점과 단점을 알아보자 싱글 스레드의 장점 1. 자원 접근에 대한 동기화를 신경 쓰지 않아도 된.. 더보기 동기와 비동기 프로그래밍을 알고 계시나요? 동기 프로그래밍과 비동기 프로그래밍은 자바스크립트를 이해할 때 중요하고 자주 언급되는 부분이다 이번 글을 통해 동기와 비동기에 대해 꼭 이해 하도록 노력한다 동기 프로그래밍 동기 프로그래밍이란 브라우저는 실질적으로 프로그램을 작성한 순서대로 한 줄씩 실행한다 또한 브라우저는 한 줄씩 실행하고 처리하는 동안 다음 줄로 넘어가기 전까지 현재 라인의 작업이 끝날 때까지 기다린다 아래 예제는 동기 프로그래밍의 예시를 코드로 나타낸 MDN의 자료를 변형시켜 작성해 보았다 코드의 순서를 보자면 1. name이라는 문자열을 선언한다 2. name을 사용하여 greeting이란 또 다른 문자열을 선언한다 3. greeting을 Javascript 콘솔에 출력합니다 이건 동기 프로그래밍이다 동기 방식은 서버에서 요청을 .. 더보기 쿠키와 세션에 대해 알고 계시나요? 오늘은 쿠키와 세션에 대해 공부를 해볼까 한다 이 글을 정독하고 나면 쿠키와 세션에 대해 전부는 아니더라도 어느 정도 흐름은 파악할 수 있다고 생각한다 기록을 위해 작성하는 글 이니 틀린 부분이 있으면 피드백은 언제나 환영입니다 쿠키와 세션을 알기 위해 HTTP의 특성을 알고 있어야 한다 HTTP의 특성 HTTP 통신의 특징은 비연결 지향(Connectionless)과 상태정보유지안함(stateless)이다 클라이언트가 서버에 요청을 하고 그것을 응답받는 형식이다 클라이언트가 서버에 요청을 하고 응답받으면 그 후 접속을 끊는 특성이 있다 그렇게 되면 일어날 수 있는 대표적인 문제점 사용자가 페이지를 새로고침 할 때마다 로그인을 다시 해야 할 수 있다 또한 사용자가 쇼핑몰에서 제품을 구매하려고 장바구니에 .. 더보기 Get과 Post의 차이를 알고 계신가요? 이 글을 읽고 나면 get과 post가 무엇인지 그 둘의 차이는 어떤 것 인지 알 수 있다 아주아주 자세한 글은 아니더라도 초등학생도 이해할 수 있도록 친절하게 설명하도록 노력하겠다 작성자인 내가 이해한 것을 토대로 작성되는 글이 다 보니 정확하지 않을 수 있다 피드백을 주시면 바로바로 수정하겠다 우선 이 글을 읽기 전 http가 어떤 것 인지 모른다면 http를 간단하게 알고 오는 것을 추천한다 https://rec8730.tistory.com/102?category=1025968 HTTP를 알고 계신가요? 시작 전 혼자 공부해야 할 시기가 오면서 웹 개발 기본 지식에 관한 게 너무 부족하다고 느꼈다 공부하면서 바로 바로 기록을 하기는 하는데 막상 다른 걸 하고 있다 보면 자주 보게 되진 않는다 rec.. 더보기 이전 1 2 다음
