이상과현실

주먹왕 랄프2 인터넷 속으로 원서를 읽다가 URL의 query string에서 query의 뜻이 묻다라는 걸 알았다. string이 끈이라는 뜻도 있지만 컴퓨터 언어 상으로는 문자열이라는 뜻이니, 묻는 문자열이라는 뜻이네! 물어보는 거니까 query string이 '?' 로 시작하는거구나. 생각보다 직관적이다. 이게 바로 시멘틱 URL 인가 싶다. 1. HTTP (HyperText Transfer Protocol) HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜 2. request message 요청의 구성 HTTP 메서드, 보통 클라이언트가 수행하고자 하는 동작을 정의한 GET, POST 같은 동사나 OPTI..

pug는 Express의 View engine이자 Node Express Template Engine이다. pug 문법으로 쓰면 HTML 파일로 변환해준다. 닫는 태그는 따로 필요없고 탭을 하면 자식노드가 되고 탭을 안하면 형제노드가 된다. 다른 pug 파일에서 extends를 쓰면 연결한 pug layout 파일에서 html(pug)구조를 가져다 쓸 수 있다. block content 영역에 들어가는 코드를 쓰면 된다. 자바스크립트 쓰는 법 #{ } 안에 javascript 문법을 적으면됨. 프로그래밍은 분할정복(나눠서 하나씩 처리하는 것)이다. pugjs.org/api/getting-started.html Getting Started – Pug Getting Started Installation Pu..

MVC 패턴(구조) M(Model): data(데이터) V(View): how does the data look(데이터가 어떻게 생겼는지, 템플릿) C(Controller): function that looks for the data(데이터를 보여주는 함수, 컨트롤러) 모듈화 - 라우터/컨트롤러/미들웨어 나누기 라우터: 엔드포인트와 해당 엔드포인트에서 실행돼야 할 로직을 연결해주는 역할, 컨트롤러: 미들웨어의 일종이지만 메인 로직을 담당하므로 분리해서 관리, 라우터에서 해야할 일 정의 미들웨어: 메인 로직의 컨트롤러 앞뒤로 추가적인 일을 담당, cookieParser, bodyParser 등 참조 youngest-programming.tistory.com/115?category=882048 [Nodejs..

nodemon을 통해 코드가 업데이트 될 때마다 자동으로 서버를 다시 열어주는데 WSL환경에서는 restart가 자동으로 안되는 이슈가 있다. 그럴 땐 --legacy-watch를 package.json 파일에 넣으면 자동으로 restart 된다.

1. cd : Changes the directory of the command line path. cd .. : 상위 디렉토리로 2. ls : Lists the contents of a directory 3.mv : mv "filename" "path/to/new/file/location" mv something/else.js something/whatever.js - else를 whatever로 이름변경 4. mkdir : make directory 5.sudo : superuser 권한으로 명령 실행 6.rm : remove 폴더 제거할때는 rm -rf 폴더명 으로 써야함 7. touch 파일명.xx : 새 파일 생성 8. code : VSCode로 파일 열기 참조 www.techrepublic.c..

focus-within : 내부적으로 focus가 된 element가 있는지 알려주는 가상 선택자 .reply:focus-within .reply__column:first-child { display: none; } 뜻 = reply 내부에 어떤 element가 focus 되어있다면 첫번째 reply__column은 안보이도록 해라. developer.mozilla.org/en-US/docs/Web/CSS/:focus-within :focus-within The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other wor..

animation-fill-mode forwards대상은 실행 된 애니메이션의 마지막 keyframe에 의해 설정된 계산 된 값을 유지. 그리고 display: none; 으로 해버리면 그대로 남아있어 터치가 안되므로 visibility: hidden; 을 줘야함 animation: splash-display 2s ease-in-out forwards; @keyframes splash-display { from { opacity: 1; } to { opacity: 0; visibility: hidden; } } developer.mozilla.org/ko/docs/Web/CSS/animation-fill-mode animation-fill-mode animation-fill-mode CSS 속성은 CSS..

https://ko.javascript.info/ 모던 JavaScript 튜토리얼 ko.javascript.info https://youtu.be/S4BN1tZmmWw 마우스 호버 시 때 글자 색 변화 자바스크립트 const title = document.querySelector("#title"); const BASE_COLOR = "rgb(255, 0, 0)"; const OTHER_COLOR = "#7f8c8d"; function handleClick() { const currentColor = title.style.color; if (currentColor === BASE_COLOR) { title.style.color = OTHER_COLOR; } else { title.style.color =..