전체 글135

• 

  MUI-Stack, Box, sx(스타일링) 적용에 대한 고찰 display : flex 먹힌 Box 라고 보면 된다. Stack 이나 Box나 다 div 로 치환된다. sx 로 style을 먹이면, css는 css module 형태로 적용되어 css 중첩을 방지시킨다. MUI 꽤 좋아진 거 같다. React & TypeScript/React 2024. 2. 22.

• 

  [JavaScript] 클린 코드 요약 1️⃣ 변수(Variables) - 의미있고 발음하기 쉬운 변수 이름을 사용 - 동일한 유형의 변수에 동일한 어휘를 사용 - 검색가능한 이름을 사용 - 의도를 나타내는 변수들을 사용 2️⃣ 함수(Functions) - 함수 인자는 2개 이하가 이상적 (대부분 1개면 충분) - 1개의 함수, 1개의 행동 ⭐️ - 함수명은 함수가 무엇을 하는지 알 수 있어야 함 - 함수는 단일 행동을 추상화 - 중복된 코드를 작성하지 말 것 - Object.assign을 사용해 기본 객체를 만들 것 - 매개변수로 플래그를 사용하지 말 것 - 사이드 이펙트를 피할 것 (변수, 함수 역할 분리) - 전역함수 말 것 (prototype 연결 -> class 상속) - 명령형 -> 함수형 프로그래밍 - 조건문은 캡슐화 - 부정조.. Javascript/Basic 2023. 12. 2.

