분류 전체보기138

• 

  [Vercel] github repo에 commit 을 push 했는데, vercel 배포가 안될 때 이유는 둘 중 하나!1. github 로그인 된 계정이 해당 repo의 주인과 다르다. $ git config user.name$ git config user.email2. collabo멤버로 invite가 안되었거나 했으나, 승인 안했다. 해결 방법1번의 이유일 경우, 주인계정으로 로그인한다. 다른 계정이랑 혼용해서 사용할 경우, 이럴 수 있다.$ git config --global user.name "Your Name" $ git config --global user.email you@example.com 2번의 이유 (협업 중인 경우)repo 주인에게 invite 요청을 하고 승인한다. 이상.간단하지만 매우매우 빡치는 상황이 올 수 있는 상황이었다만,역시 늘 코드는 거짓말을 하지 않는다는 것을 또 .. CI & CD/CI 2025. 1. 20.

• 

  [React] Context API 정리 (Provider, Consumer, useContext) 개요대략적인 이해를 하고 사용했던 것 같은데, 좀 더 명확하게 정리하고자 글을 작성한다.CRA 기반으로 example 코드를 작성하였다.최적화를 위한 click event hanlder 함수는 일부러 따로 작성하지 않았다. useCallback, useMemo 같은 최적화 함수도 기재하지 않았다. (실전 코드에서는 리렌더링 막기위해서 당연히 써야 한다.) Context API 간단 정의Context객체에는 Provider, Consumer 컴포넌트가 포함되어 있습니다.Provider: Context를 구독하는 컴포넌트들에게 Context의 변화를 알리는 컴포넌트Consumer: Context 변화를 구독해 변화시 재 렌더링하는 컴포넌트 Context API ExampleCountPrivder를 만들어서 .. React & TypeScript/React 2025. 1. 10.

• 

  [Cypress] 프론트엔드 E2E 테스트 회고 E2E 테스트를 하게 된 이유사실, 급박하게 프로젝트가 진행된 경우, 기존 개발 구조를 조금도 건드리지 않고 진행할 수 있는 유일한 테스트가 아닐까 싶다.기존 퇴사자들의 코드가 축적된 부분도 많았기 때문에, E2E 테스팅을 진행하게 되었다.E2E 테스트를 하기위해 Cypress를 고르게 된 이유는, 대규모 프로젝트가 아닌이상 굳이 Playwright 까지 사용할 필요는 없다고 여겨졌기 때문이다.그리고, 다른 팀원과 동일한 테스팅 라이브러리를 사용하기 위함이다. 같이 도입하면서 여러 자료조사를 해보았고, 대부분 cypress를 애용하는 것을 알 수 있었다.테스트 원칙을 세우다가볍게 자료조사를 하고, 코드를 작성하면서 여러 의구심이 들었었다. 자연스럽게 원칙을 세워놓을 필요가 있다고 생각했다. 이를 위해 여.. React & Library 2024. 12. 19.

• 

  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.