aeiou Repository

AWS DynamoDB 저번 포스트에서는 Node.js 서버에서 DynamoDB를 활용한 CRUD 코드 작성에 대해 작성했는데 Read 부분인 query와 scan 양이 많아 별도로 다루려합니다. 아래 링크의 공식 도큐먼트를 참고했으나, 세부 코드는 조금씩 다를 수 있습니다. https://docs.aws.amazon.com/ko_kr/amazondynamodb/latest/developerguide/GettingStarted.NodeJs.04.html 4단계: AWS SDK for JavaScript를 사용하여 DynamoDB에서 데이터 쿼리 및 스캔 - Amazon DynamoDB ExpressionAttributeNames는 이름을 교체합니다. year가 Amazon DynamoDB의 예약어이기 때..

[넘블] 다른 색깔 찾기 게임 제작 챌린지 결과물 http://numble-color-game.kangjiin.com/ GitHub https://github.com/kang-jiin/numble-color-game 주요코드 타이머 useEffect(() => { if (time { if (time > 0) { setTime(time - 1); } }, 1000); return () => clearTimeout(timer); }, [time]); 정답과 오답 색 차이 const randomColors = useCallback(() => { let baseR = Math.floor(Math.random() * 256); let baseG = Math.floor(Math.random() * 256); let..

create-react-app 으로 만든 typescript 프로젝트에 webpack 적용하기 필요한 패키지 설치 npm i -D file-loader ts-loader npm i -D webpack webpack-cli html-webpack-plugin webpack-dev-server npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react npm i -D typescript @babel/preset-typescript ts-loader fork-ts-checker-webpack-plugin npm i -D rimraf webpack 관련 패키지 webpack: Webpack(웹팩) 라이브러리 webpack-cli: Webpac..

보호되어 있는 글입니다.

넘블 React 상태관리 라이브러리를 사용하지 않고 다른 색깔 게임 제작 리액트 개발 챌린지가 광고에 뜨길래 한번 들어가봤다. 넘블에서 진행하는 챌린지로 10일동안 작은 프로그램 하나를 개발한다. 예시 사이트 : https://numble-react.vercel.app/ 기간 : 2월 4일 ~ 13일 참가비 : 만원(결과물 제출 시 환불) 10일이라는 짧은 기간이길래 가볍게 하기 좋을 것같아 신청했다. 단순해보이긴 하는데 일하면서 다 할 수 있을지 좀 걱정은 된다.. 일단 해보고 후기까지 작성해봐야지! 참여 링크: https://www.numble.it/45cee9d3-49ad-4f67-9d2a-14607c2eeba7 [React] 상태관리 라이브러리를 사용하지 않고 다른 색깔 찾기 게임 제작 시간은 금..

multer-s3를 이용한 AWS S3 파일 업로드 구현하기 node.js 서버에서 multer-s3를 이용해 S3로 파일을 업로드하는 방법을 알아보겠습니다. S3버킷이 생성, IAM설정 등 AWS에 관한 내용은 따로 설명하지 않겠습니다. multer-s3 : https://www.npmjs.com/package/multer-s3 multer-s3 Streaming multer storage engine for AWS S3 www.npmjs.com 모듈 설치 multer, multer-s3, aws-sdk 모듈이 필요합니다. multer. multer-s3 : 파일 업로드 모듈 aws-sdk: AWS 서비스 연결 모듈 npm install multer multer-s3 aws-sdk S3 객체 생성 co..

마이크로 서비스 아키텍처 VS 모놀리식 아키텍처 모놀리식 아키텍처 란? 하나의 어플리케이션이 하나의 서비스로만 이루어진 구조. 마이크로 서비스 아키텍처 개념이 나오기 전에는 대부분 모놀로식 아키텍처로 개발되었다. 전통적인 어플리케이션 구조를 생각하면 된다. 하나의 WAR 파일로 어플리케이션을 패키징하는 방식이 모놀리식 아키텍처이다. 작은 서비스를 개발할 땐 모놀로식 아키텍처를 주로 사용한다. 장점 개발 초기에 아키텍처 구조가 단순해 개발에 용이하다. 서비스 환경이 동일하여 복잡하지 않다. end-to-end 테스트가 용이하다. 쉽게 고가용성 서버 환경을 만들 수 있다. 단점 항상 전체를 빌드/테스트/배포 해야한다. 어필리케이션 구동 시간이 늘어나고, 빌드 배포 시간도 길어진다. 개발자가 모든 코드를 이해..

신입 개발자 PPT 포트폴리오 시작하기 전에 제가 작성한 방법을 설명하는 글로 완벽하지 않습니다. 참고용으로만 봐주세요! 앞부분을 못 보신 분은 아래 링크를 참고해주세요! https://jane-aeiou.tistory.com/69 신입 개발자 PPT 포트폴리오 만들기 1 신입 개발자 포트폴리오 시작하기 포트폴리오 관련 포스트를 작성하려하니 제 포폴도 부족한 점이 너무 많더라구요. 하지만 완벽하지 않은 제 포폴도 제출하면서 서류합격률이 많이 올랐었기 jane-aeiou.tistory.com Project 프로젝트는 포트폴리오에서 가장 중요한 부분입니다. 어떤 프로젝트를 진행해보았고, 어떤 기술을 사용할 수 있는지를 직접적으로 보여줍니다. 프로젝트 수는 2~3개 정도가 적당합니다. 자랑하고 싶은 프로젝트가..

신입 개발자 PPT 포트폴리오 시작하기 포트폴리오 관련 포스트를 작성하려하니 제 포폴도 부족한 점이 너무 많더라구요. 하지만 완벽하지 않은 제 포폴도 제출하면서 서류합격률이 많이 올랐었기 때문에 일단 만들어놓고 계속해서 수정하며 채워가자는 마음으로 작성해보겠습니다! 이미 포트폴리오를 잘 만드는 방법은 많으니 제가 작성한 방법에 대해 이야기해볼까합니다. +) ppt는 템플릿을 사용했습니다. 목차 정하기 About Me Career Skill Project Contact Me 개발자 포트폴리오는 대부분 다음과 같이 구성되어 있습니다. 여기서 본인이 어필하고 싶은 부분의 분량을 늘려서 작성하시면 됩니다. 아래에서 하나씩 살펴보겠습니다. About Me About Me는 자신에 대해 설명하는 부분입니다. 개발자..

자바스크립트 axios header config 한글 에러 Front에서 API를 설정을 위와 같이 해줬습니다. 22번 라인에 UserName을 추가했더니, 값이 한글이라 API가 전부 에러가 나네요ㅠ 명확한 에러 문구가 없어 많은 테스트를 통해 한글이 문제인것까진 알아냈지만 해결방법은 아직 찾지 못했습니다ㅠㅠ 혹시 해결방법 아시는 분 있으면 댓글로 부탁드립니다! API 전체 코드 export const request = axios.create({ timeout: 8000, baseURL: API_URL + '/api', responseType: "json", withCredentials: true, headers: { 'Content-Type': 'application/json' } }); reques..