뉴비 개발자의 학습일기

영화 속, 소설 속 주인공들이 사무치게 부러울 때가 종종 있다. 그들의 뛰어난 외모도 천부적인 재능도 아닌 수많은 상상 속의 인물들이 기본적으로 가지고 있는 것, 언제나 최선을 다할 수 있는 굳건함이 그토록 가지고 싶었다. 내가 살아오면서 느낀 바로는 열정이나 의지력은 필요할 때 꺼내 쓸 수 있는 도구라기보다 금방 다 써버리고 마는, 그래서 언제나 부족한 소모품에 더 가깝다고 느꼈기 때문에.나는 한 번 불 붙은 마음을 최대한 오래 유지하는 것이 중요한 사람이다. 2년 전 프론트엔드 부트캠프를 시작하면서 처음 썼던 블로그 글의 일부입니다. 사실 누구에게나 다 똑같다고도 할 수 있는 내용이지요. 어떤 일이든 어렵고 힘든 순간이 존재하기 마련이고 다들 참고 견디면서 꾸준히 노력하니까요. 그런데 저는 유난히도 ..

저는 게임을 좋아합니다. 어릴 때부터 성인이 된 이후까지 쭉 좋아했죠.근데 이렇게 밥도 안 먹고 하루종일 게임만 한건 살면서 처음이었습니다.이유는 이 녀석을 잡기 위해서였습니다.https://www.youtube.com/watch?v=v4TCmvNLqaw(본인의 클리어 영상)그렇게 하루 왼종일 게임하면서 마침내 레이드를 클리어하고 가장 먼저 든 생각은"나 진짜 게임 중독 위험한 수준 아닌가?" 이거였습니다. 스스로 생각하기에도 문제가 있다고 느껴질 수준이었으니까요 ㅎㅎ; 그런데 그 와중에 신경 쓰이는 부분이 하나 더 있었습니다. 바로 이 16시간 동안 어떤 경지에 이른 듯한 집중력을 발휘했다고 생각이 들어서였어요! 저는 게임 말고도 취미가 있는데, 애기 수준이지만 피아노 연주를 좋아합니다. 피아노를 열심..

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