본문 바로가기
반응형

Library & Framework71

[ReactJS] snippet을 사용한 템플릿 자동 완성 기능 사용하기 ReactJS 코드 템플릿을 자동 완성하는 방법에 대해 알아보자. 1. 우선 당연히 확장 프로그램부터 설치를 진행해야 한다. Reactjs code snippets Reactjs code snippets - Visual Studio Marketplace Extension for Visual Studio Code - Code snippets for Reactjs development in ES6 syntax marketplace.visualstudio.com Reactjs code snippets라는 확장 프로그램을 설치해주자. (vscode에서 설치해주면 된다.) 2. 설치가 완료되었다면 파일에서 특정 코드를 입력해주면 된다. 지원하는 파일 확장자는 .js / .ts / .jsx / .tsx 이다. 아래.. 2022. 7. 26.
[VueJS] (Vue 3) - Vuex 타입 추론 설정하기 본문을 시작하기에 앞 서 아래 링크를 통해 우선 Vuex에서 Typesciprt를 사용하는 방법에 대해 알아온 다음에 이 게시글을 보도록 하자 (아래 게시글을 토대로 작성하였다.) * [VueJS] (Vue 3) - Vuex를 Typescript로 사용하기 [VueJS] (Vue 3) - Vuex를 Typescript로 사용하기 본 글은 vue-cli로 생성한 vue 프로젝트 기준으로 작성하였으며, vuex를 잘 모르겠다면 아래 글을 참고하자. * [VueJS] Vuex 사용하기 (1) - 설치, 세팅 및 기본 사용법 (ft. Composition API) * [Vue.. mine-it-record.tistory.com 일단 서론부터 시작하자면 Vuex에서 Typescript를 사용하게 된다면 별다른 설.. 2022. 7. 14.
[ReactJS] React 시작하기 - 프로젝트 생성 및 실행 (ft. npm, yarn) React 역시 Vue와 마찬가지로 프로젝트를 생성하기 위해서는 node.js가 필요하다. (없다면 얼른 node.js를 설치해주고 오자) 1. 프로젝트 생성 npm의 패키지 실행 도구인 npx를 사용해서 React 프로젝트를 생성할 수 있다. 본인이 설치를 원하는 경로에 들어가서 아래 명령어를 입력해주자. (여기서 만약 yarn을 사용하고 싶다면 따로 설치를 진행해주고 npm과 yarn의 생성 구문이 다르다.) # create react-app use npm npx create-react-app my-app # create react-app use yarn yarn create react-app my-app 여기서 "my-app"이라고 입력한 부분은 프로젝트명으로 본인이 원하는 이름을 정해주면 된다. .. 2022. 7. 1.
[VueJS] (Vue 3) - Vuex를 Typescript로 사용하기 본 글은 vue-cli로 생성한 vue 프로젝트 기준으로 작성하였으며, vuex를 잘 모르겠다면 아래 글을 참고하자. * [VueJS] Vuex 사용하기 (1) - 설치, 세팅 및 기본 사용법 (ft. Composition API) * [VueJS] Vuex 사용하기 (2) - 기능 상세 설명 및 다양한 사용법 (ft. Composition API) store/index.ts 보통 vue-cli를 통해 프로젝트를 생성하게 되면 index.ts가 기본적으로 생성이 되어있을 텐데, 타입 스크립트를 사용할 때는 index.ts의 경우에는 모든 타입들과, 각각의 저장소들을 한 곳에 모아주는 역할만 담당한다. import { createStore } from "vuex"; import { CreateState, .. 2022. 6. 17.
[VueJS] (Vue 3 + TypeScript) - 설정 및 컴포넌트 정의하기 Vue3의 가장 큰 특징 중 하나가 바로 TypeScript와의 호환성이 좋아졌다는 특징이다. Vue2에서는 typescript를 사용하기 위해서는 큰 비용이 들었는데, Vue3에서는 이 단점들을 최대한 보완해서 타입 스크립트와 함께 사용하기 편하도록 개선이 되었다고 한다. 이번 글에서는 TypeScript를 사용하게 되었을때 컴포넌트 정의하는 방식이 어떻게 변했는지 알아보고자 한다. 프로젝트 생성 이쯤되면 Vue CLI를 사용한 프로젝트를 만드는 건 누구나 할 수 있을 거라 생각된다. Vue CLI를 사용하면 당연히 TypeScript를 설치하기 쉽고 설정도 기본적으로 되어있기 때문에 사용하기 편하다. # 1. Install Vue CLI, if it's not already installed npm .. 2022. 6. 14.
[VueJS] vue 프로젝트에서 CSS 전처리기(Pre-Processor) 전역 스타일 설정하기 vue 프로젝트에서 CSS 전처리기(예를 들어 sass, scss, less 같은 것들)를 사용할 때 가장 난감한 게, vue는 싱글 파일 컴포넌트 형식으로 .vue 파일 안에 스타일 역시 존재하는데, 여기서 전역으로 설정된 변수 같은 것들을 항상 import 해서 사용해줘야 하는 불편함이 생긴다. 그렇기 때문에 자주 사용하는 변수나, mixin같은 경우 전역 스타일로 설정하여 사용을 해야한다. 전역 스타일 설정은 vue.config.js 파일에서 설정해 주면 된다. // vue.config.js module.exports = { css: { loaderOptions: { // pass options to sass-loader // @/ is an alias to src/ // so this assume.. 2022. 6. 13.
[VueJS] vue 프로젝트에서 webpack 설정하는 방법 (vue-cli 와 webpack) 초기 세팅 우선 webpack 설정에 대해 알아보기 위해 vue-cli를 이용한 vue 프로젝트가 만들어져야 한다. [VueJS] VSCode에서 개발환경 세팅하기 (ft. node.js / vue-cli) [VueJS] VSCode에서 개발환경 세팅하기 (ft. node.js / vue-cli) VSCode에서 Vue.js 개발 환경을 구축해보자. VueJS는 단일 페이지 애플리케이션을 빠르게 구축할 수 있는 공식 CLI인 Vue CLI를 제공한다. 우선 VSCode와 Node.js가 당연히 있다는 가정하에 시작해보도록 한 mine-it-record.tistory.com vue 프로젝트에서 이제 webpack설정을 하기 앞서 vue-cli의 버전이 몇인지부터 알아야 한다. 아무래도 아주 예전부터 사용하.. 2022. 6. 13.
[VueJS] Vuex 사용하기 (2) - 기능 상세 설명 및 다양한 사용법 (ft. Composition API) 이 게시글 이전에 [VueJS] Vuex 사용하기 (1) - 설치, 세팅 및 기본 사용법 (ft. Composition API)라는 게시글을 통해 초기 설정을 잡고 가볍게 사용해 보았다. 이번 글에서는 Vuex의 Core Concepts에 대해서 알아보도록 하자. 물론 Composition API와 같이 사용할 것이다. Vuex의 store 내에는 크게 5가지의 속성이 존재하는데 state getters mutations actions modules 이렇게 5가지의 속성에 대해 하나씩 알아가 보도록 하자. 1. state Vuex는 단일 상태 트리를 사용하는데, 하나의 애플리케이션은 하나의 store만 가진다는 의미이다. 단일 상태 트리를 사용하면 특정 상태를 쉽게 찾을 수 있으며 디버깅 목적으로 현재 .. 2022. 5. 4.
[VueJS] Vuex 사용하기 (1) - 설치, 세팅 및 기본 사용법 (ft. Composition API) Vuex는 상태(state)를 관리하는 라이브러리이다. Vuex 같은 상태 관리자는 prop Drilling을 방지하거나 그 외 다양한 라이브러리와 연동시켜 사용하기 위해 사용된다. (*Prop Drilling은 중간 component를 그냥 데이터 전달용으로만 사용하는 이동하는 과정을 일컫는다.) 사실 Vuex가 없어도 Provide와 Inject라는 녀석을 사용하면 Prop Drilling 방지는 물론 여러 가지 다른 컴포넌트로 전달이 가능한데, 반응형으로 만들려면 computed를 사용하거나 소스 추적이 어려워지는 현상 때문에 잘 사용하지는 않는다. 그러므로 Vuex라는 저장소를 두고 같이 쓰는 값들은 하나의 저장소를 통해 관리하고 저장소를 바라보도록 하는게 취지이다. 추가적으로 vuex-persi.. 2022. 5. 4.
반응형
TOP