배포 링크 : 마켓멍냥 원본 저장소 : GitHub 이번 리액트 쇼핑몰 프로젝트에서 내가 맡은 파트는 관리자 파트 !! 🐶🐶 참고한 사이트인 마켓컬리에서는 관리자 페이지를 직접 볼 수가 없었다. ㅠㅠㅠ 그래서 관리자 화면을 어떻게 구성해야 할 지 찾아보다가 구글에 "admin page" 라고 검색해서 나오는 이미지들을 보고 참고했다. (구글 짱...) 처음에는 관리자 페이지만 만들면 되는 줄 알았는데,,,, 관리자 여부를 확인해서 화면을 다르게 보여주고, 경로도 보호해야 했다. 그래서 처음에 셋팅하는 게 조금 오래 걸렸다. ㅠㅠㅠ 그래도 이렇게 처음부터 관리자 / 사용자 별로 화면을 어떻게 보여줄 지 정하고 권한 확인 부분을 만들어놓고 시작하니 팀원분들이 각자의 파트에 집중할 수 있게 된 것 같아서 다행..

배포 링크 : 마켓멍냥 원본 저장소 : GitHub 두둥 그 동안은 자바스크립트 + 모듈화 + REST API 를 활용한 프로젝트만 해보았었는데, 이번에는 드디어 !!!!!!! 리액트 + 팀 프로젝트에 참여하게 됨 (+ 팀장!!!!) 팀장으로서 내가 어떤 것을 하면 좋을 지..... 생각해 보았는데... 1. 레포지토리/브랜치 생성 2. 프로젝트 초기 셋팅 3. 라이브러리 초기 셋팅 4. 문서화 초기 셋팅 이정도가 필요할 것 같았다. 특히 팀원들이 바로 개발을 시작할 수 있도록 빨리 프로젝트 환경 셋팅을 해놓는 것이 중요했다!!!!! (제출 기한이 정해져 있어서 급했음) 리액트 프로젝트를 팀 단위로 해본 것은 처음이라서 어떤 라이브러리를 써야 할 지 계속 검색해보고 ㅠㅠㅠ 팀원들과도 이야기 해보고.. 혼..

배포 링크 : todo-array 원본 저장소 : 깃허브 이번에 진행한 프로젝트는 간단한 할 일 관리 프로젝트이다! 어떻게 디자인을 하면 좋을 지 구상하다가, 아이패드에서 어플을 실행하는 것 처럼 보여지면 재미있을 것 같았다. 그래서 아이패드, 애플펜슬 이미지를 사용했다! 실제로 내 아이패드는 그저 강의용.....ㅎㅎㅎㅋ 처음에는 자바스크립트로 완성했었는데, 이번에 배운 타입스크립트를 프로젝트에 직접 적용해보고 싶어서 나중에 타입스크립트를 사용해 리팩토링 하게 되었다! 기능 별로 4개의 파일로 나누어 모듈화 하였다. main.ts : 페이지 접속 시 맨 처음 실행되어야 하는 로직들 renderTodo.ts : 각 todo를 렌더링 requests.ts : API 호출 setElements.ts : 엘리먼..

배포 링크 : movielly 원본 저장소 : 깃허브 팝.콘.이.내.린.다. 샤라라라라라라 ~~~~~ 🐱 OMDB API 를 활용하여 영화 검색 사이트를 만들어 보았다! (데이터가 영어로 되어있어서 영어로 검색해야함) 처음에는 팝콘 애니메이션은 없었는데, 고양이 옆에 팝콘이 달랑 있는게 심심해보여서 추가하게 되었다..🍿🍿🍿🍿🍿 또한 처음으로 모듈화를 하여 구현하였다! getMovieData.js : 영화 데이터를 가져옴 initElement.js : 엘리먼트 초기화 시 사용하는 함수들 main.js : 라우팅, 초기화 renderDetail.js : 영화 상세 렌더링 renderMovies.js : 영화 목록 렌더링 renderSearch.js : 검색 영역 렌더링 setElement.js : 엘리먼트 ..

React Context 리액트에서 데이터 흐름을 컨트롤하는 방법 중 하나 (상태 관리) 컴포넌트 트리의 깊이에 상관 없이 props를 전달하지 않고도 컴포넌트에 데이터를 제공함 전역 데이터를 관리하는 데 사용됨 (전역 상태, 테마, 서비스, 사용자 설정 ...) React.createContext const MyContext = React.createContext(defaultValue); Context 객체를 생성함 생성된 Context 객체는 리액트가 관찰하는 구성 요소를 렌더링 할 때 트리에서 그 위에 가장 근접하게 일치하는 Provider에서 현재 컨텍스트 값을 읽음 defaultValue 인수는 트리에서 구성 요소 위에 일치하는 Provider가 없을 경우에만 사용됨 컨텍스트를 사용하려면 Pr..

Event Bubbling (이벤트 버블링) 가장 깊게 중첩된 요소에 이벤트가 발생했을 때 이벤트가 위로 전달되는 것 (부모 요소들의 핸들러가 호출됨) FORM DIV P 에 할당된 핸들러 --> 에 할당된 핸들러 --> 에 할당된 핸들러 p 태그 클릭 : alert('p'), alert('div'), alert('form') 실행 div 태그 클릭 : alert('div'), alert('form') 실행 form 태그 클릭 : alert('form') 실행 FORM DIV P 부모 요소 핸들러에서는 어디에서 이벤트가 발생했는지 알 수 있음 p 태그 클릭 : target=p, this=form div 태그 클릭 : target=div, this=form form 태그 클릭 : target=form, t..