기록하는 개발자

↓이전 글 https://mingmeng030.tistory.com/244 [vanillaJs] 프레임워크없이 SinglePageApplication 만들기-1. 라우팅 설정하기 폴더 구조 1. frontend 폴더 내부에 index.html 파일 생성 후 아래와 같이 구성 // index.html SPA with no framework Home Posts Settings - url 이동에 사용하게 될 a 링크들에 대하여 data-li.. mingmeng030.tistory.com https://mingmeng030.tistory.com/245 [vanillaJs] 프레임워크없이 SinglePageApplication 만들기-2. 라우팅 페이지 구성 https://mingmeng030.tistory.co..

Regular Expression: Regex 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴이다. 1. 정규표현식 형식 / 패턴 / 플래그 - 슬래시(/)와 슬래시(/) 사이에는 매칭시킬 패턴을 써준다. - 슬래시(/) 다음에는 옵션을 설정하는 플래그를 써준다. *플래그는 하나만 찾을지, 모두 다 찾을지 등을 설정하는 옵션이다. 2. 정규표현식 매칭 패턴(문자, 숫자, 기호 등) 매칭 패턴을 사용하면, 문자/숫자/기호를 보다 쉽게 표현할 수 있다. 패턴 의미 a-zA-Z 영어알파벳(-으로 범위 지정) ㄱ-ㅎ가-힣 한글 문자(-으로 범위 지정) 0-9 숫자(-으로 범위 지정) . 모든 문자열(숫자, 한글, 영어, 특수기호, 공백 모두! 단, 줄바꿈X) \d 숫자 \D 숫자가 아닌..

https://mingmeng030.tistory.com/244 [vanillaJs] 프레임워크없이 SinglePageApplication 만들기-1. 라우팅 설정하기 폴더 구조 1. frontend 폴더 내부에 index.html 파일 생성 후 아래와 같이 구성 // index.html SPA with no framework Home Posts Settings - url 이동에 사용하게 될 a 링크들에 대하여 data-li.. mingmeng030.tistory.com ↑위 글과 이어지는 내용이다 파일 구조 1. AbstractView.js 생성 후 아래와 같이 추상화된 view 작성 export default class { constructor() {} setTitle(title) { document..

폴더 구조 1. frontend 폴더 내부에 index.html 파일 생성 후 아래와 같이 구성 // index.html Home Posts Settings - url 이동에 사용하게 될 a 링크들에 대하여 data-link 속성을 지정해준다. +) data-* 속성 참고 글 (https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes) 2. node.js project 생성 : Npm init -y 3. express 설치 : Npm i express 4. server.js 파일 root 폴더에 생성 후 아래와 같이 구성 const express = require("express"); const path = require("pa..

DOM Document Object Model DOM(문서 객체 모델)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 문서 내의 모든 요소, 요소의 속성, 그리고 텍스트를 각각의 객체로 만들고 이들 객체를 부모-자식 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM이다. 이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다. DOM은 W3C의 표준 객체로, 아래와 같이 계층 구조로 표현되며, 네 종류의 노드로 구성된다. 문서 노드(Document Node) 트리의 최상위에 존재하며 다른 모든 노드에 접근하기 위해서는 반드시 문서 노드를 통해야 한다. 따라서 DOM tree에 접근하기 위한 entry point 이다. 요소 노드(Element..

- 주어진 팔레트 내에서 색상을 변경할 수 있다(default : black). - 주어진 range 내에서 브러쉬 크기를 변경할 수 있다(default : 10). - fill 버튼을 누르면 버튼이 paint로 바뀌고, canvas를 클릭하면 배경색이 채워진다. - paint로 바뀐 버튼을 누르면 다시 text가 fill로 바뀌고, canvas에 선을 그릴 수 있다. - clear 버튼을 클릭하면 canvas가 초기화 된다. Fill Clear @import "reset.css"; body{ background-color: #f6f9fc; display: flex; flex-direction: column; align-items : center; padding-top : 30px; } .canvas{ ..

Css 까지 추가하여 첫 js 프로젝트를 마무리 했다. 작년에는 무턱대고 js를 react로 시작해서 정을 못 붙이고 빨리 손을 뗐다. 바닥부터 배우자는 생각으로 서치를 해 본 결과 VanillaJS 로 js 공부를 시작하자는 결론을 내렸다. VanillaJS 강의는 따로 많지 않아 NomadCoding의 무료 강의로 공부를 시작했다. 작년과 같은 상황을 맞이하고 싶지는 않아서 그 날 들은 강의에 대해 스스로 코드 리뷰를 하고 블로그에 정리를 했다. 이 강의는 말 그대로 0부터 시작하는 사람이 들어도 알아들을 수 있도록 쉽게 설명해주기 때문에 그야말로 js 입문에 최적화 된 강의라고 생각했다. 당장은 github.io로 배포해서 볼 수 있도록 해놨다. 앞으로 해야할 일은 Heroku와 같은 무료 배포 서..

- openweathermap으로부터의 api를 통해 오른쪽 상단에 현재 위치, 날씨, 온도를 띄워준다. Log in 00:00:00 // https://openweathermap.org/ 가입 후 개인 api key를 복사해 API_KEY 변수에 저장 const API_KEY = "4b4a6452c8e528ead6fa2fa823527423"; function onGeoOk(position){ const lat=position.coords.latitude; const lon=position.coords.longitude; const url=`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=$..