TIL
비교적 힘든 시간을 보내고 있는 것 같다. 내 코드를 치는 방식에 있어서 말이다... 어느순간부터 강의를 들으면서 받아쓰기만 하고있는 내 자신을 발견했고, 이 문제를 해결하고자 조언을 많이 듣고 코드를 쳤던 것같다. 하나의 문제를 직면했을 때 어떻게든 끝내는 것도 중요하지만 그 문제를 파헤쳐 보려는 노력도 굉장히 필요한 것 같다(사실 개발자라면 당연한 것). 어제는 과제를 제 시간에 완성? 아니 기능하나를 애매하게 끝내고 제출을해서 회의감이 들기 시작하면서 굉장히 우울하고...슬펐지만...같이 있어준 팀원 덕분에 많은 것을 코드에 접근할 때 어떤 태도로 접근해야하는지 깨닫게 되었다. 요번주 주말은 또 반납할 예정이다. 화이팅.......!!!
W.A를 중점으로 만든 TIL(심화주차)
⚙️ s3 버킷에 배포한 뒤, 어떤도메인.com이 아닌 어떤도메인.com/login 등 페이지로 이동하면 왜 오류가 날까요?
- 아마존 S3에서 /login 페이지를 존재하지 않는 객체 키를 참조 한다고 판단하고 url에 지정된 버킷이 존재하지 않는 것으로 간주되어 생기는 문제이다(링크텍스트).
⚙️ 리액트에서 각 페이지 컨텐츠에 맞는 미리보기(사이트 이미지, 사이트 설명 등)를 띄워주려면 어떻게 해야할까요?
-
SPA(Single Page Application)란?
한 개(Single)의 Page로 구성된 Application이다. SPA는 CSR(Client Side Rendering) 방식으로 렌더링한다. 단 한 번만 리소스(HTML, CSS, JavaScript)를 로딩한다. 그 후에는 데이터를 받아올 때만 서버와 통신한다. 즉, 첫 요청시 딱 한 페이지만 불러오고 페이지 이동 시 기존 페이지의 내부를 수정해서 보여주는 방식이다. 이를 클라이언트 관점에서 말하자면 최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로 부터 받아서 화면을 갱신하는 것이다. 필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자 경험(UX)을 제공할 수 있다. Angular, React, Vue 등 프론트엔드 기술들이 나오면서 크게 유행하고 있다. -
CSR이란?
CSR 방식은 최초 요청시에 HTML을 비롯해 CSS, Javascript 등 각종 리소스를 받아온다. 이후에는 서버에 데이터만 요청하고, 자바스크립트로 뷰를 컨트롤 한다. 당연히 초기 요청 때 SSR 보다 많은 리소스를 요청하기 때문에, 렌더링은 속도는 SSR이 더 빠르다. 하지만 이후 다른 페이지로의 이동시에는 SSR 보다 빠른 페이지 전환 속도와 더 나은 사용자 경험을 제공한다. 만약 인터넷 속도가 어어엄청 느리다면, 유저는 제대로된 화면을 한참 후에나 만나볼 수 있을 것이다(일단 처음 받게될 HTML은 빈페이지).
⚙️ 리덕스에서 미들웨어 청크의 역할은 뭘까요?
- Redux-thunk란 미들웨어를 사용하는 것이다. 여기서 말하는 미들웨어는 주로 비동기 작업을 처리 할 때 사용되며 리듀서에서 발생한 예외를 서버로 전송하는 등의 목적으로 미들웨어를 활용할 수 있다. Redux-thunk의 역할은 첫째, 객체 대신 함수를 생성하는 액션 생성함수를 작성할 수 있도록 도와주며, 둘째, 액션 자체를 디스패치하고, 셋째, 일반 액션생성자는 파라미터를 가지고 액션 객체를 생성하는 작업만 한다(즉, Redux-thunk 미들웨어는 객체가 아니라 함수를 반환하는 액션 생성자를 만들 수 있게 도와주며 특정 액션을 몇 초 후에 실행하거나, 현재 상태에 따라 액션이 실행되지 않게 할 수 있다). 간단하게 정리하면 redux-thunk는 일반 액션 생성자에 날개를 달아주고, 보통의 액션 생성자는 하나의 액션객체를 생성할 뿐이지만 redux-thunk를 통해 만들게 되면 그 내부에서 여러가지 작업을 할 수 있는 것이다.
⚙️ 프로미스는 정확히 말하면 비동기가 아닙니다. 비동기와 프로미스는 각각 무엇일까요?
- 자바스크립트의 비동기 처리란? '특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성'을 의미한다. 프로미스는 자바스크립트 비동기 연산이 종료된 이후 결과를 알기 위해 사용되는 객체이다. 전통적인 콜백 패턴으로 인한 콜백 헬 때문에 ES6에서 도입한 또 다른 비동기 처리 패턴이다. Promise를 쓰면 비동기 메서드를 마치 동기 메서드처럼 값을 반환할 수 있고, 비동기 처리 시점에 대한 명확한 표현이 가능하다.
⚙️ TDZ(Temporal Dead Zone/일시적 사각지대)란?
-
TDZ는 간단하게 말해 일시적인 사각지대라는 뜻이다. 이 일시적인 사각지대는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 TDZ라고한다.
-
TDZ는 const, let, class 구문의 유효성에 영향을 미치는 중요한 개념이다.
우리가 변수를 입력하면,
- 선언 단계(Declaration phase) : 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계를 의미합니다. 이 변수 객체는 스코프가 참조하는 대상이 된다.
- 초기화 단계(Initialization phase) : 실행 컨텍스트에 존재 하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계 이다. 이 단계에서 할당된 메모리에는 undefined로 초기화 된다.
- 할당 단계(Assignment phase) : 사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단계 이다.
우리가 변수를 입력할때 var혹은 let/const를 그냥 사용하였지만사실은 위 3가지 단계를 거쳐서 생성되는 것
.png)