본문 바로가기

분류 전체보기328

[Vue] 라이프 사이클 훅, 다이어그램 설명 ⚠️ 이 포스팅은 Vue3(한국어): 어플리케이션 & 컴포넌트 인스턴스을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 라이프사이클 훅 라이프사이클 다이어그램 라이프사이클 훅 라이프 사이클이란 컴포넌트가 우리 눈에 보이게된 그 순간부터 사라지는 순간까지 즉, 컴포넌트의 생애주기를 말한다. Vue에서는 컴포넌트가 1) 데이터 관찰 2) 템플릿 컴파일 3) 인스턴스를 DOM에 마운트 4) 데이터 변경 시 DOM을 업데이트라는 일련의 과정을 거치게된다. 이 과정에서 라이프사이클 훅이라 불리는 함수를 사용해 사용자가 특정 단계에서 자신의 코드를 추가할 수 있는 기회를 제공한다. 예를들어, created 훅은 인스턴스가 생성된 후에 실행되는 함수다. 그러므로 count의 데이터값이 1로 업데이트된 후에 created.. 2022. 6. 12.
[Vue] 어플리케이션 인스턴스 생성하기 ⚠️ 이 포스팅은 Vue3(한국어): 어플리케이션 & 컴포넌트 인스턴스을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 어플리케이션 인스턴스 생성하기 컴포넌트 인스턴스 속성들 어플리케이션 인스턴스 생성하기 1. 인스턴스 생성 자바스크립트에서 인스턴스란 생성자 함수를 사용해 생성된 객체를 말한다. Vue에서 사용하는 인스턴스는 createApp 함수를 사용하여 만든 Vue 객체(어플리케이션)를 의미한다. 여러 옵션을 가지고 있는 RootComponent는 createApp의 인수로 들어가 어플리케이션이 브라우저에 나타날때 렌더링의 시작점으로 사용된다. const RootComponent = { /* options */ } Vue.createApp(RootComponent) Vue.createApp({ /* o.. 2022. 6. 12.
[Vue/한줄정리] 동적전달인자(Dynamic Parameter)란? 객체에서 key를 유동적인 값으로 받아올 수 있는 것 const xyz = 'password'; const user = { name: 'maple', [xyz]: undefined, } console.log(user.password) 2022. 6. 12.
[Vue] Vue에서 데이터, 메서드 만들고 화면에 출력해주기 (Declarative Rendering) App.vue DeclarativeRendering.vue Declarative Rendering {{ count }} Vue에서는 increase라는 메서드를 호출하기 위해서 함수 그 자체를 전달하거나 인수를 전달해주어야할 경우 인수를 넣어 해당 함수를 호출해준다. // increase라는 메서드를 전달 {{ count }} // 인수가 필요한 경우 인수를 전달해 함수를 호출해준다 {{ count }} 2022. 6. 12.
[Vue] Vue에서 조건문과 반복문 사용하기 (Conditional statements and loops) 조건문과 반복문 1. v-if="조건문" 조건문을 만족할때 (true일때) 해당 요소를 출력 2. v-for="데이터 in 배열" 배열에 있는 모든 데이터를 반복문을 돌려 순서대로 하나하나 출력 데이터를 하나씩 출력할때 고유한 key값을 해당 요소에 부여해줘야한다 key값을 가지고 있어야 Vue가 요소를 구별할 수 있게 되면서 최적화 작업을 해줄 수 있다 예제 Conditional statements and loops {{ count }} 4보다 큽니다! {{ fruit }} 새로 배운 디렉티브 정리 v-if="조건문": 조건문을 만족할때 (true일때) 해당 요소를 출력 v-for="데이터 in 배열": 배열에 있는 모든 데이터를 반복문을 돌려 순서대로 하나하나 출력 (key값 필요) 2022. 6. 10.
[Vue/한줄정리] 디렉티브(Directive)란? Vue 프로젝트에서 HTML 요소안에 v- 접두어를 가진 속성을 의미한다. 예시) v-on:click, v-if, v-fora 2022. 6. 10.
[Vue] Vue에서 Sass 설치하고 사용하는 방법 Sass 설치하기 npm npm install -D sass-loader sass yarn yarn add -D sass-loader sass Sass 사용하기 scss를 사용하고 싶으면 lang="scss"를 입력하면 된다. ... 2022. 6. 10.
[Vue/ESLint 에러해결] Component name "Something" should always be multi-word. ⚠️ 에러내용 원문 Component name "Count" should always be multi-word. 해석 컴포넌트 이름 "Count"는 여러 단어로 이루어져야한다 ❓ 에러발생이유 ESLint 설정에서 컴포넌트 이름이 한단어로 이루어져 있을 수 없도록 설정했기 때문에 에러가 발생하였다. ❗️ 해결방법 1. ESLint 재설정 'vue/multi-word-component-names': ['error', { 'ignores': ['Home'] }] 2. 컴포넌트이름 두단어 이상으로 변경 2022. 6. 10.
[Vue] CLI로 Vue 프로젝트 생성하기 전역으로 vue CLI 설치하기 CLI(Command Line Interface): 컴퓨터에 그래픽으로 명령을 내리는 GUI(Graphic User Interface)와 반대되는 개념으로 커맨드 라인 즉 일종의 코드로 컴퓨터에 명령을 내리는 것. npm npm install -g @vue/cli yarn yarn global add @vue/cli vue 프로젝트 생성 해당 명령어로 vue 프로젝트 생성 vue create 버전2와 3중에 선택 설치가 끝나면 프로젝트 안으로 들어가 해당 프로젝트를 실행한다 cd npm과 yarn 둘중 하나로 프로젝트 실행 npm run serve yarn serve 해당 주소로 접속한다 http://localhost:8080/ 2022. 6. 9.
[Vue] 반응형데이터 만들고 화면에 출력해주기 (선언적 렌더링) ⚠️ 이 포스팅은 Vue3(한국어): 시작하기를 공부하고 정리한 블로그 포스팅입니다. ⚠️ 선언적 렌더링(Declarative Rendering) 선언적 렌더링 JavaScript로 HTML 문서의 데이터를 변경할때는 다음과 같은 과정을 거친다: 1. 데이터 변경 2. 변경된 데이터를 해당 요소에(화면에) 업데이트 JavaScript로 문서에 있는 데이터를 변경할때는 항상 변경된 데이터를 화면에 표시해주는 작업을 해주어야한다. 이러한 불편함을 해소하기 위해 자바스크립트 프레임워크, 라이브러리를 사용한다. Vue, React, Svelte와 같은 자바스크립트 프레임워크는 데이터를 변경하는 즉시 화면에 반영되기 때문에 변경된 데이터를 화면에 출력하는 작업을 생략할 수 있어 편리하다. 아래의 코드는 자바스크립.. 2022. 6. 9.
[자바스크립트] 프로토타입(prototype) 정리 프로토타입이란? 기존의 객체를 상속받아 새로운 객체를 생성하는 방식 객체의 원형 즉 상속받은 부모객체를 말한다 프로토타입의 이해 1) 자바스크립트는 프로토타입을 기반으로 하는 프로그래밍 언어이다 (Java는 클래스 기반 객체지향 프로그래밍 언어) 2) 자바스크립트에서는 객체를 프로토타입이라는 방식(기존 객체에서 프로퍼티, 메서드를 상속받는 방식)으로 생성한다 3) 프로토타입을 이해한다면 자바스크립트의 동작 원리를 이해할 수 있다 4) 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다 5) 연결된 부모 객체에서 프로퍼티, 메서드를 상속받을 수 있다 6) 부모 객체를 프로토타입 객체 줄여서 프로토타입이라고 한다 예제 amy라는 객체 2개의 프로퍼티: firstName, lastNa.. 2022. 5. 28.
[자바스크립트] Date.now() 메서드로 유니크한 id값 만들어주기 Date 객체에 있는 now() 메서드는 현재시간을 밀리세컨즈 형태로 리턴해준다. 리턴된 밀리세컨즈를 문자열로 변환해 유니크한 id값을 만들어 줄 수 있다. 예시 function createList(name) { return { id: Date.now().toString(), name: name, tasks: [] }; } 2022. 5. 27.
[웹개발] Parcel 번들러로 프로젝트 시작하기 Parcel이란? 모듈화된 코드를 브라우저에서 실행할 수 있도록 여러개로 나눠진 파일을 합쳐주는 번들러의 한 종류다. Parcel로 프로젝트 시작하기 1. 프로젝트 VScode로 열어주기 code 2. 프로젝트를 npm에서 관리해주기 package.json 파일 생성 -y 플래그는 기본 설정 질문을 디폴트로 설정 npm npm init -y yarn yarn init -y 3. Parcel 번들러를 개발용으로 설치하기 npm npm i parcel-bundler -D yarn yarn add parcel-bundler -D 4. Parcel 명령어 package.json 파일에 등록해주기 dev 명령어: parcel 명령어로 개발 서버 열기 (index.html 파일을 웹브라우저에 띄워주기) build .. 2022. 5. 27.
[자바스크립트] 타이머 함수 정리 (setTimeout, setInterval, clearTimeout, clearInterval) 1. setTimeout(함수, 시간) 일정 시간 후 함수 실행 첫번째 인자: 실행할 함수 두번째 인자: 해당 시간 후 첫번째 인자로 받은 함수를 실행 (밀리세컨즈로 표기) 예제 3초후에 console창에 maple이라는 문자열을 표시한다 setTimeout(() => { console.log(‘maple’) }, 3000) 2. setInterval(함수, 시간) 시간 간격마다 함수 실행 첫번째 인자: 실행할 함수 두번째 인자: 해당 시간 간격마다 첫번째 인자로 받은 함수를 실행 (밀리세컨즈로 표기) 예제 3초마다 console창에 maple이라는 문자열을 표시한다 setInterval(() => { console.log(‘maple’) }, 3000) 3. clearTimeout(timeoutID) .. 2022. 5. 27.
[자바스크립트] 콜백(Callback) 정리 콜백이란? 함수의 인수(argument)로 사용되는 함수 예시 timeout은 인수가 없고 3초 뒤에 콘솔창에 maple을 출력하는 함수다 function timeout() { setTimeout(() => { console.log(‘maple’) }, 3000) } timeout(); timeout 함수의 인수로 함수를 전달할 수도 있는데 이렇게 어떤 함수의 인수로 사용되는 함수를 콜백함수라고 한다. timeout(() => { console.log(‘Done’) }); timeout 함수에 콜백함수를 전달해주고 싶기 때문에 이를 받아줄 매개변수도 등록해준다. 이때 매개변수로 받아준 함수를 timeout 함수 안에서 실행하기 위해 cb() 호출해준다 function timeout(cb) { setTim.. 2022. 5. 27.
[웹개발/한줄정리] 코드 난독화 빌드된 결과(제품)는 브라우저에서 해석되는 용도이므로 용량을 축소하기 위해 파일을 압축하는 최적화를 거친다. 이렇게 개발시 작성된 코드를 최적화를 위해읽기 어렵게 만드는 작업을 코드 난독화라고 한다. 즉, 개발자가 보는 용도가 아닌 웹브라우저에서 동작시키는 용도로 만들어진 코드가 코드 난독화 과정을 거친 코드다. 2022. 5. 27.
[리액트] react-router-dom v6 사용법 ⚠️ 이 포스팅은 codevolution을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: React Router Tutorial React Router 라이브러리란? react-router는 특정한 주소와 컴포넌트를 연결시켜 주소 이동으로 다른 컴포넌트 화면을 보여줄 수 있도록 하는 라이브러리다. 1. react-router-dom 라이브러리 v6 설치하기 v6 다운받기 yarn add react-router-dom@6 가장 최신버전 다운받기 yarn add react-router-dom@latest 2. index.js에 BrowserRouter 적용하기 로 프로젝트에 라우터를 적용한다. 컴포넌트는 1) 사용자가 입력한 주소를 감지하는 역할 2) 여러 종류의 라우.. 2022. 5. 26.
[웹개발/한줄정리] LTS(Long Term Supported) 장기적으로 안정되고 신뢰도가 높은 지원이 보장되는 버전 유지, 보수, 보안에 초점을 맞춰 대부분 사용자에게 추천되는 버전 2022. 5. 26.
[Node.js] nvm 설치방법 1. nvm GitHub에 들어가서 Installing and Updating 섹션으로 이동 후 아래의 코드 복사 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash 2. 터미널에 해당 코드를 붙어넣는다 3. nvm이 설치되었는지 확인하고 싶다면 아래의 코드로 컴퓨터에 설치된 nvm의 버전을 확인한다 nvm --version 2022. 5. 26.
[Node.js] Node.js란? Node.js Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임. JavaScript 엔진: 자바스크립트 문법을 해석하고 동작시켜줄 수 있는 엔진 런타임: 프로그래밍 언어가 동작하는 환경 자바스크립트 런타임: 자바스크립트 프로그래밍 언어가 동작하는 컴퓨터 환경 자바스크립트가 동작할 수 있는 환경 2가지 1. Node.js가 설치된 컴퓨터 2. 웹 브라우저 (Chrome, Firefox, Safari…) 프론트엔드에서 Node.js의 쓸모 웹브라우저에서는 HTML, CSS, JavaScript만 동작 한다. 웹 개발시 개발을 도와주는 모듈을 사용하는데 모듈은 브라우저에서 동작 하지 못한다. 이때 Node.js 환경에서 모듈을 변환시켜 웹브라우저에서 동작시킬 수 있도록 컴퓨터에.. 2022. 5. 26.

티스토리툴바