[Python] 프로젝트 패키지 관리하기(pip freeze)
·
✏️ Study/🐍 Python
📍목표- Python 프로젝트에서 패키지 관리하는 방법 알아보기 📍Python 프로젝트에서 의존성 관리 방법Python에도 Node.js의 npm 처럼 pip 라는 패키지 매니저가 존재한다. pip 명령어를 통해 외부 패키지를 설치하고 삭제할 수 있다. 그런데, 가상환경에서 Python 프로젝트를 실행하는 경우, 패키지 정보가 담기는 가상환경(일반적으로 /venv 폴더) 폴더의 /lib 은 gitignore에 의해 공유되지 않는다. 그렇다면 Python 에서는 Node.js 진영의 package.json 처럼 의존성을 명시하는 문서가 없을까? 📍현재 프로젝트의 모든 패키지 목록 추출하기찾아보니 pip freeze 명령어를 통해 현재 프로젝트의 의존성 리스트(버전 포함)를 터미널에 출력할 수 있었다-..
[Nuxt] composables, utils, types 폴더의 auto import 사용하기
·
✏️ Study/⛰️ Vue.js & Nuxt
📍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] 외부 라이브러리 사용하는 방법(+confetti effect)
·
✏️ Study/⛰️ Vue.js & Nuxt
📍Vue.js에서 외부 라이브러리 사용하기- js-confetti 라이브러리를 사용하면 색종이가 흩날리는 이펙트를 만들 수 있다- 🎉 Congratulations!
[Vue.js] tutorial - 14. Slots
·
✏️ Study/⛰️ Vue.js & Nuxt
📍Slots- 엘리먼트를 사용하여 부모 컴포넌트에서 자식 컴포넌트로 블럭을 전달할 수 있다- 자식 컴포넌트 이렇게만 해도 되고 아래는 fallback contents 전달하고 싶을 때 --> Fallback content - 부모 컴포넌트 (before) This is some slot content! - 내부의 내용은 fallback contents로 작동하여 부모 컴포넌트에서 contents를 입력하지 않았을 때 출력된다- 부모 컴포넌트 (after) Message: {{ msg }}
[Vue.js] tutorial - 13. Emits
·
✏️ Study/⛰️ Vue.js & Nuxt
📍emit()- 자식 컴포넌트는 부모 컴포넌트로부터 props를 받지만,- 부모 컴포넌트에 event를 방출할 수도 있다- emit()의 1번째 인자로 이벤트 이름을 전달- 부모 컴포넌트는 자식 컴포넌트에서 방출된 이벤트를 v-on directive를 통해서 전달받음- 이벤트 핸들러는 여러 인자를 받고 부모 컴포넌트의 로컬 상태로 할당 가능 childMsg = msg" />- 내부에서는 ref값 참조 시 .value 안 붙임에 주의 정리- props: 부모 -> 자식 데이터 전달- emit: 자식 -> 부모 데이터 전달
[Vue.js] tutorial - 12. Props
·
✏️ Study/⛰️ Vue.js & Nuxt
📍Props- 자식 컴포넌트는 props를 통해 부모 컴포넌트로부터 데이터를 받을 수 있다- 먼저 props를 선언해야 한다 - msg props는 자식 컴포넌트의 블럭에서 사용 가능- defineProps의 반환값을 통해서 JS()에서 접근도 가능- 부모 컴포넌트에서 props를 자식 컴포넌트에 전달할 때는 어트리뷰트 형태로 전달한다- 동적인 값을 전달할 때는 v-bind를 사용하여 전달한다
[Vue.js] tutorial - 11. Components
·
✏️ Study/⛰️ Vue.js & Nuxt
📍Components- 자식 컴포넌트를 만들고 부모 컴포넌트에서 import해서 사용할 수 있다- 자식 컴포넌트 A Child Component! - 부모 컴포넌트
[Vue.js] tutorial - 10. Watchers
·
✏️ Study/⛰️ Vue.js & Nuxt
📍watch- watchers를 사용하면 사이드 이펙트를 반응적으로 수행할 수 있다- 예) 특정 값이 바뀌면 콘솔에 숫자 출력하기import { ref, watch } from 'vue'const count = ref(0)watch(count, (newCount) => { // yes, console.log() is a side effect console.log(`new count is: ${newCount}`)})- 위 예시에서 count의 값이 바뀌면 콜백 함수가 실행된다- ref 말고도 다른 타입의 데이터를 watch가 감지하게 할 수 있다- 예시 Todo id: {{ todoId }} Fetch next todo Loading... {{ todoData }}