[React] MongoDB로 저장할때 UTC로 저장되는 시간을 KST로 변경하기
2022. 11. 14. 18:01
공부/리액트 (React)
이번 프로젝트에서 파티모집글을 작성할때 mobiscroll을 사용해 날짜와 시간을 설정할수있게 하였는데 그 과정에서 자꾸 시간이 내가 설정한 시간과 다른 문제가 생겼다. 대체 무슨이유인가 구글링해보니 몽고 DB에서는 시간이 UTC로만 저장이 된다고 한다. 공식문서에서도 알아서 바꿔서 쓰라는 내용이 있었다. (https://www.mongodb.com/docs/v3.2/tutorial/model-time-data/) 어차피 한국시간만 쓸거니 하드코딩으로 +9시간을 해줘도 괜찮지만 찾아보니 timezone에 맞게 UTC를 변환해주는 라이브러리가 있다고 한다. 1. 설치 : # yarn add moment-timezone 2. 코드 (도서 : 리액트를 다루는 기술 p472, src/api/posts/posts..
[WIL] 클론프로젝트 회고
2022. 11. 7. 00:31
공부/스파르타코딩클럽
https://youtu.be/rmI8KEP2viQ 이번 주는 피클플러스라는 OTT공유 사이트를 클론 코딩해보았다. 사실 이번 주는 코로나에 걸리는 바람에 컨디션이 심하게 떨어진 상태로 진행하게 돼서 팀원들에게 많은 도움이 되진 않았을지 많이 걱정이 되었다. 일단 처음에는 에어비앤비를 클론 코딩하려 했으니 양이 꽤 방대해서 일주일 내로 구현이 불가능하다고 판단되어 내가 예전부터 벤치마킹해봐야지 하고 생각했던 피클 플러스를 팀원들에게 제안하게 되었다. 처음엔 팀원들이 양이 적지는 않은가 긴가민가 한 것 같았지만 결론적으로는 몇몇 기능은 구현에 실패하게 되면서 부족하지는 않다고 생각되었다. 이번 주는 내가 맡은 페이지 위주로 구현하였고 사실상 저번 주에 했던 CRUD를 그대로 써보는 시간이었다. 저번 주와 ..
[React] 리액트에서 폰트어썸(Font Awesome)사용하기
2022. 10. 31. 11:44
공부/리액트 (React)
패키지설치 1. 먼저 Font Awesome의 SVG 기반 아이콘을 활성화 시키기 위한 기본 패키지인 @fortawesome/fontawesome-svg-core 설치합니다. yarn add @fortawesome/fontawesome-svg-core 2. 그 다음 Font Awesome 아이콘 대한 패키지를 설치해야 합니다. Solid, Regular, Light, Brands 4개의 카테고리와 유/무료 여부에 따라 여러개의 패키지가 존재하는데요. 여기서는 무료로 제공되는 Solid, Regular Brands 3개의 카테고리에 대한 패키지만 설치하겠습니다. (항상 3개를 다 설치할 필요는 없고 사용하시고 싶은 아이콘이 속한 카테고리만 설치하시면 됩니다.) yarn add @fortawesome/fre..
[WIL] 미니프로젝트 회고
2022. 10. 31. 00:18
공부/스파르타코딩클럽
고객이 말대꾸..? 랜덤박스를 누르면 랜덤 한 아이템을 주는 랜덤상자 오픈 사이트 사이트 소개 링크: https://www.youtube.com/watch?v=bxfX65r0xns&t=3s FE 깃허브 링크: https://github.com/chap4-minipj-team6/team6-randombox 팀 노션 주소: https://concrete-jumbo-765.notion.site/2272743c7e7a42d0ac926d64d625f98f FE 기능 분담 : https://docs.google.com/spreadsheets/d/1udEbBh2eImmEVTO2dHfq9LJ4GWYNnUEA9IV0Sr093tU/edit#gid=0 처음으로 백엔드와 협업하는 프로젝트라 기대도 되고 걱정도 많이 하고 시작..
[JavaScript] axios
2022. 10. 23. 15:29
공부/자바스크립트 (JavaScript)
Axios란? Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용합니다. - 저는 AJAX보다 AXIOS를 훨씬 많이 사용합니다. 브라우저 호환성 Latest ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔ 11 ✔ axios 특징 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용 Promise(ES6) API 사용 요청과 응답 데이터의 변형 HTTP 요청 취소 HTTP 요청과 응답을 JSON 형태로 자동 변경 Axios 사용법 Axios 다운로드 HTTP Methods Axios 사용해보기..
[JS] 클래스의 고급 기능
2022. 10. 15. 12:43
공부/자바스크립트 (JavaScript)
1. 상속 상속은 클래스의 선언 코드를 중복해서 작성하지 않도록 함으로써 코드의 생산 효율을 올리는 문법이다. 기본적인 형태는 다음과 같다. class 클래스이름 extends 부모클래스 이름{} 상속은 상속이라는 이름처럼 어떤 클래스가 가지고 있는 유산 (속성과 메소드)를 다른 클래스에게 물려주는 형태로 사용한다. 이때 유산을 주는 클래스를 부모클래스, 유산을 받는 클래스를 자식 클래스 라고 부른다. class shape { constructor(width, height, color) { this.width = width; this.height = height; this.color = color; } draw() { console.log(`drawing ${this.color} color of`); }..
[JS] 클래스의 기본 기능
2022. 10. 14. 14:59
공부/자바스크립트 (JavaScript)
클래스는 객체를 효율적이고 안전하게 만들기 위해서 만들어진 문법입니다. 기존의 문법을 효율적이고 안전하게 활용하기 위해 나온 문법입니다. 1. 객체지향 패러다임 객체지향 패러다임 객체를 우선적으로 생각해서 프로그램을 만든다는 방법론을 의미한다. 객체지향 프로그래밍 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법이다. 절차지향 프로그래밍(C언어 등)을 보완하기 위해 등장했다. 절차지향 프로그래밍은 모듈을 재활용하기 어렵기 때문에 대규모 프로젝트에서는 코드의 반복으로 인해 장황해지거나 비효율적인 설계가 될것이다. "데이터와 이를 처리하는 함수를 함께 묶을 수 없을까?", "프로그램을 어떻게 구조적으로 나눌 수..
[JS] 비동기처리
2022. 10. 12. 15:37
공부/자바스크립트 (JavaScript)
자바스크립트의 특징, 비동기 처리 // #1 console.log('양말을 신는다'); // #2 setTimeout(() => { console.log('신발을 신는다'); }, 1000); // #3 console.log('밖으로 나간다'); 자바스크립트의 대표적인 내장 비동기 함수인 setTimeout() 입니다. 첫번째 인자로 실행할 콜백함수를 담고 두번째 인자로 들어온 시간만큼 기다린 후에 콜백함수를 실행합니다. 코드의 실행을 예측한다면, 양말을 신는다. // 1초 후 신발을 신는다. 밖으로 나간다. 와 같이 동작하리라고 예측할 수 있습니다. 하지만, 양말을 신는다. 밖으로 나간다. 신발을 신는다. 와 같이 콘솔창에 나타나게 됩니다. 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를..