프론트엔드 개발자로 가는 길

React docs 정독/ 틱택토 게임 구현 요즘 react로 개인프로젝트 하나를 만드는 중인데 자꾸만 막히고 어떻게 구현해야할지 도통 감이 안오는 순간 들이 많다. 몇가지의 react 강의들을 보고 호기롭게 개인프로젝트를 시작했지만, 쉽게 주워들은 만큼 휘발성이 강해서 제대로 정리가 되지 않은 것 같다는 판단이 섰다. 그래서 기초를 다시 다져야겠다는 생각이 들었고 리액트 공식 홈페이지 문서를 정독했다. 공식홈페이지를 읽고 다시금 정립한 개념들을 정리해두어야지 O.< ★ jsx 내부의 중괄호 안에 어떠한 js표현식도 사용할 수 있다는 점 리액트의 컴포넌트는 캡슐화 되어 독립적으로 사용한다. 이러한 이유로 단순한 컴포넌트를 사용해 복잡한 ui를 구현할 수 있다. ★ 가독성을 높이기 위해 className과..

localStorage (브라우저에 데이터 저장하기) 자바스크립트로 웹 개발을 할 시 아무리 간단한 애플리케이션이라도 데이터를 어딘가에 저장해야 할 일이 생긴다. 보통 DB나 서버 클라우드플랫폼에 저장을 하지만 저장해야할 데이터가 별로 중요하지 않거나, 유실되도 무방할 데이터라면 서버 단에 데이터를 저장하는 것이 낭비일 수가 있다. 그래서 브라우저 상에 데이터를 저장할 수 있는 기술인 웹 스토리지가 있는데, 웹 스트로지에는 localStorage와 sessionStorage가 있다. 이 두개의 차이는 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐에 있다. 세션스토리지는 웹페이지 세션이 끝날 때 저장된 데이터가 지워져서 잘 사용히지 않는다. 그에 반해, 로컬스토리지는 현재 도메인의 로컬 저장소에 데이터..

js / 재귀함수 사용방법 function openAround(rI, cI){ const count = open(rI, cI); if(count ===0) { if (count === 0) { openAround(rI - 1, cI - 1); openAround(rI - 1, cI); openAround(rI - 1, cI + 1); openAround(rI, cI - 1); openAround(rI, cI + 1); openAround(rI + 1, cI - 1); openAround(rI + 1, cI); openAround(rI + 1, cI + 1); } } 위 코드를 실행하면 maximum call stack size exceeded 라는 에러가 뜬다. 우선 위코드는 재귀함수이다. 재귀함수란 무..

문서 객체 모델 (Document Object Model) DOM (2) Cities Seoul London Newyork Tokyo 4. DOM Manipulation (조작) 4.1 텍스트노드에의 접근/수정 1. 해당텍스트노드의 부모노드를 선택한다. 텍스트노드는 요소노드의 자식이다. 2. firstChild 프로퍼티를 사용해 텍스트노드를 탐색한다. 3. 텍스트노드의 유일한 프로퍼티(nodeValue)를 이용하여 텍스트를 취득한다. 4. nodeValue를 이요하여 텍스트를수정한다. nodeName, nodeType을 통해노드의 정보를 취득할 수 있다. // firstChild 프로퍼티를 사용하여 텍스트 노드를 탐색한다. const textNode = one.firstChild; // nodeValue..

문서 객체 모델 (Document Object Model) DOM 1. DOM 브라우저의 렌더링 엔진은 웹 문서(html)를 로드한 후, 파싱하여 웹 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉 모든 요소를 각각의 객체로 만들어 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM ! 이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 이 변경된 DOM은 렌더링에 반영된다. 웹 문서의 동적 변경을 위해 DOM은 프로그래밍 언어 (자바스크립트)가 자신에게 접근하고 수정할 수 있는 방법을 제공하는데 일반적으로 프로퍼티와 메소드를 갖는 자바스크립트 객체로 제공된다. 이를 DOM API(Appication Programming Interfa..

1. 클로저의 개념 클로저는 자바스크립트 고유의 개념이 아니고 함수를 일급객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. MDN은 이와 같이 클로저를 정의한다. "A closure is the combination of a function and the lexical environment within which that function was declared." 클로저는 함수와 그 함수가 선언되었을 때의 렉시컬 환경과의 조합이다. function outerFunc() { var x = 10; var innerFunc = function () { console.log(x); }; innerFunc(); } outerFunc(); // 10 이때, 내부함수 innerFunc은 자신을 포..

① splice( start, deleteCount, 추가) start: 배열의 변경을 시작할 인덱스 deleteCount: 제거할 요소의 수 추가: 배열에 추가할 요소 var arr = [1,2,3,4,5,6,7,8,9,10,11,12]; var arr1 = arr.splice(10, 2, 'a', 'b', 'c'); console.log(arr1); // [11, 12] 삭제된 요소는 arr1에 담김 console.log(arr); // [1, … ,10, "a", "b", "c"] ② slice( start, end) start: 추출 시작점 인덱스 end:추출을종료할 기준 인덱스 (end를 제외하고 그 전까지의 요소만 추출) var arr = [1,2,3,4,5,6,7,8,9,10]; var ar..

피셔-예이츠 셔플 (랜덤정렬 알고리즘) 제로초님의 자바스크립트를 이용한 게임 구현 공부를 하는데 두세번 언급된 개념이라 알게 되었다. 랜덤 정렬이 필요할 때 마다 사용하게 될 유용한 알고리즘. -로또 추첨기 const candidate = Array(45).fill().map( (v,i) => i+); // 1부터 45까지 뽑는 코드 const shuffled = []; while (candidate.length>0) const randomIndex = Math.floor(Math.random() * candidate.length); // 무작위 인덱스 뽑기 const spliceArray = candidate.splice(random,1); // 뽑은 값을 배열에 넣어준다 shuffled.push(sp..

자바스크립트의 this this; // window{} function a() {console.log(this); }; a(); // window{} 1. 일반함수 호출 this는 기본적으로 전역객체 (window)가 바인딩 된다. => 객체를 사용하지 않는 일반함수에서 this는 의미가 없다. 2. 객체의 메서드 호출 const person = { name: 'Lee', getName() { return this.name; } } console.log(person.getName()); // Lee 여기서 this는 person !! 메서드 내부의 this는 메서드를 호출한 객체에 바인딩 된다. 3. 생성자함수 호출 function Circle (radius) { this.radius = radious;..

js / 이벤트 버블링 - 버블링이란? 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 작동하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. 3개의 요소가 form > div > p 형태로 중첩된 구조를 살펴보자 FORM DIV P 1. 에 할당된 onclick 핸들러가 동작 2. 바깥의 에 할당된 핸들러가 동작 3. 그 바깥의 에 할당된 핸들러가 동작 4. document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작한다. - 이런 흐름을 '이벤트 버블링'이라고 한다. 이벤트가 가장 깊은 곳에 있는 요소에서 부모요소를 거슬러 올라가며 발생하는 보양이 마치 물속 거품과 닮았기 때..