1. 커스텀 훅 사용 장점 재사용성 같은 로직을 여러 컴포넌트에서 재사용할 수 있습니다. 분리된 관심사 로딩 로직을 컴포넌트로부터 분리하여 관리할 수 있습니다. 코드의 중복 최소화 중복되는 코드를 줄일 수 있습니다. 단점 학습 곡선 커스텀 훅을 제대로 이해하고 사용하기 위해선 React 훅에 대한 이해가 필요합니다. 2. 전역 상태 관리 (예: Redux, Context API) 장점 애플리케이션 전반에서 상태 공유 JS 라이브러리의 로드 상태를 앱의 모든 컴포넌트와 공유할 수 있습니다. 중앙 집중식 관리 상태를 한 곳에서 관리하여 일관성을 유지할 수 있습니다. 단점 복잡성 상태 관리 라이브러리의 추가적인 복잡성과 설정이 필요합니다. 오버헤드 작은 애플리케이션의 경우, 전역 상태 관리가 과도하게 느껴질 ..
Frontend
React 공식 문서를 통한 학습 중, use-immer에 대해 접하게 되었다. 반복적인 코드를 줄이기 위해 use-state 대신 use-immer를 사용할 수 있다는 내용이었다. 그렇다면, 모든 경우에 use-state 대신 use-immer를 사용할 수 있을까? 결론부터 말하자면, use-state와 use-immer를 적절히 혼용해야한다고 판단했다. 이유를 말하기에 앞서, use-immer에 대해 간단히 설명하겠다. use-immer 란? use-immer는 immer 라이브러리를 리액트의 상태 관리와 결합하는 훅을 제공한다. immer는 불변성을 유지하면서 상태를 업데이트하는 것을 간편하게 만들어 주는 도구이며, 복잡한 상태 구조를 가진 애플리케이션에서 특히 유용하다. use-immer의 장점 ..
목차 crypto-js crypto-js 설치 crypto-js 사용 예시 crypto-js crypto-js는 해쉬 함수를 통해 양방향으로 암호화 할 수 있도록 해주는 Node.js 기반 패키지이다. crypto-js 설치 npm i crypto-js crypto-js 사용 예시 내 경우, React 앱 내 src/util/ 경로에 EncryptService.js 파일을 생성해 활용했다. 나는 AES 암호화 방식을 선택했으며, 여기를 참고해 원하는 암호화 방식을 사용해도 상관없다. // EncryptService.js import CryptoJS from "crypto-js"; import { secrets } from "../../secret"; const encryptionKey = secrets...
State - vuex는 Single State Tree (단일 상태 트리)를 사용 - 중앙에서 관리하는 모든 상태 정보를 state가 관리 (==data) - 여러 컴포넌트 내부에 있는 특정 state를 중앙에서 관리 - 기존에는 state를 찾기 위해 각 컴포넌트를 직접 확인 - vuex를 활용해 vuex store에서 컴포넌트에서 사용하는 state를 한눈에 파악 - Mutations에 정의된 method에 의해 변경 - State가 변경되면 해당 State를 공유하는 모든 컴포넌트의 DOM은 자동으로 렌더링 됨 - 모든 Vue 컴포넌트는 Vuex Store에서 state 정보를 가져와 사용 - 각 컴포넌트는 dispatch()를 사용해 Actions 내부의 method 호출 Actions - 컴포..
vuex Vue.js application에 대한 상태관리패턴 + 라이브러리 application 모든 component들의 중앙 저장소 역할 (데이터 관리) 기존 Vue.js의 문제점 상위(부모) 하위(자식)의 단계가 많이 복잡해 진다면 데이터의 전달하는 부분이 매우 복잡해짐 동위 컴포넌트 또한 종류가 많다면 매우 복잡해짐 => vuex를 사용하게 되면 중앙 저장소가 존재하게 되며 아무대서나 꺼내 사용할 수 있게 된다 모든 vue 프로젝트는 vuex를 써야하는가? -> NO 단순한 구조라면 $emit props을 통해 직접 부모 자식으로 이동하는 것이 편리 상태관리패턴 - 상태는 앱을 작동하는 원본 소스 (= data) - 뷰는 상태의 선언적 매핑 (=template) - 액션은 뷰에서 사용자 입력에 ..
Vue.js 터미널에서 npm run serve 입력 후 아래와 같은 오류가 발생했고 해결 방법을 기록하기 위해 작성한다. Conflict: Multiple assets emit different content to the same filename index.html 해결방법 경로 내 특수문자 확인 내 경우에는 프로젝트 경로에 1110(._제거) 라는 디렉토리가 포함되어있었다. 1110으로 디렉토리명 변경 후 해결
개인 프로젝트로 instagram 클론 UI 제작을 해보았다 이번 프로젝트의 핵심은 css flex의 활용이었던 것 같다 flex 사용 경험이 없었기에 익숙해지는데 초점을 두고 학습과 병행하며 진행했다 완성본 시연 영상 완성본 어려웠던 점 & 소스코드 flex 레이아웃의 flex-direction, justify-content, align-items 속성을 실제 코드에서 사용하는 과정 중 메인축, 수직축의 구분이 쉽지 않아 여러가지 속성들을 직접 바꿔가며 메인/수직축을 파악하는데 시간이 오래 소요됐다 Github 저장소 후기 (느낀점) flex 레이아웃을 활용하면 배치에 있어 얻을 수 있는 이점이 상당히 많다는 사실을 깨달았다 좀 더 익숙해져서 자유롭게 사용 할 수 있도록 좀 더 연습해보고 공부해야겠다는..
# Flex 레이아웃을 만들기 위한 기본 구조 [html] helloflex abc helloflex [css] .container { display: flex; /* display: inline-flex; */ } # flex-direction : 아이템들이 배치되는 축의 방향을 결정하는 속성 .container { flex-direction: row; /* flex-direction: column; */ /* flex-direction: row-reverse; */ /* flex-direction: column-reverse; */ } row (기본값) 아이템을 행(가로) 방향으로 배치 row-reverse 아이템을 역순으로 가로 배치 column 아이템을 열(세로) 방향으로 배치됩니다. column..
