본문 바로가기

전체 글328

[Vue] Webpack 프로젝트에서 ESLint 설정해주기 ESLint 설치해주기 npm i -D eslint eslint-plugin-vue babel-eslint .eslint.json 파일 생성 .eslint.json 파일에 코드 넣기 (기호따라 변경 가능) module.exports = { env: { browser: true, node: true, }, extends: [ 'plugin:vue/vue3-strongly-recommended', 'eslint:recommended', ], parserOptions: { parser: 'babel-eslint', }, rules: { 'vue/html-self-closing': [ 'error', { html: { void: 'always', normal: 'never', component: 'always'.. 2022. 8. 22.
[리액트] useContext 정리 useContext란? 특정한 값을 모든 컴포넌트에서 사용할 수 있도록 만들어놓고, 어디서든 만든 값을 불러와서 사용할 수 있도록 해주는 Hook useContext의 장점 useContext가 없다면 상위 컴포넌트에서 생성한 데이터를 하위 컴포넌트에 전달하기 위해 해당 데이터가 필요하지 않은 여러 컴포넌트를 거치면서 props drilling 현상이 생긴다. useContext를 사용하면 해당 데이터가 필요한 부분에서만 값을 호출해 사용할 수 있다. 하지만 그렇다고 해서 항상 useContext 를 써야하는건 아니다. useContext는 여러 하위 컴포넌트에서 공유되어야 하는 값이 있을 때만 사용하는 것이고, 각 컴포넌트로별로만 관리하는 값이라면 그냥 useState 를 쓰는 것이 더 적절하다. us.. 2022. 8. 22.
[리액트] useReducer 사용법 useReducer란? useReducer는 상태 관리를 담당하는 훅을 말한다 useState는 단순히 상태 관리를 해주는 훅이라면 useReducer는 해당 상태를 업데이트할때 유용한 Hook이다 useReducer는 useState를 통한 상태 관리 + 상태 추가, 제거, 수정 등의 핸들러를 하나의 함수로 사용할 수 있도록 해준다 기본문법 const [state, dispatch] = useReducer(리듀서 이름, 초기 데이터) state 데이터 state는 상태 즉 데이터다 useReducer 함수의 두번째 인자로 들어가는 초기 데이터를 1로 설정하면 state의 값도 1이 된다 즉 useReducer 함수에 등록한 초기데이터는 state로 접근할 수 있게 된다 dispatch 함수 state.. 2022. 8. 21.
[깃/한줄정리] 프로젝트 만든 후에 깃허브 저장소 만들고 연결하기 1. 깃허브에 새로운 리포지토리 생성하기 2. 프로젝트로 디렉토리로 돌아가서 터미널 실행하기 3. git init으로 해당 프로젝트 버전관리 시작하기 4. git add .로 전체코드 stage에 올려주기 5. git commit 후 커밋 메세지 작성해주기 6. git remote add orgin 를 입력해 커밋한 코드 리포지토리 주소에 연결해주기 7. git push origin main으로 리포지토리에 커밋한 코드 올려주기 2022. 8. 19.
[Vue] 라우터로 특정 컴포넌트에서만 Header 보여주는 방법 (Named Views) index.js import { createRouter, createWebHashHistory } from 'vue-router' // ~ === src/components import TheHeader from '~/components/TheHeader.vue' import Home from './Home.vue' export default createRouter({ // 해시모드 모드 선택 history: createWebHashHistory(), // 라우터가 변경될때마다 top: 0으로 페이지 스크롤 자동변환 scrollBehavior: () => ({ top: 0 }), // 페이지 정보 명시 routes: [ { path: '/', // component를 components로 변경 compo.. 2022. 8. 14.
[Vue] vue-router 사용법 vue-router 사용법 https://router.vuejs.org/guide/ Getting Started | Vue Router Getting Started Creating a Single-page Application with Vue + Vue Router feels natural: with Vue.js, we are already composing our application with components. When adding Vue Router to the mix, all we need to do is map our components to the routes and let router.vuejs.org 1. router를 일반 의존성 패키지로 설치 npm install vue-router .. 2022. 8. 12.
[Vue] 페이지가 전환될때마다 스크롤이 처음으로 돌아가게 하는 라우터 함수 Routes > index.js 파일에서 scrollBehavior 함수를 createRouter에 등록해준다 일반함수 import { createRouter } from 'vue-router'; const router = createRouter({ scrollBehavior() { return { top: 0 } } }) 화살표함수 import { createRouter } from 'vue-router'; const router = createRouter({ scrollBehavior: () => ({ top: 0 }) }) 2022. 8. 12.
[Vue] 스토어 등록한 데이터 vuex helper로 사용하는 방법 1. state state는 computed 옵션 안에서 사용한다 store에 등록한 state 사용하는법 store에 등록한 state를 vuex helper로 사용하는법 2. getters getters는 computed 옵션 안에서 사용한다 store에 등록한 getters 사용하는법 store에 등록한 getters를 vuex helper로 사용하는법 3. mutations mutations는 methods 옵션 안에서 사용한다 store에 등록한 mutations 사용하는법 store에 등록한 mutations를 vuex helper로 사용하는법 4. actions actions는 methods 옵션 안에서 사용한다 store에 등록한 mutations 사용하는법 store에 등록한 mutati.. 2022. 8. 12.
[리액트] 리액트에서 스타일 적용하는 5가지 방법 (인라인 스타일, CSS, SCSS, CSS Module, Styled-Components) 1. 인라인 스타일 App.jsx function App() { return } export default App 2. CSS 컴포넌트를 스타일링하는 가장 기본적인 방식 CSS 클래스를 중복되지 않게 만들어야함 CSS 클래스가 중복되는 것을 방지하기 위해 1) 이름을 지을 때 특별한 규칙을 사용하거나 2) CSS selector를 활용한다 CSS 클래스 이름 짓는 2가지 방법 컴포넌트이름-클래스형태 i.e.) App-header BEM 네이밍: Block__Element-Modifier class="컴포넌트이름__역할—세부특징" i.e.) card__title-primary 컴포넌트 스타일로 css를 사용할시 단점 상위 컴포넌트에서 불러온 css 코드가 하위 컴포넌트에까지 영향을 미치기 때문에 컴포넌트마.. 2022. 8. 12.
[리액트] props를 className으로 지정하기 App.jsx import Button from './components/Button' function App() { return ( ) } export default App Button.jsx className의 속성값으로 데이터 props가 오므로 백틱`` 안에 ${} 기호로 받아온 props를 넣어주면 class의 이름으로 지정된다. import React from 'react' import '../styles/Button.scss' function Button({ size, color }) { return ( 버튼 ) } export default Button Button.scss $main-color: green; .button { // 버튼에 먹여진 속성 제거 outline: none; bor.. 2022. 8. 12.
[리액트] 리액트 프로젝트에서 기본적인 ESLint, Prettier, setting.json 설정해주기 1. 개발용으로 prettier, eslint-config-prettier 패키지 설치해주기 prettier: 코드 포매팅 eslint-config-prettier: eslint 와의 호환을 위한 패키지 yarn add --dev prettier eslint-config-prettier 2. .eslintrc 파일을 만들어 아래의 코드 추가해주기 extends: 누군가 미리 만들어놓은 규칙을 가져와서 사용하고자 할 때 명시하는  react와 prettier를 위한 코드 작성 규칙을 가져와서 사용 { "extends": ["react-app", "prettier"] } 3. .prettierrc 파일을 생성한 후 아래의 코드를 추가해주기 { "trailingComma": "all", "tabWidth":.. 2022. 8. 11.
[부트스트랩] 모든 컴포넌트에서 전역적으로 스타일 사용을 위해 webpack에 sass loader 옵션 추가하기 webpack.config.js파일에서 아래의 sass-loader 코드를 추가해준다 module.exports = { // ...생략 // 모듈 처리 방식을 설정 module: { rules: [ { use: [ { loader: 'sass-loader', options: { additionalData: '@import "~/scss/main";' } } ] } ] } // 생략... }; 2022. 8. 11.
[자바스크립트] 객체 구조분해할당시 key 이름 다시 지정해주기 user 객체 안에 있는 데이터 emailAddress를 email로 paymentStatus를 status로 구조분해할당을 하면서 동시에 key 이름을 변경하였다. const user = { name: 'maple', emailAddress: 'maple@gmail.com', paymentStatus: false } const { emailAddress: email, paymentStatus: status } = user; console.log(email, status) 2022. 8. 10.
[리액트] useRef의 두가지 기능 정리 useRef의 두가지 기능 1. 요소 가져오기 자바스크립트에서는 document의 메소드(getElementById, getElementsByClassName, querySelector... 등)로 DOM 요소에 접근한것처럼 리액트에서는 useRef 훅으로 DOM 요소에 접근할 수 있다' 예제 아래의 코드에서 inputEl.current는 input 요소 를 의미한다. input에 등록한 name이나 input에 입력된 값 value를 ref를 통해 등록한 InputEl.current를 통해 접근할 수 있다. import React, { useEffect, useRef } from 'react' const GetElement = () => { const inputEl = useRef() useEffect.. 2022. 8. 10.
[리액트] 리액트로 간단한 로그인 기능 구현하기 방법 1) onChange 사용 import React, { useState, useEffect } from 'react' const Login = () => { const user1 = { id: 'monalisa', pwd: '1234', } const [UserInfo, setUserInfo] = useState({ id: '', pwd: '', }) const validateUserInfo = e => { const { name, value } = e.target setUserInfo({ ...UserInfo, [name]: value }) } const isUser1Equal = e => { if (e.key === 'Enter') { user1['id'] === UserInfo['id'] &&.. 2022. 8. 10.

티스토리툴바