본문 바로가기

분류 전체보기

 (177)
[6주차] [20221219] Cross Origin Resource Sharing (CORS) CORS란? Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. CORS는 HTTP-header 기반의 매커니즘으로, 현재 브라우저가 접속한 origin과 다른 origin (도메인이나 서브도메인, 프로토콜, 포트가 다른 곳)에 요청을 보내는 것 크로스 오리진 요청을 보내려면 리모트 오리진에서 전송받은 특별한 헤더가 필요하다. CORS가 만들어진 배경 과거 수 년 동안, 한 사..
[WIL] [5주차] 2022.12.12 ~ 2022.12.17 회고 (feat. CORS) 5주차에는 아래의 내용을 학습하고, 백엔드 분들과 협업 과제를 진행했다. 협업에 필요한 코딩 컨벤션을 정하고 프로젝트에 적용하기 (pre websoket 통신을 가능하게 해주는 socket.io 라이브러리 3 layered architecture jest와 supertest 라이브러리를 이용한 unit & integration test socket.io를 통해 webSocket 통신을 해보니 정말 재미있었다. 실전 프로젝트에서 webSocket으로 실시간 화상 프로그램이나 채팅 시스템을 만들어보고 싶다고 생각했다. (다른 팀원들의 동의를 얻을 수 있을지는 의문이지만...ㅋㅋ) 그리고 3 layered architecture와 test 방식을 익히는데 꽤 많은 시간이 필요했고, 실제로 프로젝트에서 유닛테스..
[6주차] [202212-17] 협업을 위한 준비, 프로젝트 세팅 (feat. README.md) 오늘은 오전 회의때 프런트와 백 모두 모여, 기본적인 github 협업 툴을 사용하는 법에 대해 팀원과 공유하고, 컨벤션을 정했다. pritter 익스텐션을 사용해서 각자 VS Code에 다운로드 했고, .prettierrc 파일에 룰을 몇가지 설정하여 깃헙 레포지토리를 통해 공유했다. 원래는 eslint를 같이 사용하고자 했으나, 처음 접하는 익스텐션에 어려움을 느끼는 분들이 계셔 프리티어만 적용하기로 했고, 대신 프리티어 규칙을 지난번에 비해 몇가지 더 추가/수정했다. module.exports = { arrowParens: 'always', bracketSpacing: true, jsxBracketSameLine: false, jsxSingleQuote: false, printWidth: 80, p..
[6주차] [20221216] 프런트 개발자와의 첫 협업, 와이어프레임 그리기와 api 설계 오늘은 프런트엔드 분들과 팀을 이뤄 협업을 시작하는 주차다. 지난 3주간 각자의 주특기(node.js와 react)에 대한 심화 학습을 진행했고, 이제 프런트와 백이 만나서 그동안 배운 내용을 복습하는 개념으로 하나의 미니 프로젝트를 만들어 보는 단계이다. 오늘은 아침부터 모여서 프로젝트 기획 회의를 진행했는데, 처음 프런트와 만나다보니, 프런트 분들이 하실 수 있는 범위를 잘 몰라서 트러블이 있었다. 처음으로 프런트와 백이 협업을 했기 때문에, 프런트 쪽에서는 api 설계에 대해 잘 모르셨고, 백인 우리는 프런트 분들이 작업하는데 걸리는 시간과 난이도를 잘 몰랐다. 우리는 파트별로 나뉘어 와이어 프레임과 api 설계를 진행했다. 작업을 마치고 다시 모여 이야기 하기로 한 시간이 되자, 프런트 분들이 많..
[5주차] [20221214] Object.assign() 오늘은 팀 프로젝트로 개발 중인 3 layered architecture 게시판의 테스트 코드를 구현 중이다. 강의에서 배운 예시 코드에 갑자기 Object.assign()이 등장했다. test('createNaverUser Method의 Success Case', async () => { // 새로운 서비스 할당 let naverUsersService = new NaverUsersService(); // Repository를 Mocking naverUsersService.naverUsersRepository = Object.assign( {}, mockNaverUsersRepository ); ... }); Service layer 객체에 mockRepository 객체를 할당하기 위한 코드인데, 부끄..
[5주차] [20221213] TypeScript 핸드북 입문 오늘은 타입스크립트가 무엇인지에 대해 알아보고, 타입스크립트를 잘 사용하기 위한 설정 방법 등을 알아보았다. 공부하면서 내용 정리는 노션으로 했는데, 시간이 없어 블로그 정리는 못하고 노션 링크를 남긴다. TypeScript - the beginning TypeScript for JavaScript Programmers summer-driver-168.notion.site 3레이어 아키텍처를 적용해서 기존에 구현한 게시판 CRUD를 팀프로젝트로 진행 중이다. 본격 깃 & 깃헙을 이용해서 협업을 진행 중인데, 협업 툴을 사용하며 만날 수 있는 여러가지 에러를 만나는 중이다. main-dev-feature 브랜치 depth를 나누어 커밋 커밋 컨벤션 룰 적용 eslintric, prettier 사용으로, 코..
[5주차] [20221212] 3 Layered Architecture Pattern에서 테스트 코드를 위한 의존성 주입 (feat. 생성자 주입, jest.js) 오늘은 배우워야 하는 내용이 너무 많았어서, 이론 베이스 정리는 생략해야겠다. 3 layerd architecture 구조 controller : 클라이언트의 요청을 받아 서비스에 요청 처리를 전달한 후, 응답 값을 클라이언트에 전달 service : 사용자의 요구사항(비즈니스 로직)을 처리 / db 정보가 필요할 때는 repository에 요청 repository : DB관리 (연결, 해제, 자원 관리) / DB CRUD 작업 이렇게 분리한 아키텍처에 jest 라이브러리를 이용해 단위(unit) 테스트를 적용해 보았다. 아래 그림과 같은 Mocking framework를 이용해 가짜 객체인 mockData를 주입하여 DB에 접근하여 데이터를 수정하지 않고, 테스트를 진행할 수 있다. Mock 이란 테스..
[4주차 WIL] 2022.12.05 ~ 2022.12.10 회고 2022.12.05(월) ~ 2022.12.08(목) 4주차동안에는 Node.js와 express.js 프레임워크에 amazon RDS를 사용해 SQL DB를 붙이고, jwt 토큰을 사용하여 사용자 인증 기능까지 붙여보았다. [4주차] [20221205] Joi validation & Sequelize를 이용한 mySQL 설정 [4주차] [20221206] thunder client에서 req.cookies 넘기기 [4주차] [20221207] express에서 Router : Middleware와 Router [4주차] [20221208] node.js의 require() 작동 방식 [TIL] [4주차] [20221208] 4주차 회고 - 코드리뷰와 리팩토링 / package.json, EC2 set ..

티스토리툴바