전체 글
-
[TypeScript] TypeTypeScript 2023. 3. 24. 16:37
개요 TypeScript의 주된 개념인 Type에 대하여 공부해보자. Type? JS에서는 이미 원시타입(string, number...)이 존재합니다. 하지만 JS는 초기 할당된 값의 타입을 런타임 이후 타입체크를 진행합니다. TS는 타입을 지정을 하고 런타임 이전에 체크를 하며 JS보다 엄격하게 타입을 관리해줍니다. 타입 추론 (Types by Inference) TS는 JS의 언어를 알고있고 대부분의 경우 타입을 자동으로 생성해줍니다. let helloWorld = "Hello World" 위 코드를 TS로 작성했습니다. hellowWorld라는 변수가 string타입이 명시하지 않아도 TS는 string이라고 타입을 추론하여 알 수 있습니다. 타입 정의 (Defining Types) TS코드에 t..
-
[React/Redux] 모던 리액트/리덕스 프로그래밍 1장Redux 2023. 3. 23. 17:18
개요 우연히 책장에 있는 모던 리액트/리덕스 프로그래밍 이라는 책을 찾았다. 최근에 리덕스에 관한 내용이 궁금하였어서 이책을 읽으면서 나름대로의 정리를하며 나의 개념을 확장하는 목표로 이 글을 쓰게 되었습니다. TL;DR 이 글에서는 리액트와 리덕스 그리고 플럭스 아키텍처에 관해서 다룹니다. 리액트란? 리액트는 페이스북진영에서 개발한 JavaScript라이브러리입니다. 웹 UI를 개발할 때 사용합니다. 리액트특징 리액트에는 많은 특징이 있지만 이 책에서 다룬 내용은 대표적인 2가지로 Virtual DOM과 JSX가 있습니다. Virtual DOM React를 검색하면 흔히 볼 수 있는 이 Virtual DOM은 React가 가상으로 관리하는 DOM입니다. 여기서 DOM은 간단히 말해 Document Ob..
-
[React] React Docs해석하면서 공부하기 4장 React로 사고하기React 2023. 3. 23. 13:50
개요 React Docs의 React로 사고하기를 보면서 공부해보자. React의 컴포넌트 React는 UI를 빌드할 때 "컴포넌트"단위로 분해합니다. 이후 컴포넌트에 대해서 다른 시각적 상태를 작성해주고 작성된 컴포넌트들을 서로 연결하여 데이터가 흐르게 만들어줍니다. 이제부터 React Docs에 나오는 예제를 가지고 공부해봅시다. React예제로 실습 먼저 mockup data를 만들자. [ { category: "Fruits", price: "$1", stocked: true, name: "Apple" }, { category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit" }, { category: "Fruits", price: "$2", ..
-
[React] React Docs해석하면서 공부하기 3장 Tic-Tac-ToeReact 2023. 3. 16. 14:36
State 끌어올리기 이전 장에서 코드는 Square 컴포넌트가 state를 유지하도록 하고 있습니다. 하지만 게임의 승자를 확인하여야할 때는 9개의 Square컴포넌트가 각자 state를 알고있어야 합니다. 그렇게 하기 위해서는 상위 컴포넌트에 state를 올려 사용하면 됩니다. 지금부터 state를 상위 컴포넌트에 올려보도록 합시다. import {useState} from 'react'; function Square() { function handleClick() { setValue('X'); } return ( {value} ); } export default function Board() { const [value, setValue] = useState(Array(9).fill(null)); r..
-
[TypeScript] TypeScript?TypeScript 2023. 3. 13. 16:23
개요 JavaScript에서 빠질 수 없는 TypeScript에 대해서 알아보자. TL;DR TypeScript는 JavaScript의 SuperSet(상위집합)이다. 환경설정은 및 코드를 참고하자. TypeScript의 역사 JavaScript는 그 시작이 거창하지 않았고 정적 페이지를 만들기 위해 만들어졌다. 하지만 시간이 지나며 JS는 어플리케이션을 위한 언어로 성장했습니다. 또한 JavaScript로 서버를 구현할 수 있어지고 이젠 어엿한 하나의 언어로써 모든 방향에서 빛을 낼 수 있게 되었다. 하지만 이런 성장이 있으면서 많은 문제가 발생했습니다. 대표적으로 JavaScript는 동적 타이핑을 지원하며 런타임 이후에 결과값을 도출하는 등 단점이 두각되었습니다. 이런 와중 MS측에서 TypeScr..
-
[JavaScript] 논리연산자를 사용할 때 주의사항JavaScript 2023. 3. 10. 21:47
개요 React Docs의 Tic-Tac-Toe예제를 공부하면서 재남님(Roy)이 알려주신 논리연산자를 사용할 때 주의사항을 공부해봅시다. TL;DR JavaScript의 &&연산자는 falsy한 값을 "반환"해주며 만약 값을 비교해야 한다면 falsy한 값보다 boolean값을 비교하여 제대로 된 결과를 반환받자 논리연산자? JavaScript에서 논리연산자는 세 종류가 존재합니다. || (OR) && (AND) ! (NOT) 이번에 알아볼 논리 연산자는 &&(AND)에 관해서 알아봅시다. &&(AND) 연산자 JavaScript에서 &&를 사용한다면 AND연산자를 만들 수 있습니다. &&연산자는 모든 Boolean 피연산자가 true가 되었을 때 해당 피연산자의 집합은 true가 됩니다. - MDN ..
-
[React] React Docs해석하면서 공부하기 2장 Tic-Tac-ToeReact 2023. 3. 8. 01:52
개요 React Docs의 Tic-Tac-Toe를 만들어보면서 React에 대한 내용을 공부하며 스스로 정리해보자. 1. 초기 코드 필요한 파일은 App.js, index.js, styles.css과 pulic폴더가 필요하다. 참고 : https://codesandbox.io/embed/cold-dream-wjwuw8?fontsize=14&hidenavigation=1&module=/App.js&editorsize=70&view=split cold-dream-wjwuw8 - CodeSandbox cold-dream-wjwuw8 using react, react-dom, react-scripts codesandbox.io App.js 에서는 컴포넌트를 생성합니다. React의 컴포넌트는 사용자 인터페이스의..
-