Frontend (11) 썸네일형 리스트형 유지보수에 큰 도움이 되는 React 절대 경로 설정 React로 개발을 하다 보면 import 문은 필수입니다. 하지만 프로젝트 규모가 커지면 다음과 같은 상대 경로의 지옥을 맛보게 됩니다. 매번 경로를 찾아서 ../../ 와 같이 상대 경로를 작성하다 보면 파일이 이동할 때마다 import 구문에 있는 경로를 바꿔야 하고 ../../../ 이렇게 너무 길어지면 경로를 파악하기에도 불편합니다. 이런 복잡한 상대 경로 대신, 프로젝트 루트를 기준으로 하는 절대 경로를 사용하면 코드가 훨씬 깔끔해집니다.아래 이미지와 같이 @/ 을 이용해서 위치를 알아서 찾을 수 있습니다. 절대 경로 세팅은 크게 두 단계로 나뉩니다. "왜 두 번이나 설정해야 하지?"라는 의문이 드신다면 아래 내용을 참고해 주세요. 1. TypeScript 설정 (tsconfig.json).. 아직도 CRA를 사용하시나요? "빛"처럼 빠른 Vite로 갈아타는 법 혹시 아직도 React 프로젝트를 생성할 때 Create React App(CRA)을 사용해서 만들고 작업하시나요? 프로젝트 규모가 커질수록 서버를 띄울 때 한참을 기다려야 하는 그 답답함, 저도 잘 알고 있습니다. 현재 CRA는 메타(Meta)에서도 더 이상 공식적으로 권장하지 않으며, 사실상 유지보수 중단 상태입니다. 이제는 "빛"이라는 이름의 의미처럼 압도적인 속도를 자랑하는 Vite가 대세입니다. ViteNext Generation Frontend Toolingvite.dev Vite를 사용해야하는 이유Webpack(CRA) vs Native ESM(Vite): 기존 Webpack(번들러 방식)은 시작할 때 모든 모듈을 거미줄처럼 다 엮어서 거대한 번들을 만들어야 서버가 뜨지만, Vite는 .. Vercel로 프론트엔드 프로젝트 5분 만에 배포하기 React, Vue.js 등 프레임워크를 사용해서 개발을 완료하면 웹 서버를 배포할 때 사용하는 호스팅 서비스로 Vercel이 있다. 이 외에도 Netlify, AWS Amplify등의 호스팅 서비스나 Nginx를 이용한 배포도 있지만 가장 간편한 Vercel로 배포하는 방법을 알아보자. 배포는 매우 간단하고 별도의 어려운 설정 없이도 할 수 있다. 우선 Vercel로 배포하는 방법은 두 가지가 있다. Vercel 웹사이트에서 직접 배포하는 방법과 Vercel CLI를 통한 배포 방법이다. 두 방법의 가장 큰 차이는 우선 웹사이트에서 직접 배포하는 방식은 자동 배포가 가능한 반면 CLI는 수동 배포 기능만 존재한다. 웹사이트에서 자동 배포하는 방식은 연동된 Git 저장소에 push할 때마다 Vercel이.. 자바스크립트 전개 연산자와 구조 분해 할당 자바스크립트를 공부 하다보면 한 번쯤 보고 들었을 만한 것이 전개 연산자(Spread Operator)와 구조 분해 할당(Destructuring Assignment)입니다. 전개 연산자(Spread Operator) 배열 및 객체를 다루다 보면 배열 또는 객체 안에 [ ...arr1 , 4, 5 ] 와 같이 ... 이 사용된 것을 찾아 볼 수 있습니다. 이것이 바로 전개 연산자인데 만들어진 객체/배열을 다른 객체/배열에 결합할 때 사용하고는 합니다. 아래와 같이 player라는 객체가 있다고 가정해 봅시다.const player = { name : 'John' , position : 'goalKeeper' }; 이 player 객체를 기반으로 나이에 대한 정보도 추가한 newPlayer를 만들고 .. 자바스크립트 함수 선언 방식(기본 함수/ 익명 함수/ 화살표 함수) 자바스크립트 함수는 특별한 목적을 수행하기 위하여 설계된 독립적인 블록입니다. 이러한 함수는 필요할 때마다 호출해서 사용할 수 있습니다. 대개 사용되는 함수의 선언 방식은 세 가지가 있습니다. 기본 함수, 익명 함수, 화살표 함수가 있습니다. 먼저 기본 함수의 경우에는 function 이라는 키워드 우측에 함수명을 작성하고 그 우측에는 다시 매개 변수가 들어가는 공간으로 소괄호를 만들어 줍니다. 그리고 우측에는 중괄호를 만들고 안에 소스코드를 넣어 줍니다. 아래의 예시를 참고하면 쉽게 이해하실 수 있습니다. sum이라는 함수명을 임의로 만들고(다른 함수명도 상관 없습니다) 매개변수에는 a와 b라는 값을 넣어준 후에 a와 b를 합친 값을 return(반환)하는 함수를 만들어 주었습니다. functio.. 자바/자바스크립트 삼항연산자 쉽게 이해하기 삼항연산자(Conditional Operator)는 간단한 조건문을 다룰 때 유용하다. 쉽게 말하자면 어떠한 조건을 기준으로 조건에 부합하는 경우와 조건에 부합하지 않는 경우를 나누어서 나타내 주는 연산자이다. 자바와 자바스크립트 두 언어에서 모두 같은 방식으로 사용된다.다음은 이클립스에서 삼항연산자를 사용한 구문이다. String 타입의 변수 isISeven에 값을 담아 줄 것인데 그 값으로 삼항연산자를 사용하여서 조건이 일치하면 왼쪽에 있는 YES, Seven이 나오게 하였고 일치하지 않는다면 우측에 있는 No가 나오게 하였다. 아래에서 보면 알 수 있듯이 조건 우측에 ?를 입력하고 그 뒤에는 :을 사용하여 좌측에 일치하는 경우 우측에는 불일치하는 경우를 나누어 주었다. 아래에서는 변수 i에 담긴 값.. Vue cli 설치하기 이전 시간에는 cdn을 사용해서 Vue.js를 사용하는 방법을 알아보았는데요, 일일이 cdn을 이용하여 import하지 않아도 vue cli(command line interface)를 설치하면 더 쉽게 Vue.js를 이용할 수 있습니다. 먼저 vue cli를 검색하면 vue 공식 홈페이지가 나옵니다. 화면에 보이는 Vue CLI를 클릭해서 사이트로 접속합니다.홈페이지에 들어가면 vue cli를 설치하는 방법이 나와 있습니다. npm install -g @vue/cli 또는 yarn global add @vue/cli 명령을 통하여 Vue CLI 사용이 가능합니다. global은 전역으로 설치한다는 뜻으로 한 프로젝트가 아닌 전체의 파일에서 사용할 수 있게 적용하는 것입니다.터미널 창에서 npm inst.. Vue Parsing error: No Babel config file detected 해결법 Vue에서 프로젝트를 만들었는데 갑자기 빨간색 표시가 나타나면서 Parsing error: No Bable config file detected ~ 관련 에러가 나타났다. 알고보니 Extension으로 사용하는 Eslint 설정 파일에서 인식하는 문제가 발생한 것이었다. ESLint에 있는 설정 버튼 아이콘을 누르면 확장 설정이 보이는데 클릭해준다. Eslint 관련 설정 목록들이 보이는데 중간에 settings.json에서 편집이라는 항목들이 보이면 아무거나 클릭해준다. 여기서 아래와 같은 내용을 추가해주면 문제가 해결된다."eslint.workingDirectories": [ {"mode": "auto"} ], 이제 오류가 나지 않는 것을 볼 수 있다. 즐거운 시간 보내세요~ 이전 1 2 다음
