본문 바로가기

728x90
반응형

toyproject

React Project ) Slack Clone, 메인페이지, Header, 프로필 변경, 로그아웃 작업 안녕하세요. 저번시간에 이어서 Slack Clone 코딩 두번째 이야기!! 프론트 공부하고 있는 비전공자 에디터 M입니다. 저는 원래 퍼블리싱을 하였는데 개발쪽 공부를 하려고 하니 예전에 jsp와 php 배웠을때가 기억이 나네요. 하면 할 수록 이게 맞나 싶고 포기하고 싶기도 한데 그래도 버티고 공부하면 프론트쪽 업무가 편해지는 날이 오겠죠?? 그런데 찾아보니 There.js라고 웹에 그래픽 작업을 할 수 있는게 있더라구요. 그걸 보고 아... 내가 IT쪽으로 온 이유가 생각나더라구요. 디자인을 하며 다양한 효과를 눈으로 보여주며 변화하는게 재밌고 신기해서 했다는걸 굳이 React나 Vue를 배우거나 하지 않고 There.js쪽으로 가도 괜찮겠다. 그러기 위해선 WebGL쪽을 공부해야 되겠더라구요. 원리.. 더보기
React Project ) Slack Clone, 회원가입 페이지, 로그인 페이지 만들기, redux 안녕하세요. 프론트 공부중인 비전공자 에디터 M입니다. 회사 업무와 여려가지 이유로 잠시 블로그에 글을 작성하지 못했는데 포기하지 않고 다시 블로그 글을 작성하러왔습니다. 그럼 제가 블로그를 잠시 하지 않는동안 만들었던 Slack Clone의 코드 리뷰를 해보려고 합니다. 리뷰에 앞서 git주소를 알려드릴께요. 자세한 코드와 package들은 git을 보시면 됩니다. https://github.com/piwe2004/slack-clone GitHub - piwe2004/slack-clone Contribute to piwe2004/slack-clone development by creating an account on GitHub. github.com 그럼 시작해 볼께요. GOGO~~ React Proj.. 더보기
비전공자의 프로젝트 만들기) 검색API를 이용한 검색 프로젝트 만들기 검색API를 이용한 검색 프로젝트 만들기 이번에는 Rapidapi의 api를 사용해서 구글 검색기능의 프로젝트를 만들어 보려고 한다. 작업에 앞서 먼저 이번 프로젝트에서 사용할 라이브러리는 아래의 목록과 같다. react-loader-spinner axios react-paginate react-query react-router-dom autoperfixer postcss tailwind 먼저 프로젝트에 components 폴더를 만들어서 컴포넌트들을 만든다. NavigationBar.jsx : 검색의 각 탭을 나타낸다. SearchInput.jsx : 검색어를 입력 후 엔터를 누르면 파라미터로 해당 검색어를 전송한다. SearchTermRequired.jsx : 검색어가 입력되지 않았을 때 표출 될 '.. 더보기
스케줄 프로젝트 만들기 - part5 스케줄 수정, 삭제 작업 오늘은 스케줄프로젝트 수정, 삭제 부분을 작업하였다. 이제는 기반을 다 만들어 놓은 프로젝트여서 디자인을 수정하거나 하지 않는 이상 심각한 에러가 나거나 하진 않았다. 다른 페이지는 수정된 내용은 없고 ModalPop페이지 위주로 작업을 하였다. 수정하기 버튼을 눌렸는지 눌리지 않았는지 체크하는 state를 만들고 수정하기 버튼을 누르면 수정할 수 있게 input들의 readOnly를 제거해 준다. 수정버튼 누리기 전의 디자인 수정버튼 눌렀을 때의 디자인 그리고 취소 버튼을 눌렀을 때는 팝업창이 사라지지 않고 내용도 원복 돼야 되기 때문에 const editCencle = () => { setEditMode(false); setScheduleTitle(editData.title) setCrrentDate.. 더보기
비전공자의 프로젝트 만들기) 스케줄 프로젝트 만들기 - part4 스케줄 수정작업 스케줄 프로젝트 만들기 - part4 와........ 이제부터 진짜 본격적인 개발을 한다고 생각이 되었다... 오류, 오류,,, 오류 끝나면 또 오류,,,,,,,,,,, 리액트 공부하면서 처음 보는 오류를 만났다... 와 씌............. 이건 뭐야 왜 렌더링이 많이 된다고 하는 거지 나는 데이터를 한 번밖에 보내지 않는데..... 수정하기 위해 기존 데이터를 가져왔는데 렌더가 너무 많이 된다고 하는 이런 오류는 참.... 데이터를 가져와서 콘솔을 찍어보면 잘 나왔다. 하지만 그 데이터를 state에 넣는 순간 오류가 생기는데 일단 그러면 modal페이지에서 데이터를 가져와야 되는 건가?? 흐음... 작장 1~2시간을 걸쳐서 여러 방법을 사용한 결과... 해결법을 너무 쉬웠다... 혼자 Cal.. 더보기
비전공자의 프로젝트 만들기) 스케줄 프로젝트 만들기 - part3 날짜 작업 스케줄 프로젝트 만들기 - part3 후.... 날짜기능과 UI작업하는데 왜 이렇게 오래 걸리는지.... 의지가 꺾일 뻔했지만 개 같이 부활 성공~~ 저번시간보다 작업된건 날짜 기능과 시간을 등록하는 부분이 추가되었다. 리듀서의 schedule파일에 isComplate를 만들어 완료 여부를 확인하는 키값을 만들었습니다. let keyId = 0 const currentSchedule = { scheduleList:[], } export const ADD = "ADD_SCHEDULE"; export const DELETE = "SCHEDULE/DELETE"; export const EDIT = "SCHEDULE/EDIT"; export const SUCCESS = "SCHEDULE/SUCCESS"; exp.. 더보기

728x90
반응형