[새싹X코딩온]웹 풀스택

드디어 프로젝트가 끝나고 다시 수업을 듣게 되었습니다! 오늘은 프론트에서 매우매우 중요하다고 하는 리액트에 대해서 배워보았습니다! 1. 리액트 왜 배워야하지? angular-양방향 데이터 바인딩--> 양방향 웹 애플리케이션에 적합, react-동적 사용자 인터페이스, 페이스북에서 만든 오픈소스 javascript 라이브러리!!, 규모가 큰 라이브러리에 적합, angular보다는 배우기 쉽다. vue.js-2013년에 출시된 javascript 프레임워크, 현재 점유율은 리액트가 가장 높음 리액트 공식문서 React React The library for web and native user interfaces react.dev 그런데 라이브러리?? 프레임워크랑 헷갈려서 정리해보았습니다. 라이브러리(Libr..

1. 쿠키(Cookie) VS 세션(Session) 쿠키는 로컬이고 세션은 서버에 저장 되는 것 쿠키는 웹브라우저에서 확인가능하지만 서버는 확인 불가능함 따라서 서버가 보안측면에서 더 우수하고 세션은 서버에 저장되어있으니 서버까지 갔다와야하지만 쿠키는 서버에 갔다올 필요가 없으니 속도는 쿠키가 더 빠르다 그래서 로그인 정보와 같은건 세션을 주로 사용한다. 2. 환경변수 설정 index.js // const ps = process.env;//process.env는 환경변수임 // console.log(ps); const express = require('express'); const app = express(); const dotenv = require('dotenv'); dotenv.config(); /..

1. REST API? Representational state transfer API : REST 아키텍쳐 스타일을 따르는 API 즉, 클라이언트와 서버 간의 통신 방식을 정의할 때 REST 원칙을 따름 ==> REST 기반으로 서비스 AP I를 구현한 것!! method는 어떤 방식으로? 1. GET:읽기, 검색== Read (특정 뉴스기사를 클릭했을 때 해당 뉴스의 제목 & 내용 가져오기) 2. POST: 입력, 등록 ==Create (댓글 등록, 게시판 글 등록) 3. PUT: 모두 수정==Update(원래 있는 글 모두 수정) 4. DELETE: 삭제==Delete 5. PATCH: 일부 수정(Update) 그럼 백엔드가 있어야 API사용할 수 있는건가? 백엔드에서 연결된 DB에 대해 API를 ..

저번시간에는 visitor파일들이 많아서 visitor지옥이었는데요.. .오늘은 sequelize변수들이 많아서 sequelize지옥이었습니다.. sequelize지옥 같이한번 가볼까요?> { res.render('index'); }; //read all exports.getVisitors = async (req, res) => { // [before] // res.render('visitor', { data: Visitor.getVisitors() }); // [after-> before] // console.log(Visitor.getVisitors()) // Visitor.getVisitors((result) => { // console.log('controller >>', result); // r..

오늘은 드디어 MVC에 MySQL을 연결하는 것을 배웠습니다... 파일이 너무 많아서 왔다갔다하는데 너무 헷갈렸고.. 복잡하고.. 그래서 미뤘다가는 큰일 날 것 같다는 생각이 들어서 호다닥 정리를 해보도록 하겠습니다. 우선 파일 구조는 이렇게 만들면 됩니다.. 아직은 어색하기만 한 복잡한 구조의 파일들.. 1.작성 후 “등록” 을 누르면 DB 에 저장된다. (Create) 2.“등록” 된 내용이 아래 Table 에 바로 보인다. (Read) 3.“수정” 을 누르면 방명록 수정이 가능하다. (Update) 4.“삭제” 를 누르면 방명록이 삭제된다. (Delete) 오늘 해내야 할 것들입니다.... CRUD라고 하죠..Create, Read, Update, Delete 일단 먼저 해주어야 할 것은 npm i..

오늘은 지난 시간에 이어 MYSQL과 MVC패턴에 대해서 배웠습니다!! 한번 다시 정리하면서 복습해보도록 하겠습니다 ㅎㅎ 1. MySQL 지난 시간에 dml에서 select문을 이어서배웠습니다 1) order by order by이 default값은 asc(오름차순)이고, 내림차순으로 정렬하기 위해서는 order by (key) desc를 해주면 됩니다! 코드로 알아볼게요~ -- -- order by 없는 경우: PK기준으로 오름차순 정렬 SELECT * FROM customer; SELECT * FROM customer order by custname; -- asc가 default값이기 떄문에 생략하면 가나다 순으로 오름차순 정렬이 됨 SELECT * FROM customer order by custn..

1. 데이터베이스 개요 1) database VS file system 지금까지는 우리가 input에 입력을 해도 f5를 누르면 value가 사라졌었죠.. 이제는 데이터 베이스를 연결해서 사라지지 않도록 해볼겁니다! 우선 데이터 베이스가 뭔지부터 알아야 겠죠? 데이터베이스란? 데이터를 저장하는 구조/자료의 모음을말합니다. 우리는 자료를 저장할 떄 주로 microsoft exel에 표 형태로 데이터릉 저장했었죠? 그런 웹사이트에서는 파일을 통해서 데이터를저장하지 않고 왜 데이터베이스를 사용할까요? 바로 파일 시스템의 단점 때문입니다. 파일시스템 •단점1. 데이터 중복이 생길 수 있다. •단점2. 데이터 공유에 있어서 제한이 존재한다. •단점3. 구현과 유지보수에 시간이 오래 걸린다. 이러한 단점이 있습니다..

1. 폼 유효성 검사 console.log(form.name.checkValidity()) 어떤 요소를 선택해서 checkValidity()매서드를 사용하면 작성되었는지 않았는지 확인가능 이름 성별 남 여 async function axiosGet() { console.log('axiosGet 함수 호출!'); const form = document.forms['register']; const data = { name: form.name.value, gender: form.gender.value, }; console.log(form.name.checkValidity()); //같은 name으로 묶인 radio button은 하나만 선택되더라도 true를 반환 console.log(form.gender[0..