본문 바로가기

전체 글34

[Weekly I Learned] 항해99 11주차 Component Lifecycle 이번주는 리엑트 컴포넌트 라이프사이클 및 Hooks에 대한걸 많이 배웠던거 같다. 클래스형 컴포넌트를 사용할때 위 이미지가 해당이 되지만, 함수형 컴포넌트를 사용하면 한가지가 다르다. 바로, render 전에 실행되는 hook이 없다. 응 진짜 없다. 반면, 클래스형 컴포넌트는 componentWillMount라는 메소드를 사용하면 render 전에 실행된다. 굳이 사용하려면 Custom hook을 만들어 사용해야한다. 내가 이런 부분을 찾아본 이유는 useEffect 동작 시점을 제대로 이해를 못하고 있었다. 아래 같이 hook을 사용하면 당연히 render전에 실행되는줄.. 하지만 모든 hook들을 render가 먼저 실행되고 그 다음 실행된다. useEffect(.. 2021. 5. 15.
[Weekly I Learned] 항해99 10주차 저번주에 이어 이번주는 WYSWYG 에디터에서 어떻게 서버에 이미지를 저장할지 고민했다. 다행히 TOAST UI Editor에 이미지를 업로드하면 트리거되는 기능이 있었다. https://nhn.github.io/tui.editor/latest/ToastUIEditor/ Return true if current editor mode is Markdown nhn.github.io 해당 사이트를 참고하면 hooks라는 프로퍼티에 addImageBlobHook()라는 함수가 있다. 사용자가 에디터에 이미지를 삽입하는 순간 발동되는 함수다. 로직은 아래와 같이 구현했다. const uploadImage = async (blob) => { const formData = new FormData(); formData.. 2021. 5. 9.
WEBPACK - Dev Server, Code Splitting, Lazy Loading Dev Server 웹팩에서 제공하는 패키지이다. 개발하다가 수정된 부분이 있으면 수정된 부분만 화면에 보여준다. 즉, 기존 화면에 나타났던 정보들을 유지하면서 수정된 부분만 다시 보여주는 패키지다. 웹팩을 사용한다면 프론트 개발환경에 많은 도움을 줄 거 같다. Code Splitting 웹팩은 여러 파일들을 하나의 파일로 번들링 해준다. 이러다보면 파일 하나가 너무 커지고, 당장 사용안하는 기능들도 포함될거다. 이걸 구분하고 나눠주는게 Code Splitting이다. Lazy Loading Code Splitting으로 분리된 기능들을 필요할때마다 로딩해주는 개념을 Lazy Loading이라고 한다. 2021. 5. 5.
OAuth 2.0 OAuth 2.0 = 외부서비스의 인증 및 권한부여를 관리하는 프레임워크이다. 아래 그림은 구글 계정으로 서드파티 서비스에 로그인하는 경우이다. 꽤 많은 요청과 응답이 존재하지만, 서버는 값을 전달해주는 역할만 한다. 실제 일은 Google이 한다. 2021. 5. 4.
[Weekly I Learned] 항해99 9주차 - 블로그 개발 (WYSWYG) 드디어 부트캠프의 마지막 프로젝트다. 프로젝트의 아이디어는 특별하지 않다. 여행 공유 서비스를 만든다. SNS + 블로그를 만든다고 생각하면 된다. 내가 담당하는 개발은 블로기 기능을 개발하고 위지위그를 사용해서 서버랑 통신을 해야하는데, 이게 나름 도전적일거 같다. 현재는 TOAST UI Editor를 사용해서 구현하고 있다. 아쉽게도 리엑트관련 리소스가 많이 없어서 자료를 찾아보기 힘들다. 심지어 공식 TOAST UI 페이지에도 리엑트 예제들이 많이 없고 API 문서도 자세히 안적혀있어서 Vue.js 예제를 보며 기능들을 알아갔다. 단순 글을 저장하는거는 어렵지 않다. 하지만 이미지가 들어오면 이야기가 조금 다르다. 작성자가 이미지를 넣으면 서버에 저장하고 이미지 경로를 응답하면 해당 경로를 본문에 .. 2021. 5. 1.
웹 저장소 - 쿠키 & 세션 & 로컬 스토리지 모 기업에서 면접을 봤다. 세션쿠키랑 쿠키의 차이점을 알려달라 했다. 질문을 이해못하고 나는 세션과 쿠키의 다른점을 신나게 이야기했다. 면접이 끝나고 세션쿠키를 열심히 찾아보니.. 쿠키의 종류를 아는지 물어봤던거 같다. 그래서 이번 글은 쿠키, 세션, 그리고 로컬 스토리지들의 특징을 적어보겠다. 일단 쿠키는 Key : Value 형태로 저장되는 저장소이다. Session Cookie 우리가 흔히 사용하는 Session은 원래 Session Cookie를 뜻하는 말이다. 만료기간이 없다. 디스크가 아닌 메모리에 저장된다. 브라우저를 닫으면 자동으로 소멸된다. Persistent Cookie 이게 우리가 아는 Cookie이다. 흔히 Cookie라 부른다. 만료기간이 있다. 최대 4KB까지 저장이 가능하다. .. 2021. 4. 29.