엉망진창 코딩 공부

해당 글에서 사용한 버전 node: 21.6.2 yarn: 4.1.1 react : 18.2.0 typescript: 5.2.2 vite: 5.1.6 Vite Vite(프랑스어로 "빠른"이라는 뜻)은 최신 웹 프로젝트에 더 빠르고 효율적인 개발 환경을 제공하는 것을 목표로 하는 빌드 도구입니다. 이는 두 가지 주요 부분으로 구성됩니다. 예를 들어 매우 빠른 HMR(핫 모듈 교체)과 같이 기본 ES 모듈 에 비해 풍부한 기능 향상을 제공하는 개발 서버입니다 .프로덕션을 위해 고도로 최적화된 정적 자산을 출력하도록 사전 구성된 Rollup 과 코드를 번들로 묶는 빌드 명령입니다 . 한마디로 Vite는 아주 빠른속도를 자랑하는 빌드도구이다. HMR을 사용하기 때문에, 애플리케이션을 끄지 않아도 일부 컨텐츠만 ..

1. 리액트 프로젝트 생성하기(CRA) 타입스크립트를 사용하는 경우, 뒤에 --template typescript 를 추가로 붙여주면 된다. // yarn을 사용할 경우 yarn create react-app 프로젝트이름 // npm 5.2이상일 경우 npx create-react-app 프로젝트이름 // npm 5.1 이하인 경우(비추천) npm install -g create-react-app create-react-app 프로젝트이름 2. Yarn Berry 적용하기 프로젝트를 생성하고 나면 기본적으로 node_modules와 yarn.lock(package.lock.json)이 생성된 프로젝트가 만들어진다. yarn berry를 사용하기 위해서는, node_modules와 yarn.lock파일을 ..

[숫자 타입] 기존 언어들은 숫자 타입을 int, long, float, double 등 다양한 타입을 제공했지만, JS에서는 단 하나만의 숫자 타입이 존재합니다. 모든 수를 실수로 처리하며, 정수만을 위한 데이터 타입이 별도로 존재하지 않습니다! const integer = 10; const double = 10.23; const negative = -12; 한마디로, 위의 수와 같이 다양한 형식으로 작성하더라도 모두의 타입은 'number'로써 같다는 뜻 입니다! 뿐만 아니라 2진수, 8진수, 16진수 등 다양한 표기법의 숫자들은 모두 메모리에 64비트 부동소수점 형식의 2진수로 저장되기 때문에 표기법이 다르더라도 모두 같은수로 인식됩니다. // 세 수는 모두 65로 해석된다. const binary..

모든 언어가 그러하듯, 자바스크립트도 여러 변수 타입을 갖고있습니다. 그 사이에서 개발자가 원하는 대로 변수의 타입을 변환하는 것이 가능하도록 해주는 것이 타입 변환입니다. 타입변환의 유형에는 명시적 타입변환과 암묵적 타입 변환이 있습니다 :) 간단한 예로, integer타입의 변수를 string으로 변환하는 것을 예로 들어보겠습니다. const num=1234; //toString 매서드를 이용하면, 문자열로 타입을 변경할 수 있다. const first=num.toString(); //다른 타입의 변수에 string문자열을 + 해주면, 자동으로 string으로 형 변환이 된다. const second=num+""; console.log(typeof first); console.log(typeof se..

새롭게 제작한 웹 페이지를 배포하게 되었다. 기존에 배포했던 경험은 Github Page를 이용해서 호스팅을 진행한 뒤, 커스텀 도메인을 연결하는 방식을 사용했다. 하지만, 실무에서 이용되는 웹 페이지인 만큼 현재 가장 많이 사용되고 있는 웹 페이지 배포방법을 사용하자! 라는 생각으로 React로 만든 웹 페이지를 배포하는 다양한 방법에 대해서 정리해 보기로 했다. 1. Netlify Netlify는 정적 웹 사이트나 앱을 무료로 호스팅할 수 있게 해주는 클라우드 플랫폼이다. 정적 파일을 저장하고 CDN(Content Delivery Network)를 통해 사용자에게 빠르게 제공된다. 또한, 서버리스 컴퓨팅 및 엣지 컴퓨팅의 서비스와 기능을 제공하여 프론트엔드의 코드와 함께, 버전제어, 구축 및 배포되는..

