차근차근

윈도우 환경에서 NODE_ENV를 사용하게 되면 아래와 같은 오류가 발생한다. // 영어 'NODE_ENV' is not recognized as an internal or external command, operable program or batch file. // 한글 'NODE_ENV'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. win-node-env를 설치하면 해결된다. $ npm install -g win-node-env

미루고 미루다 이제서야 쓰는 한국시리즈 5차전 후기 와,,,,,,,,,, 한국시리즈 티켓팅 죄다 실패했지만,,, 운 좋게 5차전 겨우 갈 수 있게 됐다ㅠㅠ 1차전 진짜 가고싶었는데 흑흑 사람들 티켓팅 왜이리 잘하지,,? 내가 못하는 건가?ㅎㅎ 하루 정도는 성공할 줄 알았는데.. 아무튼!!! LG 트윈스가 1차전 패배하고, 2~4차전을 다 승리해서 3승 1패일 때 5차전을 갔다. 5차전 이기면 4승 1패로 통합 우승이 확정되기 때문에 제발 오늘 이겨라 하면서 3시간 일찍 응원하러 갔다. 선착순으로 받은 한국시리즈 머플러!! 사실 이 머플러가 너무 받고 싶어서 일찍 갔음ㅎ 이 날 날씨가 너무 추웠는데 머플러 목에 두르니까 좀 나았다. 3루 외야석에서 본 풍경이다. 내 유니폼 마킹이 문성주 선수인데 좌익수라 ..

Vite 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다. node.js(버전 18+ 또는 20+을 요구) 기반의 Vue 개발을 위한 스캐폴딩 도구이다. Vue 뿐만 아니라 대부분의 프론트엔드 프레임워크를 지원한다. Native ES Module, HMR(Hot Module Replacement)등을 제공한다. .vue를 이용하여 만든 애플리케이션을 .html로 변경하기 위한 빌드 도구로 사용된다. 프로젝트 생성 $ npm create vite@latest # Vite + Vue 프로젝트 생성 $ npm create vite@latest my-app -- --template vue 프로젝트 실행 후 브라우저로 접속 시 화면 출력 $ cd my-app $ npm install..

Setup setup()을 통해 Composition API를 사용할 수 있다. 변수 선언은 ref 함수를 사용하고, 변수를 사용하기 위해서는 return 해야한다. 변수 값에 접근하기 위해서는 value 속성에 접근해야 한다. {{ message }} 함수 setup() 안에 사용할 함수를 작성한다. 클릭 {{ message }} 라이프사이클 라이프사이클을 제어하려면 hook을 import 해야한다. mounted -> onMounted unmounted -> onUnmounted updated -> onUpdated Computed import 하여 사용할 수 있다. {{ message }} {{ reverseMessage }} Watch import 하여 사용할 수 있다. {{ message }} ..

Vue를 기준으로 설명하겠다. 만약 Vue를 사용하여 만든 페이지를 남들도 볼 수 있게 배포하려면 build용 파일을 생성해야 한다. 웹 브라우저는 html, css, js 세 개의 언어만 해석할 수 있기 때문에 build를 하여 html, css, js 파일로 바꾸어주어야 한다. Vue 프로젝트에서 터미널을 켠 후 build 하는데, 심각한 오류가 있다면 build 되지 않으니 수정이 필요하다. $ npm run build // or $ yarn build build 후에는 프로젝트 폴더 내에 dist라는 폴더가 하나 생성된다. dist 폴더 안에는 index.html, css, js 파일이 모두 담겨있고, 파일명도 무작위로 생성해준다. 이제 무료로 호스팅해주는 Github pages에 배포해보자. G..

Composition API Vue2에서는 Options API를 사용한다. Options API는 개발자에게 코드의 직관성, 가독성을 높이지만 프로젝트의 규모가 커질수록 유지보수가 어려워진다. 이를 보완하기 위해 Vue3에서는 Composition API를 사용한다. https://hjkang.tistory.com/73 Vue2 Vue3 Fragments Vue2에서는 컴포넌트의 루트 노드가 한 개였어야 했지만, Vue3에서는 여러 개의 루트 노드를 지정할 수 있다. Vue2 ... ... ... Vue3 ... ... ... CSS 변수 Vue3에서는 template에서 정의한 변수를 그대로 style에서 사용할 수 있다. hello world v-if Vue2에서는 v-if를 사용할 때 key 사용..

