본문 바로가기

Clean Code

[PR 코드리뷰] 우아한테크코스 프론트엔드 레벨2 - 리액트 페이먼츠 미션 우아한테크코스 프론트엔드 과정 레벨2 을 수행하며 쿠팡의 @wow9144 님께 리뷰를 받을 수 있었다. 리뷰어님께서 지난 유튜브 강의실 미션 때 코드 때도 도움을 받았었다. 스스로 많이 부족하다는 것을 알기에 한편으로 리뷰어님이 보시기에 그 때보다 나아진 게 없어 보일까 걱정도 되었는데, 리뷰어님께서 피드백과 함께 "잘하고 있다. 지금처럼 계속 좋은 모습 보여달라"🥕라는 격려의 말씀을 전해주셔서 바쁜 우테코 생활에서 달달한 당근과 같은 리뷰시간이었다. 😆 미션 1단계 피드백 👉 PR 바로가기 작성한 컴포넌트(11): Button, Card, Circle, Container, CreditCard, Form, Input, Label, Modal, Text, Title 1. 컴포넌트 체크리스트 - 범용성 ✅ .. 더보기
[PR 코드리뷰] 우아한테크코스 프론트엔드 레벨2 - 리액트 로또 미션 리액트를 배우기 시작한 레벨2의 첫 미션은 이다. ✨럭키✨하게도 지난 레벨에서 에서도 리뷰를 도와주셨던 토스페이먼츠의 @Jbee 님께 또 피드백을 받을 수 있었다! 레벨2의 첫 미션은 '리액트 맛보기'로서 기본개념을 습득하는 것을 목적으로 한다. 1, 2단계를 7일동안 소화해야해서 PR을 여느 때보다도 급한 마음으로 보내게 되었다. 레벨1에서 이미 경험해본 로또미션의 로직을 리액트로 옮겨오면서 리액트의 가상돔, JSX, 클래스 컴포넌트, 함수형 컴포넌트, 상태, 이벤트핸들링, Key, Ref, 생명주기 메서드 까지 얕게나마 접할 수 있었다. 미션 1단계 피드백 (1차) 👉 PR 바로가기 1. 컴포넌트 단위를 생각해보면 기존 로또 프로젝트를 옮겨오지 말고 리액트 관점에 맞춰서 재정의하는 것이 더 좋겠다. .. 더보기
[수업 중 코드리뷰] 우아한테크코스 프론트엔드 레벨1 총정리 우아한테크코스 과정에서 받고 있는 가장 값진 자산중에 하나인 피드백을 정리해보자. 다음은 크루들이 진행한 미션에 대해서 수업시간에 받은 공통 피드백이다. 우아한테크코스 프론트엔드 코치이신 @eastjun 과 @devJang 께서 리뷰를 해주셨다. ( + 로또 미션 업데이트 완료, 2021. 03. 01. ) ( + 유튜브 미션 업데이트 완료, 2021. 04. 07. ) ( + 지하철 미션 업데이트 완료, 2021. 04. 10. ) 계산기 미션 ➕➖ 1. 주석에는 정말 필요한 내용만 주석을 작성하면 읽는 사람으로 하여금 더 많은 시간을 들이게 함을 명심하자. - 코드작성자의 통찰을 포함하기 // e.g. 이 데이터에서 이진트리는 해시테이블보다 40%정도 빠르다. - 결함과 레거시를 명시하기 // e.g.. 더보기
[PR 코드리뷰] 우아한테크코스 프론트엔드 레벨1 - 지하철 노선도 미션 우아한테크코스 프론트엔드 과정 레벨1 을 수행하며 우아한형제들의 @HyunaKwon 님께 리뷰를 받을 수 있었다. 코드를 꼼꼼하게 리뷰해주셨다. 전반적으로 에러핸들링이 부족하다는 피드백을 주셔서 페어와 함께 에러와 에러핸들링을 어떻게 풀어나갈지 고민해볼 수 있어서 좋았다. 👍👍👍 미션 1단계 피드백 👉 PR 바로가기 1. 예외처리는 꼼꼼하게 전체적으로 예외 처리가 부족해 보인다. generateInputValidator와 hasPropertyValue에서 throw해주는 Error를 아무데서도 처리하지 않고있다. try-catch 문을 추가하는 연습을 추천한다. 에러 처리는 중구난방으로 하지 않고 통일성을 갖추어 사용하는 것이 좋다. '처리 후 early return' 방식 또는 'error throwi.. 더보기
[PR 코드리뷰] 우아한테크코스 프론트엔드 레벨1 - 나만의 유튜브 강의실 미션 우아한테크코스 프론트엔드 과정 레벨1 을 수행하며 쿠팡의 @wow9144 님께 리뷰를 받을 수 있었다. 리뷰어님께서 실생활의 예시를 비유로 들어주시면서 상세하게 설명해주신 덕분에, 비전공자로서 어렵게 느껴질 수 있는 개념을 보다 쉽게 접근할 수 있었다. 👍👍👍 미션 1단계 피드백 👉 PR 바로가기 1. DOM요소에 데이터 저장은 지양 버튼에 모든 videoData를 저장하는 것이 좋은 방법은 아니다. 버튼은 videoId 만 알면 된다. 클릭 시 해당 videoId에 대한 정보를 저장 요청하는 외에, videoData 중 구체적으로 어떤 정보를, 어디에 어떻게 저장할지는 버튼의 관심사가 아니다. 따라서 버튼(DOM)에 저장할 필요가 없다. 검색요청을 통해 받은 데이터를 JS에서 이미 알고 있고, 버튼을 .. 더보기
[PR 코드리뷰] 우아한테크코스 프론트엔드 레벨1 - 로또 미션 우아한테크코스 프론트엔드 과정 레벨1 을 수행하며 토스페이먼츠의 @Jbee 님께 리뷰를 받을 수 있었다. 슬랙 내 소통할 수 있는 전용 채널을 따로 만들어주시고, 항상 미리 공지된 시간에 리뷰를 남겨주셔서 스케줄 조정도 도와주시고, 양질의 참고자료도 틈틈이 전달해주셔서 엄청 꼼꼼하게 케어해주신다는 느낌을 받았다. 감사합니다...🙏👍 미션 1단계 피드백 👉 PR 바로가기 1. HTML 태그는 웹표준을 준수해서 내에서 '입력값 제출'을 위해 을 사용할 때는 type="button"이 아니라 type="submit"을 사용하는 것이 접근성에 맞다. 의 submit 이벤트를 활용해보는 쪽을 추천한다. 또한, 을 사용할 때는 과 함께 사용하며 이 을 자식으로 포함하거나 for와 name으로 의미론적으로 연결되어야.. 더보기
[PR 코드리뷰] 우아한테크코스 프론트엔드 레벨1 - 자동차경주 미션 우아한테크코스 프론트엔드 과정 레벨1 을 수행하며 ODK미디어의 @ysm0622 님께 리뷰를 받았다. 내 미숙한 코드를 꼼꼼하게 보시고 피드백해주셔서 코드를 개선하는데 많은 도움을 받았다. 미션 1단계 피드백 👉 PR 바로가기 1. Model-View 각각의 클래스로 분리 $cars 와 같이 직접 DOM을 다루고 직접 접근해서 data 값을 변경하기보다는 Model과 View를 분리하자. 그리고 Model과 View를 분리하는게 왜 중요한지 고민해보자. getWinners()에서도 DOM에 직접 접근하는 부분과 maxScore인 car들을 뽑아내는 로직을 분리할 수 있다. 이렇게 하면 테스트에서 똑같은 로직을 다시 작성하는 일도 없앨 수 있다. 2. 변수명을 더 명확하게 'NAME_BLANK' 보다는 '.. 더보기

티스토리툴바