개발공부일지

목차 1. multer 2. axios 사용하여 파일 업로드 해보기 1. multer - input box에서 file로 첨부파일을 올리고 submit 했을때 요청바디가 달라져서 새로운 바디 파서를 장착해야한다. - BodyParser를 해주는 middleware로 'multer' 전송 npm install multer const multer = require("multer"); const upload = multer({ storage: multer.diskStorage({ destination: (req, file, done) => { done(null, "./uploads"); }, filename: (req, file, done) => { const ext = path.extname(file.ori..

목차 1. 인가코드 받기 2. 토큰 받기 3. 사용자 정보 가져오기 1. 인가코드 받기 GET https://kauth.kakao.com/oauth/authorize?client_id=값&redirect_uri=값&response_type=값 app.get("/auth/kakao/login", (req, res, next) => { try { const redirectURI = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${KAKAO_REDIRECT_URI}&response_type=code`; res.redirect(redirectURI); } catch (e) { next(e); } }); - 카카오 ..

목차 1. TDD 2. jest 3. 단위테스트 4. 통합테스트 5. module 1. TDD - 테스트 주도 개발 ( Test-Driven Development) - 코드를 작성하기 전에 해당 코드를 테스트하는 테스트 케이스를 작성하는 개발 방법론 2. Jest https://jestjs.io/docs/getting-started - meta가 만든 테스트 프레임워크로, 주로 TDD 및 단위 테스트에 사용 - jest는 테스트 작성을 쉽게 만들어주며, 코드의 품질을 높이고 버그를 예방하는 데 도움 npm init -y npm install -D jest npm install express - package.json 에서 수정 "scripts": { "test": "jest", "start": "node..

목차 1. 설정하기 2. Sequelize 사용 3. DTO 4. create 1. 설정하기 - 드라이버 설치하기 npm init -y npm install express cors sequelize mysql2 dotenv - index.js / app.js / route.js - user → user.route / user.controller / user.service - constants → db / index → entity → user.entity - dto.js → user.dto 2. Sequelize 사용 - entity.js 파일에서 db와 connection (dotenv를 사용해서) - user.entity.js 파일에서 sequelize.define() 필드와 속성 지정 3. DTO ..

목차 1. ORM 2. Sequelize 3. create (INSERT queries) 4. findAll (SELECT queries) 5. findOne 6. update (UPDATE queries) 7. destroy (DELETE queries) 1. ORM - Object Relational Mapping - 데이터 관리 주고받을때 '객체'로 데이터베이스 관리하는 데이터는 '테이블' - 객체와 테이블을 객체지향으로 사용하기위한 라이브러리 → 웹서버 안에서 DB내용을 조작하기 위한! → mysql2를 사용해도 가능은 했지만 (통신을 위한것이라서) - CRUD를 위한 코드와 테이블이 추상화 되어있다 - 메서드던지 함수던지 인자를 넘길때 객체를 주로 넘기는데 그 객체가 어떻게 만들어진건지 확인해야..

목차 1. 회원가입 만들기 2. RESTful API 명세 3. 예외처리 1. 회원가입 만들기 - front - form element에 submit eventListener해서 유저의 정보를 객체에 담고 - axios를 사용해서 유저 정보를 바디에 담아 POST 요청을 한다. → localhost:4000/users - 가입이 된다면 / 으로 돌아가게하고, 가입이 되지 않는다면 aletr으로 Error Message를 알려준다. - back - DB연결 npm install mysql2 - database, table(users) 생성하고 pool connection을 한다. - app.post('/users')에서 DB에 INSERT를하고 받은 결과물을 SELECT(유저의 아이디, 이름만) 로 다시 ..

목차 1. Front-end 구현 2. Back-end 구현 3. CORS Error >> 간단하게 로그인 구현하기

목차 1. AJAX 2. fetch() 3. AXIOS 1. AJAX - Asynchronous JavaScript and XML - XML은 person으로 표현 형태가 스트링이 더 길어서 비효율적이라 점점 안쓰는거고 - 과거에는 요청을 보내면 모든 요청을 다줬는데 ajax를 쓰면서 페이지가 존재한다면 필요한 부분만 데이터로 요청하기로 바뀜! - 메인페이지가있다면 분리해서 따로따로 요청받아서 뿌려주면 로딩이 즉각적으로 보여지고 한번에 가져오는시간보다 손이 많이가겠지만 확장성, 수정사항에 편리한 장점도 있음 const xhr = new XMLHttpRequest(); xhr.open(); xhr.setRequestHeader(); xhr.send(); xhr.onload = () => { }; - 간단한..

목차 1.insert 2. delete 3. update Comment 구현하기 2 이어서 댓글쓰기 (${this.props.length}) 등록 ${item.userid} ${this.commentContent(item)} 💣 ${item.date} - comment component로 위의 html처럼 보이게끔 만들어주기위해서 - form input box를 만들어 작성을 할수있어야하고 - 등록을 눌러서 작성한 내용을 list에서 볼수있게 하고 - 작성한 내용을 클릭했을때 input box로 바뀌면서 수정할 수 있어야하고 - 작성한것을 삭제까지 할수있어야함 1.insert - 이벤트 target의 value를 insertItem 메서드에 넣어 input box에 적은 내용을 list에 보여준다. - ..

목차 1. 디렉토리 구조와 용어 2. EVENT 3. this 1. 디렉토리 구조와 용어 / | - /js | --- /core | ------- component.js | --- /src | -------- /components | --------------- comment.js | -------- /contents | --------------- /comment | -------------------- form.js | -------------------- item.js | -------- /pages | --- app.js | --- index.js - comment component를 바라보는 form, item(list)가 있고 트리구조로 comment는 app을 이렇게 가장 큰 Componen..