본문 바로가기

Study

(114)
JS - Array.prototype.filter() 구현하기 filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. - mdn const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter(word => word.length > 6); console.log(result); // expected output: Array ["exuberant", "destruction", "present"] 다음과 같이 배열에서 원하는 조건의 배열을 리턴하는 filter 함수를 직접 구현해보겠습니다. const arr = ['spray', 'limit', 'elite', 'exuberant', 'destr..
JS - Array.prototype.reduce() 구현하기 reduce()** **메서드는 배열의 각 요소에 대해 주어진 **리듀서**(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. - mdn const array1 = [1, 2, 3, 4]; // 0 + 1 + 2 + 3 + 4 const initialValue = 0; const sumWithInitial = array1.reduce( (previousValue, currentValue) => previousValue + currentValue, initialValue ); console.log(sumWithInitial); // expected output: 10 다음과 같이 배열의 총 합을 구할때 많이 사용하는 reduce 함수를 직접 구현해보겠습니다. const arr = [1,2,3,..
Jenkins로 CI/CD Pipeline 구축하기 - 13. Coding Convention Jenkins로 CI/CD Pipeline 구축하기 - 12. code coverage - Jest 설치 테스트 Jenkins로 CI/CD Pipeline 구축하기 - 11. NPM build Jenkins로 CI/CD Pipeline 구축하기 - 10. Jenkins와 Sonarqube 연동 Jenkins로 CI/CD Pipeline 구축하기 - 9. Docker에 Sonarqube 설치하기 Jenkins로 CI/CD.. code00.tistory.com eslint airbnb, prettier 적용하기 "eslint는 코드 퀄리티를 보장하도록 도와주고, prettier는 코드 스타일을 깔끔하게 혹은 통일되도록 도와준다." npx install-peerdeps --dev eslint-config-ai..
CSS aspect-ratio - 가로 세로비율 조정하기 aspect-ratio aspect-ratio(종횡비)는 요소의 크기를 비율대로 조정할 수 있게 합니다. 만약 요소의 너비를 300px로 지정하고, aspect-ratio: 3/1을 하면 높이는 100px이 됩니다. aspect-ratio는 div 뿐만 아니라 이미지, 테이블 등 모든 엘리먼트에 종횡비 적용이 가능하며, 앞에 하나만 지정했을 경우 높이는 1로 간주합니다. aspect-ratio: 1/2; aspect-ratio: 2; aspect-ratio: auto; aspect-ratio: auto 1 / 1; //요소가 고유한 종횡비를 가지는 경우 auto로 해당 종횡비를 따르며 그렇지 않은경우에는 원하는 비율로 지정합니다. 위와 같이 모든 브라우저에서 지원하는 css 속성입니다. See the P..
React-toastify 가이드 react-toastify 설치하기 npm i react-toastify App ToastContainer 넣고, 스타일 설정해주기. toast 부르는 함수 설정하기 함수 주요 설정 옵션 postion - 위치 지정 ex) position: "top-left", "top-right", "top-center", "bottom-left", "bottom-right", "bottom-center" autoClose - 꺼지는데 걸리는 시간 (ms) ex) autoClose : 1000 hideProgressBar - 진행시간 바 숨김 ex) hideProgressBar : true icon - 아이콘설정 또는 제거 ex) icon: '' closeOnClick - 클릭으로 토스트 제거 ex) closeOnCl..
React GlobalStyle Font 적용하기 제일 먼저 사용할 폰트를 다운받았습니다. 폰트 사용을 위해 index.css에 폰트를 등록해줍니다. 제일 중요한 점은 otf 파일은 format에 'opentype'을 지정해 줘야 합니다. 왜인지 format('otp')를 먹지를 않습니다. 글로벌스타일을 사용하기위해 atoms에 GlobalStyle을 만들어주고, App에 적용해줬습니다. 다음과 같이 적용이 잘 된것을 확인 할 수 있었습니다.
Jenkins로 CI/CD Pipeline 구축하기 - 12. code coverage - Jest 설치 테스트 Jenkins로 CI/CD Pipeline 구축하기 - 11. NPM build Jenkins로 CI/CD Pipeline 구축하기 - 10. Jenkins와 Sonarqube 연동 Jenkins로 CI/CD Pipeline 구축하기 - 9. Docker에 Sonarqube 설치하기 Jenkins로 CI/CD Pipeline 구축하기 - 8. JenkinsFile 생성 대쉬보드 -.. code00.tistory.com 이전 글 보기 이번에는 code coverage 중 next, react와 연관성이 높은 Jest를 설치해보겠습니다. npm install --save-dev jest 제일먼저 jest를 설치해줍니다. 그다음 subtraction.js 이라는 파일을 만들어줍니다. function subtr..
Jenkins로 CI/CD Pipeline 구축하기 - 11. NPM build Jenkins로 CI/CD Pipeline 구축하기 - 10. Jenkins와 Sonarqube 연동 Jenkins로 CI/CD Pipeline 구축하기 - 9. Docker에 Sonarqube 설치하기 Jenkins로 CI/CD Pipeline 구축하기 - 8. JenkinsFile 생성 대쉬보드 - 만들어둔 파이프라인 - Configure 선택해주세요. Behaviours 항목에.. code00.tistory.com 이전 글 보기 저는 nextjs-typescript로 작업을 할거기 때문에 nextjs 기준으로 설치하겠습니다. 제일먼저 nextjs를 현재파일에 (.) 설치해줍니다. 다음과 같이 Jenkinsfile 코드를 작성해주세요. gitea에 push해주고 젠킨스를 확인해보겠습니다. 무사히 빌드..