🤍 은지log 🤍

code coverage 중 next, react와 연관성이 높은 Jest를 설치해보겠습니다. npm install --save-dev jest Jest 설치 그다음 subtraction.js 이라는 파일 생성 function subtraction(a, b) { return a - b; } module.exports = subtraction; 파일안에 코드를 작성 그 후 subtraction.test.js 이라는 파일 생성 const subtraction = require('./subtraction'); test('subtracts 4 - 2 to equal 2', () => { expect(subtraction(4, 2)).toBe(2); }); 코드 작성 { "scripts": { "test": "j..

👩‍💻필자는 NextJS - Typescript로 작업을 할것이기 때문에 NextJS 기준으로 설치하겠습니다.👩‍💻 NextJS를 현재파일에 (.) 설치하기 ⌨️ npx create-next-app@latest --ts . 다음과 같이 Jenkinsfile 코드를 작성 gitea에 push해주고 ( ⌨️ git push origin main ) 젠킨스 확인 해보기 빌드 성공 ⭐️ ❤️ 도움주신분 : https://code00.tistory.com/

[CI/CD study] - 6. Docker 에 Jenkins 설치하기 [CI/CD study] - 5. Docker 설치 [CI/CD study] - 4. EC2 인스턴스 Image 만들기 [CI/CD study] - 3. AWS EC2 인스턴스 JAVA설치 [CI/CD study] - 2. SSH Client Tool을 이용해 EC2 인스턴스 접속 [CI/CD study] -.. eun-jii.tistory.com [CI/CD study] - 8. Docker 에 Sonarqube 설치하기 Docker Desktop 설치 Docker Hub 접속후 왼쪽 상단 검색 창에 " sonarqube " 검색 소나큐브 공식 계정 이미지와 명령어가 나옴 터미널에 명령어 ⌨️ docker pull sonarqub..

[CI/CD study] - 7-1. Jenkins와 Gitea 연동하기 [CI/CD study] - 6. Docker 에 Jenkins 설치하기 [CI/CD study] - 5. Docker 설치 [CI/CD study] - 4. EC2 인스턴스 Image 만들기 [CI/CD study] - 3. AWS EC2 인스턴스 JAVA설치 [CI/CD study] - 2. SSH Client T.. eun-jii.tistory.com [CI/CD study] - 7-2. Jenkins와 Gitea 연동하기 [CI/CD study] - 7-1. Jenkins와 Gitea 연동하기 [CI/CD study] - 6. Docker 에 Jenkins 설치하기 [CI/CD study] - 5. Docker 설치 [CI/..

Docker Desktop 설치 Docker Hub 접속후 왼쪽 상단 검색 창에 " sonarqube " 검색 소나큐브 공식 계정 이미지와 명령어가 나옴 터미널에 명령어 ⌨️ docker pull sonarqube * 위 명령어를 치면 자동으로 마지막 태그가 받아짐 (latest) * 소나큐브는 SSH에 설치하면 안되고 본인 랩탑에 설치해야함 mac 기준 iTerm 키고 설치하면 됨 📍 no matching manifest for linux/arm64/v8 in the manifest list entries 라는 오류 발생시 ⌨️ docker pull --platform linux/amd64 sonarqube latest 태그 까지 완료 📍 ⌨️ $ docker images * sonarqube 이미지가..

[CI/CD study] - 7-1. Jenkins와 Gitea 연동하기 [CI/CD study] - 6. Docker 에 Jenkins 설치하기 [CI/CD study] - 5. Docker 설치 [CI/CD study] - 4. EC2 인스턴스 Image 만들기 [CI/CD study] - 3. AWS EC2 인스턴스 JAVA설치 [CI/CD study] - 2. SSH Client T.. eun-jii.tistory.com Jenkins 대시보드에서 Jenkins 관리 클릭 플러그인 관리 ➡ 설치 가능 ➡ 검색 플러그인 설치 해주기 + Gitea Plugin 도 같이 받아주기 ( 안받으신 분들 ) 다시 Jenkins 관리 ➡ 시스템 설정 에서 스크롤 내리다보면 Gitea Server 설정 * Nam..

onChange, Click, KeyPress import { useState } from 'react' const EventPractice = () => { const [message, setMessage] = useState('') const handleClick = () => { alert(message) } const handleKeyPress = (e) => { if (e.key === 'Enter') { alert(message) } } return ( 이벤트 연습 { setMessage(e.target.value) }} onKeyPress={handleKeyPress} /> 확인 ) } export default EventPractice import { useState } from 'reac..

반복을 잘 사용하는게 react에서 코드를 줄일수 있는 중요한 방법이다. react에서 반복을 사용할때는 배열을 이용한다. map 함수는 배열에서 사용하는 함수이고 사용시 새로운 함수가 반환된다. const number = [1,2,3,4,5] const newNumbers = number.map( (e) =>{ console.log(e) }) // (e)가 각각 요소가 되어 1 2 3 4 5 가 반환된다. --- const numbers = [1,2,3,4,5] numbers.map( (number, i)=>{ console.log(i) }) // 0 1 2 3 4 --- const numbers = [1,2,3,4,5] const newNumbers = numbers.map((number, i) =>..

Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. ✏️ useState import { useState } from 'react' const [변수, set(대문자)변수] = useState(''); set함수에 예전값 prev( ) 을 넣고 싶으면 콜백함수를 사용해야한다. filter 함수는 콜백 함수의 조건에 해당하는 모든 요소가 있는 배열을 새로 생성하는 기능을 한다. import { useState } from 'react' const Counter2 = () => { c..

SCSS sass는 css와 비슷하게 App.scss 파일을 만들어 scss 문법에 맞게 코드 넣는것 이다. Sass는 두가지 확장자(.scss/.sass)를 지원하고 📌 npm install 작업이 필요함. ( node- sass ) 📌 import styled, { css } from 'styled-components' const Box = styled.div` background: ${(props) => props.color || 'blue'}; padding: 1rem; display: flex; ` //Box 컴포넌트에 .color 라는 props가 없으면 blue가 된다-> 지금은 있으니 black const Button = styled.button` background: white; colo..