[원티드 프리온보딩 FE 챌린지 11월] 클린 코드 프론트엔드

[원티드 프리온보딩 FE 챌린지 11월] 클린 코드 프론트엔드

 

🗓️ 2023.11.6 ~ 2023.11.19

원티드에서 진행하는 프리온보딩 FE 챌린지 수강 후 정리한 글입니다.

 

👩🏻‍💻 [STUDY NOTE]

⭐️ 코스 둘러보기 - 4번의 코스에서 다루어 볼 이야기

• 개발자의 멘탈 모델

  - YAGNI, 르블랑의 법칙, 보이스카우트 규칙, Real World, Runtime

• JavaScript for Clean Code

  - Scope, Type, Variable, if-else

  - Object, Prototype, Function, Closure

• React for Clean Code

  - JSX, State, Components, Props, Hooks API, Immutable, ESLink, Prettier

📚 노션에 정리한 스터디 노트 

1️⃣ 개발자의 멘탈 모델
2️⃣ JavaScript for Clean Code Part 1
3️⃣ JavaScript for Clean Code Part 2 → 여기는 아직 내용이 없습니다!!
4️⃣ React for Clean Code

 

🤚🏻 사전과제

원티드 프리온보딩 프론트엔드 챌린지 사전 과제

 

Q1. 내가 생각하는 클린 코드란?

• 미래의 나 또는 협업하는 개발자들이 보았을 때 이해하기 쉽고, 명확한 코드
• 프로젝트 전반적으로 통일성 있는 코드

Q2. 내가 생각하는 (프론트엔드에서의) 클린 코드란?

• 구조화된 폴더구조도 클린코드에 포함시킬 수 있을까?
  → 비슷한 기능을 하는 함수는 비슷한 곳에 위치시키는 등?
• 사실 잘 모르겠다...

Q3. 내가 클린코드보다 중요하게 생각하는 것은?

• 안정적인 기능 구현

Q4. 다음 중 선호하는 방식과 그 이유는?

 1. Tab vs Space

• Tab 방식 선호 ➡️ Space 보다 적은 횟수의 입력으로 들여쓰기가 가능하다.

 2. 세미콜론 O vs 세미콜론 X

• 세미콜론 O 를 더 선호한다. 함수나 변수의 끝을 명확하게 해주는 것이 좋다고 생각이 되기 때문이기도 하고, 처음 학습시 그렇게 배워서 지금까지도 세미콜론을 사용한다.
• 하지만 프로젝트 전체적으로 통일만 된다면 세미콜론의 유무는 상관없을 것 같다.

 3. count++; vs count += 1; vs count = count + 1;

• 주로 사용하고, 선호하는 방식은 count += 1;
  ➡️ count++은 1씩 증가하기 때문에 만약 2씩 증가하게 만들고 싶다면 코드가 통일성이 없어지고, count = count + 1;은 너무 길다. count += 1; 이 방식이 보기 좋고, 편리해서 선호한다.

 4. if (isLogin) {} vs if (isLogin === true) {}

• if (isLogin) {} ➡️ 같은 표현이라면 간결한 표현을 선호한다. 특히 조건문 작성시 조건식이 참일 경우를 간결하게 표현하는 것이 조건문 전체의 가독성이 더 좋은 것 같다.

 5. isLogin && <HelloWanted /> vs isLogin ? <HelloWanted /> : <></> vs isLogin ? <HelloWanted /> : null vs isLogin ? <HelloWanted /> : undefined

• 원래는 isLogin && <HelloWanted /> 이 표현을 선호했었는데 이 또한 간결해서였다.
• 그런데 어떤 멘토분께서 위 방식으로 사용했을 경우, 코드를 잘못 작성했을 때 의도치 않게 0이 화면에 표현되는 경우를 몇 번 보았다고 삼항연산자를 사용하는 방법을 추천하셨다.

---

► 챌린지 전, 🔥 목표 및 다짐

