분류 전체보기
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 31WEB Dev/ToyProject 2022. 1. 24. 22:19
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 HTML 삽입 미리보기할 수 없는 소스 벌써 31번째 글이다. 그동안 텀이 좀 있었는데 회의를 통해 백엔드 팀원분들과 소통하고 있었고, MUI의 캘린더 컴포넌트인 DatePicker를 가지고 투두메이트의 캘린더처럼 구현하는 시간이 꽤나 소요되었다. 캘린더 만드는 것은 이 코드를 거의 대부분 참조했다. renderDay 함수를 이용해서 각 날짜의 한 칸 한 칸을 새로 렌더링 해 주는 방법이다. 클래스를 붙여 스타일을 주는 것으로 대부분 해결했다. Customize Material-UI Datepicker Wit..
-
[React] MUI Datepicker로 달력 구현 시 한글로 변환WEB Dev/Javascript | REACT | Node.js 2022. 1. 22. 17:07
MUI Datepicker language 설정 바꾸는 방법 (한글화) MUI는 Date-fns 에 의존하고 있는데 여기에서 제공하는 지역 설정을 적용하면 된다. Date-fns 설치는 아래 명령어를 사용한다. yarn add date-fns npm i date-fns 그리고 아래 패키지를 import 해주고 import DateFnsUtils from "@date-io/date-fns"; // or import AdapterDateFns from "@mui/lab/AdapterDateFns"; import { ko } from "date-fns/locale"; return 되는 부분에 locale props를 전달해주면 된다. 영어가 디폴트이고 locale={ko}는 한국어다. 나머지 언어는 공식 문서..
-
[React] 카카오 계정 로그인 연결하기 테스트WEB Dev/Javascript | REACT | Node.js 2022. 1. 19. 15:58
투두메이트 클론 토이프로젝트를 진행하고 있는데 로그인으로 SNS 로그인 붙여보자고 주장한 사람 나야나... 우선 카페24가 제공하는 카카오 로그인이 너무 쉬워서 뚝딱 할 줄 알았는데 자체적으로 프론트 개발하고 서버 개발하고 데이터베이스 연결하는 것은 또 다른 문제였다. 실제 우리 서비스에 붙여보기 전에 테스트 해보려고 한다. 연결 내용은 아래 블로그를 참조하여 연습한 내용이고, 기본 앱은 내가 만들어 둔 앱을 사용한다. React.js 카카오 로그인, 사용자 프로필 가져오기 - Vlee's Tale 개요 이번 포스트에서는 React에서 카카오의 REST API와 Javascript SDK를 이용해 카카오 로그인을 구현해보겠습니다. 동작 순서는 다음과 같습니다. 카카오 로그인 링크 클릭 -> 인가 코드 발..
-
[Github] git@github.com: Permission denied (publickey) 오류WEB Dev/GIT | GITHUB 2022. 1. 18. 15:32
리액트로 테스트해볼 일이 있어 예전에 만든 리액트 앱을 git pull 하려고 했더니 떴던 오류다. 몇 달 전 작업해서 깃헙 호스팅으로 배포까지 마쳤는데 노트북을 교체하면서 하드에 있던 소스코드 폴더를 그대로 백업해서 가지고 있었고 이 폴더를 열어서 git pull 부터 시작해서 수정하려고 하니 오류가 났다. 이전 노트북에선 ssh 로 깃헙 remote를 했었는데, ssh 때문에 퍼미션 오류가 하도 많이 나서 노트북 바꾸면 안해야지... 했는데... 혼자 작업하는 레포지토리들을 궅이 ssh 로 권한 체크해가면서 할 필요 있나 싶었던 것 🤗 ssh Permission denied 해결하기 (Window version) 1. 터미널(명령 프롬프트) 열기 우선 ssh 를 생성해줘야 한다. root 폴더로 가야..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 30WEB Dev/ToyProject 2022. 1. 16. 21:21
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 editGoal 함수를 만들어 보자 editGoal은 인자로 editGoalItem.item을 받아온다. 즉, 수정을 위해 선택된 title의 id와 수정된 title을 인자로 넘겨받는다. 그래서 editGoal 함수를 만들고 e를 찍어보면 다음과 같이 나온다. //목표 수정 함수 function editGoal(e){ console.log('e : ', e) } 현재 goal state의 id값과 넘어온 e의 id 값이 같은 것의 인덱스 번호를 찾아야 하기 때문에 findIndex 메소드를 이용해 인덱스를 ..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 29WEB Dev/ToyProject 2022. 1. 16. 18:31
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 id값 전달하기 지금부터 할 것은 어제 GoalEditForm의 TextField에 기존 title이 올라가도록 만들었으니 이제 id값도 전달해서 해당 id값과 goal state를 비교해서 업데이트 해주는 코드를 만들려고 한다. Goals 컴포넌트에서 editEventHandler를 통해 전달된 id 값을 통해 GoalEditForm에 title이 전달되는데 이 때 id 값도 같이 전달되고, 이 아이디값을 가진 state를 만들어 줄 수 있도록 함수를 만들자. GoalForm에서는 newGoalItem 이라..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 28WEB Dev/ToyProject 2022. 1. 16. 01:51
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 이제 해보아야 할 것은 이런 것이다. 조건문으로 어떤 상태가 add 이면, 컴포넌트가 Goal 컴포넌트 위 자리에 있고, 상태가 edit으로 바뀌면 이 Goal 컴포넌트 위에 있는 것이다. 왜 이렇게 생각했냐면 document.querySelector로 내부 내용을 바꾼다고 해도, 확인 버튼이 이미 onClick={onButtonClick}으로 설정되어 있기 때문에 수정할 때 얻은 아이디 값을 맞게 바꾸기 어려워서 이다. App에 State 만들기 처음 김다정님 책 따라 만들었던 것처럼 readOnly라는 s..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 27WEB Dev/ToyProject 2022. 1. 15. 20:38
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 어제 목표 출력 화면은 정리가 되었고 이제 작성된 목표를 클릭하면 Input에 값이 전달되고 그 값을 수정하면 해당 목표가 수정될 수 있도록 해야한다. 어떻게 하면 Input 태그에 값을 전달할 수 있을까 고민하다보니 이전에 PHP로 회원가입을 만들었던 화면이 떠올랐다. 회원가입 후 회원정보수정에 들어가면 회원 아이디를 이용해 데이터베이스에서 정보를 찾아 value에 뿌려줬었다. 이것도 그것과 같지 않을까.. Input 태그에 title 값 뿌리기 우선 클릭하면 editId를 인자로 받는 Input에 뿌리는 ..
-
[Ubuntu] VSCode로 nginx 파일 용량 늘리러 가보자WEB Dev/AWS 2022. 1. 14. 17:45
오늘 nginx 수정한 기념으로 작성하는 글 발단 회사 서버는 AWS EC2 , ubuntu, Nginx, node 으로 돌아가고 있다. 현재 작동하는 기능의 개발은 외주를 부탁드렸고 서버는 이전에 계시전 개발자분이랑 서버 외주 개발자분이랑 작업한 것으로 알고있다. 처음 커뮤니티 기능을 개발할 때 이전 팀원과 외주 개발자분이 상의해서 1MB로 줄여놨다고 하는데 (서버 부하때문에) 내가 개발 요청드릴 때는 1MB 용량으로는 아무 사진도 올릴 수가 없어서 3MB로 올려달라고 해서 3MB로 작업하게 되었다. 이미지 용량 수정을 요청하고 다음과 같은 메시지를 받았기 때문에 내가 nginx까지는 만질 일이 없을 거라고 생각했는데..... 진행 1. ssh로 서버에 연결하기 우선 ubuntu 터미널을 이용하거나 V..
-
[매일코딩-프로그래머스] 행렬의 덧셈 01WEB Dev/CordingTEST 2022. 1. 14. 10:48
이번주의 마지막 문제! [문제] 행렬의 덧셈 행과 열의 크기가 같은 두 행이 각각 arr1 , arr2 에 주어지고 같은 행, 열에 있는 값을 더해주어 반환한다. [풀이] 행렬은 배열인데, 배열 안에 배열이 있는 이중 배열로 들어있게 된다. 각 값의 인덱스(위치)가 모두 같으므로 같은 인덱스 값을 더하는 반복문으로 만들어야겠다. 그리고 조건이 있으므로 조건문을 우선 만들어준다. 행과 열의 길이가 500을 넘지 않는다. 제한조건에 따른 조건문 만들기 function solution(arr1, arr2) { var answer = [[]]; if(arr1.length