21.07.25

Younchong·2021년 7월 25일
0

VC prep-course

목록 보기
1/9

프렙코스 시작

(Velog가 마크다운 형식으로 작성된다는 사실 velog검색하다가 오늘 알게 됨)

첫주차 수업 JS review

간단하게 기본 개념 정리하는 내용이었고
Value&types, operators, functions, control flow, objects 정리
그 중 연산자 개념을 하나 잘못 알고 있었다.

  1. &&(and) 와 ||(Or) 연산자
    혼자 공부했을때는 가볍게 더하기와 빼기 곱셈에서 falsy 가 빼기의 역할을 한다고 생각했다.

예를 들어
True || false 면 false 라고 &&나 || 상관없이 falsy 값이 있으면 falsy라고 알고 있었다.

정확한 개념은
||(or)연산자는 truthy를 찾으면 연산을 끝내고, 둘다 falsy면 마지막 값을 제공
&&(and)연산자는 falsy를 찾으면 연산을 끝내고, 둘다 truthy면 마지막 값을 제공.

그리고 둘중 &&연산자가 우선순위를 가진다.

그래서 예시의 정답은 true || false 면 true 가 나온다.
Falsy를 갖는 값에는
1. False
2. “”
3. NaN
4. 0
5. Undefined
6. Null

이 있고, 이외는 다 truthy
주의 할 것은 빈 배열 [] 은 truthy이다.

과제 코드 리뷰

한 주동안 과제 코드에 고민을 했고 내가 원하는 방향으로 구현을 하려고 계속 생각하고 노력했다.
프렙코스 어드미션 제출 후 코딩테스트연습 제외하고는 이렇게 고민하고 생각할 요소들이 없어져서 아쉬웠었는데 과제를 시작하고 너무 즐거웠다.
그럼에도 완전히 해결하지 못한 부분도 있었다.

코드리뷰에 대한 정리를 하기 전 코드를 올리고 여쭤본 질문에 대한 정리

-Q. Input 사용시 form과 주로 같이 사용하는데 그게 정석인지?
-Ans. Input에서 받은 data를 server에 보내는 방식이 일반적이라서 form과 같이 사용하는게 좋다.

앞으로는 서버에 데이터를 보낸다고 생각하고 form과 같이 input 사용

Form data전송 3가지 방법
* XMLHttpRequest building (복잡함)
* Form data object 사용 (간단하고 새로운 방법)
* form data를 <form> element와 같이 사용
(MDN을 보고 공부하긴 했지만 완전히 이해하지 못하고 쓰는건 의미없다고 생각해서 지움)

코드 리뷰 내용

  1. 필요없는 주석삭제, 불필요한 네트워크 줄이기(font-awesome), 의미있는 변수명 만들기, 적절한 네이밍, 연산자 이후 띄어쓰기, css 정확한 프로퍼티 적기(축약형말고), 일치연산자 사용

—> 실수로… 까먹고.. 이런저런 핑계를 말할 수 있지만, 코드를 적을때 나의 안 좋은 습관들이다.
나중에 사용하고 지우려고 했던 주석들과 변경하려고 했던 요소들이 시간이 지나서 까먹고 지나가서 놓친 코드들
처음엔 그냥 실수로 치부하고 넘어갈 수 있지 않나 생각했었는데 저런 요소들이 쌓여서 코드의 가독성을 떨어뜨리고 이해를 어렵게 한다고 생각했다.
다음 과제에는 조금 더 코드명들의 네이밍과 가볍게 지나가려고 했던부분들, 조금 더 예민하고 세심하게 코드를 작성해서 가독성 좋은 코드를 적어야겠다.
더욱 세심하고 작은 부분까지 신경을 써야된다는 걸 깨달음.

  • 가독성 높은 코드(네이밍, 띄어쓰기) 코드흐름을 빠르게 파악할 수 있게 돕는 방향으로
  • 의도치않은 변형을 일으킬 수 있는 동등연산자(==)사용말고, 일치연산자 사용(===) 값과 데이터형 까지 비교.
  • 축약형 아닌 정확한 프로퍼티 사용
  1. 템플릿 리터럴의 무분별한 사용

—>정확히는 string interpolation의 무분별한 사용이다.
연산자를 사용하지 않아도 간단하게 템플릿 리터럴사용으로 새로운 문자열을 삽입할 수 있다. 이를 string interpolation 이라고 하는데
(모던자바스크립트 출처)
나는 코드내의 함수값이나 다른곳으로 전달되는 값이면 무조건 string interpolation을 해야되는 줄 알았다. (표현식 삽입법처럼)
그러나 전달되는 값에 따라서 굳이 그렇게 사용할 필요가 없다.

  • 전달되는 값, 결과값이 무엇인지 정확히 파악하고 적재적소에 template literal을 사용하자.

3 들여쓰기

항상 의심없이 tab을 이용해서 vs code내에 extension결과값으로 적절히 들여쓰기를 했다고 생각했는데,
권장하기를 space 2칸으로 들여쓰기 습관을 고치자.

git

큰 그림만 알고 아직 검은화면에 대한 두려움이 있다.
아직도 느낌은 예전 포켓몬스터 게임할때 동굴에 들어가면 어두컴컴하게 아무것도 안보이는 곳에서 무언갈 찾는 느낌? 그럴일은 없겠지만 뭐하나 잘못건드려서 지금까지 했던 것들이 지워질것 같은…

그래도 가장 큰 그림을 그리는 데 도움을 줬던 자료

  • 아직 명령어와 깃에 대한 공부 더 필요

1개의 댓글

comment-user-thumbnail
2021년 7월 25일

안녕하세요, 저도 이번에 프렙11기 참여하고 있습니다! 반갑습니다ㅎㅎ 스크롤 이벤트로 자기소개 웹페이지 만든 분 맞으시죠? 너무 재밌게 봤습니다!! 깔끔하게 정리된 글도 잘 읽고 갑니다

답글 달기