네이밍 기본

기본 구조

prefix? + action (A) + high context (HC) + low context? (LC)

Prefix

• 보통 변수 이름에만 쓰이는 변수의 의미 나타내는 용도

• is

  const color = 'blue'
  const isBlue = (color === 'blue') // characteristic
  const isPresent = true// state
  if (isBlue && isPresent) {
  	console.log('Blue is present!')
  }
  
  

• has

  /* Bad */
  const isProductsExist = (productsCount > 0)
  const areProductsPresent = (productsCount > 0)
  /* Good */
  const hasProducts = (productsCount > 0)
  
  

• should

  function shouldUpdateUrl(url, expectedUrl) {
  	return (url !== expectedUrl)
  }
  

• min / max

  /**
   * Renders a random amount of posts within
  * the given min/max boundaries.
  */
  function renderPosts(posts, minPosts, maxPosts) {
  	return posts.slice(0, randomBetween(minPosts, maxPosts))
  }
  
  

• prev / next

  function fetchPosts() {
  	const prevPosts = this.state.posts
  	
  	const fetchedPosts = fetch('...')
  	const nextPosts = concat(prevPosts, fetchedPosts)
  	
  	this.setState({ posts: nextPosts })
  }
  

Actions

• 보통 함수에만 쓰이는 함수의 동사 의미 / 함수가 뭐하는지 나타냄

• get

  function getFruitsCount() {
  	return this.fruits.length;
  }
  

• set

  const fruits = 0
  function setFruits(nextFruits) {
  	fruits = nextFruits
  }
  setFruits(5)
  console.log(fruits)// 5
  

• reset

  const initialFruits = 5
  const fruits = initialFruits
  setFruits(10)
  console.log(fruits)// 10
  
  function resetFruits() {
  	fruits = initialFruits
  }
  resetFruits()
  console.log(fruits)// 5
  
  

• fetch

  function fetchPosts(postCount) {
  	return fetch('<https://api.dev/posts>', {...})
  }
  

• remove

  function removeFilter(filterName, filters) {
  	return filters.filter(name => name !== filterName)
  }
  const selectedFilters = ['price', 'availability', 'size']
  removeFilter('price', selectedFilters)
  

• delete

  function deletePost(id) {
  	return database.find({ id }).delete()
  }
  

• compose

  function composePageUrl(pageName, pageId) {
  	return `${pageName.toLowerCase()}-${pageId}`
  }
  

• handle

  function handleLinkClick() {
  	console.log('Clicked a link!')
  }
  link.addEventListener('click', handleLinkClick)