Web

TS 기본

Core Types Type Example Description number 1, 5.3, -10, -2,3, ... 정수형과 실수형을 포함한 모든 숫자 string 'Hi', "Hi", `Hi` 모든 문자값 boolean true, false '참'이나 '거짓'을 나타내는 단 두가지의 값 object { age: 30 } 기존 JS의 object와 더 구체적인 타입도 가능 Array [1, 2, 3] 어떤 JS 배열이든 지원하며 배열의 타입을 유연하게 또는 제한적으로도 지정 가능 Tuple [1, 2] TS에만 있는 길이와 타입이 모두 고정된 배열 Enum enum { NEW, OLD } TS에만 있는 열거형 전역 상수 식별자 Any * 구체적인 타입이 지정되있지 않은 아무 타입 Example /* t..

React & React-Dom

개요 아래와 같이 기본 index.js를 보면 'react'와 'react-dom/client'를 import 하는것을 볼 수 있다. 두개의 차이점은 무엇이고 굳이 'react'에서 'react-dom'을 분리한 이유는 무엇일까? import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); React 2022.10.11 - [React] - Why React? Why React? What is React? React는..

Why React?

What is React? React는 지금은 Meta가 된 Facebook이 만든 자바스크립트의 UI 라이브러리이다. 우리는 보통 Angular, React, Vue를 제일 많이 사용하는 자바스크립트 프레임워크라고 알고 있다. 하지만 React 공식문서에는 React는 라이브러리 라고 나와있다. 그러면 라이브러리와 프레임워크의 차이는 무엇일까? 라이브러리 vs. 프레임워크 라이브러리 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임, 즉 특정 기능들을 모아둔 코드와 함수들의 집합이다. 따라서 필요할때마다 사용자가 직접 가져다 쓰는 방식이다. 프레임워크 라이브러리는 우리가 어떤 기능이나 코드가 필요할때마다 가져다 쓰는 방식이지만, 프레임워크는 반제품화된 어떠한 '기반', '구조', ..

JSX

JSX JSX는 JavaScript Xml 을 의미한다. 결국 HTML은 XML이라고 할 수 있기 때문이다. 그래서 JS 안에 HTML 을 갖고 있는 형태를 띄는 것이다. 하지만 코드는 이렇지만 실제로는 우리가 보는 화면 뒷단에서 변환과정을 거친다. 좀 더 브라우저 친화적인 코드로 변환시킨다. 이 변환된 코드를 크롬의 개발자도구의 Source 탭에서 확인할 수 있다. const element = Hello, world!; 위의 코드는 JSX의 한 예시이다. 리액트의 생김새를 정의할 때 사용하는 문법이라고 생각하면 된다. 보통 리액트에서 UI 디자인 시에 같이 많이 쓰인다. 또다른 예시를 보자. function App() { return ( Let's get started! ); } export defau..

리액트 설치

리액트를 설치하기전, node.js 설치가 필요하다. node.js 설치가 완료되었다면 순서대로 진행해보자. npx create-react-app 프로젝트명 본인은 코딩애플 강의를 보고 참고하여 blog라는 프로젝트명을 가진 프로젝트를 만들었다. 성공하면 위와 같은 프로젝트 폴더 구조를 가진다. App.js가 메인페이지라고 생각하면 된다. 위의 사진은 node_modules의 디렉토리 구조이다. 구동에 필요한 모든 라이브러리들의 소스코드를 모아놓은 폴더이다. (너무 많아서 사진은 중간에서 잘랐다) 위의 사진은 public의 디렉토리 구조이다. html 파일, 이미지 파일등을 잠깐 보관하고 싶을 때 사용하는 곳이다. static 파일 보관함이라고 생각하면 된다. 직접적으로 코드를 짜는 곳이다. App.js..

Modern Javascript / 함수 심화학습

목차 재귀와 스택 나머지 매개변수와 전개 문법 변수의 유효범위와 클로저 오래된 'var' 전역 객체 객체로서의 함수와 기명 함수 표현식 new Function 문법 setTimeout과 setInterval을 이용한 호출 스케줄링 call/aply와 데코레이터, 포워딩 함수 바인딩 화살표 함수 다시 살펴보기 재귀와 스택 문제 해결을 하다 보면 함수에서 다른 함수를 호출해야 할 때가 있다. 이때 함수가 자기 자신을 호출할 수도 있는데, 이를 재귀라고 부른다. 두 가지 사고방식 재귀와 스택 ko.javascript.info 가장 처음 하는 호출을 포함한 중첩 호출의 최대 개수는 재귀 깊이(recursion depth)라고 한다. pow(x, n)의 재귀 깊이는 n이다. 자바스크립트 엔진은 최대 재귀 깊이를 ..