기록하고 싶은 것들

여러 회사들의 면접을 진행하면서, 받았던 면접질문들을 정리해보았다. 회사마다 다른 질문들을 하기는 했지만, 자기소개, 개발에 관심을 가지게 된 동기, 프로젝트에서 맡은 역할이나 구현한 내용에 대한 질문은 공통적으로 나왔던 것 같다. 다른사람들의 면접질문들을 보면서 준비한만큼 다른 사람들에게 조금이나마, 도움을 줄 수 있지 않을까해서 글을 적어보았다. 면접 질문 직무 지원 이유 블로그 쓰면서 기억에 남는 글 프로토타입 객체와 map차이 Get post 차이 Set과 딕셔너리 차이 Bind call apply 차이 회사에 궁금한거 자기소개 직접 피그마, 유저플로우를 작성했는지? 어떤 컨셉으로 디자인을 했는지? 타입스크립트 왜 써봤냐? Interface 사용해본적있는가? 함수형 프로그래밍에 대해서 아는가? U..

최근 1차 면접에서 받았던 질문이 있었다. Flux 패턴에 대해서 아시나요? 들어 본 것 같지만, 개념에 대해서 잘 몰랐기 때문에 솔직하게 모른다고 답변했다. 면접이 끝난 후, 질문들을 정리하던 와중에 궁금증이 들어 검색을 해보니 모르면 안됐다. 리덕스를 사용해 본 사람으로서 Flux 패턴에 대해서 인지하지 못하고 있었던 사실이 너무 부끄러웠고, 이를 기억하기 위해 관련 개념을 기록해보고자 한다. 등장 배경 기존 애플리케이션은 MVC (Mode, View, Controller) 패턴을 보편적으로 사용하였다. Model에 데이터를 저장하고, Controller를 이용하여 Model의 데이터를 관리(CRUD)하는 패턴이다. 이 때, 데이터가 변경 시 Model에서 View로 전달이 되고, View를 통해 데..

이번 프로젝트에서는 Github, Google 을 이용한 로그인을 구현하였고, 어떤 방식으로 진행되었는지 적어보려고 한다. OAuth 2.0 Login 기존에 필자가 알고있는 OAuth 로그인 방식은 아래와 같다 Authorization code를 클라이언트 단으로 리다이렉션 후, 이를 서버에 요청한 뒤 응답으로 Access Tokend을 받는 방식이다. 위의 방식과는 다르게 백엔드 분께서, Spring Security를 사용해보고 싶다하셨고, 이를 사용할 경우 Authorization code를 서버 단으로 으로 리다이렉션 후 Access Token까지 발급한 뒤 이 Access Token을 클라이언트로 리다이렉션 하는 방식으로 진행된다고 말씀하셨다. 새롭게 알게된 방식으로 진행하니, 프론트 단에서는 ..

