Archive: 2019

2019
backendnode

Node version manager(nvm) 설치 및 사용하기

시작하기노드기반의 개발툴들이 많아지면서 상위 버전의 노드를 설치해야 하는 경우가 있습니다.NVM은 컴퓨터에 다양한 버전의 노드를 설치할 수 있게 해주는 툴입니다. 설치하기nvm gihub 링크터미널을 열어서 다음을 입력해 줍니다. 1sudo curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/ins

frontendreact

React-electron 설치 및 사용하기

시작하기데스크톱 어플리케이션을 제작할 수 있는 electron을 사용해보도록 하겠습니다.이 프레임워크를 사용한 프로젝트로는 깃허브의 아톰, 마이크로소프트의 비주얼 스튜디오 코드, 소스 코드 편집기, 그리고 라이트 테이블 IDE, 또 디스코드 채팅 서비스를 위한 프리웨어 데스크톱 클라이언트 등 다양한 데스크톱 어플리케이션을 제작할때 사용하고 있습니다. use

DevTILAlgorithm

Algorithm 버블(bubble) 정렬

시작하기버블 정렬은 수열을 정렬하는 알고리즘중 하나입니다.수열의 오른쪽/왼쪽 끝에 두가지를 두고 좌우에 있는 숫자를 비교합니다. 예제 숫자들: [1, 2, 3, 9, 3, 4, 1, 3, 7, 5]오른쪽 끝의 5와 7을 비교합니다. or 왼쪽 끝의 1과 2를 비교합니다.비교한 결과 오른쪽의 숫자가 작으면 왼쪽과 바꿉니다. [1, 2, 3, 9, 3, 4,

style

Tailwindcss 사용법

시작하기저번 포스트에서 Tailwindcss의 초기 설정을 완료햇습니다.다음으로 사용법을 알마 보도록 하겠습니다. Tailwindcss는 정말로 사용하기 쉽습니다.부트스트랩을 사용해보신 분은 익숙하실겁니다. 클래스에 이름을 넣어 주기만 하면 끝! 정말 간편합니다.부트스트랩의 경우 기본 스타일이 정해져 있지만, tailwind의 경우 css를 축약형태로 클래

style

React Next.js에 Tailwindcss 적용하기

시작하기부트스트랩과 흡사한 ui 프레임워크 입니다.Tailwind CSS는 사용자 지정이 가능한 저수준 CSS 프레임 워크로, 재정의를 위해 싸워야하는 성가신 스타일없이 맞춤형 디자인을 작성하는 데 필요한 모든 빌딩 블록을 제공하고 있습니다. 대부분의 ui 프레임워크의 경우 미리 디자인 되어 있는 구성요소가 있어 처음에는 빠른 장점이 있습니다.하지만 사이트

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