• 원티드 프리온보딩 FE 챌린지에 “클린 코드”에 대한 주제가 등장했다. 이전에 유튜브에서 언뜻 기능 구현보다 클린 코드에 초점을 둔 신입 개발자에 대한 이야기를 들었던 것이 생각이 났다. 사실 이전에는 클린 코드, 당연히 중요하지! 라는 생각이 있었다. 하지만 항상 옳다고 말할 수 있을까? 어느 시점부터 클린 코드를 고려해야 할까, 에 대한 의문과 막연한 생각은 저 말을 들은 직후부터 였던 것 같다. 영상을 시청하지는 않고, 지나가듯이 들었던 말이라 결론이 어땠는지는 모르겠지만, 이번 강의를 통해 좀 더 구체적으로 프론트엔드에서의 클린 코드에 대한 멘토님과 여러 수강생들의 생각을 들을 수 있을 것 같다.
• “클린코드”가 무엇인가에 대한 개념과, JavaScript와 React에서의 클린코드에 대해 보다 잘 이해하고 학습해야겠다🔥

► 4번의 수업이 끝나고, 강의 후기

 결론적으로 말하자면 사실 조금 어려웠다. “클린코드”가 무엇인지 멘토님과 다른 수강생 분들의 의견을 들을 수 있었다는 점은 유익했지만, 예시코드를 이해하고 요구사항을 알아내기는 어려웠던 것 같다. 비단 “클린코드” 뿐만 아니라 나는 아직 JavaScript와 React의 코드와 동작 방식에 대한 이해도 부족하다는 것을 깨달았다.

 

• 이번 사전과제에 대한 멘토님과 수강생들의 의견을 들을 수 있는 시간이 있었는데 (2️⃣ JavaScript for Clean Code Part 1) 유익한 시간이었다. 최근 프로젝트를 하며 궁금했었던 React의 JSX에서 조건부 렌더링시 null, undefined, React Fragment를 반환하는 것에 대한 차이를 직접 찾아보는 계기도 되었다. 뿐만 아니라 지난 부트캠프 프로젝트에서 멘토님이 왜 && 대신 삼항연산자를 사용하는 것을 선호하는지 명확히 알 수 있게 되었다. 당시에는 && 사용시 0이 렌더링 될 수 있다는 점을 아, 그렇구나 그럼 그냥 조건부 렌더링을 사용해야겠구나, 라고 생각하고 그저 따라했었는데, 코드를 작성함에 있어 항상 이유와 근거가 있어야겠다고 생각이 들었다.
• 하지만 강의 중 등장했던 예시 코드를 이해하는게 왜 나는 어려웠을까… 🥲 강의를 진행하던 줌 채팅창을 보면 다들 너무 잘 하시는 것 같아서 쭈구리가 된 기분이었다. 나도 답을 맞추고, 의견을 내고, 더 잘 알고 싶었는데 어려웠다. 더 많이 공부해야겠다. 남과 비교하려는 건 아니지만, 나의 경쟁력이 사라지는 것 같았다.
• 아직도 머릿속에는 의문이 하나 있다. 클린코드는 언제부터 고려해야 하는 걸까? 처음부터 클린코드를 생각하며 코드를 작성하는건 쉽지 않을 것이다. 게다가 클린한 코드보다는 동작하는 코드를 만드는 것이 더 중요하다고 생각한다. 나는 아직 제대로 된 기능구현에도 능숙하지 않다고 생각하는데, 클린코드를 공부할 시점이 맞는지 의문이 든다. 하지만 반대편에서는 클린코드는 어느 시점에든 학습할 필요가 있다는 생각도 든다.
• 그래서 이번 프리온보딩 멘토님의 강의를 구매했다. 마침 강의 할인쿠폰을 주셔서 결제를 했다. 어느 시점에든 학습할 필요가 있다면, 공부를 하는게 좋을 것 같다고 생각이 들었다. 비록 지금은 잘 이해하지 못해서 스터디 노트를 정리해보다가 코드 실습이 나오는 부분은 전부 나중으로 미뤄뒀지만 미래의 나는 아마 대부분의 코드를 이해할 수 있을 것이다. 시간을 들이면 뭐든 할 수 있다!! 🫡 화이팅