분류 전체보기

이 글에서 사용되는 yarn은 yarn berry를 지칭합니다. 해당 글은 공부하면서 계속 내용이 추가됩니다. (다른 비교 글에서 주로 다루지 않은 주제 먼저 다룹니다.) 1. peer dependencies 1) 동작방식 npm/pnpm은 비슷하고 yarn은 완전 다르게 동작한다. npm yarn npm 하고 pnpm은 A라는 패키지를 설치했을 때 peerDependencies에 리스트되어있는 패키지가 설치되어있지 않으면 자동으로 peerDependencies를 설치해준다. (npm은 v7 부터 ) 하지만 yarn은 자동으로 설치해주지 않고 경고만 한다. 예시로 `react-dom`의 `peerDependencies`는 `react`이다 따라서 `react`를 설치하지 않고 `react-dom`을 설치..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 나의 풀이 문제를 읽어보면 핵심은 일직선으로 내려갈 수 없다. 고려해야할 사항 1. 행에 같은 점수가 있는 경우 한 행에 같은 점수가 있는 경우도 고려하셔야 합니다. [[4, 3, 2, 1], [2, 2, 2, 1], [6, 6, 6, 4], [8, 7, 6, 5]] => 20 2. 무조건 최댓값을 고르면 안된다. [[1, 2, 3, 4], [2, 3, 4, 100]] => 103 간단한 예시로 첫 번째 행에서 최댓값인 4를 고르면 두 번째 행에서 100을 고를 수 없기 때문에 이 부분도 고려해야 합니다. 미..

eslint에 대해 알아보자 ESLint는 코드 품질을 개선하고 런타임에 버그가 발생하지 않도록 사전에 버그를 수정하는 데 도움이 되는 linter입니다. 또한 향후 디버그하기 어려운 문제를 방지하는 데 도움이 됩니다. JSLint, JSHint와 같이 다른 JavaScript 정적 분석 도구들도 있지만, ESLint가 커스터마이징이 쉽고 확장성이 뛰어나 많이 사용되고 있는 추세 입니다. ESLint는 스타일 가이드를 조금 더 편리하게 적용하기 위해 사용되기도 하는데, 외부에 공개되어 많은 개발자가 사용 중인 Airbnb Style Guide, Google Style Guide가 그 대표적인 예입니다. 사용법 1. 제일먼저 터미널에 아래의 명령어를 입력해줍니다. npm init @eslint/config..

css css는 마크업 언어로 작성된 웹 페이지에 스타일을 추가하는 데 사용되는 가장 인기 있는 스타일 시트 언어 중 하나입니다. 개발자가 색상, 레이아웃, 글골 스타일, 단락 간격, 열 크기 등과 같은 요소를 쉽게 사용자 지정할 수 있습니다. 웹 페이지에 css를 포함한는 방법에는 3가지가 있습니다. 1. 인라인 - style 속성 사용 예시 1 2. 내부 - 태그 사용 예시 제목 예시 2 3. 외부 - 태그를 사용하여 외부 css 파일을 연결합니다. 예시 제목 예시 3 /* styles.css */ p { color: purple; font-size: 20px; } h1 { background-color: yellow; } css의 장점 1. 사용하기 쉽다. css를 사용하면 이제 웹 애플리케이션 전..

next에서 공식문서보고 배우기 시작할 때 무심코 할 수 있는 실수가 있다. 바로 build를 하지 않아서 생기는 에러이다. 에러는 아래와 같이 발생한다. Error: Could not find a production build in the '....' directory. 해결법은 정말 간단하다 yarn next build `yarn next build`를 한 후에 `yarn next start`를 해주면 된다. 즉 파일이 변경된 것 반영시키고 싶으면 항상 `next build`를 해주고 `next start`를 해주면된다. 그럼 우리가 react에서 `npm run dev` or `yarn dev`라는 명령어로 개발자 모드를 한것처럼 당연히 `next.js`를 사용해도 이용할 수 있다. `yarn ne..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 나의 풀이 오랜만에 풀리지 않는 문제를 만났다. 구현을 정말 쉽다 바로 되지만 제출하면 몇몇 테스트 케이스가 '시간초과'가 발생하여 다시 코드를 작성해야 했다. 초기 코드 function solution(numbers) { const save = { number : null, maxNumber : null } return numbers.map((number,index,arr) => { if(number === save.number) return save.maxNumber let nextIndex = index..

이전에 왜 기업들은 Yarn Berry를 많이 사용할까? - (1) 라는 글을 썼는데 이번에는 세팅하는 법에대해서 배워봅시다. 1. yarn berry 세팅 // 1. yarn을 전역으로 다운 받습니다. $ npm install -g yarn // 2. 프로젝트 루트로 이동해서 yarn berry버전으로 세팅해주시면 됩니다. $ yarn set version berry // 3. yarn으로 패키지들을 다운로드 합니다. $ yarn install // 4. yarn typescript 플러그인 설정 (선택) // 패키지 자체 타입이 포함되어 있지 않은 경우, // 해당 패키지를 추가할 때 자동으로 @types/패키지를 종속성에 추가합니다. $ yarn plugin import typescript $ ya..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 나의 풀이 자바스크립트 관점에서 이 문제는 '정규표현식을 조금 쓸줄 아니?', 'sort()함수에 대해서 제대로 이해했니?' 를 묻고싶어서 낸 문제인것 같았다. 이 문제는 HEAD와 NUMBER만 정확히 뽑아내면 된다. HEAD가 같을 때는 NUMBER로 비교하고 NUMBER도 같다면 return 0을 해서 순서를 유지시켜준다. 문제 풀기전 했던 생각 // 문제 /* 파일명에 포함된 숫자를 반영한 정렬 기능 파일명 100글자 이내 영어 대소문자, 숫자, 공백, 마침표,빼기부호 파일명 영어로 시작, 숫자 무조건..

0. 필요성 협업 프로젝트에서 여러 브랜치에서 작업뒤 merge를 진행하다보니 수많은 commit이 생겨나서 뭔가 특정 commit 찾기가 어려워지고 버전에 따라 따로 적용되면 더더욱 구분이 어려워질 것 같아서 찾아보니 git tag라는 기능이 있었다. 시인성도 좋아지고 해당 commit으로의 접근성도 향상시킬 수 있다. 1. Git tag git tag는 커밋을 가리키는 정적인 참조 포인트를 생성하는 데 사용되는 Git의 기능입니다. 태그는 특정 시점의 커밋을 식별하고, 프로젝트의 특정 지점에 의미를 부여하는 데 사용됩니다. 주로 소프트웨어의 버전 릴리스나 중요한 이벤트 포인트를 나타내는 데에 활용됩니다. 2. 명령어 1) git tag // 1. 가장 최근 commit에 태그를 붙이고 싶을 때 git..