지극히 개인적인 프론트엔드 개발자의 맥북 초기세팅 1. 크롬 브라우저 설치- 북마크 세팅- 익스텐션 설치(Deepl, React dev tools ...) 2. 터미널 호스트 이름 고정Iterm2를 설치하기 전에는 기본 터미널을 사용해야 한다. 초기화 이후 공용 네트워크에 접속하면 가끔 터미널 호스트 이름이 변경되는 일이 발생한다..  터미널에 아래 명령어를 입력하면 호스트 이름을 바꿀 수 있다scutil --set HostName [새 호스트 이름] 3. Homebrew 설치https://brew.sh/ 공식 홈페이지 참조설치 이후 터미널을 참고하여 path 추가 4. iterm2 설치https://iterm2.com/index.html 공식 홈페이지 참고 5. iterm2 꾸미기5.1. 폰트 설치터미..

1. 추상화를 통한 복잡성 극복📍 추상화의 목적- 단순화- 복잡도를 다루기 위해 추상화한다📍 추상화의 정의- 어떤 양상, 세부 사항, 구조를 좀더 명확하게 이해하기 위해 특정 절차나 물체를 의도적으로 생략하거나 감춤으로써 복잡도를 극복하는 방법📍 추상화 방법 2가지1. 구체적인 사물들 간의 공통점은 취하고 차이점은 버리는 일반화2. 중요한 부분을 강조하기 위해 불필요한 세부사항을 제거- 객체지향에서는 객체라는 추상화를 통해 현실의 복잡성을 극복한다 2. 객체지향과 추상화📍 앨리스의 추상화 예시- 하트 여왕, 스페이드 정원사, 클로버 병사 등을 모두 트럼프 객체로 단순화(토끼는 트럼프로 추상화 불가)- 트럼프로 단순화할 수 있는 이유는, 위의 모든 인물들이 트럼프의 일반적인 외형과 행동방식을 지녔기..

티스토리에서 작심삼주 오블완 챌린지를 시작한다고 합니다! 📍오블완 챌린지는?- 21일 동안 매일 글쓰기 도전! 📍일정- 2024년 11월 7일(목) - 11월 27일(수) 📍참여 혜택  아래 사이트 방문해서 정보를 확인해보세요!! https://www.tistory.com/event/write-challenge-2024 작심삼주 오블완 챌린지오늘 블로그 완료! 21일 동안 매일 블로그에 글 쓰고 글력을 키워보세요.www.tistory.com

📍목표- 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;} /..