You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
![[NODE] 📚 Chalk 모듈 - 노드 콘솔 로그를 컬러풀하게 ✨](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fz5fNG%2FbtrEH5PndVS%2FKJkSOvEogES984XI63EXfk%2Fimg.jpg)
[NODE] 📚 Chalk 모듈 - 노드 콘솔 로그를 컬러풀하게 ✨
브라우저 console.log 꾸미기 브라우저 콘솔은 CSS 스타일시트를 지원하기 때문에 조금 번거롭긴 하지만 만들기 어렵지는 않다. console.log('%cHello, world!', 'color: #a4f644; background-color: red;'); %c 이후의 글자에는 모두 같은 스타일이 입혀지게 된다. 새로운 스타일을 씌우고 싶으면 %c를 또 쓰면 된다. 프론트앤드에서는 전혀 어려운 작업이 아니기 때문에, 당연히 백앤드에서도 되는 것으로 생각하는 분들이 많은데 아니다. 위 코드처럼 css값을 주어도 여전히 밍둥맹둥한 하얀글씨만 나올 것이다. 따라서, 다른 방법으로 적용을 해야 한다. 노드 console.log 꾸미기 터미널에서는 색깔을 변경하기 위해서 ANSI escape code를 ..
![[NODE] 📚 cors 모듈 - CORS 간편 설정하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FGIsfk%2FbtrG3EVO6jc%2FrD3tsxeLek21S6Xqml2VWk%2Fimg.png)
[NODE] 📚 cors 모듈 - CORS 간편 설정하기
CORS 허용 설정 하는 방법 Node.js 서버 프로젝트에서 cors(cross origin resource sharing) 문제를 해결하는 방법은 크게 2가지가 있다. 하나는 직접 헤더를 명시해서 출처(origin)을 필터링하는 것이고, 다른 하나는 cors 노드 패키지를 사용해 좀더 간편하면서 유기적으로 출처를 필터링 할수 있다. 1. 직접 헤더에 명시 CORS 문제를 해결하기 위해서는 응답 헤더에 Access-Control-Allow-Origin 헤더를 넣어야 한다. 이 헤더는 클라이언트 도메인의 요청을 허락하겠다는 뜻을 가지고 있다. //^ CORS 허용 res.setHeader('Access-Control-Allow-origin', '*'); res.setHeader('Access-Contro..
![[EXPRESS] 📚 미들웨어 확장법 사용 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FyKnhz%2FbtrqMvBygi6%2F9XKk3KeYv6ui5Pb0kT9nT1%2Fimg.png)
[EXPRESS] 📚 미들웨어 확장법 사용 정리
미들웨어 확장법 미들웨어 안에 미들웨어를 넣는 방법으로 조건에 따라 다른 미들웨어를 적용하는 패턴이다. app.use(morgan('dev')); // 보통 이렇게 바로 app.use()에 미들웨어를 넣어서 사용하지만 // app.use()의 콜백 함수 내에 미들웨어를 넣는 방법을 일컫는다. app.use((req, res, next) => { morgan('dev')(req, res, next); }) 이때, 미들웨어에 함수호출 인자를 명시해주는데, 원리는 간단하다. 예를들어, app.use(morgan('dev'))의 인자 함수 부분 morgan('dev')도 사실 메소드 내부 내에서 위 사진 처럼 함수 인자를 전달받아 콜백 함수 호출이 이루어 진다. 이 원리를 이용해서 (req, res, next)..
![[NODE] 📚 express-rate-limit 모듈 - API 사용량 제한하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FYX7hA%2FbtrG2s3iuLE%2FPFRD6wxFvGkt4DYKEnxKC0%2Fimg.png)
[NODE] 📚 express-rate-limit 모듈 - API 사용량 제한하기
API 사용량 제한하기 만일 인증된 사용자가 과도한 API 사용을 하게 되면 API 서버에 무리가 갈 수 있다. 또한 DOS공격에도 대비해야 되는데, DOS란 지속적으로 서버에 요청을 과도하게 해서 서버를 망가뜨리는 걸 의미한다. 예를 들어, api요청을 계속 새로고침해서 마구마구 요청하게 되면 그게 DOS공격인 셈이다. 이를 개인이 하지않고 집단이 단체로 하게되면, 한번 쯤 들어본 디도스 공격이 바로 이걸 의미한다. 따라서 일정 기간 내에 API를 사용할 수 있는 횟수를 제한하여 서버의 트래픽을 줄이는 것이 좋다. 거기다 유료/무료 서비스를 운영한다고 하면, 과금 체계별로 횟수에 차이를 둘 수도 있을 것이다. (무료 회원은 100번만, 유료 회원은 1000번 이용가능하게 설정) 이러한 기능은 expre..
![[NODE] 📚 API 서버 버전 관리 하는 방법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbz7Qug%2FbtrGO9Qevnt%2F4DbqrXl7G0bfU1Ib64xuFk%2Fimg.png)
[NODE] 📚 API 서버 버전 관리 하는 방법
API 서버 버젼 관리 보통 API 서버 소스의 라우터 부분을 보면 파일이 V1, V2 이런식으로 되어 있을 것이다. 라우터의 이름인 v1은 버전 1이라는 뜻이다. 라우터 파일 마다 버전을 붙이는 이유는 한 번 버전이 정해진 이후에는 라우터를 함부로 수정하면 안 되기 때문이다. 왜냐하면 다른 사람이나 서비스가 기존 API를 쓰고 있음을 항상 염두에 두어야 하기 때문이다. 따라서 기존의 API 서버의 코드를 바꾸면, 이전 API를 사용 중인 프로그램들이 오작동할 수 있기 때문에, 기존 사용자에게 영향을 미칠 정도로 수정해야 한다면 버전을 올린 라우터를 새로 추가하고, 이전 API를 사용하는 사람들에게 새로운 API가 나왔음을 알리는 것이 좋다. 이를 Deprecated 처리 라고 한다. 또한 이전 API를..
![[NODE] 📚 API 서버 통신 이해하기 (JWT 토큰 신청/발급 절차)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbbZXz4%2FbtrqCbXd2Rd%2F3DW4jI1eA41fzACsJryUZ1%2Fimg.jpg)
[NODE] 📚 API 서버 통신 이해하기 (JWT 토큰 신청/발급 절차)
API(Application Programming Interface) : 다른 애플리케이션에서 현재 프로그램의 기능을 사용할 수 있게 허용하는 접점 이 장에서는 NodeBird 앱의 REST API 서버를 만든다. API 서버는 프런트엔드와 분리되어 운영되므로 모바일 서버로도 사용할 수 있다. 특히 JWT 토큰은 모바일 앱과 노드 서버 간에 사용자 인증을 구현할 때 자주 사용된다. 웹 API는 다른 웹 서비스의 기능을 사용하거나 자원을 가져올 수 있는 창구. 위와 같은 서버에 API를 올려서 URL을 통해 접근할 수 있게 만든 것을 웹 API 서버라고 한다. 필요 모듈 UUID 모듈 # npm npm install uuid # v4 만 설치 npm install uuid4 [NODE] 📚 UUID 모듈 ..
![[NODE] 📚 UUID 모듈 사용법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcmHddv%2FbtrGjE4QUTE%2FcxahB5jPVI1xdk6DWoZnW0%2Fimg.webp)
[NODE] 📚 UUID 모듈 사용법
UUID 란? UUID는 Universally Unique IDentifier의 약자로, 전세계에 하나밖에 없는 ID라는 뜻이다. 이런 ID는 고유하기 때문에 서버에서 사용자들에 UUID를 붙여서 구분하는 등 여러 방면에서 유용하게 쓰일 수 있다. 예를들어, DB를 다룰 때 PK를 주로 auto increment 값으로 사용하지만, URL이나 화면상에 노출 시키면 크롤링이나 인젝션 공격에 취약하다는 단점이 있다. 때문에 public한 화면단에서는 ramdom 한 UUID를 사용하는 것을 권장하는 편이다. UUID는 16진수 8자리-4자리-4자리-4자리-12자리 패턴으로 표현된다. // UUID 패턴 예시 1604b772-adc0-4212-8a90-81186c57f598 UUID로 표현할 수 있는 객체의 ..
![[NODE] 📚 구글 로그인 (passport-google-oauth20) ✈️ 구현](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcK5NXK%2FbtrqAc1GYiU%2FdGO7e6FU94cBzAEpRLMEfK%2Fimg.png)
[NODE] 📚 구글 로그인 (passport-google-oauth20) ✈️ 구현
구글 로그인 OAuth 신청 우선 https://console.developers.google.com/apis 에 접속해서 client ID와 client secret를 발급받아야 한다. Google Cloud Platform 하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요. accounts.google.com 1. 새 프로젝트 생성 2. OAuth 동의 화면 구성 구글 로그인할때, 서비스 동의 화면에 어떤 정보를 띄울지 구성한다. 각각 정보를 기입하고, 저장후 계속 버튼을 누른다. 3. SCOPE 정보 설정 4. OAuth 클라이언트 ID 생성 5. 테스트 사용자 작성 6. 클라이언트 아이디/비밀번호 발급 생성된 클라이언트 ID와 보안 비밀번호..
![[ORM] 📚 Sequelize - left join 하는법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FECgtZ%2Fbtrm557mohJ%2FQpOTmSgv38c3s9EXrSmYTK%2Fimg.png)
[ORM] 📚 Sequelize - left join 하는법
Sequelize left join 시퀄라이저에서 include는 기본적으로 inner join 처리이다. 다음 코드를 보자. [Associate 설정] Shop.hasMany(ShopAd, {foreignKey : 'shop_id', as : 'ads'}); ShopAd.belongsTo(Shop, {foreignKey : 'id'}) [ORM] Shop.findAll({ where: {id:shopId}, include: [{ model: ShopAd, as: 'ads', where: { is_valid: 1, is_vertify: 1 } }] }) [SQL 로그] SELECT `Shop`.`id`, `Shop`.`user_id`, `Shop`.`short_name`, `Shop`.`descripti..
![[NODE] 📚 네이버 로그인 (passport-naver-v2) ✈️ 구현](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fboo5hP%2Fbtrm5x9sRJ3%2FhBbCMKkKw707uAzo2cFifk%2Fimg.png)
[NODE] 📚 네이버 로그인 (passport-naver-v2) ✈️ 구현
네이버 로그인 OAuth 신청 NAVER Developers 네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음 developers.naver.com 1. callbackURL 및 네이버로 요청할 정보(scope) 설정하기 2. 등록을 완료하면 해당 클라이언트 아이디와 비번 정보가 나온다. 다만, 아직 정식으로 등록된 것이 아니라서, 개발 중 상태가 되는데 네이버 검수요청을 통해 정식적으로 네이버 인증 애플리케이션을 등록하던지, 아니면 단순히 공부용이라면, 멤버관리 탭에서 테스트 로 이용할 다른 네이버 아이디를 등록하면 된다. 참고로 관리자 아이디는 따..
![[NODE] 📚 카카오 로그인 (passport-kakao) ✈️ 구현](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbZFMsG%2FbtrmYlhODC3%2FUyNBimUWFC7GvUsg7AvcNK%2Fimg.png)
[NODE] 📚 카카오 로그인 (passport-kakao) ✈️ 구현
카카오 로그인 OAuth 신청 카카오 로그인을 위해서는 카카오 개발자 계정과 로그인용 애플리케이션 등록이 필요하다. https://developers.kakao.com 에 접속하여 개발자 계정을 만들고 아이디를 만들어주자. Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 1. 로그인을 하고 애플리케이션 추가를 진행하자. 자신이 진행하는 포트폴리오 프로젝트를 적어주면 된다. 2. 도메인을 등록해준다. 콜백 받을 도메인을 등록해야 카카오 서버로부터 카카오 계정 정보를 넘겨 받을수 있기 때문이다. 도메인은 여러개를 적어줄수 있다. 3. 카카오 로그인을..
![[NODE] 📚 Passport 모듈 사용법 (그림으로 처리 과정 💯 이해하기)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdFv1U3%2FbtrmZHw9zuB%2FjrrXoSMDZYuWdyUkDGjfR0%2Fimg.png)
[NODE] 📚 Passport 모듈 사용법 (그림으로 처리 과정 💯 이해하기)
Passport 모듈 Passport는 이름 그대로 서비스를 사용할 수 있게끔 해주는 여권 같은 역할을 하는 모듈이다. 회원가입과 로그인은 직접 구현할 수도 있지만, 세션과 쿠키 처리 등 복잡한 작업이 많으므로 검증된 모듈을 사용하는 것이 좋다. 그런 방면에서, Passport는 사용하기 좋은 검증된 모듈이다. 예를들자면, 여권이라는 것은 입/출국 심사시에 해당 여권 소지자가 입/출국 자격에 대해 인증하는 역할을 한다. 이를 서버에 비교해보면, 클라이언트가 서버에 요청할 자격이 있는지 인증할 때에 passport 미들웨어를 사용하는 것이다. 요즘에는 서비스에 로그인할 때 아이디와 비밀번호 이외에 구글, 페이스북, 카카오 같은 기존의 SNS 서비스 계정을 이용하여 로그인 하는데, passport모듈이 바로..
