ReactJS 개인 개발진행 중에 다음과 같은 알림창이 개발자 콘솔창에 발생했고 특이하게 알림창이라고 느껴진 정도였지만 코드작성했던 내용 자체가 웹페이지 상에서 보여지지 않았다. 그리고 개발자 Elements 요소에도 어떠한 html요소들 조차 확인할 수 없었다. Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools React Developer Tools – React The library for web and native user interfaces react.dev 이에 대한 명확한 에러의 발생 원인을 확인하기 위해 개발자 Network로 이동하여 확인해본 결과 Rea..

배포시 S3 버킷을 생성하여 Multer를 활용한 video와 img 파일업로드를 구현해보고자 이글을 작성하였다. S3버킷을 활용한 파일업로드는 정말 삽질하기 쉽다는 생각이 든다. 관련 정보가 많이 없어 무작정 S3를 활용하여 파일 업로드를 어떻게든 해보겠다는 의지 하나만으로 이를 해결해보았다. ✔️핵심 ❗ aws-sdk: Version 2.x 지원종료 ❗S3Client의 credentials 설정시 accessKeyId와 secretAccessKey의 .env 파일로 관리시 process.env.AWS_ACCESS_KEY_ID와 같이 AWS를 기입 참고자료: https://www.npmjs.com/package/aws-sdk?activeTab=readme aws-sdk AWS SDK for JavaSc..

지금까지 웹 개발을 백엔드로만 진행하다보니 백엔드와 프론트엔드의 다양한 상호작용적인 체계를 이해하기 위해 개인 공부를 시작하였다. 따라서, 전문적인 프론트엔드 용어는 없지만 내가 공부하며 이해한 바를 정리하였다. 참고로 백엔드 서버는 Node.js로 구성되어져 있다. Webpack을 프론트엔드에서 사용할 Javascript 즉, 동적인 역할을 담당하는 것들을 Webpack으로 처리해 보고자 시도해 보았다. Webpack은 위 사진에서 보듯이 왼쪽의 다양한 확장자 명을 가지고 있는 파일들을 프로젝트에서 작성되어질 것이다. 이 작성된 파일들을 다른 파일들(오른쪽에 Static Assets 확장자명)로 처리, 변경시켜주는 역할을 하는 것이 Webpack이다. 하지만 프론트엔드 개발직군에서는 Webpack을 직..

개인 프로젝트 진행 API method 중 post의 create에서 제목과 같은 에러가 발생하였다. 키가 중복 되었다는 에러와 함께 해당 기능의 API를 호출할 때마다 에러가 발생하면 서버가 다운된다. 정확한 요인은 아니지만 아무래도 Schema를 최신화 하기전, 즉 update하기 전에 생성했던 데이터의 column과 최신화 후에 생성했던 column과의 구조변경으로 해당 오류가 발생하는 것 같다. 이에 대해 정확한 요인을 알고 있다면 댓글 작성을 부탁드립니다. 아래의 두가지 방법을 통해 이를 해결하였다. https://dubaiyu.tistory.com/281 [오류/해결] MongoServerError: E11000 duplicate key error collection: create하는 api를..

prompt() 조건문을 설명하기 앞서 다음 코드에서 prompt()라는 함수를 확인할 수 있는데 alert 창과 동일하게 웹페이지에 알림을 보여주지만 입력할 수 있는 창을 제공하고 있다. 조건문 const age = parseInt(prompt("How old are you")); if(isNaN(age)) { console.log("Please write a number") } else { console.log("Thank you for writing your age") } 위 코드에서 isNaN(age) 같은경우 age의 값이 숫자가 아닌경우 true를 반환하고 숫자인 경우 false를 반환한다. parseInt() 같은 경우 string으로 된 숫자를 받았을 경우 string 숫자를 number ..

소셜로그인을 구성함에 앞서 먼저 KAKAO와 네이버 개발자 센터에 특정 데이터 사용에 대한 권한을 부여받아야 한다. 네이버 개발자센터 https://developers.naver.com/main/ NAVER Developers 네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음 developers.naver.com 카카오 개발자센터 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다...