개발 일지

5-1. 형식을 맞추는 목적 코드 형식은 언제나 중요하다 “오늘 구현한 코드의 가독성은 앞으로 바뀔 코드의 품질에 지대한 영향을 미친다.” 코드가 너무 많이 바뀌어서 이력을 찾아보기 힘들어지더라도, 처음 작성시 잡아둔 구현 스타일과 가독성 수준은 유지보수의 용이성, 확장성에 영향을 미칠 수 밖에 없다. 원활한 소통을 장려하기 위한 형식은 무엇일까? 5-2. 적절한 행 길이를 유지하라. 신문기사 처럼 위→ 아래로 시선의 흐름대로 코드가 읽힐 수 있도록 작성하기 개념은 빈 행으로 구분해라. → 덩어리화 세로 밀집도 → 연관성 수직거리 소스의 조각들이 어디에 있는지 거슬러 올라가는 작업은 많은 시간과 노력을 필요로 한다. 서로 밀접한 개념은 세로로 가까이둔다. 변수선언 : 사용하는 위치에 최대한 가깝게 한다...

1. 작게 만들어라. if/else 문 또는 while 문에 들어가는 블록은 한 줄 이면 충분하다. - 대부분 block 에서 함수 호출 문을 사용한다. - 중첩구조가 생길 만틈 함수 구조가 복잡해서는 안된다. 2. 한 가지만 해라! 익히 들었던 말이다. 함수는 오로지 “한 가지의 기능”만 한다. 그 한 가지만을 잘하는 도록 만드는 것의 우리의 목표이다. 🤔 여러 조건문이 필요한 경우에는 어떻게 하나요? - 단순 다른 표현이 아니더라도, 의미있는 이름으로 지은 다른 함수를 호출/추출할 수 있다면, 그 함수는 여러 작업을 하는 셈이다. 3. 위에서 아래로 읽을 수 있도록 Top-Down 방식 한 가지 의미를 갖는 함수를 만들어야 함수를 위에서 아래로 읽어 내려갈 수 있다 4. Switch문 switch문은..

2-1. 의도를 분명히 밝혀라. 코드의 함축성 주석이 필요하다면 변수/함수/클래스명이 그 의도를 분명히 드러내지 못했다는 것이다. 아래 예시를 보자 [before] const success = (position: {= coords: { longitude: number; latitude: number }; }) => { setPos({ ...pos, longitude: position.coords.longitude, latitude: position.coords.latitude, }); }; 코드상으로는 문제가 없어 보인다. success -> 성공인 건 알겠는데, 그래서 뭐가 성공했을 때인데? [after] const findUserLocation = (position: { coords: { longit..

RTK configureStore 사용중에 다음과 같은 에러가 발생하였다. `Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.` [내가 작성한 코드] reducer.tsx import { configureStore } from "@reduxjs/toolkit"; import { persistReducer } from "redux-persist"; import storage from "redux-persist/lib/storage"; import userSlice from "./user"; import productSlice from..

https://velog.io/@jay/it-is-nothing-but-static-file-cache#cra-%EB%B9%8C%EB%93%9C-%EB%B0%A9%EC%8B%9D 별 건 아니지만 빌드 파일 배포 시 업데이트가 안되는 건에 대해 정적 파일 캐쉬로 인해 배포 업데이트가 적용이 안될 때 velog.io webpack cra 설정 https://velog.io/@kmlee95/CRA%EB%A1%9C-%EC%9B%B9%ED%8C%A9%EC%84%A4%EC%A0%95 CRA로 웹팩설정(재 설정) CRA프로젝트로 웹팩을 설정하는 방법에 대해 확인해본다. velog.io https://likelionsungguk.github.io/22-03-23/react-rewired-%EC%82%AC%EC%9A%A..

한 대의 PC로 회사 계정과 개인 계정을 사용하다보니 ssh로 설정을 해두었다. 그러다가 개인 계정의 아이디를 바꾸면서 config 설정도 변경해주고, 로컬환경에서 작업 후 push를 시도했는데, 아래와 같은 오류가 발생하였다. Could not resolve hostname github.com nodename nor servname provided, or not known [해결 방법] 1. remote 주소 확인 git remote -v 2. 주소 변경 (이때 config 설정과 동일하게 해야함) git remote set-url origin https://github.com/레포지토리명.git // ssh로 접속하도록 설정한 경우 git remote set-url origin git@github.c..

Uncaught SyntaxError: expected expression, got '

serializableStateInvariantMiddleware.ts:194 A non-serializable value was detected in an action, in the path: `register`. Value: ƒ register(key) ... redux-persist 사용시 middleware 설정을 해줘야 한다. serializableCheck 를 false로 할 수도 있는데, 공식문서에서 다음과 같이 설정해주라고 나와있다. import { configureStore } from '@reduxjs/toolkit' import { persistStore, persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER, } fro..

npm run build시 발생하는 경고, compile이 최신이 아니라고 경고하는 의미인거 같았다. > react-scripts build Creating an optimized production build... Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating [BABEL] Note: The code generator has deoptimised the styling of D:\brpark\dev\monster-fro..

체크박스를 커스텀하는 과정에서, 체크박스의 상태에 따라 보여지는 스타일이 달라져야 하기 때문에, props로 체크박스의 상태를 넘겨줘야 했다. 필자는 CRA with Typescript Template에 Emotion을 적용해서 개발 중에 있었음. React + style-component 사용할 때 처럼 그냥 props로 넘겨주면 오류가 남 (변경 전) index.tsx const [checked] = useState(false) style.ts export const checkBoxStyle = css` background: ${(props) => props.checked ? `url(${active}) no-repeat 100%/contain` : "#ffff"}; `; (변경 후) 👉 방법 : s..