분류 전체보기 검색 결과

해당 글 777건

box-shadow에 대해서

box-shadow: h-shadow v-shadow blur spread color | inset | initial | inherit ; h-shadow 가로방향의 그림자 위치(position)입니다. 음수는 좌측, 양수는 우측방향입니다. v-shadow 세로방향의 그림자 위치(position)입니다. 음수는 위쪽, 양수는 아랫쪽입니다. blur (optional) 흐릿한 효과(blur)의 길이입니다. spread (optional) 그림자를 확장하는 크기(size)입니다. 이 값이 클 수록 원본 그림자보다 설정값만큼 그림자가 커지며, 음수도 사용가능합니다. (음수는 그림자가 작아지겠죠?) color 그림자의 색상입니다. inset (optional) 이 속성을 설정하면, 그림자가 테두리의 안쪽으로 생..
웹 전반, 브라우저/HTML, CSS 2020. 3. 16. 03:14

Container + Presenter Pattern 디자인 패턴

함수형 컴포넌트와 Hook이 사실상 표준이 되면서 이 패턴은 구식이 되었다. 종종 컴포넌트 하나가 너무 커질 때 이 패턴으로 구분하기도 하지만 일반적으로 사용되지는 않는듯. container presenter pattern 코딩 패턴이다. express에서 MVC design pattern에 근거해서 코딩 했듯이 React.js에서 사용하는 코딩 패턴이다. container 컴포넌트와 presenter 컴포넌트를 분리하는 것이 포인트이다. container 컴포넌트는 논리 담당이다. data와 api, 논리 구조, state(상태값)를 갖고 있다. 클래스 컴포넌트이다. presenter 컴포넌트은 시각 담당이다. data를 보여준다. state도 없고 클래스도 없는 함수형 컴포넌트가 주이다. 다음과 같이..
React, Next, Redux/⚛ React.JS 2020. 3. 16. 01:43

[IT 실무용어] 웹 프로젝트 용어

프로젝트 관련 용어 SB (스토리 보드) 사이트 제작에 필요한 정보가 담겨있는 화면 설계서. 주로 기획자가 작성함. 화면 설계서라고도 부름. 기능, 페이지 이동 등을 정리해놓음 WBS(Work Breakdown Structure) 스케쥴. 디자인 x일, 게시판 기능 x일, SB완성 x일과 같이 모든 과업을 스케쥴링함. 어떤 일을 언제까지 해야 하는지에 대해 알 수 있으며 프로젝트에 참여하는 인원 모두가 가지고 있어야 함. 보통 엑셀이나 구글 스프레드 시트를 이용해 작성하고 공유함 as-is / to-be as-is는 개선 되기 전의 현재 상태, to-be 개선된 후의 상태를 말한다. CMS(content management system) 전문지식없이 사이트 운영 관리를 위한 툴. 코딩을 몰라도 웹을 관리..
미분류/Tip 2020. 3. 15. 03:59

Grid 살펴보기

이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 두번째 포스트입니다.혹시… studiomeal.com 일반적으로 grid, 즉, 격자 무늬라고 하는 것을 상상하면 grid 속성을 이해하기가 쉬워집니다. 전체적인 레이아웃은 Grid로 잡고, 부분 부분에 Flex와 Grid를 적절히 사용해 주는 게 일반적입니다. Grid와 Flex를 조화롭게 활용하는 것이 좋은 레이아웃을 만들어 냅니다. Flex가 가로(row) 혹은 세로(column)를 기준으로 item들을 정렬한다면 Grid는 가로와 세로를 모두..
웹 전반, 브라우저/SCSS, CSS-flex-grid 2020. 3. 13. 03:46

(Window) MySQL 8 설치 및 환경변수 설정과 접속

MySQL 설치 및 환경 변수 설정 MySQL :: MySQL Community Downloads The world's most popular open source database dev.mysql.com MySQL 설치방법 설치방법 http://www.mysql.com/downloads/ Downloads -> Community -> MySQL Community Ser... blog.naver.com MySQL 8.0.15 다운로드 및 설치방법 (Windows 10) 광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' MySQL 8.0.15 다운로드 및 설치방법(Windows 10) https://www.mysql.com/ MySQL 홈페이지 주소입니다. https://dev.mysql.com/do..
DB, ORM/🧊 MySQL 2020. 3. 12. 22:29

