나만의 개발 공간

Cookie 쿠키는 사이트를 방문하고 이용할 때 브라우저에 저장되는 내용들입니다. 쿠키를 이용해서 서버는 브라우저에 데이터를 넣을 수 있다. 브라우저에 대한 것을 기억하기 위해 사이트에 방문하면 브라우저는 서버에 요청을 합니다. 즉, 브라우저는 내 컴퓨터에 있으니까 내가 가지고 있는 정보입니다. Browser에서 Server로 request Server에서 Browser로 response response에는 모든 데이터와 본인이 찾던 페이지 정보가 있을텐데 브라우저에 저장하고자 하는 쿠키가 있을 수 있습니다. 본인이 브라우저에 쿠키를 저장한 후 해당 웹사이트에 방문할 때마다 브라우저는 해당 쿠키도 request와 함께 보냅니다. 쿠키는 도메인에 따라 제한이 됩니다. 유튜브가 준 쿠키는 유튜브에만 보내지게..

async & await async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와주고, javascript에서 비동기를 처리를 할 때 promise를 더욱 쉽게 사용할 수 있게 해주는 문법입니다. async & await 예제 1. 기본 예제 function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } // async / await 문법을 사용할 때는 함수 앞에 async를 붙여주면 됨 async function process() { console.log('안녕하세요!'); awa..

비동기 처리 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다. 동시에 여러가지 작업을 처리할 수 있고 기다리는 과정에서 다른 함수를 호출할수도 있습니다. 사용 예시) ⇒ Ajax Web API 요청 ⇒ 파일 읽기 ⇒ 암호화/복호화 ⇒ 작업 예약 동기 처리 자바스크립트의 동기처리란 우선순위 작업이 끝날 때까지 기다리는동안 준비상태가 되기 때문에 다른 작업을 할수가 없습니다. 동기 예시 // 동기 function work1() { const start = Date.now(); // Data.now() : 현재 날짜를 숫자 형태로 표시해주는 javascript 내장 함수 for(let i=0; i 동기처리는 순서..

Promise란?? 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다. ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스(Promise)를 도입했다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점으 명확하게 표현할 수 있다. 콜백 패턴의 단점 2.1 콜백 헬 동기식 처리 모델(Synchronous processing model)은 직렬적으로 태스크(task)를 수행한다. 즉, 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 태스크는 대기하게 된다. 예를 들어 서버에서 데이터를 가져..

.pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환합니다. let array = [1, 2, 3, 4]; // 배열 생성 array.pop(); // 배열의 마지막 값 제거 console.log(array); // [1, 2, 3] 출력 .push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다. let array = [1, 2, 3, 4, 5]; // 배열 생성 array.push(6); // 배열 마지막 부분에 6을 추가로 삽입 console.log(array); // [1, 2, 3, 4, 5, 6] 출력 .map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. let array =..

baseURL 하위 경로를 사용해서 언어별 라우트가 구현! localhost:3000 기본언어 localhost:3000/en 영어 localhost:3000/sv 스페인어 localhost:3000/zh-CN 중국어 패키지 설치 npm i next-i18next 구성 파일 프로젝트 루트 디렉토리에 next.config.js 와 next-i18next.config.js 파일을 추가합니다. next.config.js 파일과 next-i18next.config.js 파일은 루트에서 작성되어야합니다. 파일이름은 지정된 파일명을 사용해야 진행에 문제되지 않는다. next-config.js 파일 자세한 내용은 next.js Internationalized routing 페이지에서 찾을 수 있다. next-i18n..