day31~day39

Hanna·2024년 11월 19일

KOSMO 24.10~25.03

목록 보기

5/12

day31. 2024-11-19-화요일

수업진도

tracker.step3
google cloud 플랫폼 API 사용하기
inheritance.step3 -> java
src.mvc

구글 클라우드 플랫폼 - 유투브 API 사용하기

day33. 2024-11-21-목요일

수업진도

vs code - shop
java - mvc : mvc패턴 구현하기
트랜잭션 : https://mommoo.tistory.com/62
workspace_node/bookApp

--UI가 완성되지 않았더라도 나는 테스트할 수 있는 클래스 설계를 했는가?

MVC패턴을 적용한 게시판 구현하기

MVC패턴 이란

MVC 소프트웨어 디자인 패턴의 세 가지 부분은 다음과 같이 설명할 수 있습니다.

모델: 데이터와 비즈니스 로직을 관리합니다.
: 만일 나중에 myBatis 라이브러리를 사용하기 편리한 설계는?
: 비즈니스 로직 - BoardLogic.java
: 데이터 계층은 ?
뷰: 레이아웃과 화면을 처리합니다.

컨트롤러: 모델과 뷰로 명령(메세지)을 전달합니다.
:BoardController.java

기능 정의서

검색기 구현한다.(제목, 작성자, 내용)
오라클 연동하여 처리한다.(CRUD작업)
글쓰기 를 구현한다. - insert - int
글삭제하기를 구현하다. - delete - int
글수정하기를 구현한다. - update - int
전체조회를 구현한다. - select many - List<Map<>>
상세보기를 구현한다. - select one - Map

프론트 엔드

html : DOM Tree
css : 획일적인 디자인, 일괄처리 - CSSOM
-> DOM Tree + CSSOM = Render Tree -> 브라우저
태그들에 대한 인터프리터 - 태그는 안보임 - 화면출력
innerHTML(태그안보임) vs. innerText(태그보임)
///////////// js와는 구분

html5 - 시멘틱 태그(Semantic Tags)

포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그
코드의 구조와 가독성을 향상시키고 웹 접근성을 개선

이미지 출처: https://seo.tbwakorea.com/blog/what-is-semantic-tag/

태그 문법

section : 문서 내 주제별 콘텐츠를 그룹화

NodeJS

브라우저의 도움이 없어서 Javascript코드를 실행할 수 있음
-> NodeJS 기반의 백엔드 구성이 가능하다
V8엔진 - 크롬 - 오픈소스 - 엣지
V8엔진 기반으로 Server Side Javascript 소프트웨어 시스템
Java 언어가 각각의 운영체제 JVM을 통해 구동되듯이 NodeJS도 웹브라우저에 종속적인 Javascript를 각각 운영체제에서 실행할 수 있도록 Javascript Runtime환경을 제공

노드 환경 구성하기 : workspace_node/bookApp

https://velog.io/@tjdrhd1207/Node.js-프로젝트-생성하기n
npm install [모듈명] -g : global하게 설치
npm install [모듈명] --save
npm install - 프로젝트 package.json에 작성된 모듈을 한번에 설치하고 싶을 때 사용

프로젝트 생성하기

1) 프로젝트 디렉토리를 생성한 후 생성된 디렉토리로 이동한다
2) 익스프레스 프로젝트를 쉽게 생성해주는 express-generator모듈을 전역으로 설치
npm install express-generator -g
3) express명령어를 실행해서 프로젝트 디렉토리를 생성한다. 이때 화면담당 템플릿 엔진은 자바진영의 jsp와 유사한 ejs로 설치한다.(jsp예습효과) -e옵션 반드시 추가할것
express -e 프로젝트명
4) express 기반으로 웹서버를 구동하려면 package.json에 의존성 패키지를 반드시 설치해야한다. npm install
5) 실행방법: npm start 엔터, 서버 중지: Ctrl+c
6) 만일 서버의 포트번호 변경하려면 ./bin/www 파일에서 수정: 디폴트-3000
7) npm start로 노드를 실행하면 소스 코드 수정한 것이 반영되지 않음. 불편-

day34. 2024-11-22-금요일

수업진도

shop2.js
news.step5 - 마무리~!
workspace_node/bookApp
카카오 API - 카카오 개발자 사이트: rego1438@daum.net
jquery란 무엇인가? : news.step1\jqueryNew.html

웹 개발 4요소

변수선언과 메소드 선언
생성자 활용
제어문 활용 - 조건문, 반복문
collection framework - List, Map

