CodeSoom- React 13기 (34) 썸네일형 리스트형 [코드숨] 리액트 13기 - 8주차 주간 회고 CodeSoom 2022.11.28 - 2022.12.04 Redux Toolkit, Emotion 과제 : 레스토랑 앱 꾸미기 벌써 ..!!! 코드숨 리액트 과정이 끝이 났다. 교육을 듣는 동안 시간이 빠르게 지나간 것 같다. 이제 연말이라니..😂 오늘은 마지막 과제 PR을 올리는 최종 데이였다! 그동안 진행했던 레스토랑 앱을 꾸며 최종 결과물을 내는 것이 이번 과제였다. 강의에서 배운 Emotion으로 전체 style을 입히고 본문에 내용을 추가했다. 수정됨에 따라 다시 test 작성을 하는 중에 에러가 나서 이리저리 추가하다보니 시간이 금방 갔다. 그래도 style을 적용시킨 결과물을 보니 매우 뿌듯하였다.😊 이번 주엔 Redux Toolkit을 사용해보았는데 slice파일에 action creat.. [코드숨] 리액트 13기 -8강/2.리덕스 툴킷 Redux Toolkit, PureComponent Redux Toolkit Redux Toolkit 공식 문서 Redux Toolkit - 한글 번역 지금까지 redux를 이용해서 개발할때 복잡하고 코드가 많았다. 어플리케이션이 복잡해질수록 다양한 액션과 리듀서에 대한 관리가 복잡해지며 편의를 위한 패키지 추가가 많이 필요했다. immer, ducks pattern 등을 공식적으로 지원한다. redux-thunk가 비동기 처리를 위해 기본으로 포함됐다. ducks pattern: redux를 사용할 때 action과 reducer를 하나의 파일에서 사용하는 패턴. redux-toolkit은 이를 slice.js 란 파일에 모아둔다. 사용해보시면 편한게 딱 느껴짐..! redux의 악명 높았던 사용법이 정말 많이 개선된 걸 느낄 수 있다. 또한 입맛에 따.. [코드숨] 리액트 13기 -8강/1.Emotion(CSS-in-JS라이브러리) Emotion CSS-in-JS CSS-in-JS에 관해 알아야 할 모든 것 이전까진 CSS를 xxx.css 와 같이 별도의 문서로 관리했지만 요즘은 자바스크립트 코드에서 CSS를 작성합니다. CSS-in-JS라는 명칭은 방법론입니다. 실제로 작성을 돕는 라이브러리는 매우 많습니다. 대표적으로 styled-components와 emotion이 있습니다. 이번 교육에서는 emotion을 사용합니다. Emotion 공식 문서 1. 설치 npm i @emotion/react @emotion/styled 강의에선 npm i @emotion/core @emotion/styled 로 나왔으나 core => react 로 업데이트됨 2. 사용 1) import 해준다. import styled from '@emoti.. [코드숨] 리액트 13기 - 7주차 주간 회고 CodeSoom 2022.11.21 - 2022.11.27 로그인 과제 : 레스토랑 로그인 페이지 및 리뷰 작성 페이지 구현하기 HTTPie를 사용하여 데이터 조회 및 전송을 테스트하는 방법을 배웠다. 설치를 하는데 Windows는 Mac과 방법이 달라 꽤 애를 먹었다..😂 처음 Python을 설치하고 환경변수를 설정 후 CMD에서 HTTPie를 설치했는데 CMD에서 계속 Python만 출력되고 작동되지 않았다. 알고보니 환경변수 Path를 잘못 설정하여 일어난 오류라 폴더 위치를 다시 확인 후 설정하자 에러가 해결되었다. 그리고 다시 HTTPie를 설치하는데 중단되는 에러가 발생하였다. 환경변수를 다시 살펴보고, 설치방법이 잘못되었는지 다시 확인하는 등 다양한 방법을 시도 끝에 Python 버전을 낮은.. [코드숨] 리액트 13기 -7강/로그인(HTTPie,Authorization 헤더,LocalStorage,given, 리뷰) HTTPie HTTP 클라이언트 CLI 도구입니다. 간단한 데이터 조회 및 전송을 테스트해볼 수 있습니다. 우리가 자주 사용하는 curl로도 테스트할 수 있지만 사용하기 불편한 점이 있고, 또 Postman을 사용할 수도 있지만 간단하게 테스트할 때는 HTTPie로 해보는 것도 좋을 것 같습니다. HTTPie curl 에 비해 사용이 쉬움 json 지원 기능 내장 출력을 포맷팅하여 보여주므로 가독성이 뛰어남 Form 과 file 업로드가 쉬움 HTTP 인증 및 커스텀 헤더 설정등 python 으로 개발되었으므로 yum 이나 apt-get 보다는 pip 로 설치하는 것을 권장한다. https://www.python.org/downloads/ Download Python The.. [코드숨] 리액트 13기 -6강/과제1 제출코드 참고(레스토랑 상세 페이지 구현하기) * react-router-dom 설치 GET http://localhost:8080/test/main.js net::ERR_ABORTED 404 (Not Found) 오류 해결 클릭시 랜더링되지만 주소창에 url통해서는 안들어가지는 오류 발생 >>해결: net::ERR_ABORTED 404 (Not Found) 에러 정말 느닺없는 에러였다. 나는 잘만 작동하는 html이 갑자기 말썽이었다. 콘솔창 에러가 말씀하시길 나는 이유를 알 수가 없었다. "이상하다. 나는 main.js를 설정한 적이 없는데 이게 왜있지? "그런 velog.io : The Document Base URL element - HTML: HyperText Markup Language | MDN The HTML element specif.. [코드숨] 리액트 13기 - 6주차 주간 회고 CodeSoom 2022.11.14 - 2022.11.20 Routing 과제 : 레스토랑 상세 페이지 구현하기 이번주는 Routing을 배웠는데 BrowserRouter를 사용할 경우, 페이지를 새로 고침없이 주소만 변경하여 컴포넌트들을 렌더링 할 수 있음을 알게되었다. window.location.pathname 을 통해 라우팅했을 때보다 더 간편하게 사용할 수 있었다. 강의를 보면서 처음 작성할 때 로 했는데 오류가 나서 찾아보니 현재는 로 사용되며 작성법이 달라졌음을 알 수 있었다. 그리고 이번주 과제를 수행하면서 react-router-dom을 사용하였는데 클릭시에는 URL이 바뀌며 랜더링되었지만 주소창에 직접 URL을 작성할 때는 404 (Not Found) 에러가 발생하였다. 알고보니 ind.. [코드숨] 리액트 13기 -6강/라우팅(Routing) 라우팅 historyApiFallback 대다수의 웹 서비스를 보면 존재하지 않는 페이지에 접근할 때 index.html로 redirect 해주는 걸 볼 수 있습니다. 개발 환경에서 이러한 기능은 webpack devServer에서 설정할 수 있습니다. devServer.historyApiFallback module.exports = { //... devServer: { historyApiFallback: { index: 'index.html', }, }, }; Window.location Location window.location을 통해서 Location 객체를 얻어올 수 있습니다. Location에서 얻어올 수 있는 정보는 위의 링크를 참고하세요. Routing SPA & Routing 라우팅이란 .. 이전 1 2 3 4 5 다음
