FRONT-END/TIL25

• 

  [ 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.

• 

  [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.

• 

  [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.

• 

  [TIL] 230126 동기, 비동기, 콜백 동기 / 비동기 자바스크립트는 동기적인 아이 이다. 호이스팅이 된 이후부터 코드가 작성한 순서부터 동기적으로 실행 된다. 호이스팅 : var변수와 function 선언들이 자동적으로 제일 위로 올리가는것. 동기 synchronous : 정해진 순서에 맞게 코드가 실행되는것 비동기 asynchronous : 언제 코드가 실행될지 예측할 수 없는것. 동기 비동기의 차이를 알아보기위해 코드를 써보면 이러하다. console.log('1'); // 비동기 (브라우저 API) setTimeout(() => { console.log('2'); }, 1000); // 이것이 콜백 함수 console.log('3'); /*===Synchronous callback*/ function printImmdeiately(pr.. FRONT-END/TIL 2023. 1. 26.

• 

  [TIL] 230126 This, Closure This 글로벌 컨텍스트의 This에는 두 가지 가 있다. - 브라우저 에서의 This : Windws - 노드 환경에서의 This: 모듈 노드 This 노드에서의 This는 모듈을 뜻한다. 노드에서 consloe.log에 this를 찍으면 빈 객체가 나온다 { } console.log(this); 이 모듈을 Exports 해주면 this에는 export 된 { key: value }가 들어간다. const x = 0; module.exports = x; console.log(this) 그리고 globalThis를 호출해서 확인하면, 노드에서 사용 가능한 전역 객체가 나온다, console.log(globalThis); 전역 객체에 '점'을 붙이면 사용 가능한 전역 객체가 나오는데, 이 globalThi.. FRONT-END/TIL 2023. 1. 26.

• 

  [TIL] 230125 Scope 스코프 Scope 식별자가 유효한 범위를 나타냄. (식별자 : 변수, 함수, 클래스 이름) 즉, 변수나 함수나 클래스 이름이 어디까지 유효한지 나타내는 범위 영역이다. 선언된 위치에 따라 유효 범위가 결정된다. 스코프 밖에서는 스코프 내부에 있는것을 접근할 수 없지만, 스코프 내부에서는 외부에 있는 부모 데이터를 접근할 수 있다. (스코프 체인을 통해) { // 블럭 안의 변수는 블럭 안에서만 유효 // 블럭 안에서 a라는 변수를 생성했다면, 블럭 밖에서는 참조 하지 못한다. // ( 이름 충돌 방지 및 메모리 절약 ) } 변수는 최대한 필요한 곳에서 정의를 해야한다. Garbage Collection 프로그램은 원래 개발자가 직접 메모리 관리(메모리 청소)를 해야 한다. 메모리 관리를 제대로 하지 않으.. FRONT-END/TIL 2023. 1. 26.

• 

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

• 

  [TIL] 230123 class #1 클래스 자바스크립트는 원래 프로토타입을 베이스로 하지만 ES6 도입 이후부터는 클래스를 기반으로 객체지향 프로그래밍을 할 수 있다. 클래스란 객체를 생성할 수 있는 템플릿, 그리고 객체지향 프로그래밍이다. 객체지향은 서로 밀접하게 연관 있는 아이들을 객체로 구성해 나아가면서 객체끼리 서로 호환 가능하도록 할 수 있는 것을 객체지향이라고 한다. 생성자 Constructor 객체를 쉽게 만들 수 있는 템플릿 종류 생성자 함수 ( 현업에서 거의 사용되지 않음) 클래스 ( 현업에서 사용 ) class Fruit { // 생성자: new 키워드로 객체를 생성할 때 호출하는 키워드 이다. constructor(name, icon) { this.name = name; this.icon = icon; } display.. FRONT-END/TIL 2023. 1. 24.

• 

  [TIL] 230122 String, toString 오늘은 아래 solution 함수에 정수인 인자값을 String 문자의 배열로 하나하나 출력하는 것이 목표였다. function solution(...num) { } solution(1, 2, 3, 4, 5); 우선, 인자값을 배열로 만들어 주기 위해 함수의 매개변수에 스프레드 문법을 사용하고, 새로운 배열을 생성해 For문을 돌리면 될거라고 생각했다. function solution(...num) { let arr = new Array(); for (let i = 0; i < num.length; i++) { arr.push(String(num[i])); } console.log(arr); } solution(1, 2, 3, 4, 5); 인자값으로 받은 num의 길이 만큼 i를 더해주고, 인자값에 있는.. FRONT-END/TIL 2023. 1. 23.