Programming310 [Typescript] 타입스크립트 프로젝트 굳이 타입스크립트 프로젝트 생성에 대해 따로 다루는 이유는 기존에 프로젝트들은 그냥 만들면 되었지만 타입스크립트 프로젝트는 약간의 설정이 필요하기에 소개해드리고 넘어가려고 합니다. 1. 타입스크립트 프로젝트 생성 타입스크립트는 Node.js 플랫폼을 기반으로 작동하는 언어이므로 npm init을 통해서 package.json을 만들어야합니다. 따라서 작업 공간을 만들고 npm init 명령을 통해서 package.json 파일을 생성해주세요. npm init 다음으로는 타입스크립트 컴파일러의 설정 파일이 필요합니다. 이름은 tsconfig.json으로 이 역시도 명령어를 통해 간단하게 생성할 수 있습니다. tsc --init 이 명령으로 실행된 json파일을 보면 여러 옵션들이 주석처리되어있어서 필요한 .. 2021. 12. 27. [React] useState의 비동기적 동작 1. setState의 비동기적 동작 함수형 컴포넌트로 간단한 카운터를 만들었습니다. import React, {useState} from 'react'; const Counter2 = () => { const [count, setCount] = useState(0); const onClick = () => { setCount(count+1); console.log('click'); setCount(count+1); console.log('click'); } return ( {count} + ); } export default Counter2; 실행해보기전에 동작을 예측해보자면, state의 count가 두 번 증가해서 결과적으로 버튼을 누르면 카운트가 2씩 증가할 것 같습니다. 그럼 실행해볼까요? 우선.. 2021. 12. 27. [Typescript] 타입스크립트 1. 타입스크립트 Typescript 타입스크립트는 마이크로소프트에서 2012년도에 발표한 언어입니다. 이름에서 느껴지듯이 자바스크립트를 기반(자바스크립트는 자바기반이 아니지만요...)으로 정적 타입 문법을 더한 언어입니다. 그래서 자바스크립트 유저라면 간단하게 배울 수 있고 자바스크립트의 타입으로부터 오는 문제점들을 해결해주어서 갈수록 시장에서 한 자리씩 차지하고 있는 언어입니다. 앵귤러2 버전에선 정식으로 타입스크립트를 채택했고, React.js나 Vue.js에서도 타입스크립트를 사용하는 것을 심심치 않게 볼 수 있습니다. 저는 학부를 거쳐오며 C, C++, JAVA, Javascript, Python, Kotlin 등 다양한 언어를 접했는데 이 자바스크립트가 가진 유연함(변수 선언이나 구조 등의)에.. 2021. 12. 24. react-icons 이번에 소개하는 것은 기술은 아니고 깔끔한 아이콘 디자인을 제공하는 라이브러리를 하나 소개해드리려고합니다. 1. react-icons https://react-icons.github.io/react-icons React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa react-icons... 2021. 12. 16. [React] 리액트 라우터 이번에는 리액트 라우터 라이브러리를 통해서 SPA가 적용되는 것을 간단하게 알아보려고 합니다. SPA에 대해서는 아래 링크 설명을 참조해주세요. 2021.12.09 - [Programming/CS] - SPA, Single Page Application SPA, Single Page Application 1. SPA SPA, Single Page Application은 하나의 페이지로 이루어진 웹 어플리케이션 또는 웹 페이지를 말하는 용어입니다. 그동안은 html을 배워오고 간단한 웹 사이트를 하나 만들면서 보통 여러개의 페이 bamtory29.tistory.com 1. 리액트 라우터 라이브러리 설치 SPA를 구현하기 위해서는 라우터를 이용해야하는데, 리액트에서는 공식적으로 라우터를 지원하고 있지 않습니.. 2021. 12. 11. SPA, Single Page Application 1. SPA SPA, Single Page Application은 하나의 페이지로 이루어진 웹 어플리케이션 또는 웹 페이지를 말하는 용어입니다. 그동안은 html을 배워오고 간단한 웹 사이트를 하나 만들면서 보통 여러개의 페이지로 구성된 홈페이지를 만들었습니다. 그래서 페이지를 요청하게 되면 서버에서 페이지에 담긴 모든 리소스들을 처리해서 html문서로 돌려주고 새로고침하게 됩니다. 이 방식이 사용자도 늘어나고, 웹 페이지에서 표시하는 정보들이 많아지자 서버쪽에 큰 부담이 가게 되었습니다. html을 계속 요청하게되면 UI의 사용 상태 유지가 어렵고, 바뀌지 않는 부분까지도 다시 요청해서 보여주기 때문에 로딩이 길어진다는 문제점들을 수반하고 있었습니다. 이런 문제를 해결하고자 SPA방식이 등장했습니다. .. 2021. 12. 9. 이전 1 ··· 6 7 8 9 10 11 12 ··· 52 다음 300x250
