분류 전체보기99

• 

  [프로젝트 기획 - React] 포트폴리오 소개 Figma 프로토타입 포트폴리오 소개 웹 - 프론트 프로젝트 좀 더 깔끔하게 이력서 형식의 포트폴리오가 필요하다고 생각해, 새로 웹 프로젝트를 구상하게 되었다. React를 이용한 정적 페이지로 구상할 것이며 모바일과 여러 브러우저에서 볼 수 있게 반응형을 고려하여 디자인하였다. 사용할 툴 Frontend - React (antd, react-bootstrap, react-router-dom@6, styled-component ... ) Figma 와이어프레임 메인 페이지, 보유 스킬을 정리한 페이지, 프로젝트 모아보기, 간단한 학력 및 자격사항 보기와 이력서를 제공한다. 프로토타입 Demo : https://www.figma.com/proto/YSRBnB0dqFIWAVLQpXe0nm/Untitled?node-id=0%3A1.. 프로젝트/프로젝트 기획 2023. 1. 12.

• 

  [React] React SPA - Slide Template + 반응형 Nav menu React SPA - Slide Template 슬라이드 형태 리액트 SPA 템플릿 무료 배포 Github : https://github.com/chalinuna/slide-template Demo : https://lambent-lily-149f31.netlify.app/ React App lambent-lily-149f31.netlify.app Preview 제작기간 : 2일 배포 : netlify 제작 언어 및 프레임워크 : React.js 상단 고정되어있는 Navbar와, 세로 슬라이드 형식으로 페이지를 이동할 수 있는 SPA 템플릿. 친구에게서 '상단에 메뉴가 고정되어있고, 메뉴를 누르면 슬라이드 형식으로 미끄러져 내려가듯이 페이지를 이동할 수 있는 템플릿을 만들어달라' 고 요청을 받아 간단히 .. 프로젝트/React 프론트 프로젝트 2023. 1. 11.

• [React] Cannot read properties of undefined / useState의 값이 불러오기 전에 렌더링됨 1. 옵셔널 체이닝 (?연산자) 2. && 연산자 3. if문 을 써도 Cannot read properties of undefined 오류가 해결되지 않는 경우가 있다... 3개를 다 써도 안되어서 삽질하던 와중에 발견한 방법. useState의 초기값을 null로 주면 말끔히 해결된다. useState([]) 도 안되고, useState('')도 안된다. 무조건 NULL이어야 함. useState(null); 바보일기 2023. 1. 10.

• 

  The bucket does not allow ACLs Node.js 코드를 통해 버킷에 '쓰기' 를 실행하려 했는데, 버킷의 ACL 권한을 설정해주지 않아서 발생한 문제. acl 권한을 허용해주면 된다. 바보일기 2023. 1. 2.

• 

  [AWS 3S] Node.js 에서 .env 파일을 이용하여 S3 버킷 이용하기 ( 버킷에 파일 저장 + 버킷 객체 목록 읽기 ) 앞서 프론트에서 진행했을 경우의 위험성을 살펴 보았다. 우리는 가난하기 때문에 과금을 감당할 수 없다. 과금당하지 않기 위해 .env 파일을 만들어, 소중한 key값을 환경변수에 등록하고 사용해보자. 이 글은 Express를 기본적으로 사용할 수 있다는 전제로 진행하지만, 전체 코드와 부분 부분 Node.js를 설명하는 글을 첨부하였기 때문에 조금 서툴더라도 따라할 수 있을 것이다. aws 서비스를 이용하려면, 내가 '이 서비스를 이용할 자격이 있는 사람임' 을 알려주어야 한다. 공식 가이드에서는 다음과 같은 5가지의 방법을 제시하고 있다. 서버(EC2)로부터 IAM Roles를 얻어 연동 서버의 ~/.aws/credentials 경로의 파일에 자격증명 입력하여 연동 환경변수에 자격증명을 저장하고 연동 .. AWS/S3 2023. 1. 2.

• 

  TypeError: this.client.send is not a function aws Node.js 포스트를 쓰기 위해 테스트 진행 중 만난 에러. aws-sdk와 s3 버전이 맞지 않으면 발생한다. npm install multer-s3@^2 --save 로 버전을 맞추면 해결된다. 바보일기 2023. 1. 2.

• 

  [Node.js] Express에서 Router 사용하기 express에는 Router가 기본으로 포함되어 있다. 따라서 Express를 사용한다면 곧장 라우터를 사용할 수 있다. 메인이 되는 서버 파일, index.js에서 express를 import 해 준다. 리액트에서 요청하게 할 것이므로 cors를 설치해 주었다. //index.js const express = require('express') const app = express() app.use(express.json()); var cors = require('cors'); app.use(cors()); app.listen(5000,function(){ console.log('서버를 열었습니다.') }) 루트 폴더에 routes폴더를 만들고, 라우터로 사용할 js파일을 만든다. 프론트에서 route .. NODE.JS(Express) 2023. 1. 2.

