코딩연습장

외부에서 폰트를 파일형식으로 가져와 적당한 위치에 놓는다. 같은 위치에서 css파일을 생성해 위와같이 @font-face에 대한 font-family와 src를 설정한다. 해당 css를 import해주고, 원하는 스타일드 컴포넌트에 font-family속성을 지정해준다.

환경변수란 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임이다. 이름 자체에 어떤 변수값을 말하는데, os에서 자식프로세스를 생성할 때 참조하는 변수들 이라고 생각하면된다. env란 환경변수의 목록을 출력하거나 현존하는 환경을 수정하지 않고도 변경된 환경 내에서 다른 유틸리티를 실행하는데 사용할 수 있다. env를 사용함으로써 변수를 추가하거나 제거할 수 있으며, 기존 변수는 새로운 값을 이들에 할당함으로써 변경할 수 있다. dotenv는 환경변수를 .env라는 파일에 저장하고 process.env로 로드하는 의존성 모듈이다. 이를 사용하는 이류로는 개발과정에서 사용되는 고유 api key값, DB 접근 비밀번호 등 민감한 정보의 보안을 위해서다. 깃헙같이 오픈소스에 공개될 경우 ..

이번주는 리덕스를 활용하여 입문주차때 했던 Todolist를 만드는 것이었다. 분명 props를 사용해 state를 내려주는 것 보다는 전역상태관리가 더 효율적이라는 것은 알겠지만, 공부하는데 너무 고통스러웠다. 전에 사용했던 props는 내가 직접 내려주고 받아서 사용하다보니 뭔가 직관적이어서 이해가 쉬웠는데, 중앙store에서 state를 관리하고 그것을 뿌려주는 형식이다보니 이해가 어려웠다. 클래스, 함수형 컴포넌트 각각의 lifecycle은 예전에 정리했었다. https://codingpracticenote.tistory.com/62 Hook이란? component의 lifecycle이란? component가 리렌더링되는 조건은? Hook이란 기존 class바탕의 코드를 작성할 필요 없이 상태 값..

토요일부터 상태가 좋지 않았다. 일요일에 강의를 다 듣고 코딩작업을 늦어도 월요일에 시작해야지 했는데 일요일에 상태가 매우 안좋아지더니 월요일에도 좋지않아 이틀 내리 쉬었다. 아무래도 목요일까지 과제 완성이고, 금요일부터 미니프로젝트 시작이다보니 더 쉴수는 없을 것 같아 오늘 다시 참석하여 강의를 듣고 코딩을 시작했다. 재정님께서 내 분량도 많이 도와주셔서 팀프로젝트는 많이 진행된 상태였다. 하지만 나는 강의도 듣지못했어서 일단 빠르게 thunk부분까지 듣고 코딩을 진행했다. 아직 optimize, customhook, s3배포를 듣지 못했는데, 이는 어느정도 코드를 완성하고 들어야겠다. 오늘 강의를 어느정도 듣고, 재정님과 다른분들이 진행하신 코드를 먼저 읽었다. 이해가 가지않는 부분은 강의와 비교해가..

확실히 쓰면서 이해하니까 어지러운 와중에도 머리속에 들어오는 것 같다. 사전 설정 1. json-server설치 및 서버가동 (db.json) { "todos": [] } 2. Slice로 todos 모듈 추가 구현 (이전 챕터에서 작성했던 todos 모듈 뼈대) // src/redux/modules/todosSlice.js import { createSlice } from "@reduxjs/toolkit"; const initialState = { todos: [], }; export const todosSlice = createSlice({ name: "todos", initialState, reducers: {}, }); export const {} = todosSlice.actions; expor..

안그래도 코로나 걸려서 정신이 없는데 json서버니 axios니 thunk니 나를 괴롭힌다. 머리에 들어오질 않고, 민들레 홀씨 퍼지는 것 마냥 날아가버려서 좀 정리해보려고한다. 리덕스에서 dispatch를 하면 action이 리듀서로 전달되고, 리듀서는 새로운 state를 반환합니다. 근데 미들웨어를 사용하면 이 과정 사이에 우리가 하고 싶은 작업들을 넣어서 할 수 있습니다. 만약 counter프로그램에서 더하기 버튼을 클릭했을 때 바로 +1을 더하지않고 3초를 기다렸다가 +1이 되도록 구현하려면 미들웨어를 사용하지 않고서는 구현할 수 없습니다. 왜냐하면 dispatch가 되자마자 바로 action이 리듀서로 달려가 새로운 state를 반환해버리기 때문입니다. 즉 여기서 '3초를 기다리는 작업'을 미들..

UUID란 Universally Unique IDentifier의 약자로, 전 세계에서의 고유한 ID라는 뜻이다. 설치 //npm npm install uuid //yarn yarn add uuid UUID를 생성하는 데는 4가지 방법이 있다. v1 : MAC 주소 (시간 기준으로 생성) v3 : MD5 해시 (MD5 해시 기준으로 생성) v4 : 랜덤 (랜덤값을 기반으로 생성) v5 : SHA-1 해시 (SHA-1 해시 기준으로 생성) import import { v1 as uuid } from "uuid"; import { v3 as uuid } from "uuid"; import { v4 as uuid } from "uuid"; import { v5 as uuid } from "uuid"; 사용하는..

오늘은 VIEW를 좀 더 수정하고, 잘못 설정되어있던 수정버튼의 용도를 고쳤다. 수정버튼을 누르면 특정 div가 보이고, 원래 보이던 div는 안보이도록 해서 댓글을 수정할 수 있는 공간이 나타나도록 했다. 물론 아직 axios와 json server를 사용하지 못해서 기능구현은 아직 멀었지만, 그래도 뭔가 강의를 듣고 정리를 해보니까 어느정도 감이 잡히는 것 같다. 어렵긴하지만 뭐 매주 어려웠으니 이젠 그러려니 한다. 일요일에는 남은 thunk, optimizing, customhook, s3 서버배포를 마무리하고, 시간이남는다면 팀과제 프로젝트에서 기능까지 어느정도 만들고 싶다. 끝

Axios 인스턴스 //만들기 axios.create([config]) //예시 const instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} }); Axios 인터셉터 then과 catch로 처리되기 전에 요청과 응답을 가로챌수 있습니다. axios.interceptors.request.use(function (config) { //요청이 전달되기 전에 작업 수행 return config; }, function (error) { //요청 오류가 있는 작업 수행 return Promise.reject(error); }); //응답 인터셉터 추..

Axios란 node.js와 브라우저를 위한 promise기반 http클라이언트 입니다. 쉽게말해 http를 이용해 서버와 통신하기위해 사용하는 패키지입니다. json server 데이터를 아래와 같이 설정한다. { "todos": [ { "id": "1", "title": "react" } ] } 먼저 axios get에 대해 보자. get는 서버의 데이터를 조회할 때 사용합니다. // src/App.js import React, { useEffect, useState } from "react"; import axios from "axios"; // axios import 합니다. const App = () => { const [todos, setTodos] = useState(null); // axi..