coding- w00se

제어 컴포넌트와 비제어 컴포넌트 Keep - 제어 컴포넌트와 비제어 컴포넌트의 차이를 알게 됐다. - 페이먼츠 1단계에서는 제어 컴포넌트만 사용했지만 2단계에서는 용도에 맞게 제어/비제어 컴포넌트를 적용했다. Problem - Try 1. DOM을 적절하게 활용하지 못했다. - 비제어 컴포넌트로 Form을 구현할 때 input 태그에 있는 value에 접근하기 위해서 ref를 사용했다. - ref를 이용하는 방법이 잘못된 방법이라 생각하진 않는다. 하지만 ref 이외의 DOM에 접근하는 방법을 몰랐기 때문에 아쉬운 점으로 적었다. - Form 태그의 onSubmit 이벤트 발생 시 전달받은 event.target 객체와 태그의 id를 같이 활용하면 ref를 사용하지 않고 input 태그의 value에 접..

컴포넌트 작성 및 분리 Kepp 이번 미션의 목표는 CDD(Component-Driven Developmenet)에 따라 UI를 구성하고 재사용하는 것이다. 미션의 목표에 맞게 작은 컴포넌트부터 개발했다. 그리고 컴포넌트의 재사용을 고민하면서 개발했다. Problem - Try 컴포넌트를 작은 단위로 나누어서 개발했지만 조립해서 잘하지 못했다. 아래는 이번 미션의 입력 폼 부분에 대한 예시 이미지이다. 입력 타입과 너비 등이 다르지만 모두 Label과 Input 컴포넌트를 조립해서 만든 LabeledInput 컴포넌트를 사용했다. 이런 방식으로 진행하니 컴포넌트를 담고 있는 페이지에서 가독성이 떨어지는 현상이 발견됐다. 따라서 작은 컴포넌트를 조립해서 입력 종류에 따라 컴포넌트를 만들었다면 가독성이 떨어..

bottomup 좋다. 하지만, 최소한의 설계는 하고 진행하도록! 전역 state관리 및 옵저버 패턴 활용 전역 store에서 상태값을 관리했다. 상태 값에 변화가 있을 때, 변화가 있는 상태 값을 구독하고 있는 컴포넌트를 렌더링한다. const state = { testNum: 100, testString: 'hello', } // 상태 값 별로 구독 리스트를 따로 관리하면, 상태 값이 변경됐을 때 구독된 컴포넌트들만 렌더링할 수 있다. const components = { testNum: new Set(), testString: new Set(), } api를 직접 테스트 VS stub을 통한 테스트 api 요청 부분을 stub하는 방식은 여기에 정리했다. 공식문서와 코치님의 말에 의하..

webpack 기본기를 공부하기 시작! 웹팩을 공부하고 사용한 경험이 이번 미션의 가장 큰 수확이라고 생각합니다. webpack의 CleanWebpackPlugin를 사용하면서 output path를 잘못 설정해서 .git 디렉터리가 삭제되는 경험을 했습니다. 실패는 성공의 어머니라고 하듯이, 해당 경험이 webpack을 공부하는데 계기가 됐습니다. 디렉터리가 삭제됐다면 mac 기준으로 cmd + z를 시도해 볼 필요가 있습니다.(저는 침착하지 못했고, 결국 다시 처음부터 작업을 시작했습니다.) 웹팩에 대해서는 블로그의 게시글로 간략히 정리를 했습니다. 랜덤 테스트에 대해서 랜덤은 테스트하기 힘들다라는 말을 자주 들었는데, 막상 랜덤과 관련 있는 테스트 코드를 작성할 때 어떤 식으로 테스트 코드를 작성할..

