코딩 농장/웹 프로그래밍 (31) 썸네일형 리스트형 TypeScript 첫번째 JavaScript 를 쓰다보면 에러에 대한 설명이 많이 불친절한 것을 볼 수 있다. 또한 2 + '3' 을 한다면 동적으로 계산해주는 편리성을 보여주지만 의도한 결과를 내어주진 않는다. 이러한 것들을 C 나 C++ 처럼 조금 strict 하게 더 비동적으로 만들어 프로젝트를 진행할 수 있도록 한 것이 TypeScript 라고 한다. TypeScript 설치 npm install -g typescript 위 코드를 이용해 터미널에서 설치해준다. TypeScript 는 js 를 조금 변형한 언어이다. 확장자는 .ts 인데 우리가 나중에 사용할 때에는 "tsc -w" 로 .ts 파일을 .js 로 바꾸어 주는 과정이 필요하다. 이를 위해 tsconfig.json 파일을 프로젝트에 추가해놓으면 된다. tscon.. 실용 JavaScript 첫번째 우리는 html 을 사용해서 화면에 정보를 띄워 보았다. 하지만 버튼을 클릭하는 것처럼 사용자의 입력, 행동으로 화면을 바꾸는 어떠한 액션을 주어야 될 때가 있다. 이때 바로 JavaScript 를 사용한다. 보통 html 파일에서 사이에 이러한 액션들을 위한 코드를 짜 넣는다. 대부분의 UI 는 이 과정으로 형성된다. 1. 미리 디자인 해놓고 숨김 2. 버튼을 누르거나 하면 보여줌 js 로 css 조절하기 Alert 박스 닫기 열기 위 코드처럼 원하는 UI ( 위에서는 Alert 박스를 control 하는 버튼) 를 작성하고 CSS 의 display 를 설정해준다. .alert-box { background-color: skyblue; padding: 20px; color: white; border-r.. Web2 node.js 마지막 강의 말미에 생활코딩 선생님이 말씀하셨다. '시작부터 완벽한 코드를 짜려고 한다면 한 줄도 완성하지 못할 것이다.' 코드는 사람이 쓰고 만든 언어이다. 이것들은 여러가지 우여곡절 끝에 현재의 언어로 발전되었을 것이다. 나는 최대한 처음부터 배우며 그 우여곡절들을 한번씩 경험해서 왜 이렇게 쓰이는지 바뀌었는지 겪어보고 있다. 이번 node.js 강의를 들으면서 참 잘 만들어진 강의라고 생각했다. 기존 web1 과 이어져 있으며 필요한 부품들을 하나씩 가져다 씀과 동시에 그 부품들에 대한 설명을 중간중간 끼어 넣어 알려준다. 마지막으로 기존 부품들의 단점과 그 보완할 새로운 방법, 부품들을 알려준다. 왜 모듈화를 시키는지, 왜 보안을 위해 sanitize를 쓰는지 .. .등 이 과정을 리펙토링이라 하는데 그.. Web2 node.js 네번째 우리는 url 의 Query String 방식으로 서버와 몇 가지의 정보를 주고 받아 웹 페이지를 띄었다. 데이터 update 를 클릭하면 ?id=update 인 url 로 이동한다. 하지만 데이터를 update 할 때에는 서버에 있는 파일명이나 내용들을 변경할 필요가 있었기 때문에 Query String 방식으로 데이터를 전달하지 않고 form 의 post 로 정보를 전달했다. 만약 위처럼 delete 를 클릭하면 ?id=delete 같은 url 로 이동해서 Query String 에 맞는 데이터를 삭제시키도록 만든다면 여러 문제점이 생길 수 있다. 예들 들어 ?id=delete 의 url 로 이동해서 CSS, HTML, JS 등 다른 글들을 눌러 url 을 이용해 삭제시킨다고 생각한다면 나쁜 사람이 .. Web2 node.js 세번째 NPM 을 사용해 pm2 를 다운받자 : "npm install pm2 -g" 하지만 오류로 인해 pm2 로 js 파일이 실행 안되었다 해결 방법 : https://blockmonkeys.tistory.com/94 Window Power Shell 을 관리자 권한으로 실행해서 해결해주었다. pm2 사용 좀 더 쉽게 서버를 관리할 수 있다 우리는 코드를 변경하고 저장하고 node main.js 를 실행해서 웹 새로고침을 해야 확인할 수 있었다. 이제는 코드를 변경하고 저장한 후 웹 새로고침을 하면 바로 변경사항을 볼 수 있다. "pm2 start main.js --watch" : 코드를 수정할 때마다 자동으로 반영시켜준다. "pm2 log" : 코드를 저장하고 실행할 때 변경점이나 발생하는 오류를 보여준다.. Web2 Node.js 두번째 우리가 Query String 을 이용해서 원하는 페이지를 만들어내는 것을 성공했다. 이때 하나의 기준 템플릿에 ${}변수를 넣는 방법을 사용했다. 하지만 로 싸여진 본문을 각 페이지에 맞게 바꾸어 주어야 한다. CRUD : 네가지의 처리가 정보를 다루는 핵심적 과정이다. Create, Read, Update, Delete 이제 우리는 FILE 을 Node.js 에서 읽는 방법을 배울 것이다. (어디에 쓰이는지 뒤에서 보자) 구글에 함수 설명을 검색해서 찾아보면 var fs = require('fs'); fs.readFile('sample.txt', 'utf8', function(err, data) { if (err) { console.error(err); return; } console.log(data.. Web2 Node.js 첫번째 Atom 혹은 VSC 를 사용해 HTML 과 CSS 로 홈페이지를 만들어 보았다. (Web1 참고) 위에서 우리가 한 것은 프론트엔드의 범주이다? 하지만 우리가 수동으로 직접 HTML 으로 웹 페이지를 하나 하나 만들기 어렵고 귀찮다. 수정을 할 때 1억개의 페이지가 있는 웹사이트가 있다면 1억개의 페이지를 수정해야 한다. 이를 해결하기 위해 JavaScript 를 사용해 자동으로 페이지를 만들 수 있도록 했다. 이렇게 나온 것이 Node.js 이다. 다른 설명으로 기존 JavaScript 는 "브라우저" 위에서 동작하고 Python 이나 Ruby 같은 언어는 "컴퓨터" 위에서 움직인다. 이때 OS 기능에 액세스 할 수 있는가 없는가가 중요하다. "OS의 기능"이란 예를 들어 파일의 읽고 쓰기, 네트워크.. 이전 1 2 3 4 다음
