바닐라코딩 prep 1주차 정리

바닐라코딩의 prep 과정을 수강한 내용을 정리한 포스팅입니다.

---

이번 1주차는 사실상 첫 주차여서 강의가 많다거나 과제내용이 어렵다거나 한 부분은 없었습니다. 

강의

첫주차 강의는 자바스크립트의 기본 문법(자료형, 함수, 조건문, 객체 등...)에 대해 간단히 정리했으며 본 글에 별도의 정리가 필요한 수준은 아니었습니다.(MDN공식문서의 튜토리얼 정도의 난이도 였습니다.)

마침 모던 자바스크립트 deep dive를 읽고 있는 중이었는데 해당 내용에 기존에 알던 내용을 가볍게 환기하는 느낌 이었습니다. (설명은 이번주 강의 보다 모던 자바스크립트 책과 MDN문서가 더 자세합니다.)

과제

이번주의 과제는 사용자의 인풋을 받아 화면에 띄우는 함수를 구현하는 것이었습니다. 

기본적인 DOM 조작으로 해결 가능했으며 저는 추가적으로 imagebb 라는 이미지 호스팅 사이트의 API를 이용해 async await으로 이미지를 업로드 하는 부분까지 구현 해봤습니다. 

전체적인 로직의 문제는 없었으나 코드리뷰에서 몇가지 개선점을 전달받았습니다. 

1. 파일의 마지막에는 개행문자 (new line)을 추가 해주는 것이 좋은 컨벤션입니다. 

https://minz.dev/19

No newline at a end of file, 왜 체크해야하나?

2. 함수는 실행하는 곳 보다 위에 작성하는 것이 좋습니다. 

이부분은 사실 알고있었는데 과제를 하다 보니 실수로 놓친것 같습니다. 호이스팅이 된다해도 함수는 실행전에 작성하는 것이 가독성이 당연히 좋습니다. 

3. 똑같은 객체를 여러번 사용할 경우 클래스 사용도가능하지만 객체 리터럴로 스프레드 문법을 활용가능. 

//내가 작성한 코드
const username = `${this[0].value}`;

  class chatHistoryObj {
    constructor(type) {
      this.type = type;
      this.username = username;
      this.color = "#5ad19b";
      this.createdAt = new Date().toISOString();
    }
  }

//리뷰어 분께서 스프레드 문법을 사용해 리팩토링한 코드
  const chatHistoryObjEx = {
    username: `${this[0].value}`,
    color: '#5ad19b',
    createdAt: new Date().toISOString(),
  };
  const userTextInputObj = { ...chatHistoryObjEx, type: 'text' };
  const userImgInputObj = { ...chatHistoryObjEx, type: 'image' };

4. This를 쓸때는 어떤 this인지 파악이 쉽도록 변수에 담아서 쓰는 것을 고려

async function addNewComment(event) {
  event.preventDefault();

  if (this[0].value === "") {
  //this가 무엇인지 아래의 코드를 더 보지 않으면 파악이 어렵다 => 가독성이 떨어짐
  ...
  }


...

//따라서 이런식으로 변수에 담아 활용하는것이 더 좋았을 수 있다. 
const username1 = this.querySelector('input').value;
const username2 = this.querySelector('#username').value;

기타

질문은 
- 구현한 코드 주석에 명확하게 달아도 괜찮다.
- 또는 머지리퀘스트에서 메시지 남기는 형태로도 ok

기존 코드를 수정할때는 따라야하는 코드 컨벤션이 있다면 꼭 따를 것 

---

부족하다고 느낀점

- 깃

깃학습을 위해서 이전에 깃 공식문서에 있는 git pro 책의 앞 챕터 몇장을 읽어 두었었는데 실상 혼자 공부하면서 쓸기회가 없다보니 결국 다까먹은거 같습니다. 아직 프렙코스라서 깃을 심도있게 사용하진 않지만 최대한 활용해보려 노력해야 할 거 같습니다. (여러번 나누어 커밋해보기 등등...) 

또한 시간을 내어서 깃프로 책을 다시 읽어보거나 academind의 깃 강의를 수강하는게 좋지 않을까 싶습니다. 

- CSS 마크업

디자인과는 관련이 없던 전공이라 그런지 css로 화면구성을 이쁘게 하는건 아직도 좀 어려운 느낌 입니다 ㅜㅜ.... 해당 부분은 앞으로 과제를 여러개 해나가며 더 개선될 것으로 생각중입니다.