코딩연습장

한 html에서 5명이 작업을 하다보니, 아래와 같이 script와 style태그가 엄청나게 길어졌다.  그래서 내가 작성한 style과 script들을 모듈화 시켜 분리작성해볼 생각이었다.한 html파일내에서 다양한 기능과 다양한 view들이 작업되다보니 git관련 문제들도 많았고, 코드가 길어져 가독성이 떨어지므로 가능한 최소단위의 기능별로 모듈화시키기로 결정했다. 먼저 쉬운 style분리부터 진행하였다. 모달관련 style태그를 modal.css라는 파일을 생성하여 그곳에 몰아놓고,  index.html의 head에서 아래와 같이 해당 파일을 css로 불러왔다.다행히 오류없이 정상작동하였다. 다음으로 script를 모듈화 시키는 것이었다. html파일에서 script를 모듈화 시켜본 적이 없어 예시..

한 페이지에서 조를 소개하는 화면이 먼저 보인다. 소개하는 부분의 바로 아래에는 아래를 향하는 화살표가 존재하며직접 스크롤을 내려도 간단한 멤버소개카드가 모여있는 곳으로 이동 가능하며, 화살표를 클릭해도 해당 부분으로 화면을 이동시킨다. 멤버 소개 데이터는 Firebase에 직접 데이터를 미리 집어넣었다.이전에는 데이터 형태가 같은 임시데이터를 변수에 담아 사용했는데, 세팅때부터 firebase를 세팅하여 해당 데이터로 연습하며 페이지를 만드는게 두번 일을 하지 않고 더 나을 것이라는 충고를 듣고 변경했다. 또한 각각의 멤버 카드에는 각 멤버들의 이름, 소개, 댓글목록이 간략히 보이며 소개 혹은 댓글목록을 클릭하면 상세한 내용이 나오는 모달창이 등장한다. 모달창 배경은 흐리게 처리가 되어있으며 배경은 클..

Git 이란 무엇일까?Git이란 분산 버전관리 시스템으로 컴퓬터 파일의 변경사항을 추적하고 여러명의 사용자들 간에 파일에 대한 작업을 조율하는데 사용되는 프로그램이다.쉽게말해 코드의 변경점을 기록하는 것이다.git으로 코드의 변경점을 기록한 것을 Github이라는 곳에 올려 타인과 공유하고, 개인적으로 백업을 진행하는 것이다.그러므로 Github은 백업과 공유가 가능한 온라인 코드 저장소이다. 다음으로 git 명령어를 조금 알아보고자 한다.먼저 git bash에서 필수로 사용되는 명령어를 알아보자. 내가 만약 numMemo라는 html파일을 깃허브에 올려 백업해두고자 한다.그렇다면 터미널을 열어 git bash를 키고, num Memo가 존재하는 폴더로 이동해야한다.현재는 code라는 폴더에 있지만, n..

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

//최대 공약수let gcd = (a, b) => a%b === 0 ? b : gcd(b, a%b);//최소 공배수let lcm = (a, b) => a*b / gcd(a,b)

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/..

1. react-router-dom 라이브러리 설치//vscode 터미널에 입력yarn add react-router-dom 2. 페이지 컴포넌트 생성페이지 폴더로 구분지어서 생성해주는 것이 알아보기 좋다. 3. Router생성//Router.jsimport React from 'react';// 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다.import { BrowserRouter, Route, Routes } from 'react-router-dom';// 2. Router 라는 함수를 만들고 아래와 같이 작성합니다.//BrowserRouter를 Router로 감싸는 이유는,//SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어줍니..

기존 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모듈에서..

// src/App.jsimport React from 'react';import { useSelector, useDispatch } from 'react-redux'; // import 해주세요.const App = () => { const dispatch = useDispatch(); const number = useSelector((state) => state.counter.number); return ( { dispatch({ type: 'PLUS_ONE' }); }} > +1 { ..