혼자 적어보는 노트

✅ 오늘의 학습 📌 React (2) - 컴포넌트 스타일링 / emotion - useMemo, useCallback - React.memo - Custom Hooks - Storybook emotion : CSS in JS의 종류중 하나이며 프레임워크에 구애받지 않고 사용하는 방식과 React에서 사용하는 방식이 있다. React에서 사용할 것이기 때문에 React방식으로만 적을 예정이다. emotion 공식 문서 기본 사용 방법에는 CSS 함수를 사용하여 작성하는 방법과 styled component방식으로 작성하는 방법이 있다. CSS 함수 방식 import { css } from "@emotion/react"; const style = css` color: pink; `; const SomeCom..

✅ 오늘의 학습 📌 React (1) - CRA / JSX - 컴포넌트 이론 - useEffect - useRef - pagination 재사용성이 좋은 컴포넌트 만들기? UI를 추상적으로 바라보기! 추상적으로 바라보려면 ? 공통점을 찾아보자 -> 공통적으로 활용할 수 있는 부분을 찾아보고 공통점에 맞게 컴포넌트를 구성해보기. ❗❗ 다만 너무 추상적으로 바라보면 이후에 구분하기 더 어려울 수 있다. 강의에서 아토믹 디자인 패턴이라는 키워드를 던져주셔서 검색해보고, 강사님의 글을 읽어보았다. 아토믹 디자인 패턴 이름에서 유추할 수 있듯 가장 작은단위의 컴포넌트를 원자로 설정하고, 이를 바탕으로 상위 컴포넌트를 만들어서 코드 재사용을 최대화 하는 방법론이다. 작은 단위의 컴포넌트 Paragraph.js im..

5월 18일부터 5월 24일까지 일주일간의 복습기간(방학)이 주어졌었다. 밀려오는 과제와 강의를 견뎌낸 사람들에게 주는 휴식과도 같은 기간이었다..😅 곧 진행할 팀 프로젝트를 위한 재정비 기간이기도 했고, 그간 학습을 하면서 시간이 부족해서 놓쳤던 부분들을 다시 한번 짚어보는 시간이라고 생각했다. 하지만.. 맘 편히 잠을 좀 많이 잤던 것이 가장 기억에 남는다... ✍ 복습기간 동안 한 것 1. 타입스크립트 학습 우리 팀은 최종 프로젝트에서 타입 스크립트를 적용해보기 위해 복습기간 동안 타입스크립트를 학습하기로 했었다. 원래는 곧 있을 중간프로젝트에 타입스크립트를 적용해보기로 했지만 어제 있었던 멘토님과의 커피챗에서 이번 팀 프로젝트에서는 최소한의 요구사항을 우선적으로 하고 이후에 적용하고 싶다면 프로젝..

✅ 오늘의 학습 📌 Vue (7) - Vue Router - Vue Router Navigation Guards/ Meta fields - Vue Router 스크롤 동작 - Babel 구성 - PostCSS, Autoprefixer 구성 Vue Router 공식 문서: Vue Router $route - page에 대한 정보를 가지고 있는 객체 $router - page에 대한 조작을 할 수 있는 메소드를 가지고 있다. route 설정하기 route에는 Hash(#) 방식과 HTML방식으로 설정을 할 수 있는데 기본적으로 많이 사용하는 HTML방식으로 route를 구성할 것이다. [routes/index.js] import { createRouter, createWebHistory } from 'vue..

✅ 오늘의 학습 📌 Vue (6) - 플러그인 - 믹스인 - Teleport - Provide / Injext - Store - Vuex 플러그인 사용 app.config.globalProperties에 원하는 플러그인의 이름을 붙여주면 컴포넌트 내부에서 this로 접근할 수 있다. [plugins/fetch.js] export default { install(app, option) { // 첫번째 인자는 app 객체, 두 번째 인자는 option app.config.globalProperties.$fetch = (url, opts) => { return fetch(url, opts).then(res => res.json()); }; } }; [main.js] const app = createApp(Ap..

✅ 오늘의 학습 📌 Vue (5) - 컴포넌트 등록 - Props - Non-Props - 커스텀 이벤트 - Slots - 동적 컴포넌트 - Refs 전역 컴포넌트 - main.js에서 생성한 app에 component 메서드를 통해 등록한 컴포넌트. - 전역으로 컴포넌트를 등록하면 컴포넌트 어디에서든지 import를 하지 않고 등록한 컴포넌트를 사용할 수 있다. import { createApp } from 'vue'; import App from '~/App'; import Btn from '~/components/Btn'; const app = createApp(App); app.component('Btn', Btn); app.mount('#app'); 지역 컴포넌트 - 컴포넌트 내부에서 compo..

✅ 오늘의 학습 📌 Vue (4) - 컴포넌트 기초 - Parcel SFC 프로젝트 구성 - Webpack SFC 프로젝트 구성 - ESlint 설정 하위 컴포넌트의 이벤트 수신하기 props는 외부에서 들어오는 데이터이기 때문에 readonly이다. 그래서 데이터를 수정하려면 데이터가 들어오는 외부에서 변경을 해주어야 한다. const App = { data() { return { fruits: [ { id: 1, name: "apple" }, { id: 2, name: "orange" }, { id: 3, name: "banana" }, ], }; }, methods: { toUpper(fruit, upperText) { fruit.name = upperText; // 받은 fruit 데이터를 대문자..

✅ 오늘의 학습 📌 Vue (3) - 조건부 렌더링 - 리스트 렌더링 - 이벤트 핸들링 - 폼 입력 바인딩 조건부 렌더링 v-if / v-else-if / v-else 조건에 맞는 값에 따라 출력되는 결과를 정할 수 있다. if else-if else!! template template 태그를 사용하면 조건 만족 시 template 내부의 엘리먼트들만 출력된다. 안녕하세요 💡 v-show와 v-if 차이 v-if 데이터가 falsy값일 경우 해당 엘리먼트의 렌더링 자체를 하지 않고 라는 주석이 생긴다. * 초기 렌더링 비용이 낮지만 전환 비용이 높다. v-show 데이터가 falsy값일 경우 해당 엘리먼트는 존재하지만 스타일 속성인 display가 none이 된다. * 초기 렌더링 비용이 높지만 전환 비..