Today 요약

1. rebase
2. 프로젝트에 리덕스 적용하기
3. 면접대비

1. What I did?

1.1 rebase

현재 코드리뷰 받고 있는 프로젝트의 브랜치에서 여러가지 변경사항이 생겨버렸다. 원래 기존 생각은 기존 브랜치의 변경사항을 전부 마무리 한 뒤에 새로 분기한 브랜치에 적용하려고 했다. 하지만 생각보다 변경사항이 많아서 일단 리덕스를 적용하려고 새로 분기한 redux 브랜치에 기존 브랜치의 변경사항을 적용했다. 예전에는 이런 경우에 새로 분기한 브랜치의 변경사항이 많지 않을 경우 브랜치를 지우고 다시 처음부터 진행했었는데, 앞으로는 그렇게 하지말고 커밋 히스토리가 조금 더 지저분해 지더라도 연습한다고 생각하고 시도해보자.

일단 알아본 바로는 하나의 커밋을 옮길때는 cherry-pick으로 가능하다. rebase는 하나의 커밋 뿐만 아니라 변경사항 전체를 옮기는 것도 가능하다. 내 경우에는 커밋이 7개 정도 되기 때문에 당연히 rebase로 변경사항을 옮기는 게 깔끔하다.

그래서 새로운 redux 브랜치로 check out 해서 기존 브랜치를 rebase 해주었다.

git rebase typeAndRefac

다행히 충돌이 없어 성공적으로 완료됐다.

만약 충돌이 일어났다면 충돌을 해결하고 add하고 rebase —continue를 해줘야 한다.

그리고 현재 로컬 브랜치와 origin 브랜치의 변경사항이 맞질 않아서 origin의 변경사항을 pull해오고 나서 redux 브랜치를 push해줘서 깃허브에 업로드까지 완료했다.

커밋 히스토리를 보면 기존 typeAndRefac 브랜치의 모든 커밋들이 redux 브랜치에 옮겨와서 좀 지저분해보일 수 있다. 이 부분은 rebase에 옵션을 줘서 커밋들을 병합할 수 있는 걸로 알고 있는데, 이건 나중에 시도해보기로 하자.

1.2 프로젝트에 리덕스 적용하기

store는 생성해놓은 상태다. redux-toolkit으로 진행할 거라 기존에 강의들었던 것과는 사뭇 달랐다. 그래서 구글링해서 나와 비슷한 경우가 있는지 블로그를 찾아봤다. 그나마 비슷하다고 생각하는 블로그를 참고해서 reducer폴더와 그 안에 authReducer, todoReducer 파일을 만들었다. 그리고 reducer를 정의해야 하는데, auth의 경우 api는 클래스에서 생성해서 사용하고 있기 때문에 authReducer에 정의할 필요는 없다고 생각했다. 여기까지 생각이 미치자, 내가 뭔가 잘못 생각하고 있는 거 아닌가 하는 생각이 들었다. 일단 다시 내가 지금 왜 리덕스를 활용해서 뭔가를 변경하려고 하고 있는 건지 다시 생각해봤다. 기존에 Context로 관리하던 전역 상태를 리덕스로 관리하고자 함이었다. 그래서 Context에 등록된, 그러니까 하위 컴포넌트로 전달하고 있는 값들을 확인했다. 지금에 와서 생각해보니까, 나는 모든 중복된 변수나 함수등을 모두 Context에 등록해서 관리하고 있었는데, 대부분이 email하고 password와 관련된 로직들이 많았다. 그럼 기존에 Context로 관리하던 것들은 사실 email, password만 전역에 등록하고 나머지 email, password 관련 로직들은 공통 컴포넌트로 분리해서 관리하는 것이 의미상 맞지 않았을까? 오늘은 시간 관계상 여기까지만 고민해보았다. 그래서 이후에 시도해 볼려고 하는 건 리덕스의 store에 email, password, navigate, accessToken만 넣어놓고 관리해보려고 한다.

2. What I Learned?

2.1 면접대비

깃허브에 좀 더 자세하게 정리하고 있지만, TIL에도 내가 이해한 만큼 다시 한 번 정리해보자.

전역 스코프의 장, 단점에 대해 설명해주세요.

• 장점
  • 여러 함수에서 공통적으로 사용할 변수및 상수를 선언해서 사용할 수 있다.
• 단점
  • 지역 변수와 충돌을 일으킬 수 있다.
  • 스코프체인 상의 종점에 위치에 메모리 리소스 낭비가 심하고 검색이 느리다.
  • 스크립트 전체에서 접근 가능하기 때문에 보안에 취약하다.

실행 컨텍스트에 대해 설명해주세요.

• 코드를 실행할 때 필요한 환경정보(변수, 함수)를 모아놓은 객체
• scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심 원리
• 실행 컨텍스트는 자바스크립트 엔진이 코드를 실행하기 전에 생성되며, 함수가 호출될 때마다 새로운 실행 컨텍스트가 스택에 추가되고 실행이 끝나면 스택에서 제거

렉시컬 환경에 대해 설명해주세요.

• 렉시컬 환경은 스코프와 변수 검색을 관리하는 자바스크립트 엔진의 핵심적인 구성 요소입니다.
• 렉시컬 환경은 실행 컨텍스트를 구성하는 중요한 요소 중에 하나이며 환경 레코드와 외부 렉시컬 환경 참조라는 두 가지 핵심 컴포넌트로 구성

스코프와 스코프체인에 대해 설명해주세요.

• 스코프(Scope)는 변수와 함수의 유효 범위
• 스코프 체인(Scope Chain)은 함수가 선언된 시점의 렉시컬 환경과 그 함수가 중첩된 상위 스코프의 렉시컬 환경들을 연결한 체인 구조