• 

  [Node.js] .env 환경변수 파일 생성과 이용 Node.js에서는 프로젝트 디렉토리에 .env라는 파일이 존재하면, 환경변수처럼 소스코드로 가져와서 사용할 수 있다. .env 파일은 Object처럼 key=value 형식으로 작성하며, 주석을 작성하고자 할 때는 문장의 맨 앞에 #을 붙인다. # 주석을 사용할 때는 #을 붙인다. # 저장할 값이 문자열이라고 해도 따옴표는 사용하지 않는다. key=값 .env 파일을 이용하려면 dotenv 패키지를 설치해야 한다. npm install dotenv .env 파일을 dotenv 패키지로 불러올 수 있다. require('dotenv').config(); .env 파일은 [프로젝트의 루트] 폴더에 생성한다. 테스트용으로 TEST_DATA = test 라는 문장을 .env 파일에 작성한다. .env 파일에 .. NODE.JS(Express) 2023. 1. 2.

• 

  [AWS S3] React 에서 버킷 속 객체 리스트 불러오기 ( ListObjectsV2 ) 내가 만든 특정한 이름의 버킷에 저장되어있는 모든 버킷을 불러와보자. 마찬가지로 백엔드에서 처리할 필요 없이, 프론트단에서 할 수 있다.(사실 이렇게 하면 안된다. 이유는 뒤에서 설명..) JS환경에서 진행하며, 공식 문서와 함께 스크린샷으로 진행 방법을 상세히 안내하였으니 차근차근.. 빠르게 따라와도 해낼 수 있다. 전체 코드는 언제나처럼 제일 하단에 작성하였다. [더보기]를 클릭하면 된다. AWS 공식 문서는 깔끔하고 악랄하다. React 문서를 읽으면서 우와 공식문서 짱이다 했는데 AWS를 읽으면서는 8지옥을 도는 것 같았다.. 거미그물 같은 곳이라 한번 들어가면 걸려서 못 나온다. 한국어로 읽어도 잘 모르겠는데, 아직 번역되지 않은 문서들이 많기 때문에 읽으면 읽을수록 모르는 미궁에 빠지는 경험을.. AWS/S3 2023. 1. 2.

• 

  [AWS 3S] React에서 S3에 이미지 업로드하기 처음 웹개발을 배우는 사람들은, 파일 저장을 배울 때 이렇게 배웠을 것이다. '백엔드에 formData를 전달해, 로컬 서버(내 컴퓨터)에 파일을 저장한다' 고 ...(나도 그랬음) 하지만 S3는 내 컴퓨터가 아닌 외부 서버이다. 즉, 남의 컴퓨터에 파일을 저장한다는 뜻이다. 따라서 굳이 백엔드로 전달해 어쩌구 라이브러리를 써서 설정한 다음 내 컴퓨터(로컬)에 저장하고 뭐시기.... 라는 긴 과정을 거칠 필요가 없다. aws의 aws-sdk 라는 라이브러리를 설치해 사용 방법 대로만 해주면, 프론트엔드에서 바로 S3로 파일을 전송해 저장할 수 있다. S3의 버킷은 우리에게 URL 형태의 파일을 제공해주므로 그를 돌려받아 페이지에 바로 뿌릴 수도 있다. 물론 multer와 aws-sdk, multer-3s.. AWS/S3 2023. 1. 1.

• 

  [AWS S3] AWS 버킷 생성과 권한 13. React와 Node.js를 이용해 이미지를 AWS S3에 저장해본다. 그런데, S3란 무엇일까? 아마존 S3는 아마존 웹 서비스에서 제공하는 온라인 스토리지 웹 서비스이다. 아마존 S3는 웹 서비스 인터페이스를 통해 스토리지를 제공한다. S3의 풀네임은 Simple Storage Service이다. S가 세개 있다고 해서 3S로 축약되었다. 직역하자면 '간단한 스토리지 서비스' 인데, 어렵게 설명할 필요 없이 그냥 '파일 서버 역할을 해주는 서비스' 이다. S3에 이미지나 파일을 저장하면, '아무에게나 제공할 수 있는 URL' 형태로 돌려받을 수 있다. 개인이 가지고 있는 S3 스토리지 하나를 '버킷'이라고 한다. 직역하면 바구니이다. 즉 S3 버킷은 나만의 파일 바구니를 만들어서 물건을 넣어두.. AWS/S3 2023. 1. 1.

• 

  [mongoDB+studio3T] 유저 생성 + Node.js Express와 연결 studio 3T를 사용해, 몽고db의 사용자를 추가하고 권한을 설정해본다. 만일 studio의 설치가 아직이라면 이 글을 따라하면 된다 : LINK [node.js + MongoDB] 왕초보도 할수있는 윈도우에 몽고DB 설치하기 + Studio 3T 설치 및 사용법 + 부록) node 이 글은 회사의 요청으로 몽고디비를 다루게 된 비운의 디자이너 친구를 위해 쓰였습니다. 몽고DB : 윈도우에서 사용할 몽고DB 프로그램 Studio 3T : 몽고DB를 편하게 다룰수 있게 해주는 프로그램 make-somthing.tistory.com studio3T로 사용자를 추가하고, 권한을 설정하는 방법은 공식 문서에도 잘 정리되어 있다. 공식 문서 : https://studio3t.com/knowledge-base/.. mongoDB/mongoDB 다루기 with studio 3T 2022. 12. 31.