공부하자 공부 공부하자 공부

클래스형 컴포넌트에서 컴포넌트를 생성하거나 업데이트하거나 제거할 때 특별한 메서드를 선언하여 코드를 작동할 수 있다. 이러한 매서드를 생명주기 메서드라고 부른다. 생성(마운트) 생명주기 메서드 constructor constructor(props) { super(props); } 컴포넌트의 생성자 메서드이며 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드이다. 클래스 컴포넌트이니 클래스에서 사용하는 생성자 함수랑 같은 메서드인듯하다. getDerivedStateFromProps static getDerivedStateFromProps(nextProps, prevState) { console.log("getDerivedStateFromProps"); if (nextProps.color !== prevSta..

이번에도 프로그래머스 문제이다. 문자열이 주어지는데 숫자로만 이루어져 있나 판별하는 문제였다. 여기서 정규표현식을 사용하여 숫자를 모두 제거하고 빈 문자열인지 아닌지 판별하여 결과를 도출하려했다. (https://school.programmers.co.kr/learn/courses/30/lessons/12918) 정규표현식 문자열에서 특정 문자 조합을 찾기 위해 사용 텍스트 검색 및 바꾸기, 데이터 유효성 검사, 텍스트 파일 구문 분석과 같은 작업할 때 사용 기호를 사용하여 암호처럼 생기다보니 가독성이 떨어짐 생성 // 정규 표현식 리터럴 const re = /ab+c/ // 정규 표현식 생성자 함수 const re = new RegExp('ab+c') 정규 표현식 리터럴 슬래시로 패턴을 감싸서 작성 스..

오늘 프로그래머스를 푸는데 나는 반복문을 사용하여 풀었지만 다른 사람은 반복문을 사용하지 않고 가우스 공식을 사용하여 푸는 것을 보았다. 가우스 공식이 간간히 나오는 것을 보았고 이번엔 알아보기로 했다. 가우스 공식 일반적으로 가우스 공식이라 말하지만 교육과정의 정식 명칭은 '등차수열의 합 공식' 이다. 등차수열은 뒤의 숫자와 앞의 숫자의 차가 모두 같은 수의 나열 배열이나 정수 목록과 같은 수열의 합을 빠르고 효율적을 계산할 수 있다. 반복문을 사용하지 않아 코드가 단순화 되고 효율적으로 코드를 작성할 수 있다. 원리 가우스 공식을 사용하려면 초기 값인 첫 항(a), 뒤의 숫자와 앞의 숫자의 차이인 항간의 공차(d), 항의 수(n)가 필요하다. 위의 기호를 사용하여 등차수열을 나타내면 a, a+d, a..

repeat() 주어진 문자열을 지정된 횟수만큼 복사하여 새 문자열을 생성할 수 있는 JavaScript의 내장 함수 str.repeat(count) str은 반복하려는 문자열 count는 반복하려는 횟수 count가 0이거나 음수일 경우에는 결과 값이 빈 문자열 count가 2^53-1보다 크거나 같은면 RangeError를 발생시킨다. 예시 const str = "hello"; const repeatedStr = str.repeat(3); console.log(repeatedStr); 콘솔에 찍히는 repeatedStr은 "hello"가 3번 반복된 새로운 문자열이므로 "hellohellohello"다 된다.

오늘 프로그래머스 문제를 푸는데 0부터 9까지의 숫자가 들어가는 배열을 만드는게 필요했다. 직접 배열 안에 숫자를 전부 넣는 것도 가능하지만 (이제까지는 그렇게 풀어 오기는 했다.) 하드코딩 말고 개발자스럽게 만들어보고 싶었다. 배열 리터럴 사용 const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 배열은 만드는 가장 간단한 방법은 배열 리터럴을 이용하여 만드는 방법이다. 위의 코드와 같이 [](대괄호)사이에 요소를 쉼표로 구분하여 넣게되면 간단하게 배열을 생성할 수 있다. 배열 생성자 함수 사용 // 단일 매개변수 배열 생성자 const arr1 = new Array(10) // 복수 매개변수 배열 생성자 const arr2 = new Array(0, 1, 2, 3, 4 , 5,..

오늘 오후에 점핏에서 진행하는 '프론트엔드 개발 이야기'에서 강연한 내용 중에 타입스크립트에 대해 강연한 내용이 인상적이었다. 그 중 JavaScript에서 타입스크립트처럼 사용할 수 있는 방법을 배운 부분이 가장 인상적이었다. 그게 바로 JSDoc이다. 강사님께서는 타입스크립트가 아직 익숙하지 않는다면 JSDoc을 먼저 JS문서에 사용해보며 타입에 대해 익숙해진다음 타입스크립트를 사용해보는 것도 좋은 방법이라고 하셨다. @ts-check js 확장자를 가진 문서에 JSDoc을 통해 타입 힌트를 제공하려면 js 확장자를 가진 문서의 첫 줄에 주석으로 // @ts-check을 사용해야 한다. @type js 확장자를 가진 문서에서는 타입들을 유추해야 하지만 JSDoc의 구문을 사용하면 타입을 명시할 수 있..

CORS란? 교차 출처 리소스 공유 한 출처에서 실행중인 웹 어플리케이션이 다른 출처의 데이터에 접근할 수 있도록 브라우저에 알려주는 체제 악의적인 웹 어플리케이션이 다른 웹 어플리케이션에 무단으로 요청하여 잠재적으로 사용자의 데이터와 보안의 손상을 방지하기 위해 브라우저에 구현된 보안 기능이다. 보통 출처가 다른 클라이언트에서 서버로 요청을 보낼때 CORS 에러를 자주 만날 수 있다. CORS는 먼저 서버에 프리플라이트를 보내고 서버로부터 ok를 받아야 보내려고 하는 요청을 보내 결과를 받아올 수 있다. 출처가 다르다면 보안 상의 이유로 브라우저가 HTTP요청을 제한한다. 서버에서 특정한 출처를 예외 설정이나 모든 출처를 열어둔다면 출처가 다르더라도 브라우저는 CORS 에러를 띄우지 않는다.

스택(stack) 데이터를 쌓아올린 형태의 자료구조 데이터가 아래부터 순서대로 쌓이며 가장 마지막에 push된 데이터가 가장 먼저 pop되는 구조를 가지고 있다. 스택은 정해진 방향으로만 쌓을 수 있으며 top으로 지정된 곳으로만 접근이 가능하다. top이 가리키는 방향으로 push할 수 있고 pop할 수 있다. 이런 스택 구조를 후입 선출 구조라 하며 LIFO(Last In First Out)라고 부른다. 활용처 브라우저 앞, 뒤로 가기 텍스트 편집기 실행 취소, 다시 실행 JS에서 함수 호출 스택 그래프 순회에서 DFS(깊이 우선 탐색) 큐(queue) 데이터를 밀어내는 형태의 자료구조 한쪽에서는 데이터를 넣고 다른 한쪽에서는 데이터를 삭제하는 작업을 한다. 데이터를 넣는 곳을 rear라고 하며 데이..