꿈많은 DEVELOPER

🤷‍♂️ NVM이란? NVM? Node Version Manager node.js 개발을 하다보면 한번쯤은 들어봤던 용어 NVM은 설명하자면 Node.js의 버전을 관리하는 도구이다. 왜 NVM을 사용해야 하는 이유? 회사에서 협업, 프로젝트를 진행하다보면 다양한 라이브러리, 프레임워크, 개발툴의 버전 호환 문제를 겪는다. 이러한 버전 호환문제를 해결하기 위해서 node.js 버전을 관리해주는 도구 NVM 필요하다. ex: Next.js 14 버전은 node.js 버전 18.17.4 이상부터 사용이 가능하다. 18.17.4 아래 버전이 Next.js 14 버전을 install or create 하면 오류가 발생하므로 node 버전을 업그레이드 해야한다. 이런 예시같은 버전 호환 문제가 발생할경수 NVM을..

GraphQL은 클라이언트가 서버로부터 효율적으로 데이터를 가져오는 것에 대해 흥미를 느껴서 GraphQL 활용해봤다. 프로젝트: Express와 GraphQL를 활용해서 RestfulAPI & GraphQL API 구축 학습: GraphQL 런닝커브가 있으며 Apollo-Server, schema, resolver 개념이 필요하다. GraphQL 구현 소스: Github Source ☝ 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/graphql-express-server GitHub - yoogukhyeon/graphql-express-server Contribute to yoogukhyeon/graphql-express-server development by ..

🤳TypeScript type과 interface의 공통점과 차이점 interface PeopleInterface { name: string age: number } const me1: PeopleInterface = { name: 'yc', age: 34, } type PeopleType = { name: string age: number } const me2: PeopleType = { name: 'yc', age: 31, } type과 interface는 객체의 타입을 지정하는 공통점이 있다. 👀TypeScript type과 interface의 차이점 interface interface PeopleInterface { name: string age: number } interface StudentI..

🤳 TypeScript 기본 타입 정리 문자열 타입을 정의 하는 방법 //string 타입 정의 let name: string = 'YOO'; 숫자에 타입을 정의 하는 방법 //number 타입 정의 let age:number = 30; Boolean true/false 타입을 정의 //boolen 타입 정의 const isChk: boolean = false; let isAdult: boolean = true; Array 타입을 정의 하는 방법 //array 2가지 타입 정의 방법 let array:number[] = [1, 2, 3] let array2: Array = [1, 2, 3] 함수의 반환값에 타입을 정의 해줄 수 있다. //return 값이 없을때는 값이 없으므로 void 정의해줄수있다. ..

