공부하면서 이해가 안되었던 부분을 정리하고 넘어가도록한다. 1. Node.js의 역할 Node.js는 기본적으로 자바스크립트를 브라우저 밖에서도 사용하기 위해 만들어졌으며 프로그래머들이 컴퓨터 하드웨어 장치를 자바스크립트로 직접 상호작용할게 있게 만들었다. (Node.js was made to basically liberate Javascript from the browser and allow programmers to use Javascript to interact with the computer directly, for example on a server.) 2. Express.js란? Node.js의 프레임워크로 백엔드 구축을 위해서 사용한다. Express.js는 npm 패키지 중 하나로 node..

간단한 계산기를 만드는 실습이 있었다. 그냥 web에 띄우면 되는데 이거 왠걸 에러가 난다. 복잡한 코드도 아닌데... js 파일로 이렇게 적어주고 html 파일이 이러하다. localhost:3000에서 입력값을 넣고 계산을 하면? 이런 에러난다. 문제를 해결하고자 서칭을하고 또 한 결과 타입에 관한 에러였다. 해결방법과 에러 이유 express에서는 number를 바로 처리하는지 못한다고 한다. 정확한 이유는 모르겠다. n1과 n2를 Number로 바꿔서 놨는데 result는 다시 기본값인 string은 변환된다는 것이다. 딥하게 설명을 하고 싶지만 아직 지식이 끈이 짧디짧아서....그래서 result의 값을 다시 숫자로 변화해야하는데 result + ""를 통해서 string을 number로 바꿔준..

1. html 파일을 어떻게 웹에 띄우는가? sendFile을 통해서 html 파일을 웹에 띄울 수 있다. 하지만 이건 상대 경로고 나중에 우리집 컴퓨터가 아닌 클라우드나 다른 사람 컴퓨터로 접속할 때는 절대 경로를 입력해주어야한다. 여기서 활용하는 것이 __dirname이다. path.js에 console.log(__dirname); 써주어 현재 위치를 확인해볼 수 있다. 2. 페이지간 변수 저장을 어떻게 시키는가? html 파일은 이런데 실상 웹페이지에서 숫자를 넣고 계산을 하면 계산이 안된다. 이를 해결하기 위해서 post 메소드를 활용해준다. get에서 내용을 얻고 post로 다시 결과값을 배출하는 것이다. 데이터 활용까지 나아가기 위해서는 다른 npm 패키지가 필요한데 body parser이다...

오랜만에 글을 쓴다. 이제 Node.js에 대한 개념을 배우고 Node.js Express까지 왔다. 먼저 Node.js는 자바스크립트의 활용 범위를 웹 밖으로 까지 확장시켰다. 그래서 백엔드 쪽에서 활용하고 있는데 아직까지 개념을 살펴보고 있는 중이다. 이 후로 프레임워크 Express.js를 바로 배웠는데 정리를 해놔야 기억할 것 같아 기록하고자 한다. 일단 이를 활용하기 위해서 Hyper 터미널을 깔아서 CLI로 조작하려고 한다. 사실 이에 대한 내용은 내가 개발 초창기에 궁금해서 찾아봤는데 이렇게 다시 보니 공부해놓길 잘했고 언젠가 쓰인다는 사실을 깨달았다. 뭔가 항상 아는게 전혀 없어서 너무 날 괴롭게 했는데 정말 반가웠다. 먼저 명령어를 종 정리해야두어야한다. 1. 터미널 조작 용어들 ls -..

1. viewport 뷰포트는 현재 화면에 보여지고 있는 영역이다. > 뷰포트의 너비를 단말기 너비에 맞추고 초기 배율을 1로 한다. 참고 강의: https://www.youtube.com/watch?v=EdFV38Bxm3Y&list=PLFeNz2ojQZjtQc7mt8E9fNzIh9or34A61&index=18&ab_channel=%EC%9C%A0%EB%85%B8%EC%BD%94%EB%94%A9 2. vh vh는 viewport height의 약자이다. vw는 viewport width이다. 뷰포트의 따라서 비율 값으로 정하는 것이다. 만약 기기 높이 750px이면 1vh는 7.5px이다. 3. form-action form 속성에서 action이 있다. action에는 url 값이 들어가는데 form에..

1. margin margin: 인자 1개; - 네 면 모두 적용 margin: 인자 2개; - 세로 방향, 가로 방향 margin: 인자 3개; - 위, 가로방향, 아래 margin: 인자 4개; - 위, 오른쪽, 아래, 왼쪽 음수도 가능하고 퍼센테이지 값도 가능하다. auto 값을 넣을 수 있는데 브라우저가 적절한 여백 크기를 선택하게 할 수 있고 요소를 중앙 정렬하고 싶을 때 사용! 2. inline block 인라인 블럭은 인라인처럼 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치되지만, 블럭처럼 width와 height 지정이 가능. 내가 헷갈린 지점은 span은 또 뭐지 였는데 span은 마크업이고 기본 속성으로 inline 특성을 갖는다. 하지만 css에서 display 값을 조정하여 특성을..