차곡차곡 개발기록

개발환경 설정하며 사용한 cmd 기록 1. flutter 설치 (dart 도 같이 깔린다) echo $0 // 본인 맥북 쉘 확인 brew install --cask flutter // 기존에 dart 가 깔려 있다고, 오류가 나면 아래 명령어로 dart 지우기 brew remove dart brew install --cask flutter // dart 지우고 다시 수행 flutter --version // 잘 깔렸나 확인 vi .zshrc // 열어서 아래 입력 export PATH="/opt/homebrew/bin/flutter/bin:$PATH" // wq! 로 문서 저장 후 닫기 source .zshrc // 로 적용 flutter doctor -v // 설치 및 flutter 환경 확인 안드로..

번들 분할 웹팩과 같은 웹 번들러는 코드 및 코드 사이의 종속성을 분석 단일 파일로 번들 가장 적합하게 분할 하려 함 이를 분할하는 프로세스를 번들 분할이라고 함 터서(Terser) 웹팩이 코드를 최소화하고 최적화하기 위해 사용하는 도구 변수와 함수의 이름을 미니마이즈하고 (가능한 작게 변경) 트리쉐이킹 이라는 프로세스 수행으로, 어플리케이션에서 사용되지 않는 코드 제거 이때, 코드가 앱의 동작에 영향을 조금이라도 줄 경우 제거 하지 않음 트리쉐이킹은 매우 복작한 프로세스라 기능이 손상되지 않도록 신중하게 수행되어야 함 ESModule 보다 CommonJS 의 트리쉐이킹이 더 적게 일어남 ESModule = 새로운 표준, CommonJS = 오래된 모듈 표준 번들 크기 측정 웹팩에서는 Webpack Bu..

# 내용 redux의 히스토리를 chrome debugging tool로 보려고 하던 중 오류 발생함 redux-devtools-extension를 설치하고 redux의 createStore에 enhancer를 정의하여 넘겨 주었으나 오류 남 Server Error TypeError: middleware is not a function # 원인 아래 코드에서 applyMiddleware에 배열을 직접 넣어주어 나는 에러 const enhancer = process.env.NODE_ENV === 'production' ? compose(applyMiddleware([])) : ... 참고로 applyMiddleware 함수 정의가 아래와 같다. export function applyMiddleware( ...

# 내용 redux 에 initialState 선언 후 컴포넌트에서 사용시 아래와 같은 오류가 남 (아래 소스 참고) Server Error TypeError: Cannot read property 'isLoggedIn' of undefined # 원인 redux 용 reducer 처리를 잘못했다. 최초에 초기화 할 때 root reducer가 실행되는데 이때 default 가 수행 되며, state를 반환해주어야 undefined 가 발생하지 않는다. (state = initialState) # 해결법 const rootReducer = (state = initialState, action) => { switch (action.type){ case HYDRATE: ... default: // retur..

# 내용 nextjs 에서 styled-components 사용 중 발생한 오류 내용 그대로 클래스 명이 맞지 않아서 생긴 오류 Warning: Prop `className` did not match. Server: "ant-input-group-wrapper ant-input-search ant-input-search-with-button sc-hKwDye jIYbso" Client: "ant-input-group-wrapper ant-input-search ant-input-search-with-button sc-gsDKAQ dxgLeb" # 원인 nextjs 는 최초 렝더링을 서버가 담당함 (SSR) > 최초에 서버에서 해시+클래스명으로 생성함 이후 클라이언트에서 렌더링 수행함 (CSR) > 이후 ..

프로젝트 웹 개발 코드품질 향상을 위해 포맷 맞추기용 ESLint 사용하자 사용하는 IDE인 Webstorm에 적용해보자 # 사전조건 1. npm i -D eslint ... 로 설치 (react 등 프로젝트에 맞게 설치) { ..., "devDependencies": { "eslint": "^8.11.0", "eslint-plugin-import": "^2.25.4", "eslint-plugin-react": "^7.29.4", "eslint-plugin-react-hooks": "^4.3.0" } } 2. .eslintrc 파일 작성 { "parserOptions": { "ecmaVersion": 2021, "sourceType": "module", "ecmaFeatures": { "jsx": tru..

inflearn - 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 김정환 님 강의를 들으며 기록한 내용이다. 기본 이론 린트의 역할 코드의 보푸라기들을 제거하는 역할을 한다 ESLint 역할 포맷팅 코드 품질 유지 : 잠재적 오류를 사전에 체크해 줌 실습 준비 및 실습 ESLint 사용 npm i eslint 실행 npx eslint app.js 실행하면 오류남 // 설정 파일이 필요하다 ESLint couldn't find a configuration file. To set up a configuration file for this project, please run: npm init @eslint/config 프로젝트 루트에 .eslintrc.js 파일을 생성 ..

inflearn - 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 김정환 님 강의를 들으며 기록한 내용이다. Babel 바벨의 배경, 바벨은? 브라우저에서도 사용하는 자바스크립트 언어가 조금씩 달라 코드가 일관적이지 못할때가 있음 예를 들어, 사파리에서 Promise.prototype.finally 메소드를 사용할 수 없었다 크로스 브라우징으로 인한 문제를 해결하기 위해 바벨리 등장함 ECMAScript2015+, TypeScript, JSX 등 언어도 브라우저에서 동작하게 만들어줌 실습 준비 바벨 설치 npm install @babel/core @babel/cli node_modules/.bin/babel src/app.js npx babel src/app.js ..

inflearn - 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 김정환 님 강의를 들으며 기록한 내용이다. NodeJS node js 를 배워야 하는 이유? 브라우저에 맞게 개발 타입스크립트 같은 고사양 언어 빌드 자동화 프로젝트 사용 라이브러리 다운 및 테스트 자동화 개발환경 커스터마이징 제공 node js 버전관리 nodejs는 시맨틱 버전관리 메이저.마이너.패치 ~ 틸트, ^캐럿 버전 표기 Webpack 웹팩이란? 웹팩은 모듈로 연결된 여러개의 파일을 합쳐주는 역할을 함 그 결과 하나로 합쳐진 파일을 번들이라고 함 웹팩이 번들을 만드는 번들러 역할을 함 따라서 웹팩을 번들러라고도 함 실습준비 기본 프로젝트 생성 mkdir basic_frontend cd ba..

react 설치 중 오류 발생 ❯ npx create-react-app react-assets dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.67.dylib Referenced from: /usr/local/bin/node Reason: image not found [1] 1317 abort npx create-react-app react-assets 맥을 바꾸면서 저장공간을 그대로 복사해서 버전/환경이 달라 생긴 이슈 해결방법은 icu4c 가 링크된 버전을 바꿔주거나, brew upgrade npm 로 해결가능 brew list icu4c 로 버전 확인 하니 아래의 결과가 나옴 /usr/local/Cellar/icu4c/69.1/ 새로운 ..