코딩연습장

페이지에서 입력한 값이 로컬스토리지에 저장되고, 브라우저를 껐다 키더라도 해당 데이터가 남아있게 하기 위해 로컬 스토리지를 사용하였다. useEffect(() => { const countries = JSON.parse(localStorage.getItem("countries")); setTotal(countries);}, []);useEffect(() => { if (total.length > 0) localStorage.setItem("countries", JSON.stringify(total));}, [total]);useEffect를 사용하여 화면이 로드되고 난 뒤 localStorage에 있는 countries키의 값을 가져오고, 해당 값을 total State에 저장한다.그리고..

JSX 문법이란 무엇일까요?JSX문법이란 Javascript Syntax eXtension으로, javascript를 확장한 문법이다.브라우저에서 실행하기 전에 바벨(babel)을 이용하여 javascript 형태의 코드로 변환한다.아래 5가지 규칙을 따라야 한다.1. 반드시 부모요소 한개로 감싸야 한다.// 잘못된 케이스function App() { return ( 안녕! 하세요! )}// 올바른 케이스function App() { return ( 안녕! 하세요! )} 2. 자바스크립트 표현식function App() { let hello = '안녕!' return ( {hello} 하세요..

일단 기능구현을 목적으로 코드를 작성하다보니 조금 비효율적으로 작성한 코드가 몇가지 있었다.따라서 오늘은 함수를 리팩토링하였다. const checkCountryName = () => { if (!country) { alert("국가명을 입력해주세요!"); return true; }};const findCountryName = () => { const index = total.findIndex((el) => el.name === country); if (index === -1) { alert("등록되지 않은 국가입니다."); return true; }};const isCountryExist = () => { if (tota..

이전에 배웠던 자바스크립트 강의와 리액트 강의를 제공받아 모두 들었다.자바스크립트는 까먹었었지만 최근 몇주간 공부하고 프로젝트를 진행하느라 조금은 친숙해진 상태였고, 리액트는 과거에 오래 공부한 적이 있지만 완벽히 기억이 나지 않아 모두 듣기로 결정하였다. SPA, virtual DOM, props, state, route 등 친숙한 단어들이 눈에 들어왔다.부모자식간에 state를 props로 내려주어 상태를 변경하고 상태를 변경할때는 불변성이 어쩌구저쩌구강의도 어렵지 않게 들었지만, 개인과제를 시작하려다보니 조금 헷갈리는 부분도 있었다.먼저 요청받은 페이지를 보고 "어떤 기준으로 컴포넌트를 분리해야 할까?"가 제일 먼저 떠올랐다.컴포넌트 분리 기준에서 가장 중요하게 생각해야할 점은 "재사용성"이다.과연..

SSR : Server Side RenderingCSR : Client Side Rendering말 그대로 SSR은 서버측에서 렌더링을 하는 것이고, CSR은 클라이언트(사용자)측에서 렌더링을 하는 것이다.  CSR : Client Side RenderingSSR : Server Side Rendering1사용자가 웹 사이트를 요청함유저가 웹 사이트를 요청함2CDN이 HTML파일과 JS접근링크를 보내줌서버가 렌더가 준비된 HTML파일을 생성함3브라우저가 HTML을 다운로드하고, JS를 다운로드함단, 이때 사용자는 사이트를 볼 수 없음(빈 화면)브라우저가 HTML을 빠르게 렌더링하지만사이트는 아직 상호작용이 불가함4브라우저가 JS를 다운로드함브라우저가 JS를 다운로드함5JS가 실행되고 data를 위한 ap..

1. 프로젝트를 진행할 폴더를 생성한다.2. 해당 폴더를 vscode로 연다. 3. 아래 코드를 터미널에 입력하여 package.json파일을 생성한다.npm init -y 4. react, next, react-dom 설치npm install react@latest next@latest react-dom@latest 5. pakage.json 수정{ "name": "nextprac", "version": "1.0.0", "main": "index.js", "scripts": { "dev": "next dev" }, "keywords": [], "author": "", "license": "MIT", "description": "", "d..

기존에 CRA로 리액트 프로젝트를 생성하려면 수십초가 걸렸었다. 하지만 vite를 사용하면 다르다!vite가 오래 걸린것으로 보이지만, 직접 프로젝트 명과 프레임워크(라이브러리)를 지정하면 엄청나게 빠르다. 엔터를 누르면 프로젝트가 생성되어있다. 정말 생각지도 못한 속도... 프로젝트 폴더 삭제 또한 빠르다.CRA는 초기 설정을 포괄적으로 잡은 반면, vite는 필수요소만 설치하여 빠른 것이다.또한 필요없는 파일이 없으므로 삭제도 빠르다.   ViteVite, 차세대 프런트엔드 개발 툴ko.vitejs.dev 1. 프로젝트 생성하기yarn create viteyarn create vite 프로젝트명 --template 사용할프레임워크(라이브러리)//ex 리액트 프로젝트 생성yarn create vite ..

1. 라이브러리 설치yarn add json-server //json server 추가yarn add axios //axios 추가 2. 공식문서를 통해 사용법 확인하기 시작하기 | Axios Docs시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코axios-http.com  json-server[](https://github.com/typicode/..

기존 TodoList는 props를 자식 컴포넌트에 넘겨주어 상태를 관리했다.이번엔 redux 라이브러리를 사용하여 전역 store에 state를 저장하고, 그것을 가져와 사용하는 것을 적용해보고자 한다. 먼저, redux 폴더를 만들고 config, modules폴더를 만들어 configStore, todo파일을 생성했다. 그리고 todo.jsx파일에 리듀서코드를 작성했다.Todo는 추가, 제거, 완료/취소 기능만 구현하면 되므로, 세가지 ActionValue를 만들어 기능을 구현하고자 한다.// src/modules/todo.js//Action Valueconst ADD_TODO = 'ADD_TODO';const TOGGLE_TODO = 'TOGGLE_TODO';const DELETE_TODO = '..

//App.js 더하기 빼기먼저 App.js를 다음과 같이 설정한다.input에 숫자를 입력하고 더하기 버튼을 누르면 더해지고, 빼기버튼을 누르면 빼지는 기능을 구현할 것이다.// src/App.jsimport React, { useState } from 'react';import { useDispatch, useSelector } from 'react-redux';import { addNumber } from './redux/modules/counter';const App = () => { const dispatch = useDispatch(); const [number, setNumber] = useState(0); //store에서 state의 counter모듈에서..