241206 에이콘 아카데미 수업에 기반하여 작성되었음을 알립니다.노드 실습 (세션)환경 설정mkdir project06npm init -ynpm i expressnpm i nodemonnpm i express-sessionnpm i body-parserserver.mjsimport express from "express";import session from "express-session";import bodyParser from "body-parser";import path from "path";import { fileURLToPath } from "url";const __filename = fileURLToPath(import.meta.url);const __dirname = path.dirname(..
241205 에이콘 아카데미 수업에 기반하여 작성되었음을 알립니다.노드 실습 (get/post)app.mjsimport express from 'express';import cors from 'cors';import path from 'path';import { fileURLToPath } from 'url';import gogekRouter from './routes/gogek.mjs';import jikwonRouter from './routes/jikwon.mjs';const app = express();app.use(cors());// cors 문제를 해결할 미들웨어 추가app.use(express.json());// json 파싱 미들웨어 추가// (중간에서 req body 객체를 만든다. re..
241204 에이콘 아카데미 수업에 기반하여 작성되었음을 알립니다. 노드노드는 모듈만 잘 가져다쓴다면 쉽게 사용가능하다.얼마나 많은 모듈을 가져다 쓰느냐가 중요하다!검색과 조립만 잘할줄 안다면 된다. 함수 지향형 언어의 특징이다. 파이썬, 노드 등등노드 실습 (웹서버 구축)ex13httpserver.mjsimport http from 'http'; // http 웹 모듈http.createServer((req, res) => { res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'}); // statuscode와 mime type을 준다. res.write('환영 노드 여러분'); res.write('안녕'); res.e..
241203 에이콘 아카데미 수업에 기반하여 작성되었음을 알립니다. 노드node event이벤트 생성은 EventEmitter객체의 메소드를 통해서 할 수 있습니다. Event Emitter는 events 모듈 내에 포함되어있습니다.구조적으로 클라이언트 사이드에서는 DB와 연동이 불가능하다. 단순한 방법으로는 자바스크립트는 DB와 연결할 수 없지만 DB 연결을 지원하는 모듈을 사용한다면 연결이 가능하다!노드 실습 1 (이벤트 처리)ex9event.mjs// 이벤트 처리// events 모듈의 EventEmitter 객체를 사용하면 이벤트와 이벤트 핸들러를 연결할 수 있다.import { EventEmitter } from 'events';const myEvent = new EventEmitter(); /..
241202 에이콘 아카데미 수업에 기반하여 작성되었음을 알립니다. 노드노드가 등장함에 있어 많은 변화가 일어났다.굳이 다른 언어를 배워야할까라는 의문이 들었다.자바스크립트 언어 하나로 충분히 프로그래밍이 가능했다. html없이 js, css, json, xml가 존재할 수 없다.html은 반드시 frame에 출력된다. 브라우저는 기본적으로 frame을 하나만 가지고 있다. iframe을 사용해서 프레임안에 다른 프레임을 넣을 수 있지만 일반적으로는 하나의 frame에는 하나의 html을 출력하게된다.C, JAVA와 같은 언어없이 DB에 접근, 웹서버를 구축, 다양한 비즈니스 로직을 구현할 수 없을까?html(브라우저)에서 빠져나와서 자바스크립트를 독립적으로 파싱(실행)할 수 없을까?브라우저 없이 자바스..
241129 에이콘 아카데미 수업에 기반하여 작성되었음을 알립니다. 뷰코드를 짤 때 시큐어 코딩, UX / UI를 최대한 고려해서 코드를 짤려고 노력해야한다!이전 글과 이어서 진행됩니다.html 파일 내에 코드가 너무 길어 각 컴포넌트, 라우터 분리하기! 이클립스로 돌아가자!static에 components, router 폴더 생성myrouter.js(static/router)import {createApp} from 'vue';import {createRouter, createWebHistory} from 'vue-router';import AllData from "../components/alldata.js";import BuserData from "../components/buserdata.js";..
241128 에이콘 아카데미 수업에 기반하여 작성되었음을 알립니다. 뷰AI 없이 코드를 짜는 현직자는 없다. AI를 잘 다룰줄 아는 것이 중요하다.질문을 잘해야 대답을 잘해준다. 그렇기에 기초를 튼튼히 다지는 것이 중요하다.또 툴을 잘 사용하여 개발 시간 최적화, 코드의 최적화를 잘하고 글로 잘 적어내어보자!프로젝트 코드를 다 짜고 용어를 정확히 찝어가며 설명할 수 있어야 한다.프로젝트를 통해서 최종적으로 온갖 것들을 공부하는 것이다.뷰 실습 (ajax-axios 1)axois cdn // 배포용 // 개발용JSON 데이터 : http://openapi.seoul.go.kr:8088/sample/json/SeoulLibraryTimeInfo/1/5/JSON 구조 : SeoulLibraryTimeInfo ..
241127 에이콘 아카데미 수업에 기반하여 작성되었음을 알립니다. 뷰적어도 뷰에서 SPA를 운영할 것이라면 id를 적용한 태그 안(하나의 컴포넌트)에서만 코드를 짜주자!과거, 현재의 데이터를 가지고 미래를 예측하자!기술 통계를 내고 앞으로 일어날 일들에 대해 추론까지 이어가보자!프로젝트 배포시 서버의 부하를 감당, 서버의 퍼포먼스 향상을 위한 모니터링을 진행하자! (라이브러리를 잘 찾아서 적용!)뷰 실습 (이벤트)ex11event.html 친구 목록 {{name}} 삭제 조회추가삭제뷰 실습 (구글 ..
241126 에이콘 아카데미 수업에 기반하여 작성되었음을 알립니다. 뷰뷰를 사용하다보면 리액트와 비슷해진다. 라우터 이런 부분들?리액트를 배웠기 때문에 굳이 깊게 들어가지는 않는다.리액트와 비교하여 어떤 부분이 다른 지 주의 깊게 보자.뷰 수업의 목적도 리액트와 마찬가지로 RESTful 구현이다.뷰 실습 (이벤트)ex5event.html 이벤트 연습 주사위 수 : {{number}} 주사위 던지기 숫자 변경 됨! 이벤트 연습 ... 생략 주사위 수 + 10 : {{number2}} 주사위 던지기2 숫자 증가 이벤트 이벤트 연습 ... 생략 숫자 ..
241125 에이콘 아카데미 수업에 기반하여 작성되었음을 알립니다.뷰(Vue)뷰는 비교적 쉬운 방법으로 수업 진행 예정뷰는 2점대 버전과 3점대 버전이 있다. 2점대 버전은 볼 필요가 없다. 3점대에서 안돌아감MVVM 패턴을 사용한다. 뷰와 모델 사이에 뷰 모델을 하나 더 걸어놓았다.리액트와 마찬가자기로 버츄얼돔을 사용한다.노드를 설치하여 사용, 비쥬얼 스튜디오로 개발, HTML에 CDN을 걸어놓고 사용한다.보간법을 사용하고 있다. {{여기에 써주면 된다.}}기본 디렉티브는 v-~ 써주면된다. 타임리프에서 th 걸어주듯이뷰 인스턴스는 2점대와 3점대에서 많이 다르다!리액트처럼 단일 컴포넌트로 개발하는 것도 좋다. 하지만 CDN만으로도 결과물이 잘 나올 수 있다.자바스크립트 라이브러리는 모두 다 비슷한 구..