파카

개발환경 구성하기 React를 사용하기 위해서 node가 설치되어 있어야 한다. 간단하게 아래 명령어를 통해 리액트 CRA 구성할 수 있다. npx create-react-app my-app React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다. React는 View 영역을 Component 단위로 관리한다. 마치 HTML 마크업 전에 영역을 크게 나누듯이 Component를 나누어서 프로그래밍을 해야한다. 이것또한 익숙해질려면 많은 연습이 필요하겠지.. 리액트 컴포넌트는 클래스와 함수형으로 작성 할 수 있다 그런데 버전이 올라가면서 함수형 프로그래밍의 ..

React는 페이스북에서 만든 JavaScript 라이브러리다. 간혹 보면 프레임워크라는 블로그가 보이는데 공식문서 상에 라이브러리라고 명시되어있다. https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org - 프레임워크란 ? 뼈대 골격 구조 - 라이브러리란 ? 특정 기능에 대한 도구 또는 함수들의 집합입니다. - 차이점 ? 라이브러리와 프레임워크의 차이는 제어 흐름에 대한 주도성이 누구에게/어디에 있는가에 있습니다. 즉, 어플리케이션의 Flow(흐름)를 누가 쥐고 있느냐에 달려 있습니다. (출처 : https://webclub..

이벤트 시스템이란 ? DOM을 통해 코드로 특정하지 못하는 상태를 특정하고 활용하는 것을 말한다 여기에는 아래 2가지 개념이 있다. // Bubbling // 안쪽에 있는 요소에서 이벤트가 발생했을 때 밖으로 확산되어 나가는 것 // 이벤트가 발생한곳에서 이벤트 리스너가 있는 곳으로 상위계층으로 찾아가는 이벤트 버블링 // Capturing // 이벤트가 발생했을 경우, 이벤트가 발생한 곳으로 하위계층으로 찾아 들어가는 이벤트 캡처링 캡처링과 버블링을 활용하면 강력한 이벤트 핸들링 패턴인 이벤트 위임(event delegation) 을 구현할 수 있다. 코드를 통해 실습해보자 HTML 코드 더보기 HTML을 div내에 영역을 분리해서 클릭이벤트를 확인해보고자 한다. 아래 예제를 통해 콘솔을 보면서 이해해..

함수란 계산이나 처리를 위한 코드의 묶음이다. 일반적으로 함수는 해당 함수가 다 처리가 되면 함수가 종료가 된다. 이런 함수를 조금 독특하게 사용할 수 있는 방법 중에 하나가 클로져다. // 일반적인 함수 let saveNumber = 1; function increment() { return saveNumber++; } console.log(increment()); console.log(increment()); saveNumber = 200; console.log(increment()); // saveNumber에 접근이 가능해서 값을 임의로 접근하여 변경할 수 있는 문제가 있다. 이런 문제상황에서 특정한 데이터를 보호하고 싶을 때 클로저를 사용할 수 있다. // 클로저는 함수 안쪽에서 함수가 만들어질..

내가 빠르게 찾아보기 위해 정리한 글 개념적으로 필요한 지식들을 정리하면서 이해하고 머리에 담아보려고 한다. 먼저 결론부터 정리하면 동작원리는 다음과 같다. 1. HTML 마크업을 처리하고 DOM 트리를 빌드한다. ("무엇을" 그릴지 결정한다.) 2. CSS 마크업을 처리하고 CSSOM 트리를 빌드한다. ("어떻게" 그릴지 결정한다.) 3. DOM 및 CSSOM 을 결합하여 렌더링 트리를 형성한다. ("화면에 그려질 것만" 결정) 4. 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산한다. ("Box-Model" 을 생성한다.) 5. 개별 노드를 화면에 페인트한다.(or 래스터화) ++ 세부적이 내용 DOM 구축 - 브라우저는 우선 html 파일을 DOM으로 변환(파싱)합니다. : 파싱..

async 와 await란 ? 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와주는 방법 이전에 사용했던 callback 과 promise 문법을 async와 await를 이용한 예시 코드를 통해 이해해보자 function delay(millisecond) { return new Promise((resolve, reject) => { setTimeout(() => { // 랜덤함수를 이용하여 랜덤하게 함수를 실행시키고 싶을 때 if (Math.floor(Math.random() * 10) % 2 === 0) { resolve("sucess"); } else { reject("failure"); } }, millisecond); }); } /..

Promise 란 ? 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. promise의 간단한 정의다. 지난번에 이어서 callback에 의한 비동기처리를 promise를 이용하여 단점을 보완하는 코드까지 보면서 이해해보자. 기초 개념 Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은상태 Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태 Pending(대기) // Pending(대기) new Promise(); // 메서드를 호출할 때 콜백 함수를 선언할 수 있고 인자로 resolve 와 reject 이다. new Promise(function(resolve, reject)..

비동기 처리에 대해 내용을 정리하려고 한다. 비동기 처리란 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다. 코드를 통해 비동기 처리를 이해해보자 먼저 비동기와 관련된 코드들을 보자 ( 캡틴판교님 블로그에서 가져온 예제 ) // ajax 통신 function getData() { var tableData; // 값을 가져오는 요청을 했지만 기다려주지 않는다. $.get('https://domain.com/products/1', function(response) { tableData = response; }); return tableData; } console.log(getData()); // undefine..

일급객체에 대해 찾아보면 아래와 같은 내용을 볼 수 있다. 일급객체는 아래와 같은 특징을 가지고 있다. 변수나 데이타에 할당 할 수 있어야 한다. 객체의 인자로 넘길 수 있어야 한다. 객체의 리턴값으로 리턴 할수 있어야 한다. 일급함수 프로그래밍 언어에서 함수라고 하는 코드의 묶음을 일반적인 값처럼 취급한다는 말을 말한다. 즉 일반적인 값처럼 변수에 값을 넣을 수 있다. 인자로 받는 값이 함수가 될 수도 리턴받는 값이 함수일 수도.. 일급함수이자 일급객체에 대해 글로보고 충분히 이해가 가면 좋지만 역시 코드로 보는게 더 이해하기 쉬울 거 같다. 코드를 통해 알아보자 크게 2가지 경우로 나눌 수 있는 거 같다. case 1 // 간단한 예제를 작성해보자 // 인자로 함수가 들어옴 let add = calc..

https://www.acmicpc.net/problem/1339 1339번: 단어 수학 첫째 줄에 단어의 개수 N(1 ≤ N ≤ 10)이 주어진다. 둘째 줄부터 N개의 줄에 단어가 한 줄에 하나씩 주어진다. 단어는 알파벳 대문자로만 이루어져있다. 모든 단어에 포함되어 있는 알파벳은 최대 www.acmicpc.net 이런 문제를 계속 보다가 답을 찾지 못하고 나서 다른 분들의 답을 보면 아쉽기만 하다.. 왜 생각을 못했을까.. 코드 더보기 const fs = require('fs'); const filePath = process.platform === 'linux' ? '/dev/stdin' : '01..Baekjoon/01..Greedy/1339.txt'; let input = fs.readFileSy..