SEO(검색 엔진 최적화)란? Search Engine Optimization 검색 엔진이 이해하기 쉽도록 홈페이지의 구조와 페이지를 개발하여 검색 결과 상위에 노출될 수 있도록 하는 작업 SEO를 위한 작업 1. Http보단 Https를 사용 구글의 경우 Https 보안 프로토콜을 더 선호하여 1%에 해당하는 랭킹 가산점을 부여 2. 메타 태그 태그: 검색 엔진에 검색했을 때 노출되는 제목으로, 너무 긴 텍스트를 사용하거나 단일한 제목을 사용하지 않도록 유의 태그: 웹 페이지의 설명을 요약한 한 두 줄의 문장으로, 대부분의 유저가 메타 디스크립션을 보고 해당 웹 페이지에 자신이 찾고 있는 정보가 담겨있는지를 판단하므로 중요 태그: 웹 페이지 별 검색 로봇의 접근 여부를 설정할 때 활용하는 태그 태그: ..

상태 코드란? 클라이언트와 서버 간의 통신 상태를 나타내는 일련의 표준화된 코드 모음이다. 클라이언트는 요청에 대한 성공, 실패에 대한 피드백을 상태 코드를 통해 알 수 있다. 상태 코드는 세 자리의 숫자로 만들어져 있고, 각 첫 번째 자리의 수로 그룹을 구분할 수 있다. 상태 코드 설명 1xx(정보) 요청을 받았으며 프로세스를 계속 진행합니다. 2xx(성공) 요청을 성공적으로 받았으며 인식했고 수용하였습니다. 3xx(리다이렉션) 요청 완료를 위해 추가 작업 조치가 필요합니다. 4xx(클라이언트 오류) 요청의 문법이 잘못되었거나 요청을 처리할 수 없습니다. 5xx(서버 오류) 서버가 명백히 유효한 요청에 대한 충족을 실패했습니다. 1XX 서버가 요청을 받았으며, 서버에 연결된 클라이언트는 작업을 계속하라..

useEffect 훅이란? 클래스 컴포넌트의 라이프사이클 함수와 비슷한 역할 한 컴포넌트 안에서 여러 번 정의하여 사용 가능 useEffect 훅의 첫 번째 매개 변수에는 콜백 함수를 설정할 수 있으며, 이 콜백 함수는 useEffect 훅의 역할을 정의 두 번째 매개 변수에는 배열 전달 첫 번째 매개 변수로 함수를 반환하는 경우 useEffect(() => { ... return () => { ... }; }); 클래스 컴포넌트의 componentWillUnmount 라이프사이클 함수와 같은 역할을 수행 즉, 컴포넌트가 화면에서 사라진 이후에 이 함수가 호출 라이브러리의 연동을 해제하거나 타이머를 해제하는 데에 주로 사용 두 번째 매개 변수로 빈 배열 전달하는 경우 useEffect(() => { ....

오랜만의 야구 포스트ㅋ 그동안 블로그에 올리진 않았지만 직관은 정말 여러 번 다녀왔다! 야구 너무 재밌엉,,ㅎ LG 트윈스 2023년 정규 시즌 우승이 10월 3일에 확정됐다. (비대면 우승, 방구석 우승,,,ㅠ) 야구장에서 확정됐으면 더 좋았을 거 같지만 ㅋㅋㅋㅋㅋ 그래도 우승해서 너무 기분 좋다ㅎ 마음 같아서는 우승 확정 다음 날인 10월 4일 직관을 가고 싶었지만 부산 원정 경기이다 보니 갈 수 없었고 10월 6일 첫 홈경기를 가기로..! 29년 만의 우승이라 티켓팅이 정말 치열했다. 매진이길래 티켓링크에서 새로고침 계속하면서 외야 406블록 1석 구했다!!!!!! 신난당 ㅋ 위의 사진이 외야 406블록 9열 통로 쪽 사진 외야는 갈 때마다 느끼는 거지만 소풍 나온 기분이다. 내야보다 시야는 안 좋..