분류 전체보기 검색 결과

해당 글 777건

npm (Node Package Manager) 개론

1. npm이 뭔가 1.1. package.json 1.2. package-lock.json과 node_modules 1.3. npm install 2. semVer가 뭔가 3. npm 명령어 4. npm 패키지 배포하기 1. npm이 뭔가 node.js를 설치하면 딸려오는 npm에 대해서 알아보자. 지금까지 별 생각 없이 다음과 같은 코드를 입력하여 패키지를 설치해왔다면 이번 기회에 알아 보는 것도 나쁘지 않다. (제가 그렇습니다. 예..) npm install express npm install babel npm에서 쇼핑하듯 패키지를 골라 가져다 자신의 프로젝트에 적용하는 방식이 흔하게 사용되고 있다. 이게 node가 인기있는 이유이다. 직접 다 구현할 필요없이 남들이 만든 패키지를 편하게 가져다 쓰..
Node, Nest, Deno/🚀 Node.js (+ Express) 2020. 3. 10. 17:11

Vanilla Node로 REST API 살펴보기

📌 REST API (REpresentiational State Transfer) 서버에 자원(회원 정보, 댓글 등)을 요청할 때는 보통 주소를 통해 들어옵니다. 예를 들어 /user로 접속하면 사용자 정보에 대한 자원을 요청하는 것이라고 할 수 있습니다. 구체적으로, 서버에 정보를 요청하는 방식으로 와 같이 요청의 방식을 구조화하는 방식을 REST API라고 합니다. 그리고 REST API를 사용하는 서버를 RESTful하다고 합니다. REST API의 규칙으로 자원이 명사형이어야하는 등의 규칙이 존재하나 이번 포스팅의 의의가 REST API가 무엇인지 정도로 알고 넘어가자는 것이므로 융통성있게 작성하겠습니다. 프론트엔드와 백엔드가 소통하는 엔드포인트, RESTful API 이번 포스팅에서는 프론트엔드..
Node, Nest, Deno/🚀 Node.js (+ Express) 2020. 3. 10. 14:29

[Git] git 게임으로 배우기

Learn Git Branching An interactive Git visualization tool to educate and challenge! learngitbranching.js.org 책이 안 읽힌다면 game으로 git을 익혀보자. 야심한 새벽 맥주 한 잔 하면서 해보면 좋다 한 블로거가 문제 해설 비슷한 걸 올려 놓았으니 설명이 이해가 가지 않는다면 참조하자. '프로그래밍 노트/GIT' 카테고리의 글 목록 지식을 공유하는 장소 cornswrold.tistory.com
Ops, Infra, etc/🐙 Git 2020. 3. 9. 23:17

브라우저가 줄어들면 말줌임표로 대체하기

본래 CSS 패턴을 외워두는 것은 별로 좋은 일은 아니지만 자주 쓰는 속성은 외워두는 것도 나쁘지 않다. overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow를 내리지 않고 숨기고 text-overflow는 말줄임표(...)로 대체한 후 white-space를 nowrap으로 주어 줄바꿈이 없게 하자. CSS / white-space / 공백 처리 방법 정하는 속성 개요 white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 white-space: normal [...] www.codingfac..
웹 전반, 브라우저/HTML, CSS 2020. 3. 9. 02:36

img 말고 figure, div 태그 내 style로 이미지를 조작하자