sequelize ORM를 이용한 MySQL 활용

ORM는 우리가 사용하는 프로그래밍 언어를 SQL문으로 변환해준다. python의 경우 장고 ORM, node.js 에는 type ORM, 시퀄라이즈(sequelize) 등이 존재한다. SQL문을 작성하지 않고 평소 하던 JS나 python으로 DB를 제어할 수 있어서 편하다. 그러나 ORM에 너무 의존하는 것은 좋지 않다. ORM에 문제가 생기거나 속도가 중요해질때는 SQL을 활용해야 한다. 결론은 ORM과 SQL 둘 다 배워야 한다는 것이다. sequelize 설치 npm i sequelize npm i -g sequelize-cli // sequelize를 터미널에서 사용하게 해줌 npm i mysql2 // mysql 사용을 위해 설치 sequelize 실행하기 sequelize init conf..
DB, ORM/🧊 MySQL 2020. 3. 12. 18:46

EJS 뷰 엔진 사용하기

ejs 설치 및 뷰 엔진 설정 npm i ejs // app.js app.set("views", path.join(__dirname, "views")); app.set("view engine", "ejs"); ejs 사용 와 , 를 잘 구별해야 합니다. 그 외엔 기존 HTML과 사용법이 완전히 똑같습니다. 변수 정의 및 활용 내부에 js를 입력합니다. 여기에서 변수 정의도 가능합니다. 활용은 과 같이 활용합니다. 렌더링 함수로부터 전달받은 변수도 이런 방식으로 사용 가능합니다. if else 내부에 js를 입력한다는 것을 이용하면 편리하게 작성할 수 있습니다. 여기서 포인트는 문법적 연속성과 상관없이 매 줄마다 를 추가해줘야 한다는 것입니다. 처음에는 굉장히 번거롭지만 쓰다보면 편해집니다. for문 th..
Node, Nest, Deno/🚀 Node.js (+ Express) 2020. 3. 12. 05:33

PUG 뷰 엔진 마스터하기

mixin views > layouts > partials에서 일종의 모듈을 만들어서 재활용한 경험이 있을 것이다. mixin도 이와 유사하다. 다른 정보지만 같은 형식을 가진 것들(대표적으로 DB records)을 캡슐화한다. 정리하자면 mixin은.. darrengwon.tistory.com 위 내용을 훑어보고 이해해보자 뷰 엔진 설정 npm i pug app.js에서 다음과 같이 설정합니다. // app.js import path from "path" // view engine setup app.set("views", path.join(__dirname, "views")); app.set("view engine", "pug"); 우선 app.set은 https://expressjs.com/en/ap..
Node, Nest, Deno/🚀 Node.js (+ Express) 2020. 3. 12. 03:41

404 NOT Found, Error 처리 미들웨어

Express FAQ FAQ How should I structure my application? There is no definitive answer to this question. The answer depends on the scale of your application and the team that is involved. To be as flexible as possible, Express makes no assumptions in terms of structure. expressjs.com 라우터를 다 찾았는데도 요청한 내용이 없다면 서버가 죽는다. 때문에 404를 처리하는 미들웨어(라우터)를 만들어야 한다. (이 포스팅의 주제와는 관련 없지만 기억하자. 라우터도 미들웨어다!) 일반적인 app..
Node, Nest, Deno/🚀 Node.js (+ Express) 2020. 3. 12. 00:40

★ express의 app.js 살펴보기

바닐라 node에 대한 지식이 전무했을 때 적은 express 관련 글이다. 한 번 훑고 express를 공부해보자. Express에서 간단한 server 만들기 var express = require("express"); var app = express(); PORT = 4000; const handleListening = () => { console.log(`Listening on: http://localhost:${PORT}`); }; app.listen(PORT, handleListening); requi.. darrengwon.tistory.com express-generator 노마드 코더에서 youtube-clone에서는 다음과 같이 기본 폴더 구조를 생성했다. controllers에서 서버..
Node, Nest, Deno/🚀 Node.js (+ Express) 2020. 3. 10. 22:24