프도

브라우저 저장소(Web Storage)는 HTML5부터 추가된 저장소로 쿠키(cookie)와 비슷한 기능이다. 쿠키(Cookie) 개발자가 아니어도 브라우저를 사용하다보면 쿠키라는 용어에 대해 쉽게 목격한 적이 있을 것이다. 쿠키란 웹사이트에 의해 유저의 정보를 저장하는 것이다. 서버와 데이터를 공유하는 용도로 사용되며 데이터의 유효기간을 지정이 가능하다. (ex: 1시간 뒤, 하루 뒤) 장점으로는 대부분의 브라우저가 지원을 한다는 점이지만 단점으로는 4kb 데이터 저장 제한으로 사이즈가 매우작고 서버에 매 HTTP 요청으로 데이터 전달 낭비가 발생한다는 점이다. 팝업창 다시 보지 않음 기능에 사용된다. 로컬 스토리지(Local Storage) 가볍지만 기능이 많지 않고 단순히 key(키):value(값..

누군가 나에게 Next.js를 쓰는 이유를 물어본다면, 가장 먼저 SSR 때문이라고 대답할 것 같다. Next.js 공식 홈페이지에서도 가장 먼저 강조하고 있는 것이 'hybrid static & server rendering'인 것처럼 말이다. 하지만 정확히 어떠한 과정을 거쳐 렌더링이 되는지 몰라서 찾아보았다. Next.js의 Pre-rendering React는 CSR(Client-side Rendering)로, 처음에 브라우저가 빈 HTML을 파일을 받아 아무것도 보여주지 않다가, 사용자의 기기에서 렌더링이 진행되어 한 번에 화면을 보여준다. https://nextjs.org/learn/foundations/how-nextjs-works/rendering 반면, Next.js는 모든 페이지를 미리..

먼저 CodeBuild 콘솔을 이용해서 로그를 확인하는 실습을 진행합니다. 사이드바에 프로젝트 빌드 탭을 클릭한 뒤, 파이프라인을 구축하며 생성한 빌드 프로젝트를 클릭합니다. 실패한 빌드 실행 기록을 클릭합니다. 빌드 로그를 보시면, buildspec.yml에 작성된 명령어가 실제로 정상적으로 작동하는지, 빌드 과정의 라이프 사이클이 어떻게 흘러가는지, 정확히 어떤 오류가 발생했는지 확인 가능합니다. 테일 로그 기능은 어떤 역할을 할까요? 클릭해서 확인해 봅시다. 테일 로그 버튼을 클릭하시면 빌드 로그의 끝부분에 해당하는 로그 기록을 보여줍니다. 오류나 핵심적인 내용은 로그 파일의 끝부분에 위치하는 경우가 많기 때문에, 테일 로그를 이용하면 원하는 정보를 빨리 찾을 수 있습니다. 2.CloudWatch를..

실습의 첫 번째 단계로 codeBuild 서비스를 이용하는데 필요한 buildspec.yml 파일을 생성하겠습니다. 로컬 환경에 저장되어 있는 소스 코드에 접근합니다. 소스 코드의 최상위 디렉토리에 buildspec.yml 파일을 생성한 뒤, 슬라이드 아래 참조 자료 부분에 'buildspec.yml'을 참조하여 파일 안의 내용을 채웁니다. 변경사항을 저장하고 commit 후 push 합니다. buildspec.yml 파일 생성이 끝나면, 본격적으로 배포 파이프라인 구성을 진행합니다. 파이프라인 이름을 설정합니다. 여기서 파이프라인 이름은 100자를 초과하지 않는 선에서 자유롭게 짓습니다. [ 다음 ] 버튼을 클릭하여 다음 단계로 넘어갑니다. 파이프라인 설정 선택이 끝나면 소스 단계로 이동합니다. 소스 ..

배포 자동화 배포 자동화란 한 번의 클릭 혹은 명령어 입력을 통해 전체 배포 과정을 자동으로 진행하는 것을 뜻합니다. 배포 자동화가 왜 필요할까요? 먼저 수동적이고 반복적인 배포 과정을 자동화함으로써 시간이 절약됩니다. 휴먼 에러(Human Error)를 방지할 수 있습니다. 여기서 휴먼 에러란 사람이 수동적으로 배포 과정을 진행하는 중에 생기는 실수를 뜻합니다. 그전에 했던 배포 과정과 비교하여 특정 과정을 생략하거나 다르게 진행하여 오류가 발생하는 것이 휴먼 에러의 예로 볼 수 있습니다. 배포 자동화를 통해 전체 배포 과정을 매번 일관되게 진행하는 구조를 설계하여 휴먼 에러 발생 가능성을 낮출 수 있습니다. 배포 자동화 파이프라인 [그림] 파이프라인을 구성하는 기본 단계와 수행 작업 배포에서 파이프라..

보호되어 있는 글입니다.

면접대답 먼저 짧게 비동기 처리 방법인 callback함수는 순차적으로 실행하고 싶을 때 콜백함수를 적극 활용합니다 쉽게 말해 callback 함수란 쉽게 말해서 함수안에 들어가는 함수를 callback 함수라고 합니다 그러나 callback 함수가 많아지면 속칭, callback 지옥에서 빠져 코드를 읽을때 어려움이 있습니다 그렇기 때문에 callbakc 함수를 보기 좋게 하기 위해서 promise를 사용하게 됩니다 promise는 좀 더 코드를 직관 적으로 볼 수 있어 성공, 실패의 경우에 각각 다른 코드가 실행이 가능합니다 그래서 비동기에 온 값이 promise 객체에 저장되기 때문에 코드 작성이 용이해집니다 promise에는 3가지 상태가 있다 비동기 처리가 완료 되지 않았다면 pending 완료..

면접시 대답 자바스크립트에서 호이스팅이란, var 선언문이나 함수 선언문 등 모든 선언문이 해당 스코프의 선두로 옮겨진 것처럼 동작하는 특성을 말합니다. 여기서 var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화 합니다. 즉, 변수의 선언와 초기화가 동시에 이루어 집니다. 먼저 호이스팅 var,let,const 에서 var는 선언과 초기화가 동시에 이루어지고 let과 const는 선언과 초기화가 나누어져 이루어집니다 이때 선언과 초기화 사이를 TDZ(Temporal Dead Zone)이라고 합니다 TDZ에 있는 코드에 접근하게 되면 Reference Error가 발생하게 됩니다 호이스팅에 대한 나의 이야기 a = 2; var a; console.log(a); // (1) (1) 식..

면접시 대답 : 클로저란 외부함수의 변수에 접근할 수 있는 내부 함수입니다. 함수가 속한 렉시컬 스코프(렉시컬 환경)을 기억하여 함수가 렉시컬 스코프 밖에서 실행될때에도 이 스코프에 접근할 수 있게 하는 기능을 뜻합니다. 이를 이용해 클로저가 소멸될때 까지 상태유지를 하거나, 정보를 은닉할 수 있는 이점이 있습니다. 클로저에 대한 나의 이야기 나는 클로저에 대해 진저리가 난다. 우선 mdn에 나오는 정의인 **클로저**는 함수와 함수가 선언된 어휘적 환경의 조합이다 이게 한국어인지 아랍어인지 이해가 가지 않는다는 점이다. 그래서 그냥 공부하기도 싫었다. 그래도 뭐 어쩌겠어… 해야지.. 내가 찾아본 와닿는 정의는 함수가 속한 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 때에도 이 스코프에 ..

수료후 동기들과 스터디를 시작했습니다 5명 스터디로 기술면접 대비를 진행합니다. 매주 제가 공부한것들을 정리하고 올리겠습니다~