Vue 생명주기 컴포넌트가 생성 후, 소멸될 때까지의 주기가 있습니다. 크게 create, mount, update, destory 로 나뉘며, 각각 before 를 가지고 있다고 생각하면 된다. 자주 사용하는 라이프사이클 함수로는 created, mounted, (beforeUpdate, update), destory 가 있습니다. created created 는 인스턴스가 생성되면 발생하는 라이프 사이클 함수로 처음에 실행하고자 하는 동작을 넣으면 된다. 하지만, 돔이 그려지지 않은 상태라는 것을 참고하자. mounted mounted 는 돔에 접근할 수 있는 라이프사이클로써 비동기로 인해 돔이 다그려지지 않는 경우도 발생한다. 그런 경우, $.nextTick() 을 이용하면 됨. update upd..
Vuex 란? 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 라이브러리입니다. Flux 란? Vuex 는 Flux 패턴을 기반으로 만들어졌다고 함. MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴 Action -> Dispatcher -> Model -> View (단방향 데이터 흐름을 가지고 있음.) MVC 패턴의 문제점으로 데이트 흐름이 여러 방향으로 기능 추가 및 변경시 앱이 복잡해지면서 생기는 업데이트를 예측할 수 없음. Vuex 를 사용하는 이유 컴포넌트 갯수가 많아질수록, 컴포넌트 간의 파라미터를 통한 데이터 전달이 어렵다. MVC 패턴에서 발생하는 구조적 오류 해결 (vuex 도 단방향) 여러 개의 컴포넌트에서 같은 데이터를 통한 업데이트시 동기화 문제 (mutatio..
웹팩 개발서버 개발환경과 운영환경을 맞춤으로써 배포시 잠재적 문제를 미리 확인할 수 있다. 프론트엔드 개발환경에서 이러한 개발용 서버를 제공해주는 것이 Webpack-dev-server 이다. npm install Webpack-dev-serverpackage.json { "scripts": { "start": "webpack-dev-server --progress" } }--progress 를 추가하면 빌드 진행률을 보여준다. 기본 설정 웹팩 설정 파일의 devServer 객체에 개발 서버 옵션을 설정할 수 있다. webpack.config.js module.exports = { devServer: { // 아웃풋 contentBase: path.join(__dirname, "dist"), // 브라우..
린트란? 코드의 오류, 버그, 스타일 등 코드 규격을 점검하는 것을 린트라고 부릅니다. 린트를 사용하면 코드의 가독성을 높일 수 있고, 스크립트의 런타임 에러를 예방할 수 있습니다. (미리 오류를 뱉어주기 때문에) ESLint ECMAScript 를 검사하는 도구 중 하나이다. ESLint 를 사용해서 코드의 포멧팅, 품질 을 검사할 수 있다. 혼자 개발하는 경우에는 자기만의 스타일대로 하기 때문에 큰 문제점은 생기지 않을 수 있지만, 여러 사람이 개발하는 경우에는 코드의 스타일을 가지고 있는 것이 좋다. 이를 이용하여 스타일, 잠재정 버그를 예방할 수 있다. npm install eslint // .eslintrc.js 만들기 npx eslint --init rules 를 이용하여 여러 규칙을 추가할 ..
크로스 브라우징 브라우저마다 사용하는 언어 스펙이 달라 코드를 읽지 못하는 경우가 발생한다. 자바스크립트의 경우, IE 에서 프라미스를 이해하지 못하는데 이를 해결해줄 수 있는 것이 바벨이다. es6 이상의 언어로 작성된 코드를 바벨을 이용한 트랜스파일링 작업을 하여 모든 브라우저에서 호환가능하도록 한다. 바벨 설치 npm install @babel/core @babel/cli // 실행 npx babel app.js 프리셋 바벨에는 여러가지 플러그인이 있는데, block-scoping, arrow-functions 등등 이 있다. 이러한 것들을 하나씩 다운받기는 우리는 너무 너무 귀찮다. 그러니까 이러한 플러그인이 모아져 있는 프리셋을 사용하자 ^.^~~ preset-env 는 es6 를 변환할 때 사..
플러그인 이란? 로더가 파일 단위로 처리한다면, 플러그인은 번들된 결과물을 난독화, 특정 텍스트를 추출하는 용도 등으로 사용하도록 합니다. 간단하게 커스텀 플러그인을 만들어 보자. my-webpack-plugin.js /* 로더와 달리 플러그인은 클래스로 되어 있고 apply 함수를 구현하여 인자로 받는 compiler 객체 안에 있는 tap() 함수를 사용하여 작업이 완료된 시점에 로드를 찍는 코드를 작성해보자. */ class MyWebpackPlugin { apply(compiler) { compiler.hooks.done.tap("My Plugin", stats => { console.log("MyPlugin: done") }) } } /* compiler.plugin() 함수의 두번째 인자인 콜..
- Total
- Today
- Yesterday
- NUXT
- AWS
- NextJS
- Github Actions
- github
- svelte
- nextjs14
- dockerfile
- vue composition api
- nuxt2
- 타입스크립트
- 깃허브
- Git
- Storybook
- 티스토리챌린지
- vscode
- 스벨트
- vue router
- React
- seo
- 오블완
- nodejs
- Vite
- 서버 to 서버
- openAI
- docker
- nextjs13
- webpack
- cors
- 네이버 서치 어드바이저
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |