분류 전체보기
-
01. 앱 내 서버에 배포하기 (AWS EC2, nginx)Projects/뮤직 플레이 리스트 2021. 6. 6. 15:16
mbti 프로젝트에서 배포에 대해서 다루긴 했지만 이번 포스팅에서는 AWS와 관련해서 조금 더 자세하게 다뤄보고자 한다. 해당 포스팅은 도메인을 구매했다는 가정하에 나머지 내용을 다룬다. (나는 Gabia에서 도메인을 구매를 했다.) 1. react build로 배포버전 생성하기 npm run build 우선 명령어를 통해 react 앱을 빌드한 뒤 형성된 build 폴더를 git에 푸쉬했다. 2. 인스턴스 (EC2) 생성하기 인스턴스란 쉽게 말해 서버 컴퓨터를 말한다. AWS에서 제공하는 클라우드 인스턴스를 EC2라고 한다. 우선 인스턴스를 만들어 배포할 App을 올려보자! EC2 > 인스턴스 > 우측 상단의 인스턴스 시작 버튼 클릭 > 원하는 사양의 인스턴스 선택 인스턴스는 내가 원하는 사양으로 선택..
-
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의 동작원리에 대해 한번 공부해보고싶다는 생각이 들었다..! 지난 포스팅의 ..