FrontEnd/React.js24 [React.js] 제로초 웹게임 - 2. 끝말잇기 (Webpack, Babel) 강의를 통해 배운 것 리액트를 배울 때 애초에 CRA로 시작했고, 그렇기 때문에 파일 구조가 컴포넌트 단위로 또는 페이지 단위로 분리 되어있다는 걸 크게 의식하지 않고 사용했었다. 하지만 실제로 "index.html"에 script 태그 안에 파일을 다 밀어 넣는다는 생각을 먼저 하고, 해당 소스코드를 파일로 나누는걸 어떻게 하는거지? 라는 생각을 해보니 "webpack"의 중요성이나 webpack이 나오게 된 계기를 알게 되었다. 끝말잇기 컴포넌트는 1강 구구단과 크게 다를 게 없어서 만드는게 엄청나게 간단했는데, 웹팩 설정하는건 정 말 오래 걸렸다. 분명히 강의를 보면서 따라하는 것인데도 에러가 계속적으로 나왔고, 심지어 강의 구조도 2019년 강의에서 2020년 강의로 2021년 강의로 다시 201.. 2022. 10. 22. [React.js] 제로초 웹게임 - 1. 구구단 (react, babel) 강의를 통해 새로 알게 된 것들 CRA없이 html 파일 하나에다가 react, babel을 script로 세팅해서 React SPA 페이지를 만들어 보았습니다. 리액트를 처음 만났을 때 분명히 이런 방식을 접해봤었고, JSX가 아닌 이전 문법도 접해보았습니다. 하지만 그 당시엔 새로운 지식을 다량 접하다 보니 제대로 못 알아들었었습니다. 제로초 님 강의를 보면서 다시금 Babel이 JSX를 변환해준다는 것도 알게 되었고, index.html에다가 직접 React Component를 만드는 경험도 해보았습니다. 한번씩 "남이 만들어 둔 CRA 없이는 Page하나 못만드는 바보" 라는 생각을 하곤 했는데 마법의 뒷부분을 알게 되니 기분이 좋네요. 아주 간단한 구구단 만들기였지만, 기본을 다시 다지는 꽤 의.. 2022. 10. 21. [React.js] to-do-app, fetch => Axios 마이그레이션 과정 Axios 마이그레이션 다른 사람이 만든 to-do-app을 보니?! react.js로 만든 to-do-app을 TypeScript로 성공적으로(?) 마이그레이션했다. 무수한 에러를 이겨내고 마침내 정상 동작하는 App을 보는 기쁨을 충분히 만끽하며 즐거워 하고 있었다. 그러나… 다른 사람들의 코드를 보다 보니 통신 부분이 너무나도 깔끔한것이었다. 비결이 무엇일지 살펴보니 깔끔함의 비결은 이것도 저것도 아닌 AXIOS 라이브러리를 사용하고 있기 때문이었다~!!!!! 나도 한번 써볼까 ⁉️ 사실 이전에 프로그래머스에서 과제 테스트를 할 때 “Axios가 아닌 기본 fetch 함수를 사용해주세요.” 라는 문구를 본적이 있었다. 그래서 “axios를 사용하지 말고 기본 fetch만으로 통신을 잘 해내자!” 라.. 2022. 10. 20. [React.js] Github Page를 활용한 개인 프로젝트 배포 npm install --save gh-pages 로 gh-pages를 dev 용으로 설치한다. 아래 그림 처럼 "homepage"이름을 정해주세요. 아래 그림 처럼 "predeploy"와 "deploy" 스크립츠를 선언해주세요. 아래 그림처럼 BrowserRouter에 basename="깃헙 레포이름" 으로 설정해주세요. userPage가 아니라면 해당 깃헙 레포이름이 필요합니다. npm run deploy 하시면 build폴더가 생기며 모든 준비가 끝이 납니다. 404 에러 저는 처음에 404에러가 뜨면서 계속 배포가 안되는 에러가 있었습니다. 해결방법은.... 좀 기다리시면 돼요.... 만약 이미지가 들어있다면 경로를 잘 확인하라고 하네요. https 에러 https로 들어왔는데, 왜 http로 s.. 2022. 10. 4. [React.js] delete fetch 시 'Undexpected end of JSON input' 에러 Todo App을 Delete를 구현하다 fetch 후 Delete는 제대로 되었지만, 자꾸 fetch의 try-catch 문에서 error가 잡히면서 위 "Unexpected end of JSON input"에러가 발생했다. 구글링을 통해 알게 된 새로운 사실로는 (스오플 링크) "204 OK"로 오더라도 body값에 아무것도 담겨있지 않은 상태로 왔는데 response.json()을 하니 생긴 에러라고 한다. 해당 에러 메세지가 발생 하지 않도록 아래 처럼 204일 때 분기처리를 해주었다. 해당 코드가 현업에서의 Best Practice인지 아직은 모르지만, 현 상태에선 문제 해결을 위해 만들어 낸 최선의 코드일 것 같다. export const request = async (uri, options .. 2022. 10. 3. [React.js] Styled Components 파일 분리 멘토 코드 리뷰 Styled Components 스타일드 컴포넌트를 프로젝트에서 사용하면서, 도대체 어떻게 써야 잘 쓰는건지 감을 못잡고 있었습니다. 그러던 중 동기 분이 이전 기수들 코드를 통해 파일분리를 하고, 쉽게 사용하는 방법을 알려줬습니다. 하지만 코드리뷰를 통해 조금 더 컨벤션에 가까운 best practies를 알게 되었고, 해당 리뷰를 반영하게 되었습니다. 멘토님의 깃헙 프로필을 까는게 개인정보 보호상 안좋다고 생각하여 프로필부분은 날렸습니다. 개인적으로 위 세가지 링크가 정말 도움이 많이 되어 포스팅으로 남깁니다. Styled Components Best Practices The 3 essentials to get started with styled-components default export와 nam.. 2022. 9. 4. [React.JS] Fetch문 Try-Catch로 Error handling하기, Async-Await로 가독성 개선하기 Fetch문은 필수 프로젝트에서 Fetch문은 당연히 필수적으로 사용하는 부분입니다. 근데 이 Fetch문에서 문제가 생기는 경우가 많다는 걸 조금씩 깨닫고 있습니다. Fetch가 끝나지 않았는데 존재하지도 않는 데이터로 map()함수를 돌린다던지....(이전 포스팅) 등등 BE-FE의 통신 부분인 Fetch문이 굉장히 중요합니다. 그렇다면 FE에서도 이런 Fetch문을 그냥 둘수는 없지 않을까요? BE에서 여러가지 경우의 수를 생각하며 Validation과 Try-Catch문에 힘을 쓰는데, 우리도 Fetch에서 에러가 났을 때 확인도 하고, 처리도 할 수 있도록 해야 하지 않을까요? 단순 Fetch 코드 useEffect(() => { fetch('/data/releaseProducts.jso.. 2022. 8. 22. [React.JS] (Refactor) Array.filter()를 이용한 검색 기능 리팩토링 검색 기능 리팩토링 건 검색 기능을 구현했다는 포스팅을 올렸었습니다. 해당 기능까지 구현 후 다른 공부를 하다 더 좋은 필터코드를 발견해서 해당 코드로 리팩토링 후 기능이 정상 작동하는 지 확인 하고 포스팅을 올립니다. import React, { useEffect, useRef, useState } from 'react'; import SearchBox from './Components/SearchBox/SearchBox'; import CardList from './Components/CardList/CardList'; import './Monsters.scss'; function Monsters() { const [monsters, setMo.. 2022. 8. 16. [React.JS] shouldComponentUpdate(), React.memo() 공식 문서에서는? shouldComponenteUpdate(nextProps, nextState) 생활코딩 강의 중 shouldComponentUpdate() 가 나왔습니다. 생활 코딩 Class형 컴포넌트 리액트 강의 중 state의 배열을 array.push()를 통해 state를 변경 하는것이 불가능 하고, 새로운 배열을 만들어서 넣어야 한다고 했습니다. 여기서 한 걸음 더 나아가 추가 강의로 왜 그런지 찝찝한 분들을 위한 강의가 있었습니다. 그래서 그게 뭐임? shouldComponentUpdate() 함수는 props, state가 새로운 값으로 갱신되어 렌더링이 발생되기 직전에 호출됩니다. 해당 함수에서 return false일 경우 렌더링이 일어나지 않고, return true가 될 경우 렌.. 2022. 8. 15. [React.JS] 함수형 컴포넌트 => 클래스형 컴포넌트 import { useEffect, useState } from 'react'; import Comment from './Comment'; import './Article.scss'; function Article({ userId, profileImg, feedContents, feedImg, commentsListProps, }) { const [loggedInUserId] = useState('chaedong'); const [commentsList, setCommentsList] = useState([]); const [commentContent, setCommentContent] = useState(''); const inpu.. 2022. 8. 12. 이전 1 2 3 다음
