Axios의 특징을 서술하며 언급되었던 XMLHttpRequest와 AJAX에 대해서 개념을 정리해본다.※ Axios 기본 개념 정리 - https://hjinn0813.tistory.com/127 Axios 기본 개념 정리Axios란?자바스크립트(JS)에서 HTTP 요청을 보내고 데이터를 받아오기 위한 Promise 기반 HTTP 클라이언트 라이브러리.브라우저와 Node.js 환경에서 모두 사용할 수 있어서 React, Vue와 같은 프레임워크에hjinn0813.tistory.comXMLHttpRequest웹 브라우저에서 서버와 비동기적으로 데이터를 주고받을 수 있도록 해주는 JavaScript 객체.AJAX(Asynchronous JavaScript and XML) 기술의 핵심으로, 웹페이지를 다시 ..

호이스팅(Hoisting)JS에서 변수와 함수 선언이 해당 코드가 실행되기 전에 자동으로 코드의 상단으로 끌어올려지는 동작. 변수를 어디에 선언했든지 JS가 그것을 자동으로 코드의 최상단으로 옮겨서 해석하는 것.변수의 초기화(값 할당)는 끌어올려지지 않기 때문에, 선언만 올라가고 초기화는 여전히 그 위치에서 일어난다.변수의 호이스팅/* 코드를 이렇게 작성했을 경우 */console.log(a); // undefinedvar a = 10;console.log(a); // 10/* JS는 이렇게 해석한다 */var a; // 선언만 호이스팅됨console.log(a); // 값이 아직 할당되지 않음a = 10; // 값 할당console.log(a); // 10함수의 호이스팅호이스팅은 변수와 함수의 '선언'..

TS의 Generic 문법은 새싹 수업에서도 배우긴 했는데, 지금 코드를 다시 보니까 굉장히 짧게 배웠길래 이번에 배운 내용을 블로그에 기록해둔다. 사실 Generic 문법의 원리가 어려운건 아니라서, 이번에도 그리 길게 배우진 않았음!😝※ 새싹 수업 당시의 기록은 여기 → https://hjinn0813.tistory.com/50#Generic-1함수 Genericinterface Obj { x: number;}type Arr = [number, number];// 제너릭 문법으로 타입을 파라미터로 전달function toArray(a: T, b: U): [T, U] { return [a, b];}console.log( // 꺽쇠 괄호로 타입을 명시적으로 지정, 추론 가능하여 생략 가능 toA..

새싹 수업 때부터 학습내용을 내가 이해하기 쉬운 언어로 기록해두는 이유는, 내가 기억력이 좋지 않아서 나중에 까먹었을때 찾아보기 위함이다. 이번에도 TS에서의 클래스를 공부하면서 이거 어디서 본 것 같다고 생각했는데, 알고보니 새싹 수업 당시에 JS 클래스를 배웠던 기억 때문에 그렇게 생각했던 것 같다.😅(접근제한자는 상반기에 정보처리기사 필기 공부하면서 책에서 얼핏 봤던 것 같다.)아무튼 혹시 클래스가 뭔지 기억나지 않는다면 아래 링크 참고!https://hjinn0813.tistory.com/37 [코딩온] 프론트엔드 입문 15주차 Day 38 (JS 전개구문, 구조분해할당, 클래스)이날부터 드디어 전체 교육과정의 세번째 파트가 시작되었다. 이번 파트에서 다루는 내용은 나도 처음 배우는거고, 그동안..

오버로딩 (Overloading)함수의 이름은 같지만 매개변수의 타입 또는 개수가 다른 여러 함수를 정의하는 방법.객체지향 언어에서 가질 수 있는 특징이다.// 타입 선언function add(a: number, b: number): number;function add(a: string, b: string): string;// 함수 구현function add(a: any, b: any) { return a + b;}add(1, 2); // 숫자의 덧셈 출력add('hello', ' 바보'); // 문자열 결합 출력// add(1, ' 바보'); -> 인자의 타입이 달라서 오류 발생a, b가 어떤 타입이든 받을 수 있으라고 함수에서는 any 타입으로 지정한다.하지만 타입 선언을 저렇게 했기 때문에, 함수..

