Web

TS Compiler

Watch 만약 app.ts를 컴파일 할 때 tsc app.ts -w 혹은 tsc app.ts --watch를 입력한다면 관찰 모드로 진입하게 된다. 그러면 저장이 될 때 마다 디스크에 저장이되고, 컴파일을 자동적으로 다시 하게 된다. 이처럼 관찰 모드는 좋은 기능이지만, 파일을 구체적으로 지정해야 한다는 번거로운 단점이 있어 규모가 큰 프로젝트에서는 잘 사용하지 않는다. 전체 프로젝트 컴파일 / 다수의 파일 특정 파일을 지정하지 않고 tsc --init 을 하면 이 커맨드가 실행되는 폴더의 모든 항목을 TS에게 알려주게 된다. 그러면 tsconfig.json 파일이 생기게 되고, 설정들을 관리할 수 있다. 그리고 나서 tsc를 입력하게 되면 폴더 내의 모든 .ts 파일들을 컴파일하게 된다. 또한 모두 ..

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