WEB2 – Node.js – 생활코딩 생활코딩 node.js 강의 정리 1. Not found 구현 기존에 코드를 개선할 거다. 대상 코드는 url의 분석해서 존재하는 페이지인지 혹은 존재하지 않는 페이지인지 판단하는 코드다. 우리가 고려해야 할 경우의 수는 3가지다. 이제 각각의 case일 때 어떻게 동작해야 하는지 생각해 보자. 가. 1번 case 1번 case의 경우 root 페이지를 보여주면 된다. 나. … 더 읽기
WEB2 – Node.js – 생활코딩 생활코딩 node.js 강의 정리 1. 비교연산자 ==와 === ==과 ===이 구체적으로 어떻게 다른지 간단한 예시로 알아보자. 대충 이런 느낌이다. 웬만해서는 ===를 사용하길 권한다. 2. 콘솔에서 입력받기 Node.js에서 콘솔을 통해서 값을 입력하는 방법에 대하여 알아보자. 만약 위와 같이 콘솔에 입력하고 A, B 값을 출력받기를 원한다. 그렇다면 프로젝트 파일 아래 syntax/conditional.js 파일을 … 더 읽기
WEB2 – Node.js – 생활코딩 생활코딩 node.js 강의 정리 1. Node.js 파일 Node.js에서 파일을 다루는 방법을 배워보자. 역시 데이터를 다루기 위해서 알아야할 가장 중요한 것은 CRUD다. CRUD를 모두 구현하겠지만 일단은 Read부터 배웠다. 2. 파일 읽기 Node.js가 file을 읽어오는 방법을 알아보자. google에 ‘node.js read file’이라고 검색하거나 아래의 공식 홈페이지를 참고하면 된다. https://nodejs.dev/en/learn/reading-files-with-nodejs/ 공식 홈페이지에서는 2가지 방법을 … 더 읽기
WEB2 – Node.js – 생활코딩 생활코딩 node.js 강의 정리 0. 동적인 웹 페이지 만들기 지난 시간에 사용자의 쿼리 스트링을 통해서 동적으로 웹 페이지를 구성하는 방법을 맛보았다. 이제부터는 쿼리스트링에 따라서 각각의 웹 페이지를 완성시켜 보자. 1. response.end(template); 현재 디렉터리에 위치한 1.html은 정적인 파일이다. 해당 파일의 html 코드를 복사해서 main.js 파일에 template literals를 이용해서 붙여 넣는다. (이걸 … 더 읽기
WEB2 – Node.js – 생활코딩 생활코딩 node.js 강의 정리 1. URL URL은(Uniform Resource Locator)로 네트워크 상에서 자원이 어디 있는지를 알려주기 위한 규약이다. 우리가 일상에서 웹 주소(web address)로 흔히 부르는 것이다. 컴퓨터 네트워크와 검색 메커니즘에서의 위치를 지정하는, 웹 리소스에 대한 참조이다. 쉽게 말해서, 웹 페이지를 찾기 위한 주소를 말한다. 출처 : https://ko.wikipedia.org/wiki/URL 가. URL 형식 쿼리 … 더 읽기
WEB2 – Node.js – 생활코딩 생활코딩 node.js 강의 정리 1. JS 데이터타입 JS의 데이터타입에 대하여 일전에 학습한 적이 있으니 따로 다루진 않겠다. 2. JS 변수 JS의 변수에 관해서도 일전에 학습한 적이 있으니 패스. 시간을 아끼자. 3. 문자열 대입 학습을 위해서 프로젝트 디렉터리에 새로 syntax 디렉터리를 만들고 그 아래에 template.js 파일을 새로 만든다. 나무위키에서 검색한 위스키 … 더 읽기
WEB2 – Node.js – 생활코딩 생활코딩 node.js 강의 정리 1. node.js 웹 서버 만들기 가. main.js 놀랍게도 node.js는 Apache, NGINX, IIS 등 웹 서버들의 기능을 내장하고 있다. node.js가 웹 서버로서 동작하게 만드는 파일이 있다. 바로 main.js다. 에디터를 열어서 프로젝트 디렉터리를 만든다. main.js라는 파일을 새로 만들고 아래 코드를 작성한다. 당장 이해하긴 어렵지만 일단은 쓰자. 나. html … 더 읽기
WEB2 – Node.js – 생활코딩 생활코딩 node.js 시작합니다. 1. node.js 소개 가. 탄생 최초로 성공한 상업용 웹 브라우저인 넷스케이프를 만든 커뮤니케이션 사에서는 브랜든 아이크(Brendan Eich)에게 자바스크립트의 제작을 의뢰했다. 이때까지만 해도 자바스크립트는 웹 브라우저에서 사용할 수 있는 유일한 컴퓨터 프로그래밍 언어였다. 이와 동시에 자바스크립트는 웹 브라우저에서만 동작하는 언어였다. 그러던 중 2008년 구글에서 크롬 웹 브라우저에서 동작하는 … 더 읽기
계산기 이렇게 생긴 계산기를 Html, CSS, JS를 이용해서 만들어보자. 유튜버 수코딩님의 강의 영상을 보고서 따라 했다. 클론 코딩을 하면서 배운 점을 정리해보자. 1. 파일 보관 중인 Github 주소 : index.html style.css main.js CSS 단위 참고! https://webclub.tistory.com/356 height: 100vh height: 100vh;가 필요한 이유. 없으면 이렇게 된다. 그 이유에 대하여 알아보면 … 별도로 body의 높이를 지정하지 않으면 … 더 읽기
참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 JS 코드 설명 main.js 람다식으로 작성된 코드다. 동적으로 moreBtn과 title에 class 값으로 clicked과 clamp를 추가하고 삭제한다. style.css 수정 clamp라는 클래스를 지닌 title에 대하여 적용될 CSS 코드를 작성한다. clamp 되었을 경우에 텍스트는 2줄로 고정이 되고 초과한 글자는 생략된다. 버튼이 클릭된 경우 아이콘을 180도 회전한다. index.html 수정 clamp된 상태가 기본이기 때문에 class에 clamp를 추가한다. … 더 읽기