React-quill 내부의 이미지 사이즈를 조절하려고 quill-image-resize-module-ts을 install 후에 quill에 적용해주었다. quill-image-resize-module 을 설치했을 때는 타입 지정이 되어있지않아서 import에 오류가 발생하였다. 따라서 2시간정도를 구글링하면서 quill-image-resize-module-ts 을 설치하여 import 문제를 해결 할 수 있었다. import { ImageResize } from 'quill-image-resize-module-ts'; Quill.register('modules/ImageResize', ImageResize); .... const modules = useMemo(() => { return { // syn..

redux에서 react query로의 전환 이유 redux에서 비동기처리를 해주기 위해서는 redux-saga 같은 미들웨어를 사용하여 상태에 저장시켜야 한다. saga에서 api의 응답을 받고 redux에 저장하는 과정 속에서 api 상태에 따라 렌더링을 해야되는 상황이 발생한다. 이 때 isLoading, isSucess, isError 같이 상태를 별도로 지정해주고 이에 따라 렌더링을 해줄 수 있다. (이처럼 Redux에서 비동기 처리를 할때 api 응답상태를 별도로 만들어 주어야한다.) 반면 react-query에서는 이를 기본 옵션으로 제공하고 있다. 이외에도 Redux를 사용시 다른 saga에 dependency를 두는 saga가 무수히 늘어나게 된다면, 중간 api 에 문제가 생겨도 에러 ..

현재 구현한 react quill 내부에 사진을 넣은 후, 에디터 속 콘텐츠를 콘솔에 찍어보았다. 사진 하나를 넣었는데도 불구하고 너무 길어서 콘솔에 찍히지도 않고, 사진이 들어있을 경우에는 서버로 전송도 되지 않았다. 현재 파일을 추가하면, base64형식을 이미지의 src로 받기 때문에 위의 사진과 같이 방대한 양의 콘솔이 찍힌 것을 알고 있었다. 따라서 base64가 아닌 url로 바꾸어 보는 과정을 가지기로 하였다. 문제점 현재 작성된 API는 포트폴리오를 전송하거나, 수정할 때 에디터에 들어갈 이미지들을 파일형태로 전송하는 방식이었다. 하지만, 에디터를 사용할 경우에는 포트폴리오 전송, 수정 전 이미지의 src에 넣어줄 url을 받아와야 하였다. 포트폴리오 전송, 수정 전에 이미지의 url을 받..

로그인 기능을 구현하면서, isLogin, accessToken, refreshToken 을 전역상태로 관리해주기로 하였다. 로컬 스토리지를 이용하여서 관리를 하려고 하였지만, redux-persist가 로컬 스토리지에서 상태를 저장해주면서, 보안 측면에서 더 낫다고 하여서 redux-persist로 상태를 관리해주었다. 타입스크립트, redux-toolkit, redux-persist 등 사용해보지 못한 기술들을 접해보아서 정신이 없긴했다. store/slice/loginSlice.ts Login이라는 타입을 지정해 준뒤, 내부의 값까지 타입을 지정해주었다. 그 후 초기 상태를 지정해준 뒤, loginSlice를 생성해주었다. 생성된 loginSlice 안의 login, logout 이라는 reudce..

등장배경 기존 방식은 설정, 미들웨어 설치, 반복되는 코드, 불변성 유지의 어려움 기존의 리덕스는 하나의 거대한 store로 관리하는 데에 반해서 redux toolkit은 slice라 부르는 작은 store로 state 관리 가능 reduxtoolkit 은 createSlice를 통해서 작은 저장소를 만들고, reducers를 통해서 reducer를 정의 해준다. 위의 예시는 reduxtoolkit 사용방식과 redux 사용방식을 나타낸 것이다. 이 작은 Slice들을 모아서 사용할 경우에는 configureStore를 생성한다. 만약 counter의 state 사용할 경우 store에 저장된 counter의 value를 가져오면 된다. dispatch의 경우 자동으로 생성된 action creater..

포트폴리오 작성페이지에, 웹 에디터의 필요성을 느껴 react quill 라이브러리를 사용하였다. 툴바에 있는 여러 기능을 테스트 해보았는데, 몇몇 기능이 적용되지 않았다. 예시로 글자를 굵게하는 기능이 적용되지 않아서, 관련 요소를 확인해보았다. 분명 요소에는 넣어져있었는데, 스타일에 사용자 에이전트 스타일시트 라는 것이 내가 적용한 속성을 무시하였다. 왜 이런일이 발생하는지 궁금해서, 관련 내용을 찾아보았다. User agent stylesheet은, 사용자가 명시해두어야 할 속성을 override 해주지 않거나, 등으로 html 파일에서 html의 최신 버전을 알려주지 않아 브라우저가 임의로 설정해둔 것으로, 한마디로 각 브라우저마다 정해놓은 CSS의 기본 규칙이다. 따라서 의도치 않거나 설정해두지..

프로젝트 배포에 들어가기 전에, 최종테스트를 하며 질문의 view 숫자가 미친듯이 올라가는 것을 발견했다. API를 통해서 question의 정보를 받아올 때마다, 질문의 viewCount가 증가하는 구조인데 질문 수정, 타임라인 페이지를 이동한 때마다, API를 통해서 question의 정보를 받아오기 때문에 view의 속도가 빠르게 증가하였다. Question 페이지와 editQuestion, Timeline 페이지는 별개의 페이지이기 때문에, props로 정보를 전달하지 못하여 그냥 서버에서 정보를 받아오는 식으로 해결하였다. 서버의 정보를 받는대신, 기존의 방식을 활용하는 방법은 내 생각으로는 2가지가 있었다. 1. 전역 상태 관리 2. Link태그로 props 전달하기 1번의 방식을 사용하는 것..