2024/11/15 7

[CICD] Github Action과 CI/CD 파이프라인 설정

CI/CD 파이프라인 구축 단계1. GitHub Actions 설정GitHub Actions는 GitHub에 내장된 CI/CD 도구로, 별도의 서버를 설치하지 않고도 자동화된 빌드, 테스트, 배포 등을 설정할 수 있습니다.1.1 GitHub Actions 워크플로우 파일 만들기GitHub 저장소에서 .github/workflows라는 폴더를 만들고 그 안에 워크플로우 파일을 생성합니다.워크플로우 파일 (ci-cd.yml)의 내용은 기본적으로 다음과 같습니다: name: CI/CD Pipelineon: push: branches: - main pull_request: branches: - mainjobs: build: runs-on: ubuntu-latest s..

IT 관련/CICD 2024.11.15

[CICD] VS Code와 GitHub 연결 및 커밋, 푸시하기

Git과 GitHub은 소스 코드 관리와 버전 관리에 매우 유용한 도구입니다. 이번 글에서는 VS Code와 GitHub를 연결하여 코드를 관리하고, GitHub에 프로젝트를 업로드하는 방법을 소개합니다. 초보자도 쉽게 따라할 수 있도록 해 보겠습니다. 1. 필수 소프트웨어 설치하기먼저, Git과 VS Code를 설치해야 합니다.1.1 Git 다운로드 및 설치Git은 버전 관리 시스템으로, GitHub와 연결하기 위해 필수입니다. Git 공식 웹사이트에서 본인의 운영체제에 맞는 Git을 다운로드하고 설치합니다.Windows의 경우 설치 파일을 다운로드하고, 설치 도중 **"Git Bash Here"**와 같은 옵션을 선택합니다.Mac과 Linux는 터미널에서 설치할 수 있습니다.1.2 VS Code 다운..

IT 관련/CICD 2024.11.15

[새싹 성동 2기] 리액트 - 웹 및 사용자 인터페이스를 위한 라이브러리

리액트(React)는 SPA(Single-Page Application) 개발을 손쉽게 도와주는 JavaScript 라이브러리입니다. UI를 컴포넌트 단위로 개발하며, 웹 애플리케이션뿐만 아니라 네이티브 앱 개발에도 사용됩니다.이 글에서는 SPA와 MPA의 차이, 리액트를 이용한 기본 앱 개발, 그리고 프로젝트 초기화를 도와주는 도구인 CRA(Create-React-App) 및 Next.js를 활용한 앱 제작 방법을 소개합니다.MPA와 SPA: 차이점 및 장단점 MPA (Multi-Page Application)특징MPA는 요청마다 새로운 HTML 페이지를 서버에서 로드하는 전통적인 웹 애플리케이션 방식입니다.장점SEO(검색엔진 최적화)에 유리초기 로딩 속도가 빠름기능이 독립적이고, 다양한 툴과 쉽게 연..

코딩/리액트 2024.11.15

[새싹 성동 2기] 국가별 국기 정보를 가져와 웹 페이지에 출력하기 (Axios와 jQuery 활용)

이 글에서는 Axios와 jQuery를 사용하여 REST API에서 데이터를 가져오고, 국가 이름과 국기 이미지를 웹 페이지에 출력하는 방법을 단계별로 설명합니다. 추가적으로 검색 기능을 구현하여 특정 국가만 필터링해 출력할 수도 있습니다.사전 준비1. JSON Formatter 크롬 확장 설치REST API 데이터를 보기 쉽게 포맷해주는 JSON Formatter 크롬 확장을 설치하세요.https://chromewebstore.google.com/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=ko&pli=12. REST API 활용REST API를 통해 국가별 정보 데이터를 가져옵니다.URL: https://restcountries.com/v3...

[새싹 성동 2기] JavaScript의 배열 메서드: map(), filter(), reduce()

JavaScript에서 배열은 자주 사용되는 자료구조입니다. 이 배열을 처리하는 데 유용한 다양한 메서드들이 존재하는데, 그 중 map(), filter(), reduce() 메서드는 매우 중요한 역할을 합니다. 각 메서드는 배열을 변환하거나, 조건에 맞는 요소를 추출하거나, 배열을 하나의 값으로 축소하는 등의 작업을 손쉽게 할 수 있게 도와줍니다.이번 글에서는 map(), filter(), reduce() 메서드의 사용법과 예제를 살펴보겠습니다. 1. map() 메서드map() 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과로 새 배열을 생성합니다. 원본 배열을 변경하지 않고, 변환된 새로운 배열을 반환합니다.기본 구문const newArray = array.map((currentVa..

[새싹 성동 2기] JavaScript 전개 연산자(Spread Operator)와 비구조화(Destructuring) 정리

전개 연산자 (Spread Operator)전개 연자는 배열이나 객체의 요소들을 개별 항목으로 분리할 때 사용됩니다. 배열이나 객체를 펼쳐서 값을 복사하거나 결합하는 등의 작업을 간단하게 할 수 있습니다.1. 배열의 요소 펼치기배열에서 Math.max()처럼 인수로 배열을 직접 전달하면 제대로 동작하지 않지만, 전개 연자를 사용하면 배열 요소를 펼쳐서 전달할 수 있습니다.//이하는 전개 연자로 배열요소를 전달하는 방법입니다.const numbers = [20, 2, 9, 22];console.log(Math.max(...numbers)); // 22 //이하는 전개 연자 없이 apply로 배열 요소를 전달하는 방법입니다.const numbers = [20, 2, 9, 22];// apply() 메서드로..

[새싹 성동 2기] JavaScript에서 JSON 데이터 처리 및 객체 속성명 활용

1. 서버로부터 받은 문자열 데이터를 JSON으로 변환서버에서 받은 데이터는 보통 문자열 형식으로 전달됩니다. 이 문자열 데이터를 JSON 형식으로 변환하여 객체처럼 다루어야 할 때가 많습니다.let scores = [];// 서버로부터 받은 문자열 데이터 - 서버로 부터 받아온 데이터는 아래와 같은 형식입니다.const dataFromServer = ` [ { "name": "홍길동", "korean": 80, "math": 90, "english": 90 }, { "name": "고길동", "korean": 90, "math": 80, "english": 80 }, { "name": "신길동", "korean": 70, "math": 80, "english"..