회사 프로젝트에서는 jstree를 사용해 트리를 보여 주는데, 펼치고 접는 아이콘을 +, -로 바꿔 달라는 요청이 있었다. 아이콘을 png로 바꿔서 해도 된다고는 하지만 제일 싫어하는 게 이미지 찾고….. 그거 집어넣고…. 하는 것이기 때문에 이것저것 구글링을 해 본 결과 proton이라는 bootstrap 기반의 테마를 찾을 수 있었다. 데모 페이지에도 나와 있는데, 다들 cdn 방식으로 사용하는 게 대부분이었다. 나도 그렇게 할 수 있었지만 회사 프로젝트의 index.html 파일이 너무 깨끗해서……. ㅋㅋㅋㅋㅋㅋㅋ 건드리지 않고 패키지로 다운받을 수 있으면 했다. https://www.npmjs.com/package/jstree-bootstrap-theme 우리의 위대한 npm은 당연히도 패키지를 ..
문제 상황 보통의 redux state는 새로고침 하면 state가 날아가기 때문에 persist 사용이 불가피하다. 현재 프로젝트에도 redux-persist를 사용하고 있었다. 아직까지는 전역으로 관리할 상태가 많지 않아서 reducer를 하나만 두고 사용하고 있는데, 같은 reducer에서 관리할 state에 프로퍼티가 하나 늘었다. 즉, // Reducer const initialState = { A: [] } 에서 // Reducer const initialState = { A: [], B: [] } 가 되었다는 뜻이다. 당연히 아무런 문제가 없을 줄 알고 액션마다 객체를 return 할 때 B에 대한 코드를 추가해서 수정해서 커밋했는데… 다른 팀원 분의 컴퓨터에서 테스트를 하니 에러가 났다. ..
웹 성능 최적화
* 인프런의 프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1 강의를 듣고 작성한 글입니다. https://inf.run/Ztjz 이미지 사이즈 최적화 💡 static 이미지를 사용하는 경우 우리가 크기를 줄여서 사용하면 되는데, s3 서버에서 받아오는 것처럼 api를 사용하여 받아오는 경우에는 어떻게 해야 할까? Image processing CDN 이미지가 올라가 있는 서버에서 사용자에게 이미지를 전달해 주기 전에 크기를 조절하는 등 과정을 거쳐서 사용자에게 전달해 줌 이미지 cdn 서비스 imgix - The End-to-End Image Solution 코드 스플리팅 대부분의 React 앱들은 Webpack 같은 툴을 사용하여 여러 파일을 하나로 병합한 “번..
자바스크립트에 타입 기능이 있으면 좋은 이유 타입스크립트 컴파일러는 문제의 원인이 어디에 있는지 친절하게 알려 준다 타입스크립트 고유의 문법 타입 주석과 타입 추론 let n: number = 1 // 타입 주석 let m = 2 // 타입 추론 타입 추론 덕분에 자바스크립트로 작성된 ‘.js’ 파일을 확장자만 ‘.ts’로 바꾸면 타입스크립트 환경에서도 바로 동작한다. 인터페이스 interface Person { name: string age?: number } let person: Person = {name: "Jane"} 튜플 튜플은 물리적으로는 배열과 같다. 다만, 배열에 저장되는 아이템의 데이터 타입이 모두 같으면 배열, 다르면 튜플입니다. let numberArray: number[] = [1,..
Redux thunk 하고자 했던 것 로그인 시 token을 받아오고 그 token을 session Storage에 저장해 둔다. 또 하나 해야 할 일은 userId(인공키) 값을 전역 state에 저장해서 유저 관련 정보가 필요한 컴포넌트마다 사용하게 해야 하고, isLoggedIn 또한 전역 state에 저장하여 true 값이 유지되게 해야 한다. 이 기능을 구현하기 위해 redux를 사용했다. 아직 api 컨벤션을 사용하지 않아서 login api (아이디, 비밀번호로 request를 보내면 userid와 token을 response로 받는다)를 action 생성 함수에서 axios로 실행하고, 액션을 return 해 주었는데... 문제 어쩐지 sessionStorage에 저장만 되고... isLo..
Redux 기초 - 노션 백업
리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 또한 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 할 수 있다. 리덕스는 프로젝트 내부의 상태를 하나의 단일 스토어에 저장하고, dispatch를 이용하여 action을 발생시킨 뒤 reducer를 통해 상태를 변경하는 것. Action → Dispatcher → Store → View → Action → Dispatcher (반복...) Action 상태에 어떠한 변화가 필요하면 액션이라는 것이 발생한다. 액션 객체는 반드시 type 필드를 가지고 있어야 함. 액션의 이름이라고 생각하면 됨 { type: 'ADD_TODO', ..
React 기초 React React는 자바스크립트 라이브러리로, “컴포넌트”라고 불리는 단위를 이용하여 복잡한 UI를 구성하도록 돕습니다. React 앱 만들기 1. Node.js 설치 공식 홈페이지에서 LTS 버전 설치 설치 후 cmd 창에서 node -v npm -v 명령어 실행해서 현재 버전 확인하기 (잘 설치되었는지 확인) 2. React 설치 npm i react 3. React App 생성 npx create-react-app my-app my-app은 생성할 App 이름입니다 typescript 버전: npx create-react-app my-app --template typescript 4. 실행 cd my-app npm run start 혹은 npm start state와 props ..
