FRONT-END110

• 

  ChatGPT를 이용한 Github Action코드 리뷰 자동화 방법 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.. FRONT-END/VS & GITHUB 2023. 5. 7.

• 

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

• 

  [ WIL ] 23/02/06 ~ 23/02/12 이번 주차는 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.. FRONT-END/TIL 2023. 2. 12.

• 

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

• 

  [React] - 환경 세팅 npm? NPM(Node Package Manager) - 서드 파디 패키지들이 모여있는 집합소. yarn - 프론트엔드 의존성을 관리하기 위한 패키지 매니저 1. yarn 설치 터미널에서 yarn 설치 npm install -g yarn npm install -g yarn npm의 역할과 동일하지만 npm보다 성능적으로 개선된 패키지 매니저 yarn에서 패키지 설치 yarn add [패키지 이름] 2. npm과 yarn의 특징 공통적인 특징 자바스크립트 런타임 환경인 노드의 패키지 런타임 이란? 프로그래밍 언어(자바스크립트)가 구동되는 환경을 뜻함. 구동되는 환경 ↓ 브라우저 (크롬, 엣지, 웨일, 파이어폭스) node 환경 차별적인 특징 npm node.js 설치시 자동으로 생성 node packag.. FRONT-END/React 2023. 2. 12.

