🔥 부트캠프-웹 개발 🔥

두산베어스 선수 정보 프로젝트 제작중 naver API를 이용한 news 호출시 CORS 에러가 발생하였다. 이번엔 Node.js 백엔드를 추가하여 CORS 에러를 해결해 보았다. https://github.com/yeonhub/PP-doosan_bears_node GitHub - yeonhub/PP-doosan_bears_node: [개인 프로젝트] 두산 베어스 선수 정보 (Node.js) [개인 프로젝트] 두산 베어스 선수 정보 (Node.js). Contribute to yeonhub/PP-doosan_bears_node development by creating an account on GitHub. github.com 1) CORS 에러 서로간의 공유(CORS) 원격 소스 공유 (Cross-Or..

오늘은 MySQL을 연결하여 db를 업데이트, 관리하는 것을 배웠다. 결국 동적 서버에 업로드하고 실시간으로 데이터를 주고받으려면 sql이 필요하기 때문에 서버에 올리기 전에 로컬에서 사용법을 배웠다. 1) SQL db 생성 MySQL에서 database와 초기 데이터 출력을 위한 table을 생성했다. create database todo; use todo; create table todos ( id int primary key auto_increment, text varchar(100) not null , isChk boolean not null ); insert into todos (id, text, isChk ) value (1,'친구만나기', true), (2,'점심먹기',false), (3,'..

회원가입 시 기능들을 소개해 주는 팝업창을 추가했다. 요구사항 1) 팝업 형식으로 배경 처리 2) 좌우로 스와이프 3) 마지막 페이지 넘길 시 홈화면 오늘하날의 회원이 되신걸 환영합니다! 여러가지 기능들을 알려드릴게요. { dispatch(offJoin()) } } > 다른 회원님들의 오늘 하날을 볼 수 있어요! 마음에 드는 하날에 좋아요를 누르고 댓글도 달아보세요. 홈 화면에 사용법 팝업을 위한 background와 swiper를 추가했다. 회원가입 시 onJoin변수가 true로 바뀌게 되고 todays로 navigate 됨과 동시에 팝업이 뜨게 된다. { dispatch(offJoin()) } } > swiper 옵션에 onReachEnd(마지막 페이지 swiper시) onJoin변수를 false로..

node를 이용해 backend의 구조를 설계할 때 어제처럼 index.js에 모두 넣는 것보다 나누어 설계하는 것이 유지보수, 관리하기에 유용하다. 따라서 어제 만들었던 Todo 예제를 MVC 디자인 패턴을 적용하여 총 3개의 폴더를 추가로 만들 것이다. 1) index node express에 기본 내장된 Router 기능을 이용하기 위해 index 코드를 수정해야 한다. app.get('/todos', (req, res) => { res.send(todos) }) app.delete('/todos/:id', (req, res) => { todos = todos.filter(item => item.id !== Number(req.params.id)) res.send(todos) }) app.post(..

params Todo 예제 1) params node에서 서버에 요청을 보낼 때 매개변수를 같이 보낼 수 있다. 아래 코드를 보면 data에 총 5개의 객체가 있고, 3000/language엔 모든 data가 출력된다. const express = require('express'); const app = express(); const port = 3000; app.use(express.json()); const data = [ { id: 1, name: 'vanillascript', price: 100, desc: '바닐라 스크립트', imgurl: '/images/img1.jpg' }, { id: 2, name: 'node', price: 200, desc: '노드', imgurl: '/images/i..

정보처리산업기사, 데이터베이스 과목을 공부하면서 배웠던 정규화를 실무에서 어떻게 적용시키는지 배웠다. 1) 정규화 정의 데이터베이스 정규화는 데이터 중복을 제거하는 과정이다. 이를 통해서 이상현상을 방지하고 데이터의 유지 보수성을 향상할 수 있다. 2) 1NF (1차 정규화) 1차 정규화는 열에 하나의 값만 들어가게 분리하는 것이다. 3) 2NF (2차 정규화) 1차 정규화가 끝난 뒤 주요키(기본키)가 2개 이상 존재하지 않게 분리하는 것이다. 4) 3NF (3차 정규화) 학생 테이블에 과목코드, 담당 교수는 과목 테이블에 있어야 할 내용들이다. 따라서 아래와 같이 기본키가 될 수 있는 과목을 기준으로 하나의 테이블을 더 만들어 분리한다.

1) CREATE 데이터베이스를 만든 뒤 해당 데이터베이스를 선택하고 테이블을 만들었다. 테이블마다 NO를 정수형으로 선언하고 NAME을 문자로 선언했다. create database mytest; use mytest; create table academy_b ( no int primary key, name varchar(20)); create table academy_a ( no int primary key, name varchar(20)); create table academy_c ( no int primary key, name varchar(20)); 2) INSERT 각각 테이블에 형식에 맞는 값을 넣어주었다. NO와 NAME 두 가지밖에 없으므로 VALUES에 모두(2개) 입력을 하면 어디에 어..

1) Node express 설치 https://expressjs.com/ko/ Express - Node.js 웹 애플리케이션 프레임워크 Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크 $ npm install express --save expressjs.com node를 쉽게 사용하기 위해 node의 프레임 워크 express를 설치해야 한다. 먼저 node를 사용할 폴더에 초기화를 해준다. package.json 파일이 만들어 지면 성공이다. npm init 그리고 express도 설치치해준다. npm install express 2) nodemon 설치 https://www.npmjs.com/package/nodemon nodemon Simple monitor script for use..

오늘은 어제 테스트했던 현재 위치, 날씨를 작업 중인 프로젝트에 이식했다. 1) 현재 위치 현재 위치가 적용되어야 할 부분은 업로드, 내주변, 궁금해요 총 세 곳이다. 먼저 어제와 마찬가지로 hook을 만들었다. import { useEffect, useState } from "react"; import axios from "axios"; import { useDispatch } from "react-redux"; import { getLocation } from "../store/modules/acountSlice"; const useLocationHook = () => { const dispatch = useDispatch() const [address, setAddress] = useState(''..