Portfolio

예시로 살펴보는 wiki 작성 법

프롱이들이 비슷한 부분에서 틀린다면 이 페이지에 기입 후 링크를 전달합니다.

반드시 [멘토이름 1, 2,.... 10 날짜]형식을 지켜주세요!

코드리뷰 시 wiki에 작성된 부분을 반복 리뷰를 해야 한다면 [이 페이지](페이지 링크) 리아 3을 참고해 보세요! 로 간편하게 남길 수 있습니다! 👍🏻

같은 내용으로 이미 다른 멘토님이 토글을 만들어 주셨다면 같은 토글 안에 내용을 추가해 주세요! (예시 참고)

[예시] 출력문에서 ', " 통일 필요


 alert( 'Hello, world!" );

[리아 1, 08/31]

위 부분에서 많은 분들이 오류가 있었는데요, 이는 오타가 있었기 때문입니다. JS는 따옴표와 쌍따옴표 모두 사용 가능하지만 문자열 출력을 위해 둘 중 하나로 통일해야 합니다! [관련 문서] 위 코드에서 Hello, world!를 출력하고 싶다면 "가 아닌 '로 닫아주세요~

[카일 1, 09/01]

같은 실수를 반복하지 않기 위해선 "와 ' 중 한 가지로 습관 들이는 것이 좋습니다. 개인적으로 저는 후자를 선호합니다

Validation

[론 1, 09/01]

validation

https://validatejs.org/ 의 좌측 목록을 참고하셔서 라이브러리에서 어떤 validator 를 만드는지 참고하시면 좋을 것 같습니다

실무에서는 타입에 대한 검증 뿐만 아니라, 사용자가 입력한 데이터가 적합한가를 regex 를 사용해서 검증하는 경우도 많습니다

보통 validator 에는 에러를 만드는 역할만 하고, 컴포넌트에서 validator 에서 나온 에러를 사용자에게 알려주는 의무가 있습니다. (validator 는 node.js 에서도 같이 사용할 수 있다는 가정을 하고 만드는게 좋을 것 같아요)

일단 컴포넌트에서 만들다가, 유틸로 공통화하는 경우도 많으니 설계에 부담갖지 않으셔도 됩니다!

조건적 rendering

[론 2, 09/01]

상태값을 하나의 object state 로 두었다면, 렌더링을 최적화 할 수 있는 방법이 있습니다


this.setState = (nextState) => {
  const oldState = this.state
  const isNeedRendering = Object.keys(nextState).some(key => nextState[key] !== oldState[key])
  this.state = nextState
  if (isNeedRendering) {
    this.render()
  }
}

$button.addEventListener('click', () => {
	this.setState({ ...this.state, count: this.state.count + 1 })
})

React 에서는 이런 원리로 상태를 얕은비교를 하고 렌더링을 할지 판단하게 됩니다

bool string to bool

[론 3, 09/01]


const BOOLEAN_STRING_TO_BOOLEAN = {
  'Y': true,
  'YES': true,
  'T': true,
  'TRUE': true,
  'N': false,
  'NO': false,
  'F': false,
  'FALSE': false,
}

export const stringToBoolean = value => {
  if (isEmpty(value) || !isCorrectType(value, 'string')) {
    return false;
  }

  return BOOLEAN_STRING_TO_BOOLEAN[value.toUppserCase()] || false;
}

상대경로

[론 4, 09/01]

import { TodoDelete } from "../js/components/TodoDelete.js";

위와 같이 상위 폴더로 이동하는 구조는 지양하는게 좋을 것 같습니다.지금은 폴더가 깊지 않아서 큰 이슈가 발생하지는 않는데, 규모가 커져서 ../../../../blabla.ts 처럼 쓰이게 되면 가독성에 크리티컬한 영향을 줍니다

import { TodoDelete } from "js/components/TodoDelete.js";

어느 환경이든 위와같이 표현할 수 있도록 환경세팅을 하는 것도 중요합니다.이 부분은 vanillaJs 만으로는 해결이 안되는 부분이고, webpack 에서 이 부분을 처리할 수 있으니 참고 부탁드립니다

개인적으로 ./style/blabla.scss 와 같이 하위폴더에 대한 참조는, 현재 폴더에 직접적으로 연관된 파일을 참조하기 떄문에 허용할 수 있는 부분이라고 생각합니다

서로의 코드를 많이 참고해보세요!

[론 5, 09/01]

코딩에서는 내코드, 남의 코드가 없습니다

서로의 코드를 보고 참고해서 쓰는건 절대로 부끄러운 것이 아닙니다 :)

같이 쓰는 코드기 때문에 누구나 비슷한 코드를 작성할 수 있도록 하는 것이 이상적입니다

일부 팀에서는 한 가지 과제를 진행하는 동안, 주 단위로 루틴을 정해두고 서로의 코드를 바꿔가면서 코딩하는 경우도 있습니다.. 시간은 다소 걸릴지라도, 균일한 코드로 수렴할 수 있는 방법이네요

class와 id 속성

[김동영 1, 09/02]


  <body>
    <main id="app"></main>
    <script src="./src/main.js" type="module"></script>
  </body>

app을 class로 사용하는 것도 나쁘진 않지만, app이 문서 내 유일한 요소라면 id 속성을 활용하는 편이 더 좋아 보입니다.

혹은 재사용을 고려한 클래스라면 클래스 이름을 todo, todo-container같은 느낌으로 만들면 좋을 것 같습니다.

id는 unique하게

[김동영 2, 09/02]

id는 문서 내에서 고유한 값이므로 중복되어서는 안 됩니다. id 속성과는 별개로 부여할 수 있는 data 속성도 있으니 상황에 따라 class 또는 data-*를 적절히 사용하는 것을 권장합니다.

[3주차] To do list 강화하기

예시로 살펴보는 wiki 작성 법

목록

validation