차마시는 개발자

STU-TI STUDY + MBTI MBTI 와 개발자 스터디를 결합하여 성격이 맞는 사람끼리 스터디를 진행 하도록 하는 서비스 입니다. 배포: https://stu-ti.netlify.app/ Github: https://github.com/prgrms-web-devcourse/Team_KPPL_STUTI_FE YouTube: https://www.youtube.com/watch?v=MlLwIza06fw 많이 사용을 해주시고 문제점을 알려주시면 계속해서 리팩토링을 해보도록 하겠습니다.!!! 할 것이 여러개 보이긴 합니다. : ) FE 팀 팀장으로 프로젝트를 하면서 많은 경험을 했지만 가장 기억에 남는 것들 위주로 회고를 작성하겠습니다. 😶‍🌫️ 프로젝트 순서 팀 Commit, Code Conventio..

영화 검색 제작(w. Vue) 후기!! 와 Vue를 급하게 공부하고 바로 과제를 진행하려다 보니 정말 재미있었습니다. ㅋㅋㅋㅋ 이게 애기 스타트업인가 라는 생각도 들면서 이번에는 기간을 길게 잡고 여유 부리면서 했는데 생각하지 못 한 오류들이 너무 많이 나와서 시간을 조금 오버하게 되었습니다. ㅜㅜ 다시 원래의 방법대로 빨리 완성한 후 리팩토링하는 방식으로 돌아가야 겠습니다. 배포 사이트 https://melodic-douhua-da4c6d.netlify.app/ Paengflix melodic-douhua-da4c6d.netlify.app 파일 구성 📦FEDC2-8_Vue ┣ 📂functions ┃ ┗ 📜apiHandler.js ┣ 📂src ┃ ┣ 📂assets ┃ ┃ ┣ 📂css ┃ ┃ ┃ ┗ 📜re..

😸 Vue TIL 😽 Done it 😼 컴포넌트 기초 props 전달 html -> component app.component에서 upper-name component를 만들고 html에서 을 이용해서 사용합니다. html에서 upper-name component의 props로 :props이름=""를 이용하여 data를 보내주고 upper-name component에서 이를 사용합니다. $emit 전달 component -> html $emit을 사용하여 $emit에서 커스텀 한 이름(to-upper)로 html의 해당 컴포넌트의 @to-upper=""을 이용해서 값을 보내줍니다. App의 methods 사용 html의 to-upper="methods"와 같이하여 methods를 사용합니다. const ..

webpack(Vue~) 🐱 4. webpack Vue setting 🐯 1. vue파일을 가져오는 vue-loader vue파일을 가져와서 읽을 준비까지만 한다. > 설치 'npm info vue-loader`을 이용하여 버전 확인 후 설치한다. > npm i -D vue-loader@next > webpack.config.js 설정 test: 정규표현식 : 정규표현식과 같은 파일 찾아준다. (정규표현식.test(문자)이렇게 사용하면 문자 내부에 정규표현식과 일치하는 내용 확인하는 것) use: 'vue-loader': test를 잘 할 수 있게 vue-loader의 도움을 받는다. // const path = require('path'); const { VueLoaderPlugin } = requir..

webpack 해당 부분을 읽어보면 좋아서 우선적으로 적어 놓았고 이것 또한 파일을 모아서 처리하는 방식입니다. 차근차근 진행을 해보겠습니다. 🐱 1. npm 기본 설정 > npm init -y > npm i vue@next npm init -y: 프로젝트를 시작하기 위한 기본 설정 => package.json 생성 npm i vue@버전: vue의 버전 설치(@next) => node_modules, package-lock.json 생성 🐱 2. 폴더 및 파일 관리 다음과 같이 기본적으로 폴더, 파일을 제작해서 관리를 해보겠습니다. 📦src ┣ 📜App.vue ┣ 📜index.html ┗ 📜main.js > main.js //별 사용 이유: vue의 모든 정보 가져오기 => CommonJS로 이루어졌기..

Parcel SFC 와 드디어 bundler에 대해서 배우기 시작했습니다. bundle란 묶는다는 의미로 vue 작업 요소를 js로 사용 가능하게 변화시키고 묶어주는 것 입니다. 참!! 이것은 SFC 구성을 목적으로 하는 것이라는 것을 알고 시작을 해보도록 하겠습니다. 🐻‍❄️ 1. Vue 프로젝트 설치 및 기본 구성 > npm init -y > npm i vue@next > npm i sass -D npm init -y: 프로젝트를 시작하기 위한 기본 설정 => package.json 생성 npm i vue@버전: vue의 버전 설치(@next) => node_modules, package-lock.json 생성 npm i sass -D: devDepedencies에 scss를 설치 추가 개념) nod..

😸 Vue TIL 😽 Done it 😼 조건부 렌더링 😼 태그 해당 태그 부분은 렌더링 안되고 내부에 구조만 렌더링 됩니다. 😼 v-show VS v-if v-if 요소 구조 자체를 추가, 삭제 초기 렌더링 낮다, 전환비용 높다 v-show 구조를 만들고 style="display:none"을 추가, 삭제 초기 렌더링 높다, 전환비용 낮다. 구조를 먼저 생성하기 때문에 {{}}내부 데이터가 미리 나올수 있다. 그래서 => v-cloak과 같이 사용 v-cloak : 디렉티브 요소를 넣어서 동작하고 data에 준비 끝나면 vue 내부동작에 의해 v-cloak 요소 제거 [v-cloak]: { ... } 😼 리스트 렌더링 😼 :key a in as같이 객체를 반복할 때 순서대로 나오지 않을 수 있어서 각 노..

😸 Vue TIL 😽 Done it 😼 Proxy data 불변성을 위해 주로 일반 함수로 작성을 합니다. Proxy : 기본적인 동작의 새로운 행동 정의 : 특정 data가 언제 조회되고 할당되는지 감시하여 중간에 logic 추가 const app = { data: function() { a = 0; } } // new Proxy(target, handler) const proxyA = new Proxy(app.data, { get(target, key) { //값 조회 } set(target, key,value) { //값 지정 및 할당 } }) 😼 computed, watch computed : 공통된 함수를 사용할 때 캐싱하여 1번만 실행하고 가져다 쓰는 곳(낭비 x) but methods에서는 ..