뉴비 개발자의 학습일기

1. 이넘(Enum)이넘은 특정한 값들의 집합을 의미하는 자료형입니다.타입스크립트의 이넘에는 문자형 이넘과 숫자형 이넘이 존재하고 이 둘의 조합으로도 정의될 수 있습니다. 1-1. 숫자형 이넘enum Direction {Up = 1,Down,Left,Right}//Up - 1//Down - 2//Left - 3//Right - 4//초기 값부터 1씩 증가합니다//만약 초기 값을 주지 않으면 0부터 증가합니다위 코드에서 볼 수 있는 것처럼 초기 값부터 1씩 증가하지만, 임의로 값을 지정할 수도 있습니다.enum Color {Red = 1,Blue = 3,Green = 5}//수동으로 값 지정이 가능합니다1-2. 문자형 이넘문자형 이넘은 숫자형 이넘과 거의 비슷하지만 문자형 이넘은 값을 전부 다 특정 문자열..

1. 프로젝트 폴더 생성mkdir typescriptcd typescript폴더를 생성한 뒤 프로젝트 폴더로 이동합니다.2. 프로젝트 초기화npm init -y프로젝트 폴더 내부에서 위 명령어를 실행해 초기화합니다.3. TypeScript 설치npm install typescript --save-dev초기화가 완료되었으므로 터미널에서 위 명령어를 실행해 TypeScript를 설치합니다.4. tsconfig.json 파일 생성compilerOptions 내의 속성은 자유롭게 수정할 수 있습니다.5. src 폴더 내에서 TypeScript 언어로 된 파일 작성

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. 웹 표준웹 표준이란 W3C(World Wide Web Consortium)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙을 의미합니다. 사용자가 어떤 운영체제나 브라우저, 기기를 사용하든 웹페이지가 정상적으로 작동하고 동일하게 보일 수 있도록 하는 제작 기법을 가리킵니다. 2. 웹 표준의 장점2-1. 유지 보수의 용이성웹 표준에 따라 HTML과 CSS, JavaScript를 영역에 따라 구분할 수 있게 되었고, 각 영역에 해당하는 코드가 분리됨에 따라 유지 보수가 용이해졌고 코드가 경량화되면서 트래픽 비용이 감소하는 효과도 발생했습니다.2-2. 웹 호환성 확보웹 표준을 준수함으로써 웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 구애받지 않고 항상 동일한 결과가 나오도록 할 수 ..

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..

이번 과제는 React와 Styled Component를 사용해 가장 기본적이고 자주 사용되는 UI 컴포넌트를 구현해보는 과제였다.지금까지의 과제들처럼 빈칸을 채우는 형식으로 진행되었는데, 의사코드를 적거나 머릿속으로 어떤 기능이 필요한지 떠올려보는 것은 쉬웠으나 막상 직접 코드를 타이핑해보려고 하면 어디서부터 적어야 할지 막막하기만 했다. 아직 JSX 문법과 React 컴포넌트를 만들고 사용하는 방법, props와 state의 개념 및 활용 등 많은 부분에서 익숙하지 않기 때문이었다.하지만 페어프로그래밍을 진행하면서 페어 분과 같이 어떤 코드를 작성해야 하는지 차근차근 고민해보고 조금씩 완성해나가는 과정에서 조금이나마 더 리액트와 자바스크립트 활용 능력을 기를 수 있었다. 또한 완성된 코드를 의사코드로..

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