새싹 수업 당시에 TypeScript를 배웠지만, 빠르고 짧게 배워서 어설프게 아는 상태였다. 이번에 새로 들어온 교육에서도 속성이긴 했지만 더 어려운 내용들을 배웠다. 토이 프로젝트 마무리하고 포트폴리오 정리하느라 일주일이 지난 오늘에야 학습 내용들을 블로그에 정리해본다.타입 단언 (Type Assertion)컴파일 시점에 변수를 특정 타입으로 이해하도록 강제시키는 방법.const el = document.querySelector('body') as HTMLBodyElement;el.textContent = 'Hello, World!';→ 여기서 변수를 선언할 때, as HTMLBodyElement 부분이 없으면 TS는 el이 'null'을 갖고 있다고 생각할 수 있다.따라서 el 변수가 HTMLEle..

TS 개발환경 구성의 순서1. 폴더 만들고 터미널에서 명령어 입력하여 프로젝트 생성$ npm init -y2. HTML은 ts 확장자를 실행할 수 없으니까 패키지 설치 (parcel이 번들링하여 실행 가능)$ npm i -D parcel typescript3. HTML의 헤드 태그에 type="module" 속성 추가 → ts 확장자를 HTML 파일에서 불러오기 위한 설정 4. TS의 구성옵션을 제공하기 위해 tsconfig.json 파일 생성 $ npx tsc --init5. TS 파일은 터미널에서 명령어로 실행해야 함 (React에서 npm start 명령어를 사용하는 것과 동일) $ npm run dev이렇게 실행하면 dist 디렉토리가 생성되고 번들링된 파일이 실행됨dist/index.html 파..

정보처리기사 공부하면서 기록의 필요성을 느껴서 적는 글.수업 시간에 안 배운 내용이라 따로 작성함.※ 조건문, 반복문 수업내용은 https://hjinn0813.tistory.com/23 [코딩온] 프론트엔드 입문 10주차 Day 24~25 (JS 조건문, 반복문)이번주는 JS에서 조건문(if문, switch문)과 반복문(for문,while문)에 대해서 배웠다. 특히 for문 같은 경우에는, 분명히 개념은 이해했는데 주어진 조건을 만족하며 계산되는 코드를 직접 작성하는건hjinn0813.tistory.comDo~ While문while문처럼 조건이 true일 때에 정해진 문장을 수행하다가 조건이 false면 반복문을 벗어남.do 뒤에 오는 문장을 무조건 한번 실행하고 true/false를 판단하여 true..

이전 포스팅에 이어서, TS에서의 함수 표현법과 TS를 React에서 사용하는 방법에 대해 기록하려고 한다.✍TS의 함수 선언TS에서는 함수를 어떻게 선언하는지 설명하기에 앞서, JS와 TS의 차이부터 알아야 한다.💡JS는 매개변수를 넘겨주고 호출할 때, 넘겨준 인자만큼 전달하지 않아도 오류가 나지 않는다.TS는 매개변수가 2개면, 호출할 때도 반드시 2개의 파라미터를 전달해야 한다./* JS와 TS의 차이 */// 1. JS의 함수funtion sum (a, b, c){ return a + b + c;}sum(1, 2); // 파라미터가 하나 빠져도 에러 없음// 2. TS의 함수function sum(a:number, b:number, c:number){ return a + b + c;}sum(..

3차 프로젝트 전 마지막 수업 내용은 이름만 익히 알고 있어서 궁금했던 TypeScript였다. 수업 시간에 실제로 사용해보니 상당히 쉽고 직관적인 느낌이었다.TypeScript2012년에 마이크로소프트에 의해 개발된 오픈 소스 프로그래밍 언어. JS로 컴파일되는 JS의 타입이 있는 상위집합으로, '타입이 있는 자바스크립트'라는 의미를 갖고 있다.TypeScript의 특징JS의 기본 문법에 자료형을 체크하는 기능이 추가되어, JS가 자의적으로 데이터 타입을 해석하고 코드를 실행했을 때, 의도와 다른 방식으로 쓰이지 않게 방지한다.정적 파일 언어 - 실행하지 않고도 코드의 에러를 알려준다. (실시간 디버깅)TS는 JS로 변환되어야 브라우저가 해석할 수 있어서 '트랜스파일러(Transpiler)'를 사용해야..