IT,프로그래밍
[React 공부노트 #1] react의 구조
react의 구조 public public directory 내부의 index.html의 부분이 있다. react는 저 id가 root인 div 내부에 내용을 바꿔가면서 보여주는데 이것을 가상DOM (virtual DOM) 이라고 한다 index.js 가장 상위의 react 파일 실제 랜더링 되는 components를 import해서 사용한다 App.js 이 파일에서 개발에 사용하는 component를 import해준다 이때 import되는 GlobalStyles, Header와 같이 상위개념의 component를 가져온다 민들어둔 헤더를 import 하면 router 밖에 있기 때문에 항상 노출이 된다 여러개의 리턴을 위하여 flagment를 쓴다 router.js URL의 router가 바뀔떄다르게 ..
[자바스크립트, TS] camel case의 object key를 snake case로 바꾸기
개발을 진행하다 Hasura에 query의 결과값으로 받아오는 object의 key가 snake case인데 실제 개발 컨벤션은 camel case여서 코드내에서 query한 결과값을 insert할때 다시 넣어줘야 하는 번거로움이 있었다. const originalSnake = { hello_world: "hihi", hi_there: "hi there", }; const insertObject = { helloWorld: originalSnake.hello_world, hiThere: originalSnake.hi_there, }; console.log(originalSnake); console.log(insertObject); /* { hello_world: 'hihi', hi_there: 'hi t..
node.js crypto를 이용한 random string 얻는법
node.js에는 많은 기본제공 모듈이 있다. 그중에서 암호화,복호화 기능을 제공하는 crypto 모듈을 이용해서 랜덤 스크링을 얻을수 있는 방법이있어서 소개해 주려한다 랜덤 스트링의 경우 환경설정등의 key 값으로 종종 사용되기에 알아두면 편리하다 코드는 매우 간단하다 const crypto = require("crypto"); console.log(crypto.randomBytes(20).toString('hex')) 위와 같이 몇줄 안되는 소스로 영어 소문자+숫자의 랜덤스트링을 얻을수 있다. f39bf14f62922b8c054e5781aaa806e4f5ad4a39 console.log(crypto.randomBytes(20).toString('base64')) hex 에서 base64로 바꾸게 되면..
Prisma게섯거랏 HASURA가 나가신다 - HASURA 란?
왜 사용을 했나? 새로운 프로젝트를 진행하면서, 제품의 런칭을 애자일을 통하여 MVP로 빠르게 개발을 하기로 결정이 되었었다. 초기에는 Node.js + NestJs로 Restful API을 만들어서 개발을 진행 하였다. 하지만 기존의 restful api개발 방식으로는 시간의 소모가 심하였고 또한 첩첩산중으로 개발되었던 back office 서비스에 심각한 버그가 발생한데다 퇴사자가 발생함으로서 필연적으로 다시 개발을 해야만 하였다. 아... 망했어요 그때 이렇게 된김에 기술스택을 새롭게 구성해보자! 라는 아이디어가 나왔고 CTO의 아이디어에 따라 GraphQL과 HASURA를 도입하기로 하였다. 전에 여기저기서 GraphQL은 많이 들어 봤지만 HASURA는 처음들어서 많이 생소했기에 대체 뭐하는것인..
Nexus에서 auto generate(make schema)가 갑자기 안되던이유
Nexus에서 generate가 안되던이유 최근 하나의 서버를 실서버와 개발서버로 분리하는 작업을 진행하였다. 그후 오늘 Hasura에 remoteschema를 추가하기 위하여 Nexus를 이용해서 graphql코드를 generate하려고 했는데 전혀 변화가 없었다. 서버설정을 잘못했나 놀란마음에 찾아봐도 문제는 없었고, 코드나 커맨드 상에 문제는 없었는지 찾아 보았지만 역시나 staging환경을 체크하는 항목은 없었다. 공식 문서를 봐도 이렇다할 정보는 없었기에 꽤 오래 고생하였다. https://nexusjs.org/docs/api/make-schema 하지만 알아냈는데 그것은 바로 환경변수 때문이었다. 이 현상이 일어난 시점이 dotenv를 사용하여서 .env파일에 NODE_ENV를 추가하면서 부터..
[javascript, mongoose] mongoose(몽구스) method에서 arrow function(화살표함수) 쓸때 undefined나오는 이유 [arrow function 과 function표현식 차이점]
mongoDB를 쓰기위하여 mongoose를 이용해서 코딩을 진행하고 있었다. 강의를 따라 가던중 스스로 es5문법을 es6로 바꿔 가면서 진행하였다 (var -> let, const, function -> () => {} . . ) 그러던중 아래의 소스에서 undefined 를 return 을 하는 에러가 일어났다. userSchema.methods.generateToken = (cb)=> { const user = this; const token = jwt.sign(user._id.toHexString(), 'secretToken');// user.toekn = token; user.save((err, user) => {//DB에 save한다음에 변경된 user model을 return 해줘야한다. ..
[better code] if else, case 안쓰고 분기하는법
개발을 하던중 특정조건에 따라 if else 나 case문으로 분기를 하는 경우가 종종있었는데 항상 보기가 안좋았고 다른 방법이 없을까 고민을 했었다 const processFunc = reqire('./processFunctions'); . . . switch(type){ case 'printing' : processFunc.printingCaseFunc(); break; case 'cutting' : processFunc.cuttingCaseFunc(); break; case 'molding' : processFunc.moldingCaseFunc(); break; case 'sheeting' : processFunc.sheetingCaseFunc(); break; case 'design' : proc..
sendgrid에서 dynamic template을 쓸때 메일 제목이 안나오는 현상
이번에 AWS lambda를 이용해서 안내 메일을 발송하는 기능을 구현하고있었다. const sgMail = require('@sendgrid/mail'); sgMail.setApiKey(process.env.SENDGRID_API_KEY); const msg = { to: 'test@example.com', from: 'test@example.com', // Use the email address or domain you verified above subject: 'Sending with Twilio SendGrid is Fun', text: 'and easy to do anywhere, even with Node.js', html: 'and easy to do anywhere, even with No..