본 과정이 시작하기 전에 회고를 매일 쓰진 못해도 주마다 하나씩은 쓰자고 마음먹었는데 지키지 못했고, 결국 2주가 지나고 자동차 경주 미션이 완료되고 회고를 쓰게 됐다. 이번 미션 동안 느낀 점과 배운 점은 아래와 같다. 테스트 주도 개발 경험 이번 미션의 부제목은 테스트인 듯하다. TDD(Test Deiven Development)에 대한 개념을 배우고 경험해봤다. TDD의 흐름에 대해 간략히 정리를 하면 아래와 같다. 1) 테스트 코드 작성 2) 테스트를 통과하는 코드 작성 3) 구현한 기능에 대해 리팩토링 위 흐름으로 하나의 기능을 완성하고 이 과정을 반복해서 개발하는 과정이 TTD이다. 처음 테스트 코드를 작성하는 게 낯설어서 시간이 많이 걸렸다. '그냥 테스트 코드 작성을 하지 말까?' 라는 생..

최종 코딩 테스트로 우아한 테크코스 4기 프론트엔드 프리코스의 모든 과정이 끝났습니다. 결론부터 적으면 최종 코딩 테스트의 요구사항을 완벽히 구현하지 못했으며, 주어진 테스트도 3개 중 2개만 통과했기 때문에 점수는 0점입니다🙃 과제 형식의 코딩 테스트는 이번이 처음이었는데, 아쉬운 점도 있고 스스로 부족한 점이 많았습니다. 따라서 이번 글에서는 프리코스 최종 코딩 테스트를 하면서 느낀 점과 부족한 점을 정리하려 합니다. 느낀 점 대부분 시험을 보고 나서 드는 생각이 '시간이 조금만 더 있었더라면!'인데, 이번 시험도 어김없이 그랬습니다. 중요한 시험이었던 만큼 시간이 부족한 게 더욱 아쉽게 느껴졌습니다. 물론, 실력이 부족해서 시간이 부족했던 거지만..! 제 생각일 뿐이지만, 최종 코딩 테스트에서 구현..

우아한 테크코스 프리코스 마지막 미션이 어제 끝났습니다. 애당초 후기를 미션 pr을 제출하면서 같이 제출하는 게 목표였는데, 구현에 급급해서 결국 후기까지는 작성하지 못했습니다. 후기를 공유하는 게 프리코스를 준비하시는 분들께 힘이 된다고 하셨는데 힘을 드리지 못해 죄송하며, 혹시라도 이 글을 확인하신다면 감사하다는 말을 전해드리고 싶네요ㅎㅎ 이번 글에는 우아한 테크코스 지원부터 프리코스까지 느꼈던 점에 대해 정리하려 합니다. 지원 동기 작년 12월 말부터 지금까지 대학생 창업팀에 속해 프론트엔드 개발자로 앱 서비스를 개발했습니다. 그 앱 서비스가 바로 ATSAY 입니다. 빠르지는 않지만 꾸준하게 사용하는 유저분들이 늘어나고 있고, 유저분들이 '잘 이용하고 있어요~'라는 반응을 해주실 때 보람을 느낍니다..

'좋은 개발자가 되기 위해 잘 공부하고 성장하고 있는 가?'와 같이 성장에 대한 고민을 항상 합니다. 이런 성장과 경험에 대한 고민을 팀원에게 털어 이야기하니, 부족한 것들을 기록해 보는 걸 권유받았습니다. 덕분에 스스로를 돌아볼 수 있었고 부족한 점, 필요한 역량, 개선 방안(목표)들을 기록하려 합니다. 1. 테스트 코드 작성에 지식 및 경험 부족 - 졸업 프로젝트를 통해 Unit test를 수행한 경험이 있지만, 아직까지 습관화가 되지 않았음 - 프론트엔드 웹 애플리케이션(앱 애플리케이션 포함)에서 고려해야 할 테스트 범위와 종류에 대해 모른다. 이어서, 현재 진행 중인 프로젝트(ATSAY)에 적합한 테스트 방법이 무엇인지 파악하고 적용하는 역량과 경험 부족 2. 효율적인 코드 작성을 위한 노하우 부..