잼굴 코딩공장

1. 조건부 랜더링 지금 컴포넌트를 불러올때마다 조건부 랜더링을 해주고있는데 뭔가 잘못된 느낌.. 분명 이렇게 하는게 아닐거같다. 마지막에 정리하자. 2. CSS파일 컴포넌트를 만들때 그에 맞는 css파일을 만드는게 아니라 그냥 App.css에다가 싹다 몰아놓고있는데 이것도 컴포넌트 별로 CSS파일 따로 만들어야 한다. 3. 깃허브 깃허브 리드미에 한눈에 프로젝트를 이해할수있도록 정리하자 지금 막힌 부분 원하는 영화를 선별하게끔 필터링, 검색하는 페이지를 만들려하는데 벽에 살짝 막힘

이미 수정을 다 해버려서 모든 흔적은 없지만 왜 잘 한거같은데 안되지?? 스펠링 하나하나 검토를 한 5번 6번을 하는동안 뭐가 그렇게 급했는지 고칠 부분이 한두개가 아니었다..... 대표적으로 id값을 넘겨줘야해서 매개변수에 id를 ({id}) 이렇게 써야하는데 const banner= (id) =>{ ~~ } 이렇게 쓴다던가 변수 선언을 똑같은거로 해버렸다던가 리듀서에서 실컷만든거 다르게 값을 줘버린다 던가 값을 어떻게 활용해야하는지 몰라서 괄호를 {} 이걸로 줘버렸다 이런 잔실수를 너무많이해서 고치는데 많은 시간이 지체됐다... 눈똑바로 뜨고 하자잉...

리덕스 툴킷을 사용하면 리덕스를 좀 더 간편하게 사용할수있다고해서 기존에 리덕스로 작성한것을 리덕스 툴킷으로 리팩토링 하였다. 1. 리덕스 툴킷 설치 npm install @reduxjs/toolkit react-redux 2. Reducer 바꾸기 일단 툴킷-리듀서의 핵심 createSlice를 import한다 import {createSlice} from "@reduxjs/toolkit" createSlice를 사용하면 직점 action name을 설정할 필요가없다. 알아서 해준다. const ~~~ = createSlice({ name: ~~ initialState, reducers: { ~~ } }) 기본적인 양식 저 reducers: { } 안에 기존에 switch 안에 return에 적었던 내..

리덕스툴킷을 이해하기 위해서는 리덕스가 어떤건지는 알아야한다. 리덕스란? 리액트의 상태관리 라이브러리이다. 리액트는 단방향데이터 바인딩이기 때문에 상태관리가 까다롭다. props drilling을 사용하거나 context등 상태관리 방법에는 여러가지가 있지만 리덕스를 활용하면 Store라는 공간에 모든 State를 때려박고 꺼내쓰면 되기때문에 전역상태관리가 간편해진다. 다만 리덕스를 사용하게 되면 코드가 복잡해지고 코드량이 많아지기때문에 소규모 프로젝트에서 사용하는것보다 주로 큰단위 프로젝트에서 사용한다. 리덕스 기본용어 Store 컴포넌트 상태를 관리하는 저장소. Action 스토어의 상태를 변경하려면 액션을 생성해야한다. 액션은 객체이고 반드시 type을 가져야한다. 액션 객체는 액션 생성함수에 의해..

데이터를 불러오는동안 로딩스피너를 보여주고자 한다 https://www.npmjs.com/package/react-spinners react-spinners A collection of react loading spinners. Latest version: 0.13.6, last published: 2 months ago. Start using react-spinners in your project by running `npm i react-spinners`. There are 711 other projects in the npm registry using react-spinners. www.npmjs.com 우선 이곳에서 제공해주는 npm을 이용하기위해 react-spinners를 다운 받는다. 대략적..

문제 1. 예산 풀이순서 1. d를 오름차순으로 정리한다. 2. for문을 사용해서 for문 실행시마다 answer을 1회씩 더해준다. 3. 만약 d의 값의 합이 budget보다 크다면 answer을 1회 차감한다. function solution(d, budget) { var answer = 0; let sum = 0; d.sort((a,b)=> a-b); for(i=0; ibudget){ answer-- } } return answer; }

흠.. 4만따리로 가자...

문제 1. 같은 숫자는 싫어 풀이순서 1. 이중 for문을 사용한다. 2. 본인과 본인 다음 원소를 비교하여 같지않다면 answer배열에 본인을 push한다. function solution(arr) { var answer = []; for(i=0; i

문제 1. 최대공약수와 최소공배수 풀이순서: 1. 최대공약수 = 1 제외 나눌수있는 가장 큰 수중 공통된 수 2. 최소공배수 = 1 제외 배수중 공통된 가장 큰 수 3. for문을 사용해서 최대 공약수를 찾는다. (length를 지정할 수 있음, 제시된 수 중 작은수만큼 반복) 4. while문을 사용해서 최소 공배수를 찾는다. (length를 특정할 수 없기 때문) function solution(n, m) { var answer = []; let yaksoo = 1 let baesoo = 1 for(i=2; i

문제 1. 행렬의 덧셈 풀이순서 1. 이중배열 문제, 이중 for문을 사용한다 2. sum이라는 배열 하나 만들어서 for문을 사용해 더해준 값을 넣고 3. sum을 다시 answer에 넣어주자 function solution(arr1, arr2) { var answer = []; for(i=0; i