완벽하려고 말기! 불안해 말기! 복습 조금씩 꾸준히만 하기!

node.js로 도서관리시스템 구현

workspace_node/bookApp

bookApp
- bin - www -> port 번호
- node_modules -> npm install : package.json에 등록되어있는 전체 라이브러리 설치
- public - 정적페이지 위치 - js,css -> resource
- routes - 페이지를 조립 - .js 위치 (화면UI가 아니다 JS모듈이다)
- views - auth/board/book/cart etc. -> .ejs : html & js를 섞어 쓸수있음

카카오 API

네이티브 앱 키: a6e8c481b51e2cf273af71f21c17d334
REST API 키: c14d46d612605294b4c8db02018a4136
JavaScript 키: e1ce6d7ae64d07e10d431f4f6bc635dd
Admin 키: e8fb9b545236530a050b4d843d721676

bookApp 프로젝트 - 도서관리시스템 (가칭)

프로젝트 기본 디렉토리

bin디렉토리 : www이름의 파일 한 개 존재.
확장자는 없지만 내부는 노드가 서버로 동작하기 위한 기본코드가 자바스크립트로 작성되어 있다. 또한, 서버를 시작할 포트가 지정되어 있다.
node_modules : npm install을 하면서 생긴 폴더임
그래서 package.json에 선언되어 있는 모듈과 이 모듈을 실행하기 위해서 필요한 의존 관계의 모듈이 설치되어 있다.
노드몬 설치하기 : npm install nodemon -g
public: 이미지, 자바스크립트 파일, 스타일시트 파일이 있다.
routes: index.js와 users.js파일이 존재함 - express-generator생성함
라우터를 처리하기 위한 코드가 있다.
views: 뷰계층을 처리하는 파일이 있는 곳
프로젝트를 생성할 때 템플릿 엔진으로 ejs를 지정했으므로 이 위치에 ejs파일이 배포되어있음

EJS(Embeded Javascript Templates)

서버 사이드에서 HTML을 동적으로 생성하기 위해 사용되는 간단효율적인 템플릿 엔진
(JSP와 같은 역할을 하면서 사용법도 비슷하다)
HTML에 Javascript코드를 삽입하여 데이터를 렌더링 할 수 있다

페이지 불러오기 URL

기본페이지 불러오기: http://localhost:3000
로그인 페이지 불러오기: http://localhost:3000/login

외부 라이브러리 추가

bootstrap5.2.3 (javascript, css)
https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js

css나 js는 서버단에서 클라이언트측으로 다운로드가 된다.
너무 무거우면 속도가 오래 걸리기때문에 defer를 꼭 사용해야 함.
파일이름에 min이 들어가 있다면 light버전이다.(줄바꿈x, 들여쓰기 생략 -> 코드 바짝바짝 붙어 작성됨)
CDN(Content Delivery Network): 정적 전세계에서 분산된 서버 네트워크를 활용하여 콘텐츠를 빠르고 효율적으로 전달하기 위한 시스템
(속도향상, 과부하 분산, 글로벌 콘텐츠 제공, 서비스 안전성)

home 화면 설계

도서목록
베스트 도서목록
최근 도서목록

bookList 설명

justify-content-end: 내부 요소를 가로 방향으로 끝정렬
justify-content-center: 내부 요소를 가로 방향으로 중앙 정렬

폼컨테이너
: 12칸 중에 몇개를 차지하는 지 비율로 정해서 표현한다
col-6 col-md-4

화면 크기에 따라 열의 너비를 다르게 설정함

col-6: 화면에서 전체의 6/12 너비 차지함
col-8 8/12(67% 정도 차지)
col-md-6: 중간화면에서 전체의 6/12너비차지함
col-lg-4: 큰화면에서의 전체 4/12너비를 차지함

home.ejs 설명

class="row my-5"

class="row": 부트스트랩 프레임워크에서 지원하는 그리드 시스템
row는 그리드의 한 행을 정의하면, 내부에 있는 열을 정렬함
주로 화면을 구분학 배치를 잡는 데 사용함
my-5: 부트스트랩의 마진 클래스임, 상단 하단의 5단위의 간격을 추가한다
:기본단위가 0.5rem
class=col : 열 클래스
부모 요소인 row안에서 열column을 구성함
자동으로 화면크기에 맞춰 조정되면 다른 열들과 균등하게 배치됨

jQuery

