WEB/REACT

공식문서를 통해 진행 Next.js 사이드 프로젝트 특성상 검색엔진에 노출이 필수적이기에 Next.js의 도입이 필요하여 간단하게 튜토리얼을 진행해 보았다. Next.js는 빠른 웹애플리케이션을 만들기 위한 빌딩블록을 제공하는 리액트 프레임워크이다. 정확하게 리액트의 어떤부분을 서포트 해주는것인가. 웹 애플리케이션을 만들기 위해 고려해야할 몇가지가 있다. 유저인터페이스-우리의 앱을 유저가 어떻게 사용하고 적응하는가? 라우팅 - 사용자가 우리의 앱에서 어떻게 이동하는지? 데이터 fetching- 데이터를 어디서 어떻게 가져올것인가? 렌더링 - 정적, 동적인 컨텐츠를 언제 어디서 보여줄것인가? 인터그래이션(통합) 인증, 결제등을 어떨게 연결한것인가? 인프라구조 - 우리의 앱코드를 배포하거나 저장을 어떻게 할..

개발환경세팅을 마치고 미리 준비할것들을 확인해보았다.당연히 자바스크립트 지식이 중요한데 mdn문서를 다시 한번 훑어봤다.https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript A re-introduction to JavaScript (JS tutorial) - JavaScript | MDN Why a re-introduction? Because JavaScript is notorious for being misunderstood. It is often derided as being a toy, but beneath its layer of deceptive simplicity, powerful langua..

리액트 네이티브의 학습이 필요해서 공식문서를 통해 학습을 진행했습니다. https://reactnative.dev/docs/getting-started Introduction · React Native This helpful guide lays out the prerequisites for learning React Native, using these docs, and setting up your environment. reactnative.dev 메인화면에 요약된 리액트 네이티브 특징은 다음과 같다. - 안드로이드와 ios를 리액트를 통해 만들수 있다. - 문법상 자바스크립트를 사용하고 웹앱처럼 보이지만 native app을 실행해볼수 있다. - native app에 대한 공부없이 리액트를 학습했다면 ..

.../ 이 거슬린다. 우리가 진행한 프로젝트는 상대경로를 통해 각 폴더에 접근한 프로젝트였다. 상대경로를 이용하면 굳이 코드 건드리지 않고 작업은 편하다고 생각했지만 컴포넌트가 세분화 될수록 다른 개발자가 만든 컴포넌트를 import해올때 어디에있는지 경로를 찾는것도 일이라 생각했다. 처음부터 설정하고 작업을 진행할걸이라는 생각이 들면서 다음프로젝트에 절대경로를 설정해서 개발을 진행하면 코드가 좀더 깔끔하지 않을까 생각하며 절대경로 설정방법을 확인해봤다. 설정방법 이래저래 찾아보니 cross-env 라이브러리를 설치하는 방법도 있는데 공식문서를 보니 json파일추가로 라이브러리 설치없이 절대경로 설정이 가능한것 같아 이 방법으로 적용해보았다. CRA문서 > jsconfig.json 또는 타입스크립트의 ..

만들었다고 끝이아니다. 사이트의 성능개선을 위해 크롬에서 제공하는 웹사이트의 성능을 측정하는 도구 LightHouse로 측정했고 하성능 최적화를 위해 하나하나씩 해결이 필요했다. 우선 각각의 컴포넌트 파일이 어떤 코드로 구성이 어떻게 되어 있는지 확인이 필요했고, 어떻게 하면 초기 리로딩 성능을 개선할지 인사이트를 주는 cra-bundle-analyzer라는 패키지를 발견해서 적용해보았다. 설치 1. 먼저 webpack-bundle-analyzer를 devDependencies로 설치 $ yarn add -D webpack-bundle-analyzer 2. cra-bundle-analyzer도 devDependencies로 설치 $ yarn add -D cra-bundle-analyzer 3. 아래 명령..