min

오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 이야기를 나눌려고 한다. 1. lazy loading 어떻게 확인하는 가? : 내가 어제 lazy loading에 대해서 언급하면서 가장 궁금했던 점은 lazy loading 을 어떻게 확인하는 것이었다. 사실상 lazy loading 의 핵심은 번들러에 있다. 즉 페이지에 들어올 때 응답으로 어떤 컴포넌트들을 줄 것인지 전체 번들을 줄 것인지 아님 페이지 마다의 모듈을 줄 것인지 바로 이 부분이 핵심이었다. 그래서 나는 요청과 응답을 확인할 수 있는 개발자 도구에 네트워크 탭에서 확인을 해보았다. 네트워크 텝을 보니 lazy loading이 구현됐는지를 확인할 수 있었다. 증거는 다음과 같다. 2. 코드 하이라이팅 에디터 어떻게 구현했는가? :..

오늘은 내가 코드 리뷰 사이트 매인 페이지를 제작하면서 느꼈던 어려움들에 대해서 같이 이야기를 나눠볼려고 한다. 1. 폰트 어썸 CDN : 사실상 CDN이라고 하는 서비스는 분산 처리 시스템을 의미한다. 이는 서버를 한 군데에다가 넣어두는 것이 아니라 여러 곳에 배치하여 클라이언트와 서버 사이에 물리적인 거리를 줄인다. 또한 이 서버는 캐싱 서버이기 때문에 초기에 들어오고 나서 두번째부터는 캐싱이 된다는 장점이 있다. 하지만 여전히 물리적인 거리는 존재하기 때문에 속도는 낮을 수 밖에 없다. 그 뿐만 아니라 CDN 시스템에서 내가 원하는 폰트를 가져오기 때문에 내가 이 폰트를 압축시키지 못한다는 점도 문제이다. 이는 결과적으로 성능과도 연관되는 문제이기 때문에 이번에 나는 폰트를 CDN 서비스를 통해서 ..

오늘은 오랜만에 redux에 대해서 살펴보려고 한다. 내가 TodoList를 redux로 만든 이유는 다음과 같다. redux는 안정성 측면에서 높은 평가를 받고 있다. redux의 경우 flux 패턴으로 이루어져있다. 즉 store , action , dispatch 개념을 통해서 안정성을 확보한 체로 문제를 해결할 수 있다. flux 패턴은 다음과 같다. flux 패턴 : https://minprogramming.tistory.com/entry/MVVM과-FLUX에-대하여 MVVM과 FLUX에 대하여... 오늘 나는 cs 스터디로 MVVM과 FLUX에 대해서 공부해보는 시간을 가졌다. 내가 MVVM과 FLUX에 대해서 공부한 이유는 다음과 같다. 1. 면접에 자주 나오는 질문이라서 2. MVC는 들어..

오늘은 TodoList을 Typescript로 변환하는 작업을 진행했다. 추가적으로 기능적 폴더 구조와 함께 React Js , Typescript를 통해 프로젝트를 만들었다. 그럼 여기서 이런 의문이 들었을 것이다. 왜 Typescript를 사용했는가? 그 이유에 대한 답을 얻기 전에 먼저 Typescript가 무엇인지를 Javascript와의 비교를 통해서 설명을 해보도록 하겠다. Javascript : 자바스크립트는 동적 타이핑 언어 , 즉 약한 타입의 성질을 가지고 있는 언어이다. 이와 같은 특성을 가지고 있는 언어로는 대표적으로 파이썬이 존재한다. 그렇다면 동적 타이핑 언어의 장점은 무엇일까? 동적 타이핑 언어의 장점은 코드의 생산성이 빠르다는 것이다. 우리가 예를 들어 C언어를 통해 게임을 만..

오늘은 todoList를 recoil 버전으로 만들어보았다. 그럼 여기서 드는 의문중은 다음과 같다. 왜 구지 recoil을 사용했는가? 컨텍스트 api도 있는데도 불구하고 recoil를 사용한 이유는 무엇인가? 이 질문에 대답을 하기 위해서 recoil이 context api와 구별되는 차이점에 대해서 설명하도록 하겠다. 먼저 recoil의 가장 큰 장점은 엄청 가볍다는 것이다. 이때 가볍다는 의미는 2가지로 해석할 수 있을 거 같다. 첫번째는 context api의 비해 사용방법이 간단하다. 두번째 context api나 redux의 비해 환경세팅이 간단하다는 것이다. 이 2가지 측면에서 보면 context api보다 recoil이 가지고 이는 장점이 많다는 것을 알 수 있다. 또한 전역 상태관리를 ..

이번에는 저번에 올린 게인 프로젝트의 폴더 구조를 바꿔보았다. 이번에 시도하게 된 폴더 구조는 타입별 폴더 구조가 아닌 기능적 폴더 구조이다. 그럼 여기서 이런 의문이 들 수 있다. 기능적 폴더 구조란 어떤 폴더이며 왜 사용하는지? 이 질문에 대한 답변은 다음과 같다. 먼저 기능적 폴더 주조란 말 그대로 폴더 구조를 기능적으로 나누는 것을 의미한다. 여기서 기능적으로 나눈다는 말을 이해하기 위해서 먼저 알아야할 개념들에 대해서 집고 넘어가자 . 먼저 "엔터티"라는 개념이다. 엔터티는 핵심 단어라고 생각하면 편하다. 즉 내가 만약 todolist와 관련된 프로젝트를 만들때 핵심 엔터티 즉 핵심 단어는 todo가 될 것이다. 즉 기능적 폴더 구조라는 폴더를 핵심 단어를 기준으로 todoform , todol..

Todo List를 context api를 통해서 만들어 보자는 생각이 들었다. 그럼 여기서 이런 의문이 들 수 있다. 왜 컨텍스트 api를 이용해서 만들었는가? redux라는 라이브러리도 많은데 context api를 고른 이유는 무엇인가? 이유는 다음과 같다. redux의 경우 생각보다 굉장히 무거운 라이브러리 이다. redux의 장점은 버그나 로그 관리등 부가적으로 할 수 있는 것들이 많다는 점이다. 하지만 그만큼 무겁고 redux를 사용하기에는 환경 세팅이 정말 어렵다는 점이다. 근데 이번에 내가 만든 todo list는 사실 그렇게 무거운 프로그램이 아니다. 따라서 redux를 사용하기에는 적합하지 않는 환경이라고 생각했다. 그래서 나는 redux보다 상태관리를 하는데 좀더 가벼운 context..

오늘은 Todo-List를 만들면서 겪었던 트러블 슈팅에 대해서 정리하려고 한다. 트러블 슈팅은 신입 개발자로써 성장할 수 있는 아주 좋은 양분이다. 즉 신입 개발자에게 트러블 슈팅이란 우리가 일상적으로 먹는 밥 같은 존재다. 맨날 마주치면서 우리를 성장시켜주는 촉진재인 셈이다. 그래서 오늘은 겪어던 트러블 슈팅들에 대해서 적어볼려고 한다. 1. 문제 상황 작성 페이지에서 제목과 관련된 인풋 박스를 수정했는데 결과적으로는 모든 InputBox와 Select박스들이 바뀌는 현상을 목격할 수 있었음 원인을 분석해보니 props로 넘기는 함수에서 문제가 발생함 함수의 경우 참조 타입으로 안에 내용이 갔다고 해도 메모리에 똑같은 함수가 올라갔을 경우, 이는 shallow equerl 테스트에서 다른 부분으로 판..