Home

2019
Js / Tstypescript

Typescript v3.7 특징

시작하기Kotlin이나 Swift등의 언어에서는 사용중인 문법으로,3.7버전을 통해 타입스크립트에서도 Optional Chaining을 지원합니다. Optional Chaining서버에서 데이터를 가져오는 상황이라고 가정하고 예시를 들어 보겠습니다.data: { animal:{ name: 'dog' } } 를 반환할 예정입니다.data는 un

style

styled-components 리액트 컴포넌트 스타일링

시작하기styled-components는 리액트 CSS-in-JS 관련 라이브러리입니다.css를 자바스크립트 파일안에 작성하는 형태입니다.기존 css의 경우 웹사이트를 불러올때 모든 css 로딩합니다.하지만 styled-components의 경우에는 컴포넌트가 실행 될때만 스타일을 로드합니다.사용하지 않는 스타일은 표현하지 않습니다. 설치npm instal

frontendreact

Nextjs 에서 typescript 적용하기

시작하기서버사이드렌더링(server side rendering, SSR)를 손쉽게 구현할수 있는 프레임워크입니다.Typescript를 적용해서 사용해보도록 하겠습니다. 초기설정두가지 방법으로 설정을 할 수 있습니다. basic12345mkdir hello-nextcd hello-nextnpm init -ynpm install --save react reac

DevTILCS

TCP / UDP

시작하기라우터를 설정하거나 방화벽 소프트웨어를 구성하거나 VPN기능을 살펴볼때 TCP 및 UDP에 대해 들어본 적이 있을 것입니다.TCP와 UDP의 차이점은 무엇일까요?차이점을 이해하기 위해서는 먼저 TCP와 UDP의 특징을 알아야합니다. TCP전송 제어 프로토콜 (Transmission Control Protocol, TCP)는 컴퓨터가 인터넷을 통해

frontendreact

React-helmet을 이용한 검색 최적화

시작하기검색 최적화를 위한 방법으로 ssr, nextjs, helmet등이 있습니다.이번 포스트에서는 helmet에 대한 내용을 다루도록하겠습니다.헬멧은 일반 HTML 태그를 사용하여 일반 HTML 태그를 출력합니다.매우 간단하고, React 초보자에게 친숙합니다.리액트 헬멧 Github 설치npm install --save react-helmet @typ

frontendreact

React Element 복제하기

시작하기j쿼리의 경우 clone을 사용하여 간단하게 카피를 할 수 있습니다.리액트에서는 어떻게 해야하는지 알아보도록 하겠습니다. Element를 복제해보도록 하겠습니다. 사전준비복제를 하기위해 복제 대상인 element를 만들어 줍니다. App.tsx123456789101112import React from 'react';const App: React.FC

frontendreact

React-router-dom 적용하기

시작하기리액트 싱글페이지 SPA(Single page application)에서 다른페이지로 이동하고 싶을때 사용하는 라이브러리입니다.create-react-app에서 라우터를 사용해 보겠습니다. 설치npm install react-router-dom @types/react-router-dom 라우터 설정index.tsx12345678910111213imp

style

리액트에 부트스트랩(bootstrap) 사용하기

#시작하기부트스트랩은 ui프레임워크로 손쉽데 ui디자인을 구현할수 있습니다다React프로젝트에서 부트스트립을 사용해보도록하겠습니다.프로젝트 설치하기npm install react-bootstrap bootstrap로 패키지를 설치 합니다. Stylesheets중요 - 최상단의 루트파일인 src/index.js 또는 App.js 파일에 다음 스타일을 추가해

frontendreact

React 프로젝트 GitHub Pages로 배포하기

시작하기리액트 프로젝트를 github pages를 이용해서 배포해보도록 하겠습니다.프로젝트 생성방법은 이전포스트(create-react-app 타입스크립트 사용하기)를 참고하면 됩니다. 깃헙에서 저장소를 하나 만듭니다.저는 react-deploy-pages라는 이름의 저장소를 만들었습니다. create-react-app react-deploy-pages -

frontendreact

React+Express+Socketio를 이용한 채팅구현

시작하기socket은 실시간으로 사용자와 상호작용을 하는 경우 사용합니다.가장 대표적인 예시로 채팅을 들수있습니다. Socket.io하나의 서버에서 정보를 내보내고 해당 정보를 다수의 클라이언트에서 받습니다. 초기 설정백엔드 서버를 먼저 설정하고 리액트 프로젝트를 설정하겠습니다. Node.js + Express터미널1234567mkdir socket-bac