jQuery는 HTML 문서 탐색, 이벤트 처리, 애니메이션, AJAX 요청 등을 간편하게 처리할 수 있도록 돕는 자바스크립트 라이브러리입니다. 웹 개발에서 반복적인 작업을 더 쉽게 할 수 있도록 해주는 도구로, 다양한 브라우저에서 일관된 동작을 보장합니다(chatGPT).

jQuery 사용 이유:
간단한 문법: 복잡한 자바스크립트 작업을 더 간단하게 작성할 수 있습니다.
호환성: 다양한 브라우저에서 동일한 방식으로 작동하므로, 브라우저 호환성 문제를 신경 쓸 필요가 없습니다.
빠른 개발: 많은 기능을 이미 제공하기 때문에 개발 속도가 빨라집니다(chatGPT).

book\index.ejs

<script `src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <!-- jquery import -->

-> JavaScript Bundle with Popper - import하는것

$.ajax({
  url: 'data.json',
  method: 'GET',
  success: function(response) {
    console.log(response);
  }
});

사용 기본 형태 : $()

day35. 2024-11-25-월요일

수업진도

js_step1/JSLab : 개요.md, 자료형/variable.js, null.js
구글 콘솔 클라우드 OAuth 2.0 클라이언트 ID 만들기 -> 도서관리시스템
firebase -> bookApp 회원가입, 로그인

컴퓨터 구성 요소

컴퓨터 = 하드디스크(저장소) + 연산 + 메모리
메모리 : 1byte가 여러개 쌓여있는 구조
APP = Code + Data + Stack + Heap
- 함수의 실행순서를 보관하는 곳이 Stack이다.
- Heap에는 객체가 보관된다.

변수 선언 및 할당

사용자에게 입력을 받아서 처리한다.
처리한 것을 출력해준다
입력이 완료되면 처리한다
입력 -> 처리 -> 출력
변수 : 값을 저장하는 공간
- 자료를 저장할 수 있는 이름이 주어진 기억장소

ECMAScripts : var사용함 - 호이스팅 이슈가 있다
ECMAScript6 : let - 변하는값, const - 고정

템플릿 리터럴

문자열 상수와 변수를 같이 쓰는 방법
ECMAScript6 - 2015표준 - ES6

javascript

const str1 = 'world' //world
const str2 = `Hello ${str1}` //Hello world - 템플릿 리터럴

null과 undefined

둘은 다름!
const는 반드시 선언과 동시에 초기화
let, const -> ES6, var -> ES5
- var 사용시 hoisting 문제 발생(전역변수로 취급됨)

boolean 거짓 6가지 in JS

false
0
null
undefined
NaN (not a number)
'' - 빈문자열

(vs. '안녕', 1, 1000, -500 -> 참)

부정

연산자

비교

함수

js에서는 함수도 객체 취급을 한다
함수호출 파라미터로 함수객체를 사용할 수 있다
오버로딩, 오버라이딩이 없는 js

Firebase 란 무엇인가!

(출처: https://codingapple.com/unit/why-use-firebase/)

Firebase는 서버 대신 만들어주는 서비스입니다
뭔가 배우기 전에 항상 용도를 잘 알아야합니다.
Firebase는 님들이 서버없이도 웹서비스/앱서비스를 만들 수 있게 도와주는 서비스입니다.
그래서 개발시간을 매우 단축가능한데 왜 가능한 것인지 그림으로 표현하자면

▲ 원래 웹서비스는 이렇게 동작하는데
유저가 댓글을 올리고 싶으면 1. 댓글을 서버에게 보내고 2. 서버는 댓글을 database에 저장해야합니다.
서버 안거치면 안됩니다. 악플 야짤 이런거 검열 어케할 것임
그래서 님들이 개발해야하는 코드는 2개인데
1. 댓글을 서버에 보내는 코드 (프론트엔드)
2. 서버가 댓글을 database에 저장하는 코드 (백엔드)
이렇게 됩니다.

▲ 근데 Firebase를 쓰시면 서버 코드 개발을 대신 해주기 때문에
님이 개발할건 1. 댓글을 서버에게 보내기 이거 밖에 없습니다.
그럼 Firebase가 database에 스마트하게 저장 알아서 해줌
그래서 HTML CSS JS 이 정도만 아시면 누구나 웹서비스 개발이 가능합니다.
(출처: https://codingapple.com/unit/why-use-firebase/)

day36. 2024-11-26-화요일

수업진도

bookApp : 책 목록 띄우기
login - 복습 : 각 파일 내용들 설명 app.js, index.js
Handlebars탬플릿 at bookApp/book/bookList.ejs

각 페이지를 각각 파일로 나누어서 관리할 수있는게 아닌가? -> ejs & include의 역할

day37. 2024-11-27-수요일

###수업진도

bookApp/views/book: bestBook.ejs, recentBook.ejs, bookModdal.ejs, list.ejs
bookApp/views/posts -> 폴더 구성까지 진도 나감

세부 소스 리뷰

const ajax = new XMLHttpRequest() -> 브라우저 제공 객체, BOM (Browser Object Model)
table의 th/tr/td태그 속성
(출처: https://aboooks.tistory.com/59)
ul,li태그 : 목록 태그 ul>li로 사용한다

Handlebars탬플릿 at bookApp/book/bookList.ejs

https://velog.io/@rtandard1000/Handlebars-탬플릿-엔진이란-무엇인가

도서이미지 빈곳에 더미이미지 넣기 at bookList.ejs

html
       <img src="{{image thumbnail}}" alt="도서이미지" style="cursor:pointer; width:80%">
//{{thumbnail}} -> {{image thumbnail}로 변경

js
  //Handlebars로 도서이미지 출력시 이미지가 없으면 더미 이미지로 변환하기
  Handlebars.registerHelper("image",function(thum){
    if(thum) return thum
    else return "https://placehold.co/120x174"
  })

-> 결과

브라우저 vs. require vs. import

(bookApp/views/posts/write.ejs)
npm -> Web repository를 가지고 있다
BOM의 XMLHttpRequest를 사용하지 않는다

구글API 사용시 -> url로 요청한다 -> 이때 import 해야 한다 (로컬이 아니라 web에 가져옴)

브라우저는 로컬로 서버와 동기화할 수가 없다. 프론트엔드에 불과하다.

따라서 NodeJS에서 npm을 가지고 web repo를 사용해야 한다. -> node_modules에 설치, package.json에서 관리 -> require로 사용

var express = require('express'); in app.js
--> require()는 다 node_modules에 있는 라이브러리 -> 로컬이므로 웹이 아님

day38. 2024-11-28-목요일

수업진도

js_step1/JSLab/2.dom/dom7~9 - html과 js의 기능 구분, js에서 화면 그리기 장단점
js_step1/JSLab/5.함수/파라미터,리턴,호이스팅,일급함수,고차함수.js
js_step1/JSLab/es6-es11/구조분해할당, 배열구조분해, 도전문제
bookApp_kakaoAPI : 글쓰기 목록 저장하고 게시판에 띄우기 list.ejs, write.ejs
projec2 안내 : https://velog.io/@rtandard1000/project-2.-웹서비스-구현하기
git hub 설명 : https://velog.io/@rtandard1000/Git-hub-세팅하기

day39. 2027-11-29-금요일

수업진도

bookApp_kakaoAPI : users/mypage.ejs,update.ejs -> 내 정보 확인/수정, posts/list.ejs -> 작성글에 좋아요 추가

내 정보 확인 및 수정

작성글에 좋아요 기능

Hanna

computer sight

이전 포스트

Starting Front-end : day26~day30

다음 포스트

day31~day39

KOSMO 24.10~25.03

수업진도

구글 클라우드 플랫폼 - 유투브 API 사용하기

수업진도

MVC패턴을 적용한 게시판 구현하기

MVC패턴 이란

기능 정의서

프론트 엔드

html5 - 시멘틱 태그(Semantic Tags)

태그 문법

NodeJS

노드 환경 구성하기 : workspace_node/bookApp

프로젝트 생성하기

수업진도

웹 개발 4요소

node.js로 도서관리시스템 구현

workspace_node/bookApp

카카오 API

bookApp 프로젝트 - 도서관리시스템 (가칭)

프로젝트 기본 디렉토리

EJS(Embeded Javascript Templates)

페이지 불러오기 URL

외부 라이브러리 추가

home 화면 설계

bookList 설명

home.ejs 설명

jQuery

수업진도

컴퓨터 구성 요소

변수 선언 및 할당

템플릿 리터럴

null과 undefined

boolean 거짓 6가지 in JS

부정

연산자

비교

함수

Firebase 란 무엇인가!

수업진도

login - ui

세부 소스 리뷰

Handlebars탬플릿 at bookApp/book/bookList.ejs

도서이미지 빈곳에 더미이미지 넣기 at bookList.ejs

브라우저 vs. require vs. import

수업진도

수업진도

내 정보 확인 및 수정

작성글에 좋아요 기능

Starting Front-end : day26~day30

day40~

0개의 댓글