✨Calendar page -> 일정이 보여지는 Calendar 는 "fullCalendar" 라는 라이브러리를 사용하였다. 검색 결과 여러가지의 calendar 라이브가 있었지만, react 와 세트로 fullCalendar 로 많이 쓰이는것 같아 해당 라이브러리로 구현하게 되었다. 또한, fullCalendar 에 대한 다양한 이벤트 들이 홈페이지에 나와있어 나같은 초보자 들이 쉽게 적용 할수 있을것 같다. ✨Calendar 상세 구현 -> 다이어리에 저장된 color 값들을 calendar 에 나타낸다. 📌 FullCalendar 라이브러리 적용하기 1) https://fullcalendar.io/ 해당 홈페이지에 들어가면 demo 라는 카테고리 란이 보인다. 여기에서 필요로 하는 이벤트

👷‍♀️🛠 Todolist 오류 이전 결과물을 보자 짤만 봐도 어떻게 오류가 나오는지 대충 보인다😂 문제1) >해당 날짜 내용을 쓰고 등록을 누르면 작성이 완료된 화면이 그대로 출력 되야 하는데 현재 날짜로 가져오는 모습을 보였다. 생각해보기🤔 등록하고난 후 데이터를 가져오는 부분에서 현재 날짜 값을 가져 온다는건데 그럼 데이터 호출 함수인 Todo()의 부분 이 잘못 되었진 않을까? 아니면, 등록한후 호출하는 Todo() 의 함수에서 오류인걸까? 한번 코드를 살펴 보쟈.. 등록 버튼에 대한 이벤트 함수 Todo 함수를 보면 ![](https://velog.velcdn.com/images/hahahaday12/post/e8d8f476-03a

✨Todolist 에 필요한 기능 dnd 기능 ✨Todolist 상세 구현 1) 날짜를 선택한다. 2) 입력창에 적고 버튼을 누르면 등록 된다. 3) dnd 기능을 사용해 todo에서 done 으로 옮길수 있음. 4) 등록하는 "할일"의 데이터에 상태값 정하기 (todo, done) 5) 다른 날짜 선택시 , 해당 날짜에 쓴 todo 의 데이터가 불러와져야 함. 6) 페이지를 reload 해도 , done으로 옮긴 할일이 그대로 남아있어야 함. 🎈 임의 데이터로 todolist 의 모습을 간략하게 구현해 보았다. -> 대략 이런식으로 구현하려고

하.. 너무 화가난다.. 이전 포스팅을 올리면서 해결 될줄 알았던 TimeZone 의 문제는 해결되지 않았다.. 🔥🔥🔥🔥 문제 🔥🔥🔥🔥 -> 위에 보면 다이어리를 등록한후 등록된 해당 다이어리 를 클릭하면 등록했던 다이어리 내용이 보여진다. 클릭하면 제목과 내용은 잘 보여지는데 등록 한 date 와 보여지는 date

🛠🛠🛠 어렵게 삽질 한 timeZone 😂 문제 시발점 -> 다이어리글 입력을 하고 등록을 하였을때 등록독되는 데이터 안 date 가 시간이 맞지 않는다. console.log (react + nodejs + moongodb 를 사용함) 방법을 찾아보았다. 방법1 처음 moongo db 에서 time 설정해 주는 곳이 있었다. Project Time Zone 선택란에서 Seoul 로 선택해주고 서버를 다시 시작하였다. 결과 ![](https://velog.velcdn.com/i

🎈내용 작성후 등록 버튼 누르면 선택한 color값과 내용이 등록됨. 🎈 글 입력후 등록 버튼 누르면 아래에 title 제목만 보이게 글 추가하기 . 🎈 등록된 titlebox 클릭시 입력칸에 저장된 content 가 보이고, 수정하면 수정알림이 뜸 이전까지 내용을 작성하고, recoil을 사용하여 색을 선택하면, 그 색이 다이어리 배경색에 반영되는것까지 구현하였다. 이제 , 등록 버튼을 누르면 선택한 색이 반영되서 등록된 모습을 구현하겠다. 🔥point🔥 -> 등록 되었을때 title 만 보임, 등록 될시 나타내는곳에 silde 기능 추가, 한달 단위로 만 title이보임 📁5Page L components L diaryFrom.js 🚩silde 기능 추가 -> slide 라이브러리가 있었다. 따라, 이 slide의 라이브러리를 써보기로 하였다. 다른 구현 방법이 있을까 찾아보았는데 , 시간 절약과 가독성을 위해 해당

diaryPage 기능 추가하기 diaryPage 에 대략적인 퍼블리싱을 만들어 보았다 ⭐ 다이어리 입력칸 기능 추가 ⭐ -> 어떤것을 써야 글이 써질까 생각하다가, 게시판에 자주 쓰이는 "textarea" 라는 기능을 쓰기로 정하였다. 🚩textarea는 여러 줄의 긴 문장을 입력할 수 있는 양식이다. 🚩 사용방법: -> textarea 태그를 추가해 주었다. 그후, 입력 type 과 name 값을 입력해 주었다. 📁5Page L 📁components L diaryForm.js -> css 추가 📍textarea css 에서

⭐Category 기능 만들기⭐ -> 카테고리 클릭시 해달 카테고리에 색이 나타나고 , 해당 페이지로 이동. ex) > 🤔생각해보기 -> 해당 페이지 일시 , 지정 컬러값이 나타난다. -> 비교 연산자를 통해 각각의 페이지 비교 📁Layout L sideBar.js 🎈객체 데이터 추가 -> Categorys 안에 객체로 데이터들을 넣어 놓았다. 선언해 놓은 객체들을 .map 으로 이용하여 객체 값이 보이도록 해놓았다.