• 

  [React] - 자주 사용되는 ES6 문법 01. object key - value pair const age = 21; const someObject = { name: '서근', age: age, //key와 value가 같은 모양이면 value 생략 가능 blog: 'https://seons-dev.tistory.com, someFunc: () => { } }; 1) 얕은 복사 const obj1 = { somekey1: 10, somekey2: '안녕', }; const obj2 = obj1; obj1.somekey1 += 1; console.log('obj1', obj1); //{somekey1: 11, somekey2: '안녕'} console.log('obj2', obj2); //{somekey1: 11, somekey2: '안녕'} .. FRONT-END/React 2023. 2. 12.

• 

  [React] - SPA / MPA ? SPA? Single Page Application - 한 개의 페이지로 이뤄진 앱 MPA(Multi Page Application) 과 상반된 개념 왜 SPA가 좋은가? MPA는 어떠한 이벤트가 발생할때마다 웹페이지가 Reload 되어 Re-rendering되 데이터를 많이 잡아 먹는 문제가 있다. 왜냐하면 SSR을 사용하기 때문! 하지만, SPA를 사용하면 필요한 부분만 수정해 웹페이지가 Reload 되는 문제가 없다. SPA에는 대부분 CSR을 권장하고 사용하고 있다. CSR / SSR SSR - Server Side Rendering 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달됨 CSR - Client Side Rendering 렌더링이 클라이언트 쪽에서 일어남 SPA 장점 딱 한개의.. FRONT-END/React 2023. 2. 12.

• 

  [TIL] 230203 JSX JSX? // JavaScript를 확장한 문법 // JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법 const element = Hello, world!; 리액트는 딱 하나의 HTML 파일만 존재 한다. (public 폴더 아래 index.html) 리액트에서 뷰를 그리는 방법은 JSX문법을 사용하여 React 요소를 만들고 DOM에 렌더링 시켜서 뷰를 그리게 된다. 사용 방법 일반적으로 React 에서는 Html을 사용할 수 없다. 서근 개발 노트 환영합니다. 그래서 나온게 JSX! const start_half = 안녕하세요! 시작이 반이다! ; VSCode 에서 react snippet 익스텐션을 깔면 자동으로 스니펫이 추가되니 꼭 설치하자 htt.. FRONT-END/TIL 2023. 2. 5.

• 

  [TIL] 230202 npm / yarn npm? npm(Node Package Manager) - 서드 파디 패키지들이 모여있는 집합소. yarn - 프론트엔드 의존성을 관리하기 위한 패키지 매니저 1. yarn 설치 터미널에서 yarn 설치 npm install -g yarn npm의 역할과 동일하지만 npm보다 성능적으로 개선된 패키지 매니저 yarn에서 패키지 설치 yarn add [패키지 이름] 2. npm과 yarn의 특징 공통적인 특징 자바스크립트 런타임 환경인 노드의 패키지 런타임 이란? 프로그래밍 언어(자바스크립트)가 구동되는 환경을 뜻함. 구동되는 환경 ↓ 브라우저 (크롬, 엣지, 웨일, 파이어폭스) node 환경 차별적인 특징 npm node.js 설치시 자동으로 생성 node package manager의 약자 npm 플렛.. FRONT-END/TIL 2023. 2. 5.

• 

  [TIL] 230201 SPA SPA? Single Page Application - 한 개의 페이지로 이뤄진 앱 MPA(Multi Page Application) 과 상반된 개념 왜 SPA가 좋은가? MPA는 어떠한 이벤트가 발생할때마다 웹페이지가 Reload 되어 Re-rendering되 데이터를 많이 잡아 먹는 문제가 있다. 왜냐하면 SSR을 사용하기 때문! 하지만, SPA를 사용하면 필요한 부분만 수정해 웹페이지가 Reload 되는 문제가 없다. SPA에는 대부분 CSR을 권장하고 사용하고 있다. [CSR] / [SSR] SSR - Server Side Rendering 서버쪽에서 랜더링 준비를 끝마친 상태로 클라이언트에 전달됨 CSR - Client Side Rendering 랜더링이 클라이언트 쪽에서 일어남 SPA 장점 딱.. FRONT-END/TIL 2023. 2. 5.

• 

  [TIL] 230130 백준 입력 템플릿 문제점 node.js를 사용해 백준 알고리즘을 풀면서 프로그래머스와는 다르게 친절하지 않았다. 프로그래머스에서는 기본 함수 템플릿을 제공하고, 어떤 것이 입력값이고 출력값인지 알려주는 반면, 백준은 그러하지 않아 입력값을 직접 넣어줘야 했다. 해결방법 입력값을 받아오는 방법은 알고리즘 문제마다 다른데, 일반적으로 입력값이 한 개 일때(한 줄)는 아래와 같이 템플릿을 사용하면 된다. const input = require('fs').readFileSync(filePath).toString().trim(); 알게 된 점 입력값을 위 방식대로 가져와도 되지만, 삼항연산자를 사용하면 vscode에서도 별도의 txt파일을 만들어 구동시켜 볼 수 있었다. const filePath = process.platform.. FRONT-END/TIL 2023. 2. 1.

• 

  [백준] 노드JS 및 Javascript 입력값 받는 방법 및 템플릿 Beakjoon 입력 템플릿 값들은 텍스트 파일 형태로도 주어진다. 우리는 이 파일을 fs 모듈로 받아야 한다. (입력 파일의 경로는"/dev/stdin") 아래 코드를 보면, linux일때(백준)는 /dev/stdin 파일 경로를 받아오고, 그게 아니라면 vscode등에서의 파일경로를 받아온다. const filePath = process.platform === "linux" ? "/dev/stdin" : "./파일경로"; 만약 filePath 변수를 사용하려면 변수 아래에 원하는 입력값 변수를 선택해 넣어주면 된다. 01. 입력값이 한 개 일 때 (한 줄) 기본 input 변수 const input = require('fs').readFileSync("/dev/stdin").toString().tri.. FRONT-END/BAEKJOON 2023. 2. 1.

• 

  [WIL] 230129 ES / ES5, ES6 문법 차이 JAVSCRIPT 브라우저에 동작을 나타내주기 위해서 자바스크립트를 사용해야 한다. 자바스크립트는 2009년 노드 js가 탄생하면서 자바스크립트 만으로 컴퓨터 파일을 읽고 쓰고 네트워크 통신까지 활용 범위가 넓어지게 되었다. 그럼 ES가 뭐야? ES는 ECMAScript의 약자 이다. 자바스크립트는 Mocha라는 이름으로 탄생해 LiveScript, 그리고 Javasciprt라는 이름으로 만들어지게 되었고, 이후 MS에서 리버스엔지니어링을 통해 기능을 수정 보안 하고 JScript라는 이름으로 나오게 되었다. 이 JScript는 Javasciprt와의 언어적 충돌이 있었고, ECMA International을 통해 ECMAScript1이 새롭게 나오게 되었다. 브라우저 엔진들이 자바스크립트 코드를 이해하.. FRONT-END/TIL 2023. 1. 29.

• 

  [TIL] 230128 유용한 함수 유용한 함수 1. 래퍼 객체 Warpper Object // 래퍼 객체 (Warpper Object) // 원시값을 필요에 따라 관련된 빌트인 객체로 변환한다. const number = 123; // number 원시 타입을 감싸고 Number 객체로 감싸진다. console.log(number.toString()); // Number 객체 타입 console.log(number); //원시 타입 const txt = 'text'; console.log(txt); // string 원시 타입 console.log(txt.length); // String 객체 타입 console.log(txt.trim()); 2. 글로벌 객체 Global Object //전역적으로 사용 가능한 글로벌 객체 console.. FRONT-END/TIL 2023. 1. 29.

• 

  [TIL] 230127 Built-in 빌트인 내장 객체 한국어 버전 참고서 1. 래퍼 객체 (Warpper Object) 원시값을 필요에따라 관련된 빌트인 객체로 변환할 수 있다. 만약 단순히 원시값을 넣어주고, 만들어진 변수에 .을 입력하고 내장 객체를 확인해보면 다양한 메서드가 나타나는데, 바로 이것을 사용하면 원시타입에서 객체 타입으로 바뀌게 된다. 그리고 .을 해제 하는 순간 다시 원시타입으로 돌아간다. const number = 123; // number 원시 타입을 감싸고 Number 객체로 감싸진다. console.log(number.toString()); // Number 객체 타입 console.log(number); //원시 타입 2. 글로벌 객체 전역에서 사용 가능한 글로벌 객체. //전역적으로 사용 가능한 글로벌 객체 .. FRONT-END/TIL 2023. 1. 29.