📍목표- Nuxt3(Vue.js) 에서 형제 컴포넌트끼리 데이터 공유하기 📍React vs Vue 데이터 공유 비교- React는 단방향 데이터 플로우이므로 아래 사진처럼 부모 컴포넌트에서 자식 컴포넌트로 데이터가 흐른다- 반면, Vue 에서는 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 수 있다. event emit을 활용하면 된다  📍자식1 컴포넌트에서 상태 변경- defineEmits() 를 활용해서 emit 함수 정의하기- 상태를 변경할 자식 컴포넌트에서 먼저 defineEmits()로 emit 함수를 선언한다- 그리고 컴포넌트가 마운트 되면 mountain 기본값을 emit 해준다- 상태가 변경될 때마다 emit을 실행하기 위해 watch를 사용한다 MountainHeader.vue ..

📍목표- Python 프로젝트에서 패키지 관리하는 방법 알아보기 📍Python 프로젝트에서 의존성 관리 방법Python에도 Node.js의 npm 처럼 pip 라는 패키지 매니저가 존재한다. pip 명령어를 통해 외부 패키지를 설치하고 삭제할 수 있다. 그런데, 가상환경에서 Python 프로젝트를 실행하는 경우, 패키지 정보가 담기는 가상환경(일반적으로 /venv 폴더) 폴더의 /lib 은 gitignore에 의해 공유되지 않는다. 그렇다면 Python 에서는 Node.js 진영의 package.json 처럼 의존성을 명시하는 문서가 없을까? 📍현재 프로젝트의 모든 패키지 목록 추출하기찾아보니 pip freeze 명령어를 통해 현재 프로젝트의 의존성 리스트(버전 포함)를 터미널에 출력할 수 있었다-..

📍가상환경을 사용하는 이유- 여러 버전의 파이썬을 사용하거나, 프로젝트 별로 패키지를 설치하고 싶을 때- 가상환경에서 애플리케이션을 개발하면 특정 패키지를 시스템에 전역으로 설치하지 않아도 된다 => 가상환경 디렉토리 하위에 pip install로 설치한 패키지들이 설치되기 때문 📍가상 환경 생성Python 표준 라이브러리의 venv 모듈을 사용한다 가상환경 폴더(주로 venv 라는 이름 사용)의 구성요소- /lib: 파이썬 인터프리터가 설치된 폴더- /bin: 가상환경 내에서 상호작용(가상환경 활성화/비활성화)에 필요한 파일이 저장된 폴더python3 -m venv [사용할 가상환경 이름] 📍가상 환경 활성화source [가상환경 이름]/bin/activate- 활성화에 성공하면 가상환경 폴더명이..

📍목표- Python에서 reduce 사용하기 📍functools.reduce예를 들어, 어떤 각각의 경우의 수를 나타내는 [1, 2, 3, 4, 5] 리스트가 있다고 할 때, 모든 경우의 수를 구하기 위해 이 리스트의 모든 원소를 곱하는 결과를 반환받고 싶다면 어떻게 할까? for loop 를 사용할 수도 있지만, JavaScript의 reduce 같은 메서드를 사용해 결과를 깔끔하게 반환할 수도 있을 것이다. Python에도 reduce 함수가 존재한다. functools 패키지에서 import 해오면 된다from functools import reduce 기본 문법은 아래와 같다reduce(function, iterable[, initializer]) - function: 2개의 인자를 받아(리..

📍composables/composables 폴더에 기능 단위로 파일을 만들고 내부에서 use + 파스칼 케이스의 함수를 선언하고 개별 named export- 예시) /composables/math.ts 생성export function useSum(x: number, y: number) { return x + y;}// 화살표 함수 사용 가능export const useMultiply = (x: number, y: number) => { return x * y;};export function useMinus(x: number, y: number) { return x - y;}export function useMyNumber() { // util 호출 가능 return MY_NUMBER;} /..

📍Vue.js에서 외부 라이브러리 사용하기- js-confetti 라이브러리를 사용하면 색종이가 흩날리는 이펙트를 만들 수 있다- 🎉 Congratulations!

📍Slots- 엘리먼트를 사용하여 부모 컴포넌트에서 자식 컴포넌트로 블럭을 전달할 수 있다- 자식 컴포넌트 이렇게만 해도 되고 아래는 fallback contents 전달하고 싶을 때 --> Fallback content - 부모 컴포넌트 (before) This is some slot content! - 내부의 내용은 fallback contents로 작동하여 부모 컴포넌트에서 contents를 입력하지 않았을 때 출력된다- 부모 컴포넌트 (after) Message: {{ msg }}

📍emit()- 자식 컴포넌트는 부모 컴포넌트로부터 props를 받지만,- 부모 컴포넌트에 event를 방출할 수도 있다- emit()의 1번째 인자로 이벤트 이름을 전달- 부모 컴포넌트는 자식 컴포넌트에서 방출된 이벤트를 v-on directive를 통해서 전달받음- 이벤트 핸들러는 여러 인자를 받고 부모 컴포넌트의 로컬 상태로 할당 가능 childMsg = msg" />- 내부에서는 ref값 참조 시 .value 안 붙임에 주의 정리- props: 부모 -> 자식 데이터 전달- emit: 자식 -> 부모 데이터 전달