🤳 TypeScript Global 설치 npm install -g typescript Typescript 글로벌 설치 🤳 Npm 설치 npm init -y -y 기본설치값 🤳 Typescript 필요한 모듈 설치 npm install ts-node typescript nodemon @types/node @types/express --save-dev 🐱‍👓 Typescript setting & options tsc --init 생성시 tsconfig.json 생성됨 { "compilerOptions": { "lib": [ "es5", "es6" ], "target": "es5", "module": "commonjs", "moduleResolution": "node", "outDir": "./build",..

🤳 Node.js Static File(정적 파일) 정적 파일이란, 직접 값에 변화를 주지 않는 이상 변하지 않는 파일을 의미합니다. 즉 css, image, js 파일 등을 의미합니다. 프로젝트를 진행하다보면 정적 파일 사용이 필요할때가 있습니다. 그래서 Express 이러한 정적 파일을 손쉽게 제공할 수 있는 미들웨어를 제공합니다. 🐱‍👓 Node.js Static File(정적 파일) Express에 static 메소드를 제공합니다. static 메소드를 활용해서 편리하게 정적폴더 public 미들웨어를 설정할수있습니다. ex : http://localhost:3000/public/css/common.css http://localhost:3000/css/common.css 이런식으로 파일경로를 접근..

🤳TypeScript Interface 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 말한다. 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 직접 인스턴스를 생성할 수 없고 모든 메서드가 추상 메서드이다. TS에서만 interface를 지원한다. 🐱‍👓 Interface 사용 이유 타입의 이름을 짓고 코드 안의 계약을 정의 프로젝트 외부에서 사용하는 코드의 계약을 정의하는 강력한 방법이다. 객체의 스펙 함수의 파라미터 함수의 스펙(파라미터, 반환 타입 등) 배열과 객체에 접근하는 방식 클래스 🤷‍♂️기본 예제 🐱‍👓 Properties 컴파일러는 프로퍼티의 두 가지 요소를 검사한다. 필수요소 프로퍼티의 유무 프로퍼티 타입 예약어로 프로퍼티를 세밀하게 컨트롤할 수 있다. ..

비즈니스 업무 자동화를 위해서 스케줄링을 돌려서 로직을 실행할수있는 node_schedule 입니다. 자바스크립트에서 제공하는 setInterval을 사용하면 특정 시간마다 함수를 실행시킬수 있습니다. 하지만 실행시켜야하는 시간이 복잡해지고 비즈니즈 처리를 해야될경우 스케줄러를 활용하는것이 좋습니다. Cron 표기법 입니다 숙지하고 있으면 좋습니다. * * * * * * ┬ ┬ ┬ ┬ ┬ ┬ │ │ │ │ │ │ │ │ │ │ │ └ day of week (0 - 7) (0 or 7 is Sun) │ │ │ │ └───── month (1 - 12) │ │ │ └────────── day of month (1 - 31) │ │ └─────────────── hour (0 - 23) │ └─────────..

비밀번호 암호화 하는 이유? 사용자의 비밀번호를 데이터베이스에 저장할 때 비밀번호를 그대로 저장하게 되면 매우 위험하다. 만약 데이터베이스가 해커들에게 털리면 사용자의 개인정보 & 비밀번호가 그대로 노출되기 때문이다. 따라서 사용자들의 비밀번호를 해싱 알고리즘을 통해서 안전하게 데이터베이스에 저장하는이유다. 그래서 Bcrypt 사용하는 이유다. Bcrypt란? 웹 혹은 앱등등 개발을 할때 보안은 가장 기본적으로 수행되어야 할 요소입니다. 비밀번호를 그대로 DB에 저장을 한다면 해킹당할 위험이 있습니다. 이를 방지하고자 Bcrypt모듈을 활용합니다. Bcrypt는 단방향 해시 함수를 이용한 모듈로써 salt 라는 개념을 사용합니다. Salt라는 값과 해시된 비밀번호를 합쳐서 DB에 암호화 하여 저장을 합니..

Node.js , React등등 프레임워크를 작업을 하다보면 다양한 Npm 모듈을 사용해야 합니다. 개발환경에 맞춘 버전 관리도 중요합니다. 그래서 Npm 설치 및 버전 다운그레이드 대해 알아보았습니다. 설치 방법 npm install 설치module ex : npm i(install 약자) express 이런식으로 설치를하고 사용이 가능합니다. 하지만 개발중 사용하던 npm module에 버전을 다운그레이드해야할 상황이 있습니다. 먼저 module 삭제 npm uninstall 설치module ex : npm uninstall express 현재 npm module을 삭제한후 원하는 버전을 뒤에 붙이고 다시 설치하면 됩니다. 다운그레이드 npm install 설치module@버전 ex : npm i e..

Express는 Node.js에서 가장 대표적인 프레임워크 입니다 Express활용해서 다양한 npm을 사용할수 있고 개발생산성을 높일수 있습니다 그리고 그런 뼈대를 잡아서 더 편리하고 손쉽게 폴더와 파일을생성해주는 express-generator 모듈이 있습니다 이 모듈을 통해서 프로젝트를 진행할 수 있습니다. 1. 비주얼 스튜디어를 켜고 2. Express-generator 모듈 설치 Npm 설치를 해야됩니다 -g 옵션은 global을 의미하면 하나의 옵션입니다 global로 설치한 모듈은 커맨더 창 어디에서든 명령어를 사용할 수 있습니다 3. 프로젝트 폴더에 스켈레톤 어플리케이션을 생성합니다 저런 명령어를 치면 ejs 기반에 view템플릿으로 폴더가와 파일들이 생성됩니다!!!! 아주 편리하고 좋습니..

Sequelize 기반으로한 프로젝트 이고 저는 백엔드에서 데이터를 가공해서 프론트에 뿌려 주는 작업을 하고 있었습니다 프론트에서 데이터를 잘 가지고 오는데 데이터가 UNDIFIND가 자꾸떠서 계속 해서 삽질중 이였지만ㅎㅎ 이럴때는 백엔드 데이터도 디버깅을 하는 방법을 배웠습니다 sequelize.query() 저런식으로 가공해서 console.log()를 찍어보면 이런식으로 찍힙니다 배열안에 배열로 묶여있는 현상입니다 저는 저것을 파악 못하고 계속 해서 다르게 데이터를 넘겨주고 있었습니다 저런식으로 데이터를 뿌릴려면 한번더 배열에 묶어 줘야지 원하는 값이 나왔습니다. 반대로 sequelize.query()에 replacements를 보내준다면 이렇게 배열안에 바로 값이 떨어져서 제가 원하는값을 가공할수..

node.js express 프레임워크를 사용하면 기본적인 res객체 , req객체 , express()함수에 대해서 헷갈리거나 어려움을 느낄때가 있습니다 그래서 Express 공식 홈페이지를 참고하여 정리를 해봤습니다. req 객체 req.body : POST 정보를 가집니다. 파싱을 위해서 body-parser와 같은 패키지가 필요합니다. req.query : GET정보를 가집니다. 즉 , URL로 전송된 쿼리 스트링 파라미터를 담고 있습니다. req.params : 내가 이름 붙인 라우트 파라미터 정보를 가집니다 req.headers : HTTP의 Header 정보를 가집니다 res 객체 res.send : 다양한 유형의 응답을 전송(클라한테 보낼때 사용) res.redirect : 브라우저 리다이..

1. JWT(Json Web Token) 많은 웹 서비스들은 사용자 인증을 구현하기 위해서 쿠키와 세션을 이용해왔습니다. 그런데 쿠키와 세션에는 여러 문제(보안 등등)들이 있어서, 최근에는 OAuth와 JWT 같은 토큰 기반으로 사용자 인증 방식을 사용합니다. OAuth 에 대해서? OAuth는 쉽게 말해서 Facebook , Google 같이 다른 어플리케이션으로 사용자 인증을 인가한 것. JWT 에 대해서? JWT는 사용자 정보를 JSON객체에 담아 이를 암호화하고 해싱 작업을 거쳐 문자열 토큰을 생성하는 기술입니다. 클라이언트는 이 토큰을 HTTP Header에 추가하여 요청을 보냄으로써 사용자 인증을 얻게 됩니다. JWT는 서버에 저장되지 않기 떄문에 서버 부하를 일으키지 않으면 , 해싱작업을 통..

이번 part 빈 template에 ui를 구현 해보겠습니다. 그리고 replace 써서 값을 넣어줘서 ui를 구현하는 문법을 사용해보겠습니다 그리고 댓글 ui 를 구현하는 로직을 짜보겠습니다 여기서 재귀함수라는 기술을 사용 해보겠습니다 저의 git에서 코드를 확인하실수 있습니다! https://github.com/yoogukhyeon/FrontendProject1/tree/code7 그리고 replace('a' , 'b') a에 값을 b로 바꾼다 라는 뜻입니다!!!! 여기서 replace 에대해서 공부할수있는 좋은 예시 였습니다! 댓글 함수도 만들어 보겠습니다. 인자값으로 comments 주고 스스로 comments값을 불러온다해서 재귀함수라고 합니다 빈 배열을 만들어서 push로 댓글에 대한 값과 u..

이번 part3는 코드 리팩터리를 했습니다.. 개발자의 숙명이죠...중복코드를 줄이는것이요..... 저도 한번 리팩터리 작업을 했습니다ㅎㅎ 여기서 중요한것은 함수에 인자를넣고 인자값을 바뀌면 값을 주는 그런 형태입니다!! 자 그럼 시작해보죠ㅎㅎ 제 git의 part3 코드입니다! https://github.com/yoogukhyeon/FrontendProject1/tree/code3/part03_2%EA%B0%9C%ED%99%94%EB%A9%B4%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A6%AC ajax 중복 코드이기떄문에 함수로 묶어서 뿌려 주겠습니다! function getDate(인자){ ajax.open('get' , 인자값 , false) } 저자리는 url이 들어가는 자리입니다 ..

Haker News Api를 Ajax 비동기 통신을 이용해서 어플리케이션을 개발해 보겠습니다. part2를 작업하면서 substr() 메소드 replace() 메소드를 활용해 보았습니다. part2 소스코드는 제 git올려져 있습니다! https://github.com/yoogukhyeon/FrontendProject1/tree/code2 GitHub - yoogukhyeon/FrontendProject1: FrontendProject1 개발의 기본 FrontendProject1 개발의 기본. Contribute to yoogukhyeon/FrontendProject1 development by creating an account on GitHub. github.com part2 작업은 hash값으로 a..

Haker News Api를 Ajax 활용해서 어플리케이션을 개발해 보겠습니다! Haker News Project 기본적인 어플리케이션 개발을 위한 기본 연습입니다! part1 부터 단계별로 나아가며 마지막에 기본적인 typescript 활용해보겠습니다! 다같이 공부해봐요!! Part1 = 12줄 Ajax 코드 짜기 코드참고는 저의 git에 올려두었습니다 https://github.com/yoogukhyeon/FrontendProject1/tree/code1 GitHub - yoogukhyeon/FrontendProject1: FrontendProject1 개발의 기본 FrontendProject1 개발의 기본. Contribute to yoogukhyeon/FrontendProject1 developm..

요즘 프론트엔드 개발환경은 굉장히 복잡하게 이루어져 있고 프론트엔드 개발환경은 제공되는 tool 과 tool 때문에 빠르게 변화합니다. 이러한 이유는 웹앱에 규모가 굉장히 커지고 있기 때문입니다. 또한 웹개발을 하면서 javascript 얼마나 큰 영향력을 가지고 있는지 알수있습니다. javascript 사용하는 개발자라면 ES6 표준 , ES5 , ES2020 등 단어들을 들어본적 있으실 겁니다 ES = ECMAScript 약자 입니다 ECMAScript 란? ECMAScript는 말 그대로 Ecma라는 기관이 만든 script 언어 이며, ECMA-262 표준를 따르고 있다. ECMAScript는 ECMA-262에 의해 표준화된 자바스크립트의 새로운 이름이다. 보편적으로 ES2015 이후로 대부분 개..

JavaScript & TypeScript Study 시작 최근에 IT기술이 빠르게 변하고 새로운 기술들도 많이 나오는거 같습니다. 그래서 기술에 변화의 3가지 유형에 대해서 공부를 해봤습니다 1. 변하지않는 기술 : 네트워크 , 운영체제 , 컴퓨터 시스템 2. 느리게 변하는 기술 : 프로그래밍 언어, 알고리즘, 보안, 프로그래밍 패러다임 3. 빠르게 변하는 기술 : 프레임워크, 라이브러리, 디자인패턴, UI UX 1번 기술과 2번기술은 3번기술에 비해 더많은 지식과 스터디 양이 필요하고 노력이 필요합니다. 3번기술에 노력과 지식이 필요없다는 말은 아니에^^ 3번기술은 우리가 많이 사용하는 프레임워크, 라이브러리이며 트렌드를 많이 타고 빠르게 변하는 기술이며 공부를 할때도 가장 접근해서 기술을 습득하기 ..