차마시는 개발자

토론 커뮤니티 Web 만들기 정말 오랜만에 회고를 작성하는 데 어떻게 작성을 해야 할 지 감이 잘 잡히지 않아 그냥 생각의 순서에 따라 작성을 해보겠습니다. 3주 정도의 시간으로 4명의 프론트 엔드 개발자님들(저 포함 ^^)과 함께 토론 커뮤니티 Web을 제작하였습니다. 시작에 앞서 프로젝트에 대해 간단하게 소개를 하자면 엄마가 좋아? vs 아빠가 좋아? SNS, 방송을 중심으로 깻잎, 새우 논쟁 등 다양한 의견이 있는 간단한 논쟁들을 쉽게 투표하고 의견을 나누는 토론 커뮤니티 서비스 입니다. Github: https://github.com/prgrms-fe-devcourse/FEDC2_ToronTo_Nayoung 배포: https://melodic-fenglisu-afc3b8.netlify.app 정말..

😸 Vue TIL 😽 Done it 😼 코드리뷰 회고 1 ~ 7: https://gwpaeng.tistory.com/418 Vue: https://gwpaeng.tistory.com/419 😼 React JSX 보통 {}를 이용하여 실행합니다. 😼 값 default 함수.defaultProps 함수.defaultProps = { size: 200, }; 인자에 지정 function 함수({ size = 200 }) {} 😼 값 type check import PropTypes from 'prop-types'; 함수.propTypes = { size: PropTypes.number, }; 😼 useState useState: 지역상태 관리하기 위한 것(Hook) 값이 변경되면 다시 렌더링 한..

😸 코드 리뷰 오답노트?(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..

😸 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 ..

😸 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에서는 ..