img태그를 이용해서 움직이고 자르는 작업은 굉장히 불편하다. img 태그 하나만 망치면 모르겠는데 관련된 태그가 다 어긋나는 등 굉장히 짜증나는 상황도 발생한다. 이럴 경우 필자는 figure 태그 내부에 background-image를 style로 줌으로써 해결한다. background-size, background-position, background-repeat 등을 사용할 수 있기 때문이다. img에서 벗어나자! .user-photo { width: 50px; height: 50px; border: 1px solid grey; border-radius: 50%; background-color: gold; background-repeat: none; background-position: cente..
웹 전반, 브라우저/HTML, CSS 2020. 3. 9. 02:04

Flexbox 제대로 활용하기 (flex-grow, flex-shrink, flex-wrap etc)

Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누군가 나의 공부를 이끌어주면 좋겠다.’라고 생각하고 계신다면, 아래의 배너의… studiomeal.com 1분 코딩에서 아주 잘 알려주고 있다. 나도 이번 기회에 Flex를 다시 배웠다. 이미 알고 있었던 내용을 제외하고 새로 배웠던 내용만 정리해보자. 일단 자주 사용하는 속성을 전부 적어봤다. .container { // 기본적인 설정 display: ..
웹 전반, 브라우저/SCSS, CSS-flex-grid 2020. 3. 8. 19:14

Responsive Web 반응형 웹 제작 플로우

이번에 랜딩페이지를 만들면서 반응형 웹을 배워야했다. 잘 알려주는 곳이 없어서 혼자 깨져가면서 익힌 제작 흐름을 옮겨본다. 다음 블로그 포스팅을 일독 후 시작해보자. 반응형 CSS 작성 가이드 : hackYa Korea 반응형 CSS 작성 가이드 hackya 2015년 09월 06일 CSS, Hidden § *이 내용은 Kopress 스터디 테마를 토대로 워드프레스 테마제작에 관해 습득하시려분들에게 알리는 글 입니다. 또 Kopress 스터디 테마가 어떻게 작성되었는지를 알려드리는 글 이기도 합니다. 사실 요즘 반응형이 아닌 css 가 없으니 “반응형” 이라고 하는 것 자체가 좀 우습긴 합니다. 보편적인 반응형 css 작성 기법과 실무경험을 통해 제가 터득한 저만의 방식 hackya.com rem의 경우..
웹 전반, 브라우저/HTML, CSS 2020. 3. 8. 05:02

Vanilla Node로 간단한 웹 서버 만들기

express와 같은 프레임워크가 아닌 순수한 node로 웹 서버를 만들어보자. 딱히 실용성이 있어서 만들기보다는 node에 대한 지식을 늘리기 위함이며 여기서 구현한 쿠키, 세션 등은 실무에서 사용하는 것이 아니라 어떠한 원리인지 설명하기 위해 간략하게 작성한 것이다. 실무에서는 다른 사람이 구현한 모듈을 사용하는 것이 대부분이다. https://stackoverflow.com/questions/41786986/vanilla-node-vs-express Vanilla Node vs Express I'm wondering if some of you veterans could provide some guidance to some of us noobs. Is there any advantage to writ..
Node, Nest, Deno/🚀 Node.js (+ Express) 2020. 3. 7. 21:17

[Buffer] 청크, 버퍼, 스트림

node.js에서 fs 모듈을 이용하면 종종 buffer를 마주칠 때가 있다. 예를 들면, 최근에 진행한 프로젝트에서는 이미지 리사이징을 해야할 일이 생겼는데 이미지나 비디오를 처리하려면 stream과 buffer에 대해서 알고 있어야 했다. 딱히 node에만 적용되는 이야기는 아니다. Flutter에서는 Streambuilde를 이용해 stream을 핸들링한다. https://darrengwon.tistory.com/125 Node.js가 제공하는 내장 객체, 변수, 모듈 cf) node.js에는 window 전역 객체가 없다. global이 있다. __filename, __dirname console.log(__filename); // 실행 중인 파일의 경로 console.log(__dirname);..
🌐 Network/🔗 HTTP 2020. 3. 7. 17:49

Node.js가 제공하는 내장 객체, 변수, 모듈

cf) node.js에는 window 전역 객체가 없다. global이 있다. __filename, __dirname console.log(__filename); // 실행 중인 파일의 경로 console.log(__dirname); // 실행 중인 경로 process 객체 console.log(process.arch); // x64, x32 console.log(process.version); // node.js의 버전 console.log(process.platform); // window, linux, mac... console.log(process.pid); // 프로세서 id console.log(process.uptime()); // node.js를 실행한 뒤 얼마나 시간이 지났나 consol..
Node, Nest, Deno/🚀 Node.js (+ Express) 2020. 3. 7. 01:42