본문 바로가기

전체 글

 (265)
[코드숨] 리액트 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 라우팅이란 ..
[코드숨] 리액트 13기 - 5주차 주간 회고 CodeSoom 2022.11.07 - 2022.11.13 비동기 처리 과제 : 레스토랑 조회 구현하기 TDD로 레스토랑 조회 구현을 하는 과제를 이번주에 수행하였다. TDD를 아직 혼자서 작성하는 건 어렵게 느껴진다. 과제를 진행하다가 해설 강의를 보고 코드를 이어서 작성하는데 계속 오류가 나서 슬펐다..😥 각 Container 컴포넌트의 Test를 작성할 때 오류가 났는데 describe -it 에서 it의 바깥과 안에 작성함에 있어서 범위 오류가 났던 것이었다..! 이를 통해 render 함수를 불러오거나 useSelector 를 작성 등.. 작성하는 순서와 범위를 고려하며 코드를 작성해야하는 것을 깨달았다. TDD를 작성하면서 다양한 오류를 겪고 있는데 결국 기초부터 잘 이해하는 것이 중요한 것 ..
[코드숨] 리액트 13기 -5강/과제1(레스토랑 조회 구현하기) 풀이 참고 App.jsx 에서 0. 지역, 분류 목록을 얻기 1. 지역 선택 -Regions __mocks__ >api.js 설정 18. action.js - fetchCategories 도 설정할 것임 19. reducer.test.js - setCategories test도 추가 + import {setRegions, setCategories, from './actions'; 위에도 추가 20. action.js 에도 setCategories 추가 21.reducer.js 에도 추가 22. reducer.js 에서 다음 형식처럼 변경하고 함수[action.type] 해서 불러오면 더 좋을 것같음 >> 기본값이나 해당 action 값 나오도록 설정 >>이후 각 부족한 컴포넌트 추가, Test작성 ( ex: Reg..
[코드숨] 리액트 13기 -5강/과제1:레스토랑 조회 구현하기 오류 오류 regions.jsx 에서 map을 돌렸지만 화면에 출력되지 않고 아래와 같이 에러가 뜸 Cannot read property 'map' of undefined 원인 React는 map(...)을 반복실행할 때, 데이터가 아직 안들어와도 렌더링이 실행되며 당연히 그 데이터는 undefined로 정의되어 오류가 난다. 해결 state의 기본 설정에서 오류가 났던 것이기 때문에, 다시 살펴보았더니 regions가 오타났던것.오타를 수정하니 해결되었다. https://devbirdfeet.tistory.com/47 React 실행오류 Cannot read property 'map' of undefined Updated 2022/10/07 React hook 을 사용하여 네이버 뉴스 검색 API 를 데이터..
[코드숨] 리액트 13기 -5강/비동기(REST API, async/await,fetch,Redux Thunk) 비동기 처리 비동기(Asynchronous) 동기식 처리 모델 vs 비동기식 처리 모델 웹 프론트엔드의 복잡성은 계속 증가하고 있습니다. 반면 JavaScript는 싱글 쓰레드 기반 이벤트 루프로 실행되기 때문에 동기 로직이 많아질수록 브라우저에서 앱의 사용성이 급격히 줄어들 겁니다. 따라서 현대의 JavaScript를 다루는 개발자라면 비동기와 동시성(concurrency), 나아가 병렬성(parallelism)에 대한 이해가 필수적입니다. Promise Promise - MDN Promise 쉽게 이해하기 현재 JavaScript를 다루는 개발자라면 Promise에 대한 이해는 필수적입니다. 흔히 Promise에 대한 자료를 보면 callback hell을 해결해준다는 말이 많지만 이는 Promise..

티스토리툴바