미리보기 ChatGPT를 이용한 코드 리뷰 자동화 ChatGPT를 이용하여 Github에서 코드 리뷰를 자동화하는 방법을 소개합니다. Github Action과 ChatGPT를 이용하여 코드 리뷰를 작성하고, 코드 리뷰어로 지정된 사용자에게 자동으로 리뷰를 요청하는 방법을 다룹니다. 지원 언어 : ENGLISH | 中文简体 | 中文繁體 | 한국어 | 日本語 1. ChatGPT API Key 생성 ChatGPT를 사용하기 위해서는 먼저 OpenAI에서 제공하는 API Key를 생성해야 합니다. OpenAI 사이트에 로그인합니다. API Tokens 메뉴에서 New API Token을 선택합니다. Token의 이름을 입력하고, Generate API Key 버튼을 클릭합니다. 생성된 API Key를 복사해둡니다. 2..

미리보기 리액트의 라이프사이클 리액트의 라이프사이클은 컴포넌트가 마운트되고 업데이트되며 언마운트되는 과정에서 발생하는 메서드들의 집합이다. 클래스형 컴포넌트 클래스형 컴포넌트에서는 라이프사이클 메서드를 클래스의 메서드로 정의한다. 컴포넌트가 마운트되면 constructor render componentDidMount 메서드가 순서대로 호출된다. 컴포넌트가 업데이트되면 shouldComponentUpdate render componentDidUpdate 메서드가 호출되며, 컴포넌트가 언마운트되면 componentWillUnmount 메서드가 호출된다. 함수형 컴포넌트 함수형 컴포넌트에서는 라이프사이클 메서드가 없지만, 리액트 16.8 버전 이후부터는 함수형 컴포넌트에서도 라이프사이클과 관련된 작업을 수행할 수 있도..

미리보기 이번 주차는 React를 시작해서 React에 대해 전반적으로 익히게 되었다. SPA와 MPA의 차이는 무엇인지? [React] - SPA / MPA ? SPA? Single Page Application - 한 개의 페이지로 이뤄진 앱 MPA(Multi Page Application) 과 상반된 개념 왜 SPA가 좋은가? MPA는 어떠한 이벤트가 발생할때마다 웹페이지가 Reload 되어 Re-rendering되 데이터를 많이 seons-dev.tistory.com 또, React에서 자주 사용되는 JS 문법이 무었인지? [React] - 자주 사용되는 ES6 문법 01. object key - value pair const age = 21; const someObject = { name: '서근', a..

미리보기 컴포넌트? 컴포넌트란 리액트의 핵심 빌딩 블록 중 하나로, UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체입니다. 개념적으로 컴포넌트는 JavaScript 함수와 유사하다. 선언체란 컴포넌트를 생성하고 보이고자 하는 UI 요소를 컴포넌트 내부에서 JSX를 통해 선언하면 이것을 React가 화면에서 그려주는데, 이를 통해 React 컴포넌트가 선언체라는 것을 알 수 있다. props라고props라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 컴포넌트 파일은 `App.jsx` 처럼 `.js `확장자가 아닌 `.jsx` 확장자를 쓰는 것이 직관적으로 좋다. 하지만 별다른 차이점은 없다. (협업 시 편함) 1. 리액트..

미리보기 CRA? 한 줄의 명령어 입력으로 React 프로젝트 개발에 필요한 필수요소를 자동으로 구성하는 방법 WebPack, bable, eslin 등을 자동으로 설치 이렇게 알아서 설치해주는것을 보일러플레이트 라고 칭함 1. CRA로 프로젝트 생성 방법 맥북 ➜ 터미널 ➜ 명령어 입력 ls #현재 내가 위치하고 있는 곳이 어디인지 확인해보세요. cd 폴더이름 #리액트 프로젝트를 생성하고 싶은 폴더로 들어갑니다. yarn create react-app ./ #프로젝트 생성!  react 파일이 성공적으로 설치되었다면 아래 명령어를 입력해 web 페이지를 띄워준다. cd 프로젝트명 # 프로젝트명 폴더로 이동 yarn start # 프로젝트 시작 폴더명 변경 방법 1. 폴더명을 변경 한다. 2. package.j..