Moon Work

시작하며개발을 어느정도 공부하면서 지금은 네이밍 규칙에 익숙해졌지만 처음에는 변수, 디렉토리, 파일 등의 이름이 제각각인 것 같아서 그 규칙을 파악하지 못해 헷갈릴 때가 정말 많았다. 코딩 컨벤션에 대한 내용을 공부하면서 네이밍 규칙에 대한 내용을 정리해보려 한다. 코딩 컨벤션이란개발을 하는데 코드 작성 규칙 없이 매번 다르게 작성할 경우 일관성도 떨어지고 가독성도 떨어지게 된다. 코딩 컨벤션을 통해 코드 작성 방식에 대한 약속, 규칙을 정해서 일관성과 안정성을 높일 수 있다. 이 글에서는 코딩 컨벤션의 네이밍 부분에 대해 다뤄보려 한다. Naming 종류종류설명예시kebab-case소문자 사용 | 띄어쓰기를 - 로 구분hello-worldlowerCamelCase소문자 사용 | 띄어쓰기를 대문자로 구..

시작하며 전역 상태 관리를 위해 redux를 공부해봤지만 redux가 작은 프로젝트에서 사용되기에는 초기에 구축에 있어서 피로가 상당했다. 그렇지만 가끔 로그인한 유저, themeColor와 같이 계속 prop을 넘겨주기에는 props drilling이 발생했다. redux와 같이 본격적으로 전역 상태 관리를 하지 않고 몇개의 변수에 대해 context API를 사용해서 props drilling을 줄이고자 context API에 대한 내용을 정리하게 되었다. Context API란 Context는 리엑트 컴포넌트 간에 값을 공유할 수 있게 도와준다. 주로 Context는 전역에서 필요한 값을 공유할 때 사용되지만 부분적인 역역에서 사용할 수 있다. 기존 Props를 통한 전달이 아닌 다른 방법 Cont..

시작하며매번 헷갈리는 useMemo, useCallback 이번 포스팅으로 머리에 타투로 새긴다. 메모이제이션수행한 연산값을 저장해두고 재사용함으로 중복연산을 피해서 성능 최적화를 할 수 있는 방법useMemo와 useCallback 모두 메모이제이션을 위한 최적화를 위해 사용한다. 리엑트에서 re-render하는 경우자신의 state가 변경된 경우부모로부터 받은 props가 변경 될 경우부모 컴포넌트가 리렌더링 될 때 useMemo: 값을 메모이제이션useMemo(()=>fn, deps)deps가 변할 때만 fn을 실행시켜서 값을 반환한다. useCallback: 함수를 메모이제이션useCallback(fn, deps)함수와는 상관없는 값이 변할 때 함수 컴포넌트가 불필요하게 업데이트 하는 것을 방지..

useEffect의 return useEffect에 들어있는 return이 언제 실행되는지 자주 헷갈려서 아주 머리에 박제를 하기 위해 정리한다. 1. 일반적인 함수의 return ... const basicFunc = () => { console.log('[basic func] is called') return () =>{ console.log('[basic func] is returned') } } const returnFunc = basicFunc(); returnFunc(); ... 위와 같이 작성된 함수는 먼저 함수 내부에 있는 콘솔이 찍힌 뒤 리턴된 함수가 호출 되어야 리턴된 함수에 있는 콘솔이 찍히게 된다. 리턴된 함수를 호출하지 않으면 리턴된 함수 내에 있는 콘솔은 출력되지 않는다. 2. ..

시작하며React에서 비동기를 사용할 경우 기본 hook을 제외하고는 아래와 같은 방식으로 컴포넌트가 작성되곤 한다.import { useEffect, useState } from 'react';import { User } from '../types/user';const UsersNoQuery = () => { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(false); useEffect(()=>{ (async ()=> { try{ const response..

시작하며React를 통해 개발하면서 컴포넌트마다 똑같은 코드가 반복되곤 하는데 그런 코드가 심지어 길이도 작지 않다면 컴포넌트가 길어져서 곤란하다. 이런 문제를 custom hook을 통해 해결할 수 있는 부분이 있을 것이라 생각이 들어 새로 공부하게 되었다. Custom hook의 장점클래스 컴포넌트보다 적은 코드로 동일한 기능을 구현할 수 있다. 코드 길이를 줄이면서 가독성은 높일 수 있다.Custom hook 규칙최상위에서 hook을 호출한다 (반복문이나 조건문에서 hook을 호출하지 않는다.)React 함수 내에서만 hook을 호출한다.hook의 이름을 'use'로 시작한다.Hook 만들 때 고려해야 하는 점custom hook을 만들 때는 다른 hook의 state에 영향을 끼치게 해서는 안된..

시작하며최근 효율성과 오버엔지니어링에 대한 생각을 자주 하게된다. 주니어 개발자라 새로운 기술과 힙한 기술이 보이기만 하면 배우고 싶었는데 이 많은 것을 하나의 프로젝트에 전부 사용하기도 어려울 뿐더러 간단하게 개발할 수 있는 것을 너무 과하게 시간과 기술을 투자하는 것이 효율성이 떨어지는 것처럼 느껴졌다. 그런 점에서 전역 상태관리 라이브러리 중 redux를 공부하였는데 typescript와 사용하였을 때 reducer 까지는 괜찮았지만 비동기 작업을 하면서 어쩔 수 없이 thunk나 saga를 구현해야 했다. 작업이 큰 프로젝트면 모르겠는데 fetch를 몇번 날리지 않는데 그걸 구현하는데 드는 피로감이 상당했다(물론 아직 익숙하지 않은 것도 있다😰). 차라리 전역 상태는 어떨 수 없이 필요한 부분..

Lazy loading웹에서 이미지는 필수적으로 사용되어야 하지만 동시에 이미지를 로드하는 비용이 많이 들어간다. lazy loading을 통해 뷰포트에 보이는 이미지만 load 해서 성능을 향상시키고 통신 비용을 줄일 수 있다. Lazy loading시 주의할 점1. 이미지가 로드되기 전에 보여질 placeholder를 적절하게 사용해야 한다.방법1: 저화질의 이미지로 placeholder를 사용한다.방법2: 주요 색상을 placeholder로 사용한다.2. 이미지를 로드 하기 위해 미리 이미지를 로드하기 위한 시간을 준다.사용자가 스크롤을 빠르게 내릴 경우 이미지가 로드되는데 시간이 걸릴 것을 대비해서 사용자가 해당 이미지보다 더 높은 스크롤 위치에 있을 때부터 미리 로드를 진행하게 한다.3. 이미..