Moon Work

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

시작하며 테스팅 프레임워크 jest를 처음 배우게 되었다. 이제까지 작은 프로젝트에서는 테스팅 보다는 만들면서 수정하는 방식으로 진행하였는데 비동기 처리나 코드의 안전성을 위해 테스팅이 필요한 프로젝트에 사용해보고자 공부하게 되었다. 잠깐 맛본 jest는 달달했다. npm init -y npm i -d jest 기초 문법 각각의 test를 통해 기대하는 값이 맞는지 확인할 수 있다는 점에서 jest를 사용해서 각각의 component나 util의 기능을 확인해보고 진행한다면 더 유지보수하는데 효과적일 것이라는 생각이 들었다. 하지만 모든 테스트에 비용이 들어가는 만큼 테스트가 필요한 부분을 선별하고 오버엔지니어링 하지 않는 방법론이 있을지 궁금해졌다. (추후 유닛테스트 포스팅 예정) let num; de..

시작하며 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 = await fetch('https://jsonplaceholder.t..

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

글로 이해가 어려운 내용을 이미지로 기록하며 이해하고 있습니다. 틀린 부분이나 수정이 필요한 부분이 있다면 답글 부탁드립니다. 👨‍💻

단속카메라(level 3) 문제 설명 고속도로를 이동하는 모든 차량이 고속도로를 이용하면서 단속용 카메라를 한 번은 만나도록 카메라를 설치하려고 합니다. 고속도로를 이동하는 차량의 경로 routes가 매개변수로 주어질 때, 모든 차량이 한 번은 단속용 카메라를 만나도록 하려면 최소 몇 대의 카메라를 설치해야 하는지를 return 하도록 solution 함수를 완성하세요. 제한사항 차량의 대수는 1대 이상 10,000대 이하입니다. routes에는 차량의 이동 경로가 포함되어 있으며 routes[i][0]에는 i번째 차량이 고속도로에 진입한 지점, routes[i][1]에는 i번째 차량이 고속도로에서 나간 지점이 적혀 있습니다. 차량의 진입/진출 지점에 카메라가 설치되어 있어도 카메라를 만난것으로 간주합니..

베스트 앨범_해시 테이블 문제 설명 스트리밍 사이트에서 장르 별로 가장 많이 재생된 노래를 두 개씩 모아 베스트 앨범을 출시하려 합니다. 노래는 고유 번호로 구분하며, 노래를 수록하는 기준은 다음과 같습니다. 속한 노래가 많이 재생된 장르를 먼저 수록합니다. 장르 내에서 많이 재생된 노래를 먼저 수록합니다. 장르 내에서 재생 횟수가 같은 노래 중에서는 고유 번호가 낮은 노래를 먼저 수록합니다. 노래의 장르를 나타내는 문자열 배열 genres와 노래별 재생 횟수를 나타내는 정수 배열 plays가 주어질 때, 베스트 앨범에 들어갈 노래의 고유 번호를 순서대로 return 하도록 solution 함수를 완성하세요. 제한사항 genres[i]는 고유번호가 i인 노래의 장르입니다. plays[i]는 고유번호가 i..

2022.07.01 - [프로젝트/PROBABLY] - [PROBABLY Project] #2 Menu Structure & UI Design [PROBABLY Project] #2 Menu Structure & UI Design 2022.06.30 - [프로젝트/PROBABLY] - [PROBABLY Project] #1 프로젝트 기획 [PROBABLY Project] #1 프로젝트 기획 시작하며 NextJS와 Typescript를 보름간 엘리의 드림코딩과 nomad coder를 통해 공부하였다. 이렇.. moon-works.tistory.com 이 글은 Probably 프로젝트 시리즈 3번째 로그인 구현 파트입니다. Firebase Authentication Firebase에서는 database와 함..