G_NooN in Dev G_NooN in Dev

Glob Pattern: 특정 조합의 파일명을 찾기 위한 패턴 ( Globbing ): 정규 표현식 과 유사한 형태를 가진다.: \ 와 / 는 탐색 기준에 포함하지 않는다. ( \ , / : 파일 경로를 구성하는 기호 )구성 요소개수 탐색 요소기호동일한 Regex 패턴설명*.*0 개 이상?. ( WildCard )아무 문자 1 개 (공백 포함) 조건 탐색 요소기호동일한 Regex 패턴설명[abc] = [a-c]동일여러 개의 OR 을 하나로 통합대괄호 ( [ ] ) 안의 문자 중 하나를 가진다.[!abc] = [!a-c][^abc] = [^a-c]대괄호 ( [ ] ) 안의 문자를 모두 가지지 않는다.{ a , b }a | b여러 개의 OR 을 하나로 통합*.{docx, xlsx} 소괄호 ( ): 특정 패턴..

정규 표현식 ( Regular Expression ): 특정 조합의 텍스트 (Text) 를 찾기 위한 패턴: 줄여서 RegExp 또는 Regex 로 표현 선언 방식1. 단순 선언const regex = /패턴/플래그 // 패턴구분자 (/) : 패턴과 플래그를 구분2. RegExp 생성자 사용const regex = new RegExp(패턴, 플래그) 사용 방법1. String 객체의 메서드- match(), matchAll(), replace(), replaceAll(), search(), split()const matchResult = value.match(regex)const replaceResult = value.replace(regex, "")const searchResult = value.sea..

DOM ( Document Object Model ): 웹 페이지의 컴포넌트 구조 (= 태그) 를 트리(Tree) 형태로 표현한 모델DOM 주요 용어- 문서 (Document) : 웹 페이지 / 화면- 요소 (Element) : 페이지 / 화면을 구성하는 컴포넌트- 노드 (Node) : 트리의 각 요소 : 상위 Element 는 하위 Element 를 포함하고 있다.렌더링 ( Rendering )화면에 출력시킬 UI 컴포넌트를 구성하는 작업 종류초기 렌더링이후 렌더링 (= 리렌더링 ( Re-Rendering ))렌더링 절차1. 렌더링 트리거 ( Rendering Trigger ) - 렌더링 유발2. 컴포넌트 렌더링 ( Component Rendering ) - 렌더링 수행3. DOM 커밋 ( DOM Co..

Props 의 한계기존의 Props 를 사용하면, 하나의 컴포넌트 파일을 사용하여 내용만 다른 여러 개의 컴포넌트를 만들 수 있다. 하지만 props 자체로는 몇 가지 한계가 존재한다.내용을 설정하기 위해서는 반드시 상위 컴포넌트에서 값을 내려받아야 한다.상위 컴포넌트로부터 받은 값은 수정할 수 없다. 이를 보완하기 위한 방식이 바로 State 다.StateReact 컴포넌트 내부에서 동적으로 사용 및 관리되는 데이터(값) 특징관리하고자 하는 컴포넌트의 내부에서 선언된다.값은 얼마든지 수정 가능하며, 초기값 설정이 가능하다.값이 변경되면, 화면이 새로 렌더링(Rendering) 된다.State 의 선언 및 관리 방식 대표적인 방식으로 useState 와 useReducer 가 있다. useState: 일..

우리가 보고 이용하는 페이지에는 다양한 요소들이 포함되어 있다. 아래 페이지를 예시로 들어보자. 이 페이지에 보이는 부분은 다음과 같다.위치요소좌측 상단Google 정보, 스토어 우측 상단Gmail, 이미지, 실험실, 메뉴, MyPage중앙로고, 검색창, 입력 도구, AI 모드, 검색버튼, I'm Feeling Lucky하단국가명, 광고, 비즈니스, 검색의 원리, 개인정보처리방침, 약관 설정 각 요소들은 모두 다른 역할을 수행한다. 하지만 각 위치에 속하는 요소들은 모두 비슷한 형태를 가지고 있다. 여기서 우리는 컴포넌트의 정의와 특성을 알 수 있다.컴포넌트 (Component): 특정 기능* 을 수행하는 독립적인 모듈 (* 특정 기능 : 비즈니스 로직 처리, UI 구성 등): 재사용이 가능함 버튼(Bu..

동기 vs 비동기동기(Synchronous)비동기(Asynchronous)요청과 응답이 순차적으로 발생요청과 응답이 비순차적으로 발생요청에 대한 응답이 올 때까지 대기한 후다음 요청 및 작업을 수행요청에 대한 응답을 기다리지 않고바로 다음 요청 및 작업을 수행 동기적 처리(Synchronous Processing)는 작업의 처리 순서는 보장되지만, 응답을 기다리는 동안 다른 작업을 수행할 수 없기 때문에 비효율적일 수 있음비동기 작업을 동기적으로 처리하는 방법콜백(Callback) 함수콜백(callback) 함수 : 다른 함수의 인자로 들어가는 함수 각 비동기 함수들을 콜백 함수 형태로 중첩적으로 작성const test = () => { setTimeout(() => { console.log("작..

템플릿 리터럴 (Template Literals)문자열의 새로운 표현 방식큰따옴표(")나 작은따옴표(')가 아닌 백틱(`)을 사용문자열 내부에서 줄바꿈이 가능`It is possible to use multi-line if you use Template literals`${}을 사용하여 문자열 내부에 표현식을 표기할 수 있음const ECMA = "ES";const num = 6;const name = "Template literals";`After ${ECMA+num}, you can put data inside with ${name}`;// After ES6, you can put data inside with Template literals단축 속성명 (Shorthand property names)..

문자열 (String)속성/메서드설명s.toLowerCase()문자열 s를 소문자로 변환s.toUpperCase()문자열 s를 대문자로 변환s.charAt(n)문자열 s의 index[n]의 문자s.charCodeAt(n)문자열 s의 index[n]의 문자의 UTF-16 코드String.fromCharCode(x)UTF-16 코드 x의 문자const s1 = "ABCDEF";const s2 = "abcdef";s1.toLowerCase(); // abcdefs2.toUpperCase(); // ABCDEFs1.charAt(2); // Cs2.charCodeAt(2); // 99String.fromCharCode(100); // d속성/메서드설명s.indexOf(x)문자열 s에서 x와 일치하는 가장..

변수 (Variable)변수(Variable)의 주요 개념- 변수 선언(Declaration) : 자바스크립트 엔진에 변수 객체를 등록하는 것- 변수 초기화(Initiailization) : 변수에 메모리 공간을 할당하는 것- 변수 할당(Assignment) : 변수에 값을 저장하는 것 - 변수 참조(Reference) : 변수에 할당된 값을 읽어오는 것 변수의 선언과 할당let a; // 변수 선언a = "hello"; // 변수 할당let a = "hello"; // 변수 초기화(=선언&할당) 변수 선언 키워드 varletconst단순 선언가능가능불가능동일 이름 재선언가능불가능불가능변수 재할당(덮어쓰기)가능가능눌가능 // varvar myVar; // 단순 선언 가능myVar = "hi";c..