Thief of Wealth
BEM이란? (What is BEM)
개발/Web Programming 2019. 10. 3. 19:47

https://medium.com/witinweb/css-%EB%B0%A9%EB%B2%95%EB%A1%A0-1-bem-block-element-modifier-1c03034e65a1 BEM 이란 웹프로그래밍에서 개발, 디버깅, 유지보수를 위하여, CSS선택자의 이름을 가능한 한 명확하게 작명하는 것이 목표이다. 소문자, 숫자, 하이픈, 언더바 기호만을 사용한다. 3가지 개념을 알고 접근하도록 하자. - 블록 (Block): 재사용할 수 있는 기능적으로 독립적인 페이지 구성요소. HTML에서 블록은 class속성으로 표시된다.블록은 환경에 영향을 받지 않아야 한다. ex) header, menu... - 요소 (Element): 블록안에서 특정 기능을 담당하는 부분이다.block__element 처럼 더블..

Pug 쓸때 TIP
개발/Web Programming 2019. 10. 2. 10:00

Pug 는 html을 좀 더 예쁘게, 편리하게 쓸 수 있도록 도와주는 언어라고 할 수 있다. 1. 태그가 필요없다. 2. div.class_name은.class_name으로 쓰기 가능하다. 3. 부모 자식관계는 indent로 표시한다.doctype htmlhtml head 4. vsCode에서 자동완성을 지원하지 않는다. 5. 링크 같은 경우는.yesa(href="#", attribute="123") 링크 같이 표현한다.각 속성을 ()로 감싸며, 콤마(,)로 구별한다. 6. Pug내에서 자바스크립트를 쓸 수 있다.span.footer__text #{siteName} #{new Date().getFullYear()} © 7. Pug에 Js에서 쓰던 인자를 전달 할 수 있다. 지역변수사용 : express ..

FontAwesome 무로 CDN 링크 !
개발/Web Programming 2019. 10. 2. 09:27

https://www.daleseo.com/font-awesome/ 해당 코드는 pug용입니다. fontawesome 쓰는 방식이 변경되어서 script형으로 쓰려헀는데, 아이콘이 제대로 표시되지 않아 아래의 방식을 쓰면 잘 되는 것을 확인했습니다. link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU", crossorigin="anonymous")

express view engine바꾸기
개발/Web Programming 2019. 10. 2. 08:43

Pug를 사용하여 View를 만들때, express의 view engine을 pug로 바꿔서 자동으로 인식되게 만들어주는 것이 좋다. 만약 const app = express(); app.set("view engine", "pug"); 로 설정해 줬다면, package.json과 같은 레벨 폴더 ./view 폴더에 있는 pug를 자동으로 인식할것이다. controller에서 (req, res) => {res.render("pug_main")} 해주면, 자동으로 view폴더에있는 pug_main.pug 파일을 웹사이트에 렌더링 할 것이다. ? 근데 다른 레벨의 디렉토리에 view폴더를 만들고 싶다면? 모든 소스파일이 src 폴더 내에 있다면 (index.js 도 포함) import path from "pa..

cookieParser와 bodyParser는 무엇인가?
개발/Web Programming 2019. 10. 2. 08:34

- cookieParser npm install cookie-parser cookie parser는 cookie를 전달받아서 사용할 수 있도록 만들어주는 middleware이다.사용자 인증 같은 곳에서 쿠키를 사할 때 사용해야 하기 때문. - bodyParserbody Parser가 없다면 form에서 post로 전송한 body정보를 볼 수가 없음.npm install body-parser body parser는 사용자가 웹사이트로 전달하는 정보들을 검사하는 middleware이다. request 정보에서 form이나 json 형태로 된 body를 검사한다. const app = express(); app.use(bodyParser.json());app.use(bodyParser.urlencoded({ ..

gitignore 파일로 git tracking 제거하기
개발/Web Programming 2019. 10. 1. 15:17

https://github.com/github/gitignore/blob/master/Node.gitignore 위 양식또는 원하는 파일을 설정된 Git 폴더의 최상위 .gitignore에 넣어준다. 그러면 vscode왼쪽 청진기 같이 생긴곰이 300몇개에서 3개로 줄것이다.

Node Js에 대한 직관적인 해석
개발/Web Programming 2019. 10. 1. 10:29

" 브라우저 밖의 JavaScript " node 치면 콘솔창에서도 javaScript를 사용할 수 있음 (일부 예외 alert같은거) javascript는 원래 브라우저에 종속되어있었는데, nodejs가 탄생함으로써 그 관계를 벗어날 수 있게됨.

WebApp과 Website차이
개발/Web Programming 2019. 10. 1. 10:27

https://www.quora.com/What-is-the-difference-between-a-web-application-and-a-web-site -WebSite Websites are basically collections of web pages. You access them using a browser. You're basically just supposed to read and look at everything that's on a website, and that's the majority of your experience as a user. When you read the content on a website, your goal is to learn something and to absor..

profile on loading

Loading...