비동기는 프로그래밍을 처음 배울 때 굉장히 어렵게 느껴지던 개념이었는데 실상 그렇지가 않다. 동기의 의미를 명확히하면 그러한데, 동기는 순서대로이다. 코드는 라인 바이 라인으로 진행한다. 이게 동기인데 이 순리를 거스르는 것이 비동기이다. 말그대로 순서를 지키지않고 먼저 처리하고 싶은 코드를 처리한다는 개념이다. 오늘 상세히 파헤쳐보겠다. 42.1 동기 처리와 비동기 처리 > 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. > 실행 컨텍스트 스택의 최상위 요소인 "실행 중인 실행 컨텍스트"를 제외한 모든 실행 컨텍스트는 모두 실행 대기 중인 태스크들이다. > 이처럼 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. 싱글 스레드 방식은 한 번에 하나의..

클로저 내용이 너무 길어져서 둘로 나눴다. 보다보니 너무 흥미로운 주제. 24.4 클로저의 활용 > 클로저는 상태를 안전하게 변경하고 유지하기 위해 사용한다. 다시 말해, 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다. let num = 0 ; const increase = function () { return ++num; }; console.log(increase()) console.log(increase()) console.log(increase()) > 책의 예시는 카운터를 만들려고하는데 기대한 것과 같이 코드를 쓰면 작동하지만 num이 전역 변수로 선언되어 있기 때문에 전역 변수 오염을 걱정하고 있다. const increase =..

클로저는 이전 블로그에서 정리한 적이 있지만 이 번에는 좀 깊게 더 들어가보기로 하였다. 사실 클로저하면 중첩 함수에서 외부 함수가 내부 함수 값을 기억하고 있는 것이라고 간단히 정리하고 넘어갈 수 있지만, 이전 멘토링 때 클로저가 실제로 많이 쓰인다는 말을 듣고 게다가 리액트에 클로저 개념이 있다는 이야기를 들으니 더 그리고 좀 더 자세히 알 필요가 있다고 느꼈다. 먼저 책에서 딱 집어서 이 이야기를 한다. 클로저는 자바스크립트 고유의 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 중요한 특성이다. 이 말에서 일급 객체에 대한 이야기가 나오는데, 일급 객체는 다음과 같은 특성을 갖는다. 1. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 2. 변수나 자료구조..

MongoDB를 사용하면서 SQL과 NoSQL를 다 맛보았다. SQL은 딱히 내가 직접적으로 이용까지 한 것은 아니지만 SQLD 자격증을 취득과 친구들과 간단한 프로젝트를 진행하면서 MySQL을 사용했다. 프론트엔드 입장에서 DB 지식이 크게 중요한 것은 아니지만 데이터가 어떻게 API을 타고 오는지 그 흐름을 아는 것은 개발자로서 중요하다고 생각이 들어 간략히 정리해본다. 아마존 AWS 문서를 참고했다. 차이점 - 구조 > 가장 큰 차이점이지 않을까 싶다. SQL 데이터베이스는 관계형 데이터베이스 시스템으로 데이블, 행, 열의 정보를 구조화하는 방식이다. 각 테이블마다 스키마를 구성하고 공통의 정보를 조인하여 원하는 정보를 뽑아낼 수 있다. 마치 엑셀 데이터처럼 데이터가 쌓이고 다른 테이블에 더하고 싶..

9월 1일 부트캠프가 끝났다. 애초에 내가 처음 계획했던 공부 시간이 끝났다. 이 때가 끝나면 나는 취업을 준비하기로 나와 약속했다. 올해 개발 공부를 시작하고 시간은 봄 볕에 빠르게 눈이 녹 듯 흘러갔다. 이제 뭘 좀 안 것 같은데 내가 안 것은 내가 얼마나 모르는 지를 알았다. 이 것을 자각하는 것은 이력서를 쓰면서 정말 크게 느꼈다. 그래 HTML을 배우고 CSS를 배우고 JS도 배웠는데 막상 너 업을 삼을 만큼 자신 있어라고 묻는다면 할 말이 없다. 앞으로도 웹에 대해서 그리고 리액트에 대해서 배울게 산더미다. 그런 상태로 나는 노트북을 켰다. 이력서를 처음 쓰고 지원하기까지 긴 시간이 걸렸다. 그 시작은 9월 3번째주 2주간 리팩토링을 마치고 나서로 나는 노션을 켰다. 여러 템플릿을 보고 여러 ..

1. 고민의 시작 코드 스플리팅으로 성능 개선을 이뤄냈지만 아직 더 개선해야하는 부분들이 보였다. 첫 번째로 Largest Contentful Paint에서 빨간불이 켜져 이 부분을 먼저 해결해보기로하였다. 2. 고민 해결의 과정 LCP(Largest Contentful Paint)는 페이지가 로드될 때 화면 내에 있는 가장 큰 이미지나 텍스트 요소가 렌더링되기까지 걸리는 시간을 나타낸다. 이와 관련하여 개선점을 말해준다. 확인해보니 이미지에 대한 이슈였다. 구글 공식 문서를 통해 확인해보면 3가지 방법을 제시한다. 페이로드 크기를 줄이려면 1. 필요할 때 부르는 Lazy 방식을 쓴다. 2. 이미지 같은 소스들을 압축한다. 혹은 최적화한다. 3. 자주는 것은 캐싱해둔다. 아무래도 고화질 이미지가 업로드 ..