뉴비 개발자의 학습일기

1. Set 객체와 배열 Set 객체는 중복되지 않는 유일한 값들의 집합입니다. Set 객체는 배열과 유사한 점이 많지만 다음과 같은 차이가 있습니다. 구분배열Set 객체동일한 값을 중복하여 포함할 수 있다OX요소 순서에 의미가 있다OX인덱스로 요소에 접근할 수 있다OX또한 Set 객체는 수학적 집합을 구현하기 위한 자료구조이기에 Set를 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있습니다.Set 객체는 Set 생성자 함수로 생성하며 이 때 인수를 전달하지 않으면 빈 Set 객체가 생성됩니다.const set = new Set();console.log(set); // Set(0) {}Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성합니다. 이 때 이터러블의 중복된 값은 Se..

1. What is DOM?DOM은 Document Object Model의 약자로, HTML 요소를 JavaScript Object처럼 조작할 수 있는 모델입니다.DOM은 웹페이지의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스입니다. 즉 자바스크립트와 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당합니다.만들고자 하는 웹 사이트가 단순하게 정보의 전달만을 목적으로 하는 정적인 웹이라면 HTML과 CSS만으로도 충분합니다. 하지만 그 이상의 동적인 기능을 구현하려고 한다면 자바스크립트와 DOM이 반드시 필요하게 됩니다.2. DOM의 구조DOM은 HT..

JSX?JSX는 JavaScript XML의 줄임말입니다. JSX는 React에서 UI를 구성할 때 사용하는 문법으로, JavaScript를 확장한 문법입니다.JSX는 브라우저가 바로 실행할 수 있는 코드는 아닙니다. JSX로 작성된 코드를 브라우저가 이해할 수 있는 JavaScript 코드로 변환해주는 과정이 필요한데, 이 때 사용되는 것이 바로 Babel입니다. Babel은 JSX를 JavaScript 코드로 컴파일해주고 브라우저가 변환된 코드를 읽고 화면에 렌더링할 수 있게 해줍니다.React에서는 DOM과 다르게 CSS, JSX 문법만으로 웹 애플리케이션 개발을 할 수 있습니다. 각각의 컴포넌트 구현을 위해 필요한 파일이 줄어들고, 한눈에 컴포넌트를 확인할 수 있죠. JSX를 활용하면 JavaS..

재귀: 원래의 자리로 되돌아가거나 되돌아오는 것을 뜻함재귀함수는 자기 자신을 호출하는 함수를 말합니다.function recursion () {console.log("이것은")console.log("재귀함수입니다.")recursion()}//함수 recursion은 무한히 콘솔로그를 찍는 재귀함수입니다.함수 recursion은 자기 자신을 끝없이 호출합니다. 이 함수는 그저 콘솔로그에 무한히 문장을 출력하는 딱히 써먹을 곳이 없는 함수일 뿐이지만, 재귀함수의 이런 특성을 잘 활용하면 반복적인 작업을 해야 하는 문제가 발생했을 때, 좀 더 간결한 코드로 해결할 수 있습니다. 재귀 함수를 언제 써야 할까요?어떤 문제가 비슷한 구조의 더 작은 문제로 나누어지는 경우중첩된 반복문이 많거나 반복문의 중첩 횟수를 ..

CLI(Command Line Interface)는 터미널을 통한 텍스트 명령어로 컴퓨터와 상호 작용하는 방식을 가리키고, GUI(Graphical User Interface)는 사용자가 편리하게 사용할 수 있도록 입력이나 출력과 같은 기능을 아이콘 등을 활용한 시각적 요소를 사용해 컴퓨터의 기능을 간편하게 이용할 수 있도록 하는 방식이다. 컴퓨터를 조작하기 위해서는 반드시 입력(input)이 필요하다. 키보드와 마우스처럼 컴퓨터에 입력을 할 수 있도록 만들어주는 도구를 입력 소스(input source)라고 한다. 일반적인 사용자가 PC를 사용함에 있어서는 이러한 입력 소스를 사용하는 GUI가 CLI에 비해 압도적으로 편리한 것이 사실이지만, 개발자의 경우 원격으로 서버 컴퓨터에 접속하거나 소통해야 하..

지난번에 HTML과 CSS를 활용해 계산기의 겉모습을 만들어 봤었는데, 오늘은 형태를 갖춘 계산기가 웹에서 작동할 수 있게 구현해보는 것이 과제로 나왔다. 물론 실제 계산기의 기능을 모두 구현하는 것은 아니었지만 간단한 기능을 구현해보는 것도 결코 쉽지 않았다. 기초적인 자바스크립트 문법과 표현식 등을 막 배운 상태인 나는 위 코드의 첫 부분부터 이해가 잘 가지 않았다. 물론 코드 옆에 주석으로 설명이 되어 있고 코드스테이츠 강의 페이지 내에도 간단한 설명과 힌트 등이 쓰여있었지만, querySelector를 아직 배운 적이 없고 HTML과 자바스크립트를 연결하는 방법 및 원리 등도 당연히 전혀 모르는 상태이기 때문에 문제를 이해하는 것 부터 상당한 노력이 필요했다. textContent가 이번 과제를 ..

오늘은 어제 배운 if문과 else문, for문, while문 등의 조건문과 반복문을 활용해 연습문제를 페어 프로그래밍으로 풀어보는 시간을 가졌다. 페어 분이 나보다 훨씬 수월하게 코드를 작성해나가실 수 있는 것 같아서 중간중간 막히는 부분을 더 쉽게 풀어나갈 수 있었던 것 같지만 조건문 연습문제를 풀 때는 페어 분과 활발하게 의견을 주고 받으면서 문제를 같이 풀 수 있었다. 하지만 반복문 연습문제를 풀 때부터는 페어 분에 비해 나는 문제의 활로를 찾기가 너무 버거웠다. 페어 프로그래밍 시간이 지난 후 실시간 세션에서 크루님의 해설을 통해 문제를 볼 때도, 조건문 파트보다 반복문 파트가 월등히 어렵다는 것은 한눈에 알 수 있었다. 페어 분도 나도 똑같이 문제를 어디서부터 건드려야 할지 어려워했지만 차근차..

오늘은 대표적인 조건문인 if문과 else문, for문, while문, 등을 배웠다. if (true) { console.log('hello world'); } let name = 'kimcoding'; let course = 'seb be' if(name === 'kimcoding' && course === 'seb fe') { console.log('정보가 일치합니다.') } else if (name === 'kimcoding' && course !== 'seb fe') { console.log('코스를 확인하세요.') // '코스를 확인하세요.' } else { console.log('일치하지 않는 정보입니다.') let num = 5; num % 2 === 0 ? console.log('짝수') ..