개발일지

구현할 내용 저번에 배운 mixin 속성 틀을 이용해서 함수의 인자로 미리 적용될 틀도 미리 정해둘 수 있다. 속성을 미리 정해두고 값을 유동적으로 사용하기 위해 사용된다. 인자가 없는 mixin은 기본값 사용, 인자가 있는 mixin은 커스텀이다. 학습 유동적인 속성을 줄 때 @mixin box-color($bg-color, $font-color) { background-color: $bg-color; color: $font-color; } .box3 { @include box-color(#003, #fff); } .box4 { @include box-color(orange, blue); } 입력 값의 따라 div의 색상이 변경되었다. if 문을 활용한 mixin 버튼 버튼1 버튼2 @mixin but..

구현할 내용 scss 활용 및 개념 정리 리액트 프로젝트 터미널 설치 npm install node-sass 확장 프로그램 sass, live sass compiler 설치 학습 탐색기에서 파일명.scss로 파일을 생성한다. scss는 기존 css보다 더 편하게 css를 작성하기 위해 사용되며 scss에서는 중복되는 스타일 코드를 스크립트의 변수 선언 형식으로 사전에 미리 선언하여 그 변수를 사용할 수 있고 그 외에 다양한 스크립트 언어를 사용할 수 있다. scss는 컴파일러를 통해 css파일로 변환된다. 이번 글에서 사용해 볼 문법 변수 사용 네스팅 이름을 물려받는 & 보간법 주석 mixin 프로젝트 진행 // app.tsx 변수 사용 $main-color: #009223; .box1 { backgro..

구현할 내용 로그인 페이지에서 form input에 입력된 내용을 Axios를 이용한 json 형식으로 서버에 전달 학습 input에 입력된 값을 useState로 담아 그 값을 JSON.stringfy로 변환하여 변수로 저장한다. Axios는 Promise API를 이용하기 때문에 각 상태에 따라 행동을 입력한다. 프로젝트 진행 package.json에 백엔드와 proxy를 맞추기 위해 proxy를 추가한다. 이번 프로젝트에서 백엔드 포트는 8080을 사용하여서 포트를 맞춰주었다. 그리고 index.tsx에 axios 기본값을 추가하였다. package.json "proxy": "http://localhost:8080" index.tsx axios.defaults.baseURL = "http://loc..

구현할 내용 스타일드 컴포넌트의 props를 이용해서 컴포넌트의 속성을 주되 A는 width 100% B는 75% 같은 값을 지정하여 스타일드 컴포넌트 활용을 늘릴 수 있다. 학습 타입스크립트로 가변될 컴포넌트의 props의 타입을 정해준다. 이메일 위 html은 첫 번쨰 input은 props가 없기 때문에 효과를 받지 않을 input이고 두 번째 input은 props로 설정해두어 width값이 가변될 태그이다. 프로젝트 진행 타입 선언 interface WidthProps { width: { email?: boolean; }; } 이 인터페이스 타입은 스타일드 컴포넌트의 제네릭으로 들어가게된다. 위 html의 props를 불리언 타입을 이용해서 true / false 각 상태로 나눈다. email의..

프로그래밍 유형은 싱크로너스와 어싱크로너스로 유형이 두 가지로 나뉜다. 싱크로너스는 순차적으로 실행되는 것을 의미하고 어싱크로너스는 병렬적으로 동시 다발적으로 실행되는 것을 의미한다. 싱크로너스는 직관적이며 무엇이 실행되고 있는지 알 수 있지만 순차적으로 실행되기 때문에 A-B-C 형식이라면 C는 A-B가 실행될 때까지 기다려야한다. 반면 어싱크로너스 형식은 병렬적으로 작업이 실행된다. A-B-C 형식의 C가 A-B를 기다리는 게 아닌 동시에 실행되기 때문에 멀티태스킹이 가능하며 자원을 효율적으로 사용할 수 있게 된다. 기술적 예시 동기식(싱크로너스) => HTTP API : HTTP API는 요청과 응답을 동기 방식으로 전달한다. 비동기식(어싱크로너스) = > 대량의 데이터를 비동기적으로 처리하는 데이..

정말 어려웠던 문제였다. 구현할 내용 localstoage에 상품리스트에서 디테일 진입시 localstorage에 그 상품의 id 저장 그 후 상품리스트에서 useEffect로 마운트 될 때 localstorage의 아이디를 이용하여 json의 index, 그 중 title을 출력하기. 학습 localStorage.setItem('데이터이름', '데이터'); localStorage.setItem('데이터이름', 'JSON.stringify(값)'); localStorage.getItem('데이터이름'); localStorage.removeItem('데이터이름') 첫 행 - localstorage의 key : value를 설정한다. 두 번째 행 - localstorage의 key : json형식으로 값을 ..

store.js에서 state를 생성하여 값을 매기고 export하여 컴포넌트에 적용시키기 (store.js) import { configureStore, createSlice } from "@reduxjs/toolkit"; let user = createSlice({ name: "user", initialState: "kim", store.js에서 createslice({})를 선언한다. 이 안에서 상태가 관리된다. name은 보통 변수명과 동일하게 설정하고 initialState의 값이 useState의 변수자리와 비슷하다. (초기값) (store.js) import { configureStore, createSlice } from "@reduxjs/toolkit"; let user = createS..

리덕스를 사용하는 이유 리액트는 부모 컴포넌트에서의 props를 자식 컴포넌트로 넘겨줄 수 있다. 그러나 자식의 자식이 그 props를 사용할 경우 props drilling이 발생하기 때문에 컴포넌트가 많으면 많을수록 일이 번거로워져 스테이트를 컴포넌트 밖 전역에서 관리할 수 있게 도와주는 라이브러리이다. 그래서 리덕스에서 만든 스테이트를 원하는 곳에서 꺼내 쓸 수 있게된다. 리덕스는 모든 곳에서 사용할 수 있지만 프롭스를 단순하게 넘겨주는 컴포넌트는 리덕스를 사용하는 것보다 코드 양이 적기 때문에 컴포넌트가 복잡한 곳에 사용하는 것이 적절하다. 리덕스 설치 npm npm install @reduxjs/toolkit react-redux store.js 생성 (state들을 보관할 곳) import {..