목록분류 전체보기 (45)

자니노트

Javascript Template Engine - Handlebars.js 개념 및 사용 방법

Handlebars.js는 자바스크립트에서 사용하는 인기 있는 템플릿 엔진입니다. 이것은 HTML과 자바스크립트를 분리하여 애플리케이션을 보다 유지 관리하기 쉽게 만들어 줍니다. Handlebars.js는 Mustache 템플릿 엔진의 확장이며, Mustache와 호환됩니다. Handlebars.js의 기능 템플릿: Handlebars는 템플릿을 사용하여 동적 HTML을 생성합니다. 템플릿은 HTML과 Handlebars 표현식을 포함하는 문자열입니다. 표현식: Handlebars 표현식은 {{expression}}와 같은 형태로 작성됩니다. 표현식은 HTML 파일 내에 삽입됩니다. Handlebars는 데이터 객체를 사용하여 표현식을 교체합니다. 블록 표현식: 블록 표현식은 {{#block}} ... ..
자바스크립트 2022. 8. 2. 10:02
NPM + Webpack 을 이용한 퍼블리싱 프로젝트 구성

NPM 설치, Webpack 설치, Webpack Dev Server 설치, SASS 설치, 구동.. 등등... https://webpack.js.org/guides/getting-started/ Getting Started | webpack Learn how to bundle a JavaScript application with webpack 5. webpack.js.org https://hmk1022.tistory.com/entry/webpack-%EA%B0%9C%EB%85%90%EA%B3%BC-%EC%A0%81%EC%9A%A9%EB%B0%A9%EB%B2%95 webpack 개념과 적용방법 webpack이란? - 모듈 번들링이라고 한다. - html 파일에 들어가는 JS파일들을 하나의 파일로 만들어주..
Frontend/퍼블리싱 2022. 7. 28. 15:34
유튜브(YouTube) 동영상 Iframe 삽입 방법

https://developers.google.com/youtube/iframe_api_reference iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API | Google Developers Embed a YouTube player in your application. developers.google.com https://mslilsunshine.tistory.com/98 youtube player API 적용하는 방법 1. 단순한 iframe 태그로 삽입하는 방법. => 별로 권장되진 않는다. 사용자의 자유도가 좀 떨어짐. 2. youtube API를 이용해 플레이어를 삽입한다. => youtube DEVELOPERS 사이트에서 플레..
Frontend/퍼블리싱 2022. 7. 26. 15:11
[CSS] BEM(Block Element Modifier) 방식

https://nykim.work/15
Frontend/퍼블리싱 2022. 7. 26. 08:49
VSCode (Visual Studio Code) Plugins 추천

[참조] https://usingu.co.kr/frontend/vscode/git%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%9C%A0%EC%9A%A9%ED%95%9C-vscode-%ED%99%95%EC%9E%A5%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8-extension-%EC%B6%94%EC%B2%9C/ [VSCode] Git을 위한 비주얼스튜디오 확장프로그램 ( extension ) 추천 - VSCode | UsingU Git을 온전히 GUI 모드에서 사용할 수 있도록 지원해주는 VSCode 확장프로그램(extension)이 있습니다. 그중 제가 유용하게 사용하는 Git 관련 확장프로그램(extension)을 소개하겠습니다. usingu.co.kr https:/..
개발 IDE & 에디터 2022. 7. 25. 10:57
Wappalyzer -웹페이지 구성 파악, 프레임워크, 라이브러리

https://codedragon.tistory.com/7273 Wappalyzer - Chrome 확장 프로그램 Wappalyzer 방문한 사이트에 적용된 기술, 라이브러리 또는 웹 서버 등 주요 기술 스펙을 보여주는 크롬 확장 프로그램입니다. https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannf.. codedragon.tistory.com
자바스크립트 2022. 7. 22. 12:54
GitHub + Netlify 를 이용한 웹사이트 배포

https://jsikim1.tistory.com/125 Netlify 를 이용한 누구나 쉽게할 수 있는 웹 사이트 호스팅 사용법! Netlify 를 이용한 누구나 쉽게할 수 있는 웹 사이트 호스팅 사용법! Web Hosting을 할 수 있는 방법, 그리고 웹 호스팅을 할 수 있도록 제공하는 곳은 정말 너무도 많습니다. 그중에서 Netlify 를 jsikim1.tistory.com https://dorudoru.tistory.com/2070 netlify로 나만의 페이지 배포하기 저번에 github로 홈페이지를 만드는 방법을 간단히 설명드렸는데요. 오늘은 netlify로 홈페이지를 만드는 방법을 알아보겠습니다. netlify? 넷리파이라 불리우며 웹사이트를 호스팅해주는 사이트입 dorudoru.tisto..
Frontend/퍼블리싱 2022. 7. 22. 10:50
SCSS 문법 및 CSS 변환 방법

https://www.sassmeister.com/ SassMeister | The Sass Playground! SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading... www.sassmeister.com https://seokzin.tistory.com/entry/SCSS-SCSS-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC [SCSS] SCSS 문법 정리 프로젝트 규모가 커지고 복잡해질수록 순수 CSS의 한계를 많이 느끼게 됩니다. 그래서 SCSS나 CSS-in-JS의 도입은 사실상 필수가 되었습니다. 이 글을 통해 CSS의 문제점을 개선한 SCSS에 대해 알아보 seokzin.tistory..
Frontend/퍼블리싱 2022. 7. 20. 18:15
Prev 1 2 3 4 5 6 Next