JoonDevBlog

노선도 화면을 확대하면, 지도가 우하단으로 살짝 미끄러졌다. 축소하면 이번엔 좌상단으로 튀었다. 처음엔 단순한 오프셋 문제라고 생각했다. 그래서 +250 같은 상수를 얹어봤다. 그러나 확대에 맞추면 축소가 어긋나고, 축소를 맞추면 확대가 어긋났다. 부분 처방으로 시작한 수정이 자꾸 전체에 영향을 미쳤다. 심지어 줌 이후에는 드래그를 했을 때 실제 이동이 더 많거나 적게, 스케일에 영향을 받았다. 이 때 문제는 값이 아니라 모델전체에 있을 것이라는 생각으로 코드 전반을 다시 살펴봤다.팬 & 줌을 같은 줄에 두면 망가진다보통 g 태그는 이렇게 활용한다 ...겉보기엔 문제 없어보이지만 함정이 있었다.translate(tx, ty)는 화면 픽셀만큼 움직인다고 생각한다.하지만 그 뒤에 scale(s)가 오면, ..

9~10 10~11 11~12 12~1월을 지나서 1월이 다 지나가는 시점이기에 월간회고 4편을 진행하게 되었다. 12월 중순~1월 중순은 정말 프로젝트만 계속 진행한 기간이라고 볼 수 있다. 지난달 월간회고 3편을 확인해보니 당시에는 프로젝트를 시작하기 전이었기 때문에, 이번 단위기간 한 달 동안 프로젝트를 시작부터 끝까지 한 것 이라고 볼 수 있다. 프로젝트를 1달 밖에 안했던가? 라는 생각이 들 정도로 많은 것을 했다고 생각이 들고, 또 정신없이 시간이 지나갔다. 목표설정 및 기획 우리 팀은 실사용 유저 확보라는 목표와 아래와 같은 기획 의도를 가지고 데브코스에서 사용되는 Slack서비스에 익명성만 추가하여 서비스를 그대로 이식하는것을 목표로 프로젝트를 진행하였다. 문제의식 - 데브코스 내의 Sla..

11월 21~ 12월 20일 한달이 지나 3번째 월간회고이다. 현재는 이미 12월 4주차에 접어들었지만 늦게라도 12월 3주차까지의 과정을 작성해본다. Vue (11월21~12월 1주차) Vue 실습을 마무리 하고, 영화검색기 실습 과제를 진행하였었다. 이 과정은 10주차, 11주차 WIL에 잘 정리가 되어있다 데브코스 커리큘럼을 보며, 내가 Vue를 메인 프레임워크로 설정할 생각은 없지만, 그럼에도 React와 비교해보며 한번쯤은 찍먹 을 해보고 싶다는 생각에 기대하고 있었다. 결과적으로는... 만족스럽게 찍어먹어 볼 수 있었다. 이 과정에서 Vue가 생각보다 괜찮은 것 같아서 '왜 React가 대세일까?' 라는 포스팅을 작성하기도 했다. React 12월 2주차부터는 React강의를 2주간 진행했다...

데브코스 11주차가 끝났다. 10~11주차 총 2주간에 걸쳐 Vue를 배웠고, 결과적으로 Vue를 활용한 간단한 어플리케이션 정도는 만들 수 있는 지식을 쌓았다. template문법 사용 방법, props emit 사용방법 등을 하나하나 적는 것은 어차피 공식문서를 그대로 가져오는는 것과 다르지 않으므로 큰 흐름에서 배우거나 익힌 것들 위주로 정리해보았다. 알게된 내용 세팅 vite를 활용하면 편하다. vite는 번들러의 종류이고, 웹팩 대신 이번엔 vite를 사용하였다. 문법을 체크하는 eslint와 컨벤션을 잡아주는 prettier를 설치했다. eslint-plugin-prettier 혹은 @typescript-eslint/eslint-plugin 같은 플러그인들을 npm i 를 활용하여 설치해주었고..

데브코스 10주차 Vue강의를 진행했다. 10~11주에 거쳐 Vue 강의가 진행되고 11주차 마지막 즈음에는 Vue와 TS를 활용한 과제가 있다. 2주간 진행되는 Vue를 1주간 들으며 배우고 느낀 점을 회고로 작성한다. Vue 공식문서 최근에 현업에 있는 개발자에게 '공식 문서를 잘 보는 능력이 중요하다고 생각한다' 라는 말을 들었다. 어려운 공식 문서보단 쉬운 블로그에 의존하게 되는 경향이 있었기 때문에 되도록 공식문서를 활용해서 공부하려고 했다. 때마침 Vue는 공식문서가 상당히 잘 되어있는 프레임워크였고, 가이드를 활용할 수 있었다. 또한 튜토리얼도 제공되어 예제를 쉽게 구현해볼 수 있다. Vue는 Vue2에서 Vue3로 오면서 많은 변화가 있었는데, 그 과정에서 똑같은 컴포넌트도 옵션/컴포지션 ..

