DOTY

Express는 Node.js를 위한 웹 프레임 워크로써 작업을 할 때 도와주는 하나의 도구라고 생각하면 편하다. 우선 express를 받는 방법은 Node.js를 받았으면 npm도 자연스럽게 같이 다운이 됬을 것이다. 그럼 (Windows기준)cmd창에 다음을 입력해보자. npm install express 이미 다운을 받아서 잘 보이지는 않지만, 이를 받은 폴더에는 node_modules라는 새로운 폴더와, package.json에 새로운게 생겼을 것이다. "dependencies": { "express": "^4.17.1" } 참고로 git에 올릴 때는, .gitignore을 사용해 node_modules을 밴하도록 하자. 왜냐하면 나중에 협업을 할 때는 package.json을 통해서 다음의 커맨..

Node.js는 백엔드, 서버를 빌드 해야 할 때 쓰인다. 이는 JavaScript를 쓰는데 이는 프론트에서도 쓰인다. (백과 프런트 둘다 쓰니까 좋지 않을까...?) 물론 백엔드는 Python도 사용할 수 있다. 그런데, 상대적으로 기본으로 갖춰져 있는 것을 원한다면 Django를 쓰는게 좋다고 한다. 그러나 사용을 하려면 먼저 어떻게 써야하는지를 배워야 하지만, Node.js는 그렇지 않다고 한다. 둘의 차이는 간단하게 하드웨어의 접근에 있는 듯 하다. 접근을 하는 걸(예를들면 사진 압축..?)원한다면 Django를 사용하는 것이 좋고, 그게 아니라면 (채팅과 같은걸 만들고 싶다면) Node.js가 좋은 선택이 될 수 있다. nodejs.org/ko/ Node.js Node.js® is a JavaS..

- createElement JS로 DOM을 통해서 새로운 Element를 만들어준다. span도 만들 수 있고, li도 만들 수 있고, button 등등 다양한 것을 만들 수 있다. const span = document.createElement("span"); const Btn = document.createElement("button"); const li = document.createElement("li"); 이런식으로 만들면 되는데 Element를 만들었으면 그 안에 글들 또한 넣을 수 있어야 한다. const span = document.createElement("span"); span.innerText("BlahBlah"); 이렇게 만든 Element들을 어떤 부모의 밑으로 넣을 수 있다. ..

- setInterval 함수를 일정 시간동안 실행시켜주고 싶을 때 사용하는 함수다. 시계로 예를 들어보자. const clockContainer = document.querySelector(".js-clock"); const clockTitle = clockContainer.querySelector("h1"); function getTime() { const date = new Date(); const seconds = date.getSeconds(); const minutes = date.getMinutes(); const hours = date.getHours(); clockTitle.innerText = `${hours}:${minutes}:${seconds}`; } function init() ..

무언가 변경이 되었을때 함수를 실행하고자 한다. 예를 들어보자. function handelResize() { console.log("화면 크기가 바뀌었어유!!!"); } window.addEventListener("resize", handelResize); resize는 브라우저의 크기가 변경됬을 때 를 말한다. 브라우저 크기가 변경되면 handelResize함수를 실행시키게 된다. 이처럼 log찍히는 횟수가 화면 크기가 바뀔때 마다 늘어난다. 그만큼 함수가 불린것이다. function handelResize(event) { console.log(event); } window.addEventListener("resize", handelResize); 다음과 같은 경우가 있다. 그런데 event가 여기서..

- getElementById const title = document.getElementById("title"); HTML에서 id 가 title인 곳을 찾아오게 된다. 이를 console.log로 찍어서 확인해보면!! 이런식으로 나오게 된다. 그런데 이를 바꿀 수 있다!!! (응? HTML에 쓰여져 있는걸 바꿀 수 있다고..?) title.innerHTML = "HI! I changed in JS!" 왼쪽은 Visual Code 에서 HTML이고, 오른쪽은 해당 페이지의 소스를 보여주는 화면이다. 그냥 써있는 내용까지 다 바뀌었다. 같은 방법으로 글자 색을 바꿀 수도 있다. title.style.color = red; console.dir을 통해서 title로 innerHTML나 style.color..

배열은 잘 알고 있지만 Object는 조금 다른 듯 하여 헷갈릴까봐 기록해둬야 할 듯 싶었다. const Week = ["Mon", "Tue", "Wen", "Thur", "Fri", "Sat", "Sun"]; C++ 에서는 중괄호 ( '{ }' ) 를 썼다면, JS 에서는 대괄호 ( '[ ]' )를 쓴다. JS 에서의 중괄호는 Object에서 쓰이는데, 이를 배열처럼 쓴다면, SyntaxError가 뜰 것이다. 그럼... Object는 어떤 방식으로 써야할까..? ☞ 짝을 지어주자! const MyInfo = { age : "25", gender : "Male", isHandsome : true } 이런식으로 console.log를 찍으면, 이런식으로 나오게 되고, 또 신기한건 console.log(M..

JS는 HTML과 CSS를 더 멋있게 만들어준다고 생각하면 될 듯 하다. html의 코드에서 body 안에 반드시 마지막에!!!! 넣어야 한다. This is my first JS! body { background-color: tomato; } alert('Hello world!!!!'); HTML에 첫 JS를 씌운 것이다. 페이지를 켜게 되면(새로고침 포함) alert가 뜬다. 원하는 문장을 쓸수도 있고 뭐 여러가지 할 수 있다!!!! (심지어 변수까지) 여기서는 선언을 let 으로 하는 듯 보인다. 등등!!!! 흠.... 뭔가 다른게 있으려나 싶었는데 C++ 쓰는거랑 비슷한 느낌이 들어서 자세한건 적지 않을 것이다. 처음 알게 된 것들만 적어둬야징~

1. '>' 사용 일일히 직접 쓰는게 너무 귀찮은건 다들 알것이다. 그럴때 사용해보자!!! nav>ul>li*4 이걸 쓰면 어찌 되느냐!? 만족. (참고로 nav는 navigation으로 다음과 같은걸 만들고 싶을 때 쓴다.) NAVER밑에 로그인, 부동산, 연예 처럼 표현하고 싶을때. 2. box-sizing 이런 느낌으로...???? 그럴때 사용하는 것!!!! width: 100%; 를 넣어주자. .... 는~ 원래 말하려던건 아니고... 저걸 넣어주게 되면 끝이 사라졌다....??? 이는 padding을 넣어줬기 때문인데 이를 고치기 위해선 다음 코드를 넣어주자. box-sizing: border-box; 이걸 넣어주면~ 이렇게 된다!!! 이 기능은 box사이즈를 미리 정해둔다고 생각하면 된다. 크..

좀 더 쉽게 읽는 CSS를 위한 규칙이라고 보면 된다. 참고로 btn은 버튼을 말하는 것이다. 1. block : .btn 2. Element : .btn__price 3. Modifier : .btn--orange (밑줄이 아님) (각각은 class name이다.) 1. block block하면 생각나는 그 블록 생각하는게 쉬울 듯 하다. 뭉텅이???? (....큼흠....) 2. Element Element는 block의 구성 요소라고 생각하자. 3. Modifier Modifier은 어떤 스타일인지(?) Block과 Element의 모양을 생각하면 될 듯 싶다. 아래를 보자. btn이라는 block이 있는데 이를 구성하는 Elements들(btn__price, btn__text)과, Modifier..