차마시는 개발자

😸 코드 리뷰 오답노트?(Vue) 생각보다 전의 피드백이 잘 안 들어간 느낌이었습니다. 그래서 작성하게 된 것입니다.ㅋㅋㅋㅋㅋ 이젠 잘 생각하면서 하도록 하겠습니다. 저의 코드를 리뷰해주신 멘토님, 동료들 감사합니다. !!! 😽 무한 스크롤 무한스크롤: IntersectionObserver 사용하는 것 추천드립니다. 강의에서 사용하는 것을 봤는데 직접해보지는 않았습니다. 한번 사용해보도록 하겠습니다. :) 😽 api 에러 핸들링(try/catch) 이 부분은 정말 놓친 부분이였습니다. 뭔가 빨리 완성되야 한다는 압박감 뭐 다 변명이고 에러 관리를 잘하도록 하겠습니다. 특히 api가져오는 부분!! 😽 영역 크기: height, width => padding, margin height, width 대신에 주..

😸 코드 리뷰 오답노트?(1~7) 뭔가 코드리뷰를 정리해야 겠다는 생각을 하지 못해서 한번에 몰아서 하는 감이 있습니다. 이젠 과제가 발생할 때 마다 주요 코드리뷰 받은 것을 진행하려 합니다. :) 저의 코드를 리뷰해주신 멘토님, 동료들 감사합니다. !!! 😽 EOF 파일의 끝을 알려주는 것으로 파일이 겹치는 것을 방지해주는 역할을 합니다. 그래서 모든 파일에 꼭 써주는 것이 좋습니다. 😽 .gitignore Git이 무시해야 하는 파일/폴더를 임의로 지정해 놓는 곳입니다. 저 같은 경우는 이런 규칙들을 생각하지 못하고 그냥 사용하였습니다. 그래서 문제가 발생했던 것 같습니다. '/': 디렉토리 설정할때 사용하지만 주로 맨 뒤에 사용해서 대부분의 디렉토리를 참조하는 것이 좋은 것 같습니다. '*': sl..

영화 검색 제작(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..

PostCss, Autoprefixer (w. webpack) 🦊 1. webpack으로 실행을 위한 "webpack", "webpack-cli", "webpack-dev-server", "html-webpack-plugin", "style-loader", "css-loader" 🐯 > 설치 여기 요기 설치 설명 보세요 > npm i -D webpack webpack-cli webpack-dev-server > npm i -D html-webpack-plugin > npm i -D style-loader css-loader 🐯 > package.json 실행을 위한 것 제작 & browser 범위 지정 "browserslist":[ "> 1%", "last 2 versions", ], "scripts":..

Babel 최신 JS -- 변환 --> 구형 JS => 구형 browser에서 사용할 수 있게 변환 시켜준다. 🦊 1. babel 기본을 위한 "@babel/core, @babel/cli" 🐯 > 설치 @babel/core : babel package @babel/cli : terminal에서 명령 동작 시킬 수 있게 하는 것 > npm init -y > npm i -D @babel/core @babel/cli 🐯 > package.json browserslist : 프로젝트가 어느 browser까지 가능하게 할 것인가(browser 범위 지정) "browserslist":[ // global browser 점유율의 1%이상에 해당하는 모든 browser에 적용 "> 1%", //죽지 않은 browser..

😸 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로 이루어졌기..