본문 바로가기

분류 전체보기328

[Next.js] Next.js 자주 사용하는 기초 문법 15가지 명령어 (yarn) 설치 자바스크립트로 설치 yarn create next-app 타입스크립트로 설치 yarn create next-app --typescript 개발환경 실행 yarn run dev 배포 파일 생성 → build된 파일은 .next 폴더 안에 위치 yarn run build Production Mode로 실행 build한 프로젝트 실행 yarn start 문법 1. 기본 폴더 구성 .next: 빌드된 파일이 .next 폴더 안으로 들어간다 node_modules pages: pages 폴더 안에 있는 파일은 자동으로 라우팅이 되서 url로 접근이 가능하다 _app.js index.js public styles: css module 방식을 기본적으로 사용 global.css Home.mo.. 2022. 9. 14.
[Next.js] Next.js란? (리액트 단점, CSR, SSR 설명) Next.js 탄생배경 CSR을 사용하는 리액트의 단점때문에 이를 개선하고자 리액트 프레임워크 Next.js가 생겨났다 CSR이란? Client Side Rendering으로 클라이언트 즉, 웹브라우저가 화면을 렌더링해준다 웹브라우저에 내장된 JS 엔진이 동적으로 HTML 엘리먼트를 생성한 뒤 root element에 추가하여 웹 콘텐츠를 만드는 방식을 말한다 리액트의 단점 (CSR의 단점) 리액트에서는 브라우저가 페이지를 화면에 그려주고 서버에서는 해당하는 데이터만 받아오는 CSR(Client Side Rendering) 방식을 사용한다 즉 유저가 웹사이트로 이동한 그 후에 JS를 다운받고 리액트가 UI를 빌드한다 만약 사용자의 JS가 활성화 되어 있지 않거나 인터넷이 느려 JS 파일을 다운받거나 프로.. 2022. 9. 14.
[리액트] react-router-dom v6로 업데이트된 후 달라진점 라우터 버전 업그레이드하기 npm npm install react-router-dom@6 yarn yarn upgrade react-router-dom@6 1. Switch 대신 Routes 사용 그리고 Route를 항상 Routes로 감싸주기 Route 컴포넌트를 감싸는 부모요소 Switch 대신 직관적인 이름을 가진 Routes로 바뀌었다. v5에서는 Route 컴포넌트를 Switch 컴포넌트로 반드시 감싸지 않아도 괜찮았지만 v6에서는 Route가 단 한개여도 반드시 부모 컴포넌트 Routes로 감싸주어야한다. Switch란? Switch는 여러 Route들을 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링시켜준다. Switch를 사용하면, 아무것도 일치하지 않았을때 보여줄 Not Foun.. 2022. 8. 23.
[리액트] 컴포넌트 렌더링시 useEffect 한번만 실행되도록 바꿔주기 리액트에서 컴포넌트가 렌더링되면 useEffect가 두번 실행된다. 이는 개발 단계에서 디버깅하기 편하라고 만들어준 자체 기능이기 때문에 엔드 프로덕트에서는 필요 하지 않고 개발시에만 사용된다. index.js index.js에 있는 태그는 리액트에서 컴포넌트가 마운트 될때 useEffect 함수를 2번 실행시킨다. 해당 태그는 리액트 전체에 디버깅을 위한 절차를 추가해주는 태그로, useEffect 의 이상동작을 감지하고자 2번 실행시키도록 설정되어져 있다. import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals .. 2022. 8. 23.
[리액트] useEffect 4가지 사용법 간단 정리 mount 1. 컴포넌트가 처음 렌더링될때 useEffect(()=> { console.log("컴포넌트가 처음으로 브라우저에 나타날때 호출") }, []) mount + update 2. 컴포넌트가 처음 렌더링될때 & 컴포넌트가 다시 렌더링이 될때 useEffect(()=> { console.log("컴포넌트의 초기렌더링 & 컴포넌트의 리렌더링시 호출") }) mount + update 3. 컴포넌트가 처음 렌더링될때 & 특정 props, states가 업데이트되서 컴포넌트가 다시 렌더링이 될때 useEffect(()=> { console.log("컴포넌트의 초기렌더링 & 배열안 데이터가 업데이트되면서 컴포넌트의 리렌더링시 호출") },[데이터]) unmount 4. 컴포넌트가 사라질 때 & 사라기지 .. 2022. 8. 23.
[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.

티스토리툴바