React Native란? React Native는 Facebook에서 개발한 오픈 소스 모바일 애플리케이션 개발 프레임워크다. 기존 android studio와 다르게 JavaScript와 React를 이용하여 ios와 Android 플랫폼에 모바일 앱을 만들 수 있도록 도와준다. 실제 네이티브 UI컴포넌트(네이티브 코드를 사용한 UI)를 사용하여 앱을 개발하기 때문에 성능과 UX를 향상시킬 수 있다. 앱의 코드를 공통으로 사용하여 ios와 Android 모두에서 동작할 수 있도록 한다. 이로 인해 동일한 코드베이스를 유지하면서 여러 플랫폼에 앱을 배포할 수 있다는 장점이 있다. 장점 네이티브 컴포넌트를 사용하기 때문에 성능이 좋다. React 컴포넌트를 기반으로 개발하기 때문에 재사용성이 높다. 앱을..

react-query는 서버의 값을 가져오거나 캐싱, 업데이트, 에러를 핸들링하는것에 도움을 주는 라이브러리다. React Query 기능 서버, 클라이언트 데이터를 분리 get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다. 동일 데이터 여러 요청이 들어오면 한번만 요청 (중복 허용 시간 조절 가능) 비동기 과정을 선언적으로 관리 useEffect를 사용한 api선언에 대한 문제점을 해결할 수 있다. 무한 스크롤 초기 설정 react-query를 사용하기 위해서는 초기 세팅이 필요하다. index.js파일 내부에 QueryClient를 이용해 초기 옵션들을 설정해주고, QueryClientProvider로 감싸주어야 한다. 세부적인 옵션의 내용들은 공식문서를 참고하는게 좋다! ..

웹 페이지는 레이아웃이라는 개념이 존재합니다. 레이아웃이 의미하는것이 무엇이냐면, 아래의 Lush 홈페이지를 예로 들어보겠습니다. 빨간선으로 구분해 놓은것처럼 웹페이즈를 개발자가 원하는 구역으로 나누어 놓은 하나 하나를 각각의 레이아웃이라고 표현합니다. 이런 레이아웃을 사용할때 가장 많이 사용되는 방식이 Flex와 Grid입니다. 간단하게 설명하자면, Flex의 경우에는 1차원적으로 수평, 수직으로 레이아웃을 정하는 방식입니다. 그림과 같이 Flex 태그안에 있는 item들의 방향을 정하는데 그 방향을 row나 column 두가지의 방법을 이용하여 정하는 것입니다. Flex의 경우 display : flex; 를 통해 설정할 수 있습니다. display : flex의 기본값은 row이고, 상하로 정렬하고..

1.변수의 자동 초기화 js에서는 변수를 선언할 때에 직접 초기화 해 주지 않더라도 자동으로 초기화가 되어진다. 따라서 직접 초기화를 하지 않더라도 변수값을 참조할때에 나오는 쓰레기값이 없어 해당 위험으로 부터 안전하다. var score; console.log(score); 2. 변수 호이스팅 변수를 선언하기 이전에 미리 사용하고 나중에 해당 변수를 선언한다 하더라도, 변수 선언이 코드의 선두로 끌어 올려진듯 실행되는 것을 변수 호이스팅이라고 한다. 변수 호이스팅의 이유는 변수 선언 소스코드가 런타임이 아니라 그 이전단계에 먼저 실행이 되기 때문이다. 즉, 변수선언은 소스코드의 어느위치에 있던지 상관없이 가장 먼저 실행되기 때문에 위치가 중요하지 않다. 하지만 이와 별개로 변수 값 할당은 런타임시점에서..