Trip to Front-end(12)
-
인터넷은 어떻게 작동하는가? (cs.fyi 번역)
늘 궁금했지만 알아보지 않았던 이야기를 알아보고자 한다. 단순히 검색해서 찾는 것도 좋은 방법이지만 개발 이 외의 머리를 사용하고자 번역을 통해서 이해해보고자 한다. 마침 개발 디스코드에 좋은 글을 올려주신 분이 계셔 그 글을 번역해본다. 일단 9시까지만 해본다. 현재 시각 8시 26분. 내 곁엔 대학생활을 함께해준 데자와 한 병과 함께. 원문: https://cs.fyi/guide/how-does-internet-work How does the Internet Work? - cs.fyi As a developer, it is important to have a solid understanding of what the internet is and how it works. It is the foundati..
2023.04.21 -
Momentum 프론트를 만들었는데 왜 까먹는가?
예전에 만들었는데 역시나.... 왜이리 쉽게 잊혀지는 걸까? 내 약점은 조금만 브라우저 동작에 대한 내용이 나오면 잊는다는 것이다. 브라우저에는 stroage가 있는데 입력값을 보관해준다. 해당 관련해서 코드를 짰는데 너무나 복잡하다. 일단 자주 잊는 부분을 기록해두고자한다. const nameForm = document.querySelector("#nameForm") const nameInput = document.querySelector("#nameinput") const mainBox = document.querySelector("#mainBox") const clock = document.querySelector("#clock") const today = new Date(); const hour ..
2023.03.30 -
[JS] 우클릭 인식은 어떻게 구현하는 것일까?
코드 챌린지를 하다가 이벤트리스너를 복습하고 있었는데 역시 하다보면 구멍이 슝슝 뚫려있는 곳이 많았다. 그 중 하나가 우클릭을 어떻게 구현하는 것인가였다. 구글링하면 금방 나올줄 알았는데 안나오고 다들 클릭 이벤트 종류에 대해서만 다뤄서 이 글을 남긴다. 역시 검색은 영어로 찾아야한다; const superEventHandler = { mouseOver: function () { hello.innerText = "The mouse is here!"; hello.style.color = colors[0]; }, mouseOut: function () { hello.innerText = "The mouse is gone!"; hello.style.color = colors[1]; }, reSized: fun..
2023.03.23 -
Get, Post 이해에서 MDN How the web works 번역으로
맨처음에는 get, post이 도대체 정확히 뭔가를 찾다가 웹의 동작까지 넘어왔고 여러 블로그를 보다가 명쾌하지 않아 MDN 문서를 보게되었고 MDN 문서의 How the web works를 보다 한국어 번역의 몇몇 부분이 뭔가 싶어서 직접 번역해보며 의미를 깨우치기로하였다. How the web works provides a simplified view of what happens when you view a webpage in a web browser on your computer or phone. 당신의 컴퓨터와 핸드폰의 웹브라우저 속의 웹페이지를 볼 때 어떤 일이 일어나는지 간단하게 알아보겠습니다. This theory is not essential to writing web code in the..
2023.03.14 -
[JS] PingPongScoreKeeper 만들며 몰랐던 점
1. HTML - bulma에 대해 새롭게 배웠다. > 부트스트랩봐 표현법이 더 직관적이어서 좋았다. Ping Pong Score Keeper 0 to 0 Use the buttons below to keep score Playing to 3 4 5 6 7 8 9 10 11 +1 Player One +2 Player Two Reset 2. JS - innerHTML, innerText, textContent의 차이를 몰랐다. > innerText의 경우 불필요한 공백은 제거하고 브라우저 상에 출력되는 값을 그대로 가져온다. 만약 html 상 입력은 되었는데 브라우저의 display:none;으로 보여지지 않는다면 결과도 보여지지 않는다. > textContent를 알기 전에 노드라는 개념을 알고 있어야하..
2023.03.02 -
[EJS] 스코프 이슈를 어떻게 해결할 것인가?
먼저 전체 코드를 본다. const express = require("express"); const bodyParser = require("body-parser"); const ejs = require("ejs"); var _ = require('lodash'); const homeStartingContent = "Lacus vel facilisis volutpat est velit egestas dui id ornare. Semper auctor neque vitae tempus quam. Sit amet cursus sit amet dictum sit amet justo. Viverra tellus in hac habitasse. Imperdiet proin fermentum leo vel orci ..
2023.02.20