Home

2020
frontendsvg

SVG path(패스)

svg 선 명령어<path> 노드에는 다섯 개의 선 명령어가 있습니다. MoveLine 명령어는 두 점 사이에 선을 그리는 역할을 합니다.첫 번째 명령어는 ‘Move To(이동하기)’ 혹은 M 입니다.이 명령어는 두 개의 파라미터로 x와 y 좌표를 받습니다.그리기 커서가 이미 페이지의 다른 곳에 있었더라도 두 점 사이에 점이 그려지지는 않습니다.

frontendsvg

SVG 설명

SVG란? SVG는 Scalable Vector Graphics를 나타냅니다. SVG는 웹에 대한 벡터 기반 그래픽을 정의하는 데 사용됩니다. SVG는 XML 형식으로 그래픽을 정의합니다. SVG 파일의 모든 요소와 속성을 애니메이션으로 만들 수 있습니다. SVG는 W3C 권장 사항입니다. SVG는 DOM 및 XSL과 같은 다른 W3C 표준과 통합되었습니다

frontendreact

React와 momentjs로 타이머 만들기

시작하기리액트와 momentjs를 이용해서 timer를 만들어 보도록 하겠습니다.create-react-app으로 새로운 프로젝트를 만들어줍니다. 1create-react-app timer-app --typescript 구현하기날짜 관리 라이브러리인 momentjs를 설치해주도록 합니다. 1npm install moment @types/moment Ap

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