Vue를 처음 배우는 과정에 팀원분이 이런 말씀을 하셨다. “ Vue 를 이번에 처음 접하는데 생각보다 괜찮다는 느낌이 들어서 왜 안쓰는지 좀 더 지켜보고 고민 해봐야겠다” React를 사용하다가 데브코스에 참여한 후 JS수업을 빡세게 진행한 후 뷰 강의를 들어보니 “React는 JS기반이라는 느낌이 강했는데 Vue는 좀 강제하는 문법이 많은 것 같다” 라는 생각이 들었던 나는, 실제로 Vue가 더 쉬운게 맞나? 라는 생각이 들어 여기저기 자료를 찾아보았다. 예상외로 React가 Vue보다 나은 이유가 전부 다 깔끔하게 정리되어있는 자료는 없었다. '정량적인 지표' 보다는 '시대적 흐름' 같은 객관성 보다는 주관성이 들어가있고, 딱 떨어지는 것 보다는 다양하고 복합적인 이유가 생각보다 많은 지분을 차지했..

10월 20일 즈음 MIL 1편을 작성하고 벌써 1달이 또 지나 11월 20일이 되었다. 1편과 마찬가지로 한 달동안 나는 무엇을 했는지? 어떤점에서 성장했는지? 부족한 점은 무엇인지? 한달동안 하며 느낀점은 무엇이었는지? 를 중심으로 회고를 작성해보려고 한다. 부족한 점 시작하자마자 부족한 점부터 적게 되는 마음이라고 볼 수밖에 없다. 우선 배움에 대한 기록이 너무 부족했다. 반성하는 마음을 가질 수 밖에 없다. 과제 수행중 TIL을 매일 적자니 애매하고, 그렇게 하나 둘 안적다보니 WIL을 적자! 로 타협하고, 그게 또 안지켜지니 WIL도 작성을 제대로 안했다. 🤯 MIL 작성을 위해 노션에 토막글로 정리를 하긴 했지만 블로그에 나의 배움에 대한 기록을 안남긴 것은 반성할 일이다... 한 달 동안 무..

요즘같은 시장에서 어떻게 잘 취업할 것인가...에 대해서 생각도 해보고 조언도 구하다보면 귀결되는 결론은 '어떻게 내가 같이 일하고 싶은 사람이 될 것인가' 인 것 같다. 기업 관점에서 볼 때 놓치기 싫을만큼 엄청난 실력이거나, 우리 회사에 관심이 있던 사람이라거나, 블로그를 보니 개발에 진심 이라던가, 커뮤니케이션을 정말 잘하거나 등등... 어필하면 좋은 내용은 많다. 나 스스로를 시험에 들게 하기위해 우테코 마지막 주 과제 레포를 보다가, 커밋 컨벤션에 관한 요구사항을 보았다. 커밋 컨벤션은 협업에 대해 진지하게 고려해온 사람이라는 것을 보여줄 수 있는 증거 중 하나가 될 수 있을 것 같다는 생각이 들어 정리해본다. 커밋 컨벤션을 어디서 참고할까? 프리코스에서 커밋 메시지 컨벤션 가이드 링크를 제공한..

DAY17 회고 이후에 WIL을 작성하고, MIL을 작성하고, 노션 클론코딩을 진행하는 동안 포스팅을 중단하고 프로젝트 회고를 작성하니 17일차 이후에 30일차 TIL이 되어버렸다. 공부한 내용 📖 무한 스크롤 기능을 구현하였다. 무한 스크롤 기능은 인스타 facebook등 SNS에서 우리가 흔히 보던 기능이다. footer에 접근하기 어려우므로 무조건적으로 좋은 것은 아니다. 1. window.innerHeight + window.scrollY >= document.body.offsetHeight 무한 스크롤을 구현하기 위해 크게 두 가지 방법이 있다. 하나는 window.innerHeight 와 window.ScrollY를 사용하여 문서의 최하단에 시점이 닿은 경우 다음 화면을 불러오는 것이다. wi..

프로젝트 요구사항 및 진행 간 구현 내용 https://github.com/junly21/FEDC5-5_Project_Notion_VanillaJS/blob/main/README.md 좋았던 점 📖 이번 프로젝트를 진행하며 1. 컴포넌트 간의 의존성을 최대한 줄일 것 2. 컴포넌트 간 순환 참조를 최대한 없앨 것 3. 최대한 설계 이후에 구현할 것 크게 이 세 가지에 최대한 유의하며 구현하였다. 컴포넌트 간의 의존성을 최대한 줄이기 위해 문서들의 목록을 나열하는 왼쪽 화면의 RootConatiner와, 문서 열람 및 편집의 기능을 하는 오른쪽 화면의 Document Container를 나누어 App.js의 하위에 각기 다른 폴더에 분류하였다. 최대한 상위에서 하위 컴포넌트로 일방향으로 데이터를 전달하도록..