🤔 생각해보기 -> 로그인이 되었을때 page를 접근할수 있고 로그인이 되지 않았을때는 페이지 접근이 불가하게 구현해야 한다. "React 페이지 접근" 에 대해 검색해보니, Router 를 통하여 페이지를 접근, 접근 제한 할수 있다고 한다. 따라 Router 을 사용하여 페이지 접근 제한을 구현하였다. ✅Router 을 사용하여 페이지 접근 제한. >- 로그인 ❌ -> 로그인 , 회원가입 로그인 👌 -> Calendar 페이지, todolist 페이지, diary 페이지 먼저 로그인 로그아웃 user 에 대한 전반적인 함수를 따로 auth.js 라는 파일에다 선언 해주었다. 📁auth.js -> getCurrentUser 는 localStorage 에 있는 "token" 값을 return 해준다. 📁privateRoute.js let che

🤔생각해보기 로그인 버튼을 누르면 입력 값에 대해 체크를 해야한다. 📁1_LoginPage L logininput L index.js > e.target.value 란? e.target은 특정 이벤트가 발생하는 태그 e.target.value는 input에 입력되는 값 -> input에 입력 되는 값을 setEmail 과 setPassword 를 이용해 상태값을 바꿔주었고, 로그인 버튼을 눌었을때, onClick 이벤트가 실행된다. -> onClick={useHandleLogin} const useHandleLogin = () => { try { AuthService.Login(email, password) AuthService.Login 으로 email, pa

📍 생각해보기 회원 가입 input창 글자를 입력할때마다 value 값으로 인식되어야함. validation (정규식) 체크 id:조건을 걸어 아이디 형태에 부합하지 않으면 alert 창으로 알림. password: 조건을 걸어 비밀번호 형태에 부합하지 않으면 alert 창으로 알림. 기존 값에서 새로 적은 아이디의 상태값 변화 (useState) ✅ 1. 먼저 회원가입 유효성에 대한 조건 값을 먼저 적어 두었다. (공통 함수들을 common.js 라는 파일에 따로 적어 두었다.) 📁Common.js L Common.js -> 비밀번호를 검증할 정규식 (함수 PwExp 로 선언 하였다.) 정규식 메서드에서 test() 는 "문자열에 일치하는 부분이 있는지 확인하고, true 혹은 false를 return" 하기 때문에 return 값으로 password 에 대한 정규식을 test 하고, ture, false 값으로 리턴

🎈회원가입 페이지 만들기 3,4,5 페이지의 레이아웃은 공통 으로 들어갔기 때문에 공통으로 빼주었지만 2페이지(회원가입) 페이지는 공통 레이아웃 부분과는 다르기 때문에 레이아웃을 한개 더 만들어 주었다. 첫번째 글에서 나눴던 컴포넌트 대로 폴더를 나눠 주었다. ✅ index.js -> 2Page 의 배경 퍼블리싱은 컴포넌트 페이지가 모아진 index.js 에 작성하였다. > 퍼블리싱 작업을 하는데 styled-components 라는 라이브러리를 이용하였다. 사용이유와, styled-components 에 대한 내용은 따로 써놓았다. 링크 : ✅ 왼쪽 LifeCalendar 로고. ![](https://velog.velcdn.com/images/hahahaday12/post/d6

디자인과, 컴포넌트 구조가 어느정도 만들어 졌으니 기능을 구현해 줘야 한다. 먼저 router로 페이지 이동을 하여 , 각각 페이지에 어떤 기능이 들어갈지 뼈대를 잡아두었다. > 페이지 이동 기능에 사용하는 라이브러리 "Router-dom" Router-dom 을 사용하는 이유, Router-dom 에대한 내용은 따로 작성해 두었다. 링크:ㅣ 이렇게 감싸고 보니 아래와 같은 오류가 생겼다. >"Uncaught Error: useRoutes() may be used only in the context of a component." -> useRoutes는 로 감싸야 한다. 검색해보니, v6로 업데이트 되면서 사용법이 바뀐것

폴더 구조 잡기. -> 내가 맡은 페이지는 1~3 page 까지 이다. 일단 프로젝트의 총 페이지 수는 5page 이다. 처음엔 쉽게 폴더 명을 구분하기 위해 페이지 명으로 작성하 였고, 폴더 명은 추후에 , 수정할 생각이다. 1page 1page 📁logoimg L index.js 📁loginInput

그동안 배운것들을 응용해 프로젝트를 진행해 보기로 했다. "todolist" , "미니 게시판" 만들면서 공부를 했었는데 , 이번 프로젝트에서 공부한것 들을 조금더 심도 있게 응용해보고 싶었다. "Life Calendar" 라는 웹형식의 일정관리 사이트를 만들어 보기로 했다. 캘린더를 만들때 필요한 기능, 배운것에서 응용 가능한 기능, 만들고 싶은 기능 을 추려 메모장에다 하나씩 정리 해놓았다. 처음 해보는 프로젝트라 욕심 내지 않고 완벽하게 응용해서 구현 할수 있는 기능들 위주로만 구성하였다. 제일 먼저

html elements 를 배열로 Ref로 받아오는 방법. -> Dom객제를 여러개 받아오고 싶을때 -js에서 getElementById, querySelector 같은 DOM SELECTOR 함수처럼 -React에서 DOM에 접근하게 되는 일이 생긴다면 접근하게 해주는 Hooks 함수 Ref 는 객체값을 받아온다. ✅추가 설명 onClick={onRemoveHandler2} / onClick을 했을때 {onRemoveHandler2}함수 실행. button안에다가 ref={(el)=> (removeButtonArr[index] = el)} 작성. ref는 DOM에 접근할수 있고, 객체 값을 가져올수 있다. ref의 결과값(button)값을 (el)로 받아오고, index 배열로 담아 map으로 계속 반복한다. 버튼에 대한 속성을 el로 . map으로 반복하는 button의 html(div) 값이 removeButtonArr[in

map -> [반복문, 한줄 씩 읽어오는것] -> 주고 배열의 길이 만큼 반복할 때 사용 ex) 배열명.map((결과값 변수명) => 실행문 ex) 실행문의 경우 userList.map((v) => console.log(v.id)) // 1,2,3 ex) html 반복의 경우 userList.map((v) = ( )) -> map 을 써서 div를 반복. html안에 있는 div가 반복해서 보여주게 된다. find / findIndex -> 주로 배열 내에서 조건식을 만족하는 값/ 인덱스를 찾아올때 사용. -> 찾은후 백엔드에 전달. + 값을 추가 할때도 사용. -> [검색, 조건에 맞는 데이터를 읽어오는것] ex) 배열명.find((결과값 변수명) => 조건식) -> userLisr 에서 id값이 1 인것을 찾고, 객체 전체를 가져옴.(객체 자체) 가져 온것에서의 name 값 출

state 의 불변성 -> 랜더링이 필요 없는 부분에 대해선 state를 쓸 이유가 없지만, 어떤 값이 바뀔때마다 화면이 랜더링되서 값이 바뀌어야 할때, 랜더링을 다시 시켜야 할때 state 를 쓴다. >🔥state 가 불변성을 지키지 않으면 VirtualDOM이 감지 하지 못한다.🔥 따라, state는 변하지 않아야 한다 = 불변성 state가 불변성을 지켜야할 이유! 🚩"원본 데이터 훼손" 때문 -> 원본 데이터가 훼손이 되면 VirtualDOM인 가상돔은 변화가 된건지 인지하지 못하고 랜더링을 하지 못한다. -> 랜더링이 필요 없는 부분엔 필요가 없겠지만, 랜더링이 필요할 경우 state를 쓴다. ex) (state의 값이 객체나 배열일 때) const obj1 = {1} const obj2 = {} obj === obj2 (T/F) const obj3 = obj // obj3와 obj2가 같은 참조

ex) Props 예제연습 component L hello.js pages L user.js 두개의 폴더를 만들고 폴더 안의 각각의 파일을 만들었다. user.js -> user 의 변수를 하위에 있는 에 전달하고 싶다. 상위 컴포넌트에서 하위 컴포넌트에 전달 하는것을 props 라고 한다. 세번째 "Hello" 라는 컴포넌트에 props 를 전달 하였다. hello.js -> props.isLover 가 있으면 true , 따라 "님!" 옆에❤ 가 나타난다. "님!"옆에 📍 이모티콘이 보여진다. 출력결과 -> 3번째만 ture 값이니 3번째 컴포넌트에서만 ❤ 이 출력 되었다. 📌 컬러값을 넣고 싶을때! -> style 안

React의 기본 주소와 포트 localhost:3000 localhost = 본인 IP주소 = 127.0.0.1:3000; localhost:3000 package.json script "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "dev": "react-scripts start" }, start: 배포하기전, 사용자가 보는 화면을 개발자가 확인할 때 build: 배포용 , 배포 폴더를 만들기 위하여 사용 test: TDD (테스트 주도 개발) -- 유닛테스트 -- "jest" eject: 숨겨진 모든 설정을 밖으로 추출해주는 명령어(웹팩, 바벨 커스텀) dev