프론트 개발 블로그

퍼블리싱 환경에서 Pug+SASS+Gulp 를 사용해 보일러플레이트 만들기 Pug(구 Jade) Pug 는 Node.js 및 브라우저용 JavaScript 템플릿 엔진이다. * 초기에 Jade 로 불려졌으나, 상표권 문제로 Pug 로 변경 Package $ npm install pug Syntax Option pug-lintrc.json 를 통해서 option 설정 가능 더보기 { "validateLineBreaks": "CRLF", //모든 줄 바꿈 문자는 일치해야 합니다. "disallowAttributeConcatenation": null, // Pug에는 속성 연결이 포함되어서는 안 됩니다. "disallowAttributeInterpolation": true, //Pug에는 속성 보간 연산자가 ..

https://whimsical.com/ The Visual Workspace | Whimsical whimsical.com Notion에서 마인드맵 사용하기 : 윔지컬(whimsical) Notion에서 플로우차트나 마인드맵을 그려서 사용하고 싶어서 찾아본 툴 Notion이랑 동일한 계정으로 가입한 후 Notion 화면에서 embeds 로 윔지컬 workspace 를 바로 불러올 수 있다. UI가 익숙해서 바로 만들어서 사용하기 쉬움!

웹 크롤링(Web Crawling) 웹사이트, 하이퍼링크, 데이터, 정보 자원을 자동화 방법으로 수집, 분류, 저장 하는 것. 여러 웹 페이지를 돌아다니면서 어떤 데이터가 어디에 있는 지 색인(index)을 만들어 데이터베이스(DB)에 저장하는 역할 크롤링 기술이 악용이 될 수 있는데, Meta 태그의 noindex 를 사용하여 크롤러로 검색 색인 되는 것을 방지할 수 있다. 웹 스크래핑 (Web Scraping) 웹 페이지에서 나타나는 데이터 중에 필요한 데이터만 추출하도록 만들어진 프로그램이다. 은행권에서 요즘 사용되고 있는 통합계좌조회 등이 웹 스크래핑을 이용한다고 볼 수 있다. 스크래핑 자체를 해킹이나 침해로 분류되지 않지만, 해킹과 침해 공격의 시초가 될 수가 있음으로 민감한 정보는 일반 공공 ..

[IOS/Iphone] iOS 에서 키패드 노출 시 하단에 고정시킨 버튼 움직이는 현상 발생 상황 입력 필드가 있고 하단에 Fixed 된 버튼이 있는 경우, 입력 필드를 선택 시 IOS의 경우 하단으로 키보드가 활성화 되고, 그러면서 하단에 Fixed 시킨 버튼의 위치가 계속 변경 되는 현상 해결방안 - 키패드를 제외한 화면의 높이 값을 계산해서 1초 후 버튼의 위치 값 이동 - 입력 필드에서 포커스 아웃 시에 이벤트 반대로 적용 var timeoutID; var onloadHeight = window.innerHeight; $('input[type="text"').on('focusin', function() { var device = getMobileDevice(navigator.userAgent); ..

GA(구글 애널리틱스 / Google Analytics) 구글에서 제공하는 무료 웹 트래킹 툴 구글의 통계 및 머신러닝 기술로 웹/모바일 방문자들의 행동 데이터를 분석하고 마케팅 실적 또는 웹/모바일 사이트의 경험을 개선해줄 수 있도록 도와주는 도구. (무료 이기 때문에 가장 많이 사용 중) 행동 데이터란? 어떤 사용자가 방문하는 지, 어떤 경로를 통해 방문 하는 지, 사이트에서 어떤 행동을 취하는 지에 대한 분석한 데이터 왜 트래킹 툴을 사용하는 가? - 사이트 유입 수 - 친화적인 사이트 UI, UX - 사용자 인사이트(연령, 성별, 위치, 관심사 대한 정보 등 수집) - 어떤 사이트에서 유입하는 지 - 사이트 방문자들이 어떤 컨텐츠를 좋아하는 지 - 사용되는 기기 및 운영체제, 브라우저 정보, 언어..

Gulp 셋팅 다시 함. 이전 버전은 https://maybe-b50.tistory.com/26 파일 구조 dist node_modules src html index.html html_eng img sprite del.jpeg inc bottom.html footer.html header.html js ui.js lib scss component _base.scss _mixin.scss _var.scss vendor _sprite.scss style.scss .gitignore babel.config.js gulpfile.bable.js package-lock.json package.json README.md gulpfile.bable.js // gulpfile.bable.js const { series..

+ 추가 글 티스토리 로그인 문제로 오시는 분들이 많은 것 같아 추가 글 올립니다. 대게 티스토리 로그인이 안되는 경우 브라우저 캐시 문제 입니다. (브라우저에 다른 계정이 이미 로그인 되어 있거나 하는 경우, 사용자는 내가 이미 로그인 되어 있는 지 모름) 크롬 브라우저를 사용하고 계시는 분들은 크롬 브라우저 우 클릭 '새 시크릿 창'으로 사이트에 접근하여 로그인 해보세요! 티스토리 카카오 계정 로그인 문제 때문에 요 몇일 진심으로 화가 났었다. 티스토리 메인 화면 오른쪽 상단에 [시작하기] 버튼을 클릭하면 [카카오 계정 로그인], [티스토리 계정 로그인] 버튼이 나오는 화면으로 이동하게 된다. 해당 페이지에서 [카카오 계정 로그인] 버튼을 누르면, 로그인 페이지가 아닌 블로그 생성 페이지로 이동하게 ..

package.json 작성 중 나타난 에러 String does not match the pattern of "^(?:@[a-z0-9-*~][a-z0-9-*._~]*/)?[a-z0-9-~][a-z0-9-._~]*$". name 에 들어간 대문자때문에 생긴 에러였다. name 작성 할 때 대문자 그리고 띄어쓰기가 허용되지 않기 때문에 소문자로 작성하고 띄어쓰기는 '-' 하이픈으로 대체한다. 참고! package.json 파일에 NPM 규칙을 적용하기 위해 발생하는 에러라고 한다. stackoverflow.com/questions/48694816/vscode-package-json-string-does-not-match-the-pattern

Gulp 작업 환경 셋팅중에 만난 ReferenceError: primordials is not defined in node 구글링 검색해보니 이미 해결 방법이 나와있었다. nykim.work/70 Gulp3 버전은 Node 12 버전에서 제대로 동작하지 않는다고 한다. 방법1)Gulp4 로 업그레이드 하거나 방법2)Node 를 다운그레이드 하라는 방법이 나와 있는데 내가 사용하고 있던 작업 환경은 Gulp 3.9.1 / Node 14.15.4 였다. 방법3) 1. 기존에 있던 node_module 폴더 삭제 2. npm-shrinkwrap.json 파일 생성 후 동일한 디렉토리에서 코드 작성 : { "dependencies": { "graceful-fs": { "version": "4.2.2" } } ..

기본적으로 '제 3자' 를 뜻하는 단어. 이 '제 3자'가 어떤 분야의 제 3자를 의미하는지에 따라 의미가 나뉜다. 예를 들어, 프로그래밍 개발과 개발자 사이에 플러그인, 라이브러리, 프레임워크 등을 서드파티로 볼 수 있다. 서비스와 사용자 사이에 서드파티는 응용 프로그램, 애플리케이션, 웹 서비스로 볼 수 있다.