목록2022/05 (129)
치춘짱베리굿나이스
stylelint CSS, SCSS와 같은 스타일시트 코드 작성 시 정렬 및 오류를 찾아주는 분석 도구 eslint와 같이 코드 실행 없이도 코드 내에서 잘못된 점을 바로 찾아준다 스타일시트 특성상 작성한 코드 양이 많아질 수록 개발자도 헷갈려서 중복된 스타일을 적용할 가능성이 높아지는데, stylelint를 통해 일관된 코드와 순서를 지키면 중복 코드 작성 여지가 확 줄어든다 설치하기 $> npm install -D stylelint stylelint-config-standard stylelint-config-styled-components stylelint-processor-styled-components stylelint-config-standard-scss stylelint-config-reces..
작업 시작 공식적인 내생각 아침에 일어나는 게 살짝 힘들긴 한데 아침 회의도 나름 할만하다 다만 중간에 집중력이 흐트러져서 시간을 알차게 사용하지 못한 것 같다 오늘 작업하고자 했던 작업량은 끝냈지만 뭔가 더 만들고 싶어서 근질근질하기도 했다 내 작업 내용 원본과 비슷하게 프로필 사진 주변에 원형 Progressbar을 띄워주고, 화면에 이쁘게 배치되도록 스타일 작업을 수행하였다 CSS Module 열심히 사용하기 {name} 자식 태그의 클래스에 스타일을 적용하려면 className=’imageDiv’ 방식이 아닌 className={styles.imageDiv} 방식으로 작업해야 했다 살짝 익숙하지 않아서 당황했는데 이렇게 보니 통일감 있고 괜찮아보인다 아직 시맨틱 태그에 익숙하지 않아 div 범벅인..
코드 작성 VSCode 확장 확장 - Auto Import 컴포넌트 자동 import 확장 - Auto Rename Tag 여는 태그 이름을 바꿔주면 닫는 태그 이름도 같이 바뀐다 확장 - Beautify JSON 파일 이쁘게 보는 용도 확장 - ESLint (필수) 린터 확장 확장 - Prettier (필수) Prettier 확장 (코드 포매터) 확장 - Stylelint (필수) CSS 린터 확장 확장 - Todo Highlight //TODO: [할 일] TODO 주석을 하이라이트해준다 확장 - Timestamp Converter epoch time (보통 ms 단위로, 1900년 1월 1일부터 지금까지 흐른 ms) 을 연월일시간 형식으로 보기 좋게 바꿔준다 확장 - SVG SVG 태그 내용물의 실..
classnames 설치 $> npm install classnames npm 링크 classnames classnames A simple utility for conditionally joining classNames together. Latest version: 2.3.1, last published: a year ago. Start using classnames in your project by running `npm i classnames`. There are 34036 other projects in the npm registry using classnames. www.npmjs.com 용례 클래스를 여러 개 추가하고자 할 때나 특정 조건에 따라 클래스를 다르게 적용하고 싶을 때 사용하면 간단하..
N과 M (8) 문제 N개의 자연수와 자연수 M이 주어졌을 때, 아래 조건을 만족하는 길이가 M인 수열을 모두 구하는 프로그램을 작성하시오. N개의 자연수는 모두 다른 수이다. N개의 자연수 중에서 M개를 고른 수열 같은 수를 여러 번 골라도 된다. 고른 수열은 비내림차순이어야 한다. 길이가 K인 수열 A가 A1≤A2≤...≤A{k-1}≤Ak를 만족하면, 비내림차순이라고 한다. 입력 첫째 줄에 N과 M이 주어진다. (1 ≤ M ≤ N ≤ 8) 둘째 줄에 N개의 수가 주어진다. 입력으로 주어지는 수는 10,000보다 작거나 같은 자연수이다. 출력 한 줄에 하나씩 문제의 조건을 만족하는 수열을 출력한다. 중복되는 수열을 여러 번 출력하면 안되며, 각 수열은 공백으로 구분해서 출력해야 한다. 수열은 사전 순으..
N과 M (7) 문제 N개의 자연수와 자연수 M이 주어졌을 때, 아래 조건을 만족하는 길이가 M인 수열을 모두 구하는 프로그램을 작성하시오. N개의 자연수는 모두 다른 수이다. N개의 자연수 중에서 M개를 고른 수열 같은 수를 여러 번 골라도 된다. 입력 첫째 줄에 N과 M이 주어진다. (1 ≤ M ≤ N ≤ 7) 둘째 줄에 N개의 수가 주어진다. 입력으로 주어지는 수는 10,000보다 작거나 같은 자연수이다. 출력 한 줄에 하나씩 문제의 조건을 만족하는 수열을 출력한다. 중복되는 수열을 여러 번 출력하면 안되며, 각 수열은 공백으로 구분해서 출력해야 한다. 수열은 사전 순으로 증가하는 순서로 출력해야 한다. 풀이 let n, m; let arr; let ans = []; let input; const ..
저작권 문제 창영이는 노래 여러 개를 이어서 부르는 가수이다. 유명한 노래의 비슷한 멜로디를 이어서 부르면서 언제 곡이 넘어갔는지 모르게 만드는 것이 창영이 노래의 특징이다. 이런 노래로 상업적으로 엄청난 성공을 거둔 창영이에게 큰 시련이 찾아왔다. 그것은 바로 저작권이었다. 창영이의 노래에 포함되어 있는 멜로디는 모두 저작권이 다른 사람에게 있는 노래이다. 따라서, 이 음악으로 상업적인 활동을 했기 때문에, 저작권 협회에 저작권료를 내야한다. 창영이는 자신의 앨범에 포함되어있는 저작권이 있는 멜로디의 평균값을 구해보기로 했다. 이 값은 아래와 같이 구할 수 있다. (창영이 앨범에 수록된 곡에 포함되어 있는 저작권이 있는 멜로디의 개수) / (앨범에 수록된 곡의 개수) 이때, 평균값은 항상 올림을 해서 ..
N과 M (6) 문제 N개의 자연수와 자연수 M이 주어졌을 때, 아래 조건을 만족하는 길이가 M인 수열을 모두 구하는 프로그램을 작성하시오. N개의 자연수는 모두 다른 수이다. N개의 자연수 중에서 M개를 고른 수열 고른 수열은 오름차순이어야 한다. 입력 첫째 줄에 N과 M이 주어진다. (1 ≤ M ≤ N ≤ 8) 둘째 줄에 N개의 수가 주어진다. 입력으로 주어지는 수는 10,000보다 작거나 같은 자연수이다. 출력 한 줄에 하나씩 문제의 조건을 만족하는 수열을 출력한다. 중복되는 수열을 여러 번 출력하면 안되며, 각 수열은 공백으로 구분해서 출력해야 한다. 수열은 사전 순으로 증가하는 순서로 출력해야 한다. 풀이 let arr; let ans; let n, m; let ref; const recurNa..