Projects
-
01. VanillaJS 프로젝트 배포 (feat. Pacel, AWS EC2, Nginx)Projects/우주 심리 테스트 2021. 6. 5. 17:55
2주정도 걸려서 제작 한 우주 여행 심리테스트 페이지 🙂 유플래닛-나만의 행성찾기[우주심리 테스트 mbti] 유플래닛만의 특별한 나만의 행성 찾기 mbti. 어서 나만의 행성을 찾으러 여행을 떠나볼까요? uplanet.me 최근 심리테스트, mbti 성향분석 등을 활용한 마케팅 웹 페이지가 많이 등장했다. 그리고 케이어스라는 친한 회사 대표님이 이와 같은 심리테스트 웹 페이지 제작을 의뢰해서 예전에 인상이 깊었던 the forest의 심리테스트가 떠올라 유사한 느낌으로 몰입가능한 심리테스트 페이지를 한번 만들어 보고자했다. VanillaJS 연습도 할 겸, 프론트엔드 개발자 지우님과 디자이너 한 분 이렇게 세명이서 프로젝트를 시작했다. 배포를 이렇게 하는게 맞나...? 당시에는 번들러라는 것의 개념을 모..
-
05. media 쿼리와 CSS 속성[Attribute] 선택자로 다크모드 구현하기Projects/세계 여행 지도 2021. 6. 4. 14:52
처음에는 현재 테마에 대한 상태를 redux를 사용해서 상태를 관리하고자 했다. 그런데 redux로 mode를 설정을 하게 된다면, styled-component에 일일히 props로 redux의 상태를 전달해야하고, 코드가 지저분해 지는 것 같았다. 더 좋은 방법이 없을까 하며 검색을 해 보니 일반적으로 다크모드를 구현할 때에는 media 쿼리와 attribute를 사용하는 것 같았다. @media 쿼리? 반응형 디자인을 할 때 media 쿼리를 많이 써 봤지만 다크모드를 적용할 때에도 사용 되는 줄은 몰랐다. 그래서 미디어 쿼리가 정확하게 어떤 것인지 알아보았다. MDN의 설명에 따르면 미디어 쿼리는 기기의 유형 또는 특정 매개 변수 (화면 해상도, 브라우저 뷰포트 환경)에 따라 사이트 또는 앱을 수..
-
04. 렌더링 최적화(2) Recalculation-style 시간 줄이기Projects/세계 여행 지도 2021. 6. 4. 10:53
빌드 버전을 실행해서 Performance 탭을 확인 해 보니, mouse over 이벤트에 의한 연산 등 많은 부분에서 성능이 올라갔지만, Recalculation-Style이라는 부분에서 여전히 40ms정도의 시간이 걸리고 있었다. (아무래도 컴포넌트가 많은 것도 한 몫 하겠지?) Reacalculation-Style이요? https://hovlee.tistory.com/25 전에 포스팅에서 언급한 렌더링 순서에 대해 간단하게 다시 정리하자면 최초에 페이지를 불러오게 되면 브라우저는 다음과 같은 순서로 페이지에 렌더링을 하게된다. 1. HTML 파일을 위에서 아래로 한 줄씩 차례대로 읽어 tag들을 파싱해 DOM Tree를 만들어나간다. 2. 중간에 link tag를 만나면 HTML 파싱을 중단하고 ..
-
03. 렌더링 최적화(1) Memoization을 통한 리렌더링 최소화Projects/세계 여행 지도 2021. 6. 3. 23:52
0. Performace / React-Profiler를 통한 퍼포먼스 확인 열심히 기능을 구현했지만 뭔가 반응이 살짝 느려서 리액트 개발자 툴인 profiler로 확인을 해보았다. 마우스를 옮길 때 마다 자그마치 400ms가 넘는 미친 반응속도가 나오고 있었다. 물론 npm run start로 실행하고 있다고는 하지만 너무나도 심각한 수준이었다. 조금 더 자세히 살펴보자, 그 이유를 알 것도 같았다. (사실 예상은 했었지만 이정도일줄은 몰랐다.) 180 x 90. 그러니까 만 육천개가 넘는 component들이 마우스가 이동 할 때 마다, 조금 더 정확하게는 마우스가 가리키는 나라가 변할 때 마다 모두다 새로 렌더링 되고 있었다...! 마우스 호버링 이벤트가 일어나면 상위 컴포넌트인 WorldMap의 ..
-
02. 컴포넌트화를 통한 호버링 하이라이트 (feat. Styled Component)Projects/세계 여행 지도 2021. 6. 3. 21:33
함수형 컴포넌트 vs 클래스형 컴포넌트 이 전에는 함수형과 클래스형 컴포넌트의 차이를 몰랐다. (그냥 같은 것을 다르게 표현 한 건 줄만...) 현재 리액트 공식 문서에서는 두가지의 이유로 클래스형 컴포넌트보다 함수형 컴포넌트와 훅을 함께 사용하는 것을 권장한다. 1. 편리한 선언 2. 메모리 자원을 덜 사용함 - 함수형은 상태를 저장할 수 없어서 한번 실행되고 나면 가비지 컬렉터에 의해 메모리 상에서 사라진다. - 상태를 저장할 수 없기 때문에 클로저 원리를 이용한 useState 훅을 이용해서 state를 저장한다고 한다. 이러한 점들을 알게 되어서 이번에는 함수형 컴포넌트로 앱을 구성했다. 그리고 나중에 React와 Hook의 동작원리에 대해 한번 공부해보고싶다는 생각이 들었다..! 지난 포스팅의 ..
-
01. Grid로 세계 지도 나타내기Projects/세계 여행 지도 2021. 6. 3. 17:37
팀 해체 후 첫 번째 토이 프로젝트 지우님과 팀 해체를 하고 다시 만났다. 단순히 구현하는 것이 목적이 아닌 공부를 목적으로 하는 첫 번째 토이 프로젝트를 진행하기로 했다. 내가 예전 부터 만들어보고 싶었던 앱을 하나 제안했는데, 바로 내가 방문해 본 국가들을 세계 지도에 색칠을 해 나갈 수 있는 간단한 웹 어플리케이션이었다. 지우님은 나라를 검색하고 방문 여부에 관한 데이터를 관리하는 역할을 맡았고 나는 세계 지도를 렌더링하고 컨트롤하는 역할을 맡았다. 우선, 세계 지도를 이미지로 나타내고 싶었지만 일러스트 파일을 찾기가 쉽지 않아서 고민끝에 grid로 한번 나타 내보기로 했다..! node로 매크로 앱 만들기 세계 지도를 픽셀로 나타내기 위해 특정 픽셀 별 위치가 담긴 json 파일이 필요했는데, 이..