• 

  [ESLint] naming-convention 설정방법 작성한 코드 rules: { // eslint-disable-next-line @typescript-eslint/naming-convention "@typescript-eslint/naming-convention": [ "warn", { selector: "typeAlias", // 타입선언 format: ["PascalCase"], }, { selector: "memberLike", // Property 멤버 format: ["camelCase"], }, { selector: "function", // exported function (컴포넌트 명) format: ["PascalCase"], modifiers: ["exported"], }, { selector: "function", // functio.. React & TypeScript/TypeScript 2023. 11. 23.

• 

  [React] useId 이거 언제쓰지...싶을 때. (사용 예시) React-hooks에 있던 useId. 이거 대체 언제 쓰나 싶었었다. 딱히 별 다른 건 아니고, unique ID를 생성하는 건데, 늘 언제쓰는거지 싶었었다. 오늘 사용 했었는데, input과 label을 연결해줄 때 사용했다. component 중 일부의 코드다. 아래와 같이 input 과 label을 연결해줄 때, 동일한 ID를 입력해야해서, component 생성 때마다 unique id가 발급되도록 만들어주었다. 생각보다 유용했다. const connectionId = useId(); const [isChecked, setIsChecked] = useState(checked); return ( {...} ); 참고 useId – React The library for web and native.. React & TypeScript/React 2023. 11. 15.

• 

  [git] custom 단축 명령어 만들기 만들게 된 이유 매번 git commit 할 때 마다 test를 하지 않고 올리는 경우가 생겨서, test 명령을 commit 할 때 마다 적용하도록 하려고 한다. 목표 git commit -m 대신에 cm 을 쳤을 때, test 명령어와 git commit -m 까지 실행되는 것을 목표로 한다. 실행과정 1. 터미널에서 vi 편집기 실행 vi ~/.zshrc a 클릭 후, 하단에 아래 명령어 추가 # git commit 이전 test 실행하도록 수정 alias cm="pnpm test && git commit -m" pnpm test를 실행했을 때 명령은 프로젝트 폴더의 package.json에 설정되어 있어야 한다. &&는 순차적으로 실행한다는 의미다. 만약 pnpm test를 실패하면, git co.. Dev-Basic/git 2023. 11. 13.

• 

  [git] repository 별로 다른 user 를 사용해야 할 때 1. 변경을 하고 싶은 repository를 Local 경로로 이동한다. 2. 다음과 같이 작성한다. git config user.name "AnotherAccount" git config user.email another@example.com --global 옵션을 뺏기 때문에, 해당 repo에서만 적용이 된다. Dev-Basic/git 2023. 11. 4.

• 

  [재귀함수] 1-100 합계 구하기 재귀함수 쓰는 이유 변수 사용의 제한 사이드 이펙트가 발생할 확률을 없애준다. + 알고리즘을 그대로 연동하는 것이 가능하다. 원칙 명확한 탈출 조건이 있어야 한다. 안그러면, 메모리 오류됨. 코드 const factorial = (num) => { if (num 2+1 이 된다. 계속되면, 100+ ... + 1 = 5050 이 되는 것. 참고 https://velog.io/@tilsong/%EC%9E%AC%EA%B7%80-%ED%95%A8%EC%88%98%EB%8A%94-%EC%96%B8%EC%A0%9C-%EC%8D%A8%EC%95%BC-%ED%95%A0%EA%B9%8C 재귀 함수는 언제 써야 할까? 재귀 함수 velog.io https://devuna.tistory.com/22 [자료구조] 스택 (S.. Dev-Basic/Programming 2023. 11. 1.

• 

  [코딩테스트] JadenCase 문자열 만들기 문제 문제 설명 JadenCase란 모든 단어의 첫 문자가 대문자이고, 그 외의 알파벳은 소문자인 문자열입니다. 단, 첫 문자가 알파벳이 아닐 때에는 이어지는 알파벳은 소문자로 쓰면 됩니다. (첫 번째 입출력 예 참고) 문자열 s가 주어졌을 때, s를 JadenCase로 바꾼 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 조건 s는 길이 1 이상 200 이하인 문자열입니다. s는 알파벳과 숫자, 공백문자(" ")로 이루어져 있습니다. 숫자는 단어의 첫 문자로만 나옵니다. 숫자로만 이루어진 단어는 없습니다. 공백문자가 연속해서 나올 수 있습니다. 입출력 예s / return "3people unFollowed me" "3people Unfollowed Me" "for the last wee.. Javascript/Basic 2023. 10. 31.

• 

  [코딩테스트] 최댓값과 최솟값 - Lv2 문제 문제 설명 문자열 s에는 공백으로 구분된 숫자들이 저장되어 있습니다. str에 나타나는 숫자 중 최소값과 최대값을 찾아 이를 "(최소값) (최대값)"형태의 문자열을 반환하는 함수, solution을 완성하세요. 예를들어 s가 "1 2 3 4"라면 "1 4"를 리턴하고, "-1 -2 -3 -4"라면 "-4 -1"을 리턴하면 됩니다. 제한 조건 s에는 둘 이상의 정수가 공백으로 구분되어 있습니다. 입출력 예 s / return "1 2 3 4" "1 4" "-1 -2 -3 -4" "-4 -1" "-1 -1" "-1 -1" 나의 풀이 function solution(s) { const sorted_s = s.split(" ").sort((a,b)=> a-b) return sorted_s[0].concat.. Javascript 2023. 10. 29.

• 

  [코딩테스트] 올바른 괄호 문제 문제 설명 괄호가 바르게 짝지어졌다는 것은 '(' 문자로 열렸으면 반드시 짝지어서 ')' 문자로 닫혀야 한다는 뜻입니다. 예를 들어 "()()" 또는 "(())()" 는 올바른 괄호입니다. ")()(" 또는 "(()(" 는 올바르지 않은 괄호입니다. '(' 또는 ')' 로만 이루어진 문자열 s가 주어졌을 때, 문자열 s가 올바른 괄호이면 true를 return 하고, 올바르지 않은 괄호이면 false를 return 하는 solution 함수를 완성해 주세요. 제한사항 문자열 s의 길이 : 100,000 이하의 자연수 문자열 s는 '(' 또는 ')' 로만 이루어져 있습니다. 입출력 예 (s / answer) "()()" true "(())()" true ")()(" false "(()(" false .. Javascript/Basic 2023. 10. 27.

• 

  [코딩테스트] 구명보트 (Lv2 / 탐욕법[Greedy]) 문제 문제 설명 무인도에 갇힌 사람들을 구명보트를 이용하여 구출하려고 합니다. 구명보트는 작아서 한 번에 최대 2명씩 밖에 탈 수 없고, 무게 제한도 있습니다. 예를 들어, 사람들의 몸무게가 [70kg, 50kg, 80kg, 50kg]이고 구명보트의 무게 제한이 100kg이라면 2번째 사람과 4번째 사람은 같이 탈 수 있지만 1번째 사람과 3번째 사람의 무게의 합은 150kg이므로 구명보트의 무게 제한을 초과하여 같이 탈 수 없습니다. 구명보트를 최대한 적게 사용하여 모든 사람을 구출하려고 합니다. 사람들의 몸무게를 담은 배열 people과 구명보트의 무게 제한 limit가 매개변수로 주어질 때, 모든 사람을 구출하기 위해 필요한 구명보트 개수의 최솟값을 return 하도록 solution 함수를 작성해.. 카테고리 없음 2023. 10. 25.

• 

  [ESlint] ESlint 설정 가이드 (. eslintrc 파일 설정 속성 설명) eslint 설정을 처음 보면 어질어질하다. 😱 빠르게 기초 정보라도 확인하기 위한 용도로 아래 글을 작성한다. "extends": 다른 설정 파일을 확장하여 현재 설정을 기반으로 합니다. 대표적인 예로 "eslint-config-airbnb"나 "eslint:recommended"를 확장하는 것이 있습니다. ERP개발팀의 경우, "eslint-config-hanssem" "env": 코드가 실행되는 환경을 정의합니다. 예를 들어, 브라우저 환경을 지정하려면 "browser": true와 같이 설정할 수 있습니다. node 환경이면 “node”:true 설정하면 된다. front는 browser로 설정 "parser": 사용할 JavaScript 파서를 지정합니다. 주로 Babel을 사용하는 경우 "ba.. Dev-Basic/npm 2023. 10. 24.