FrontEnd56 [React.js] 제로초 웹게임 - 4. 반응속도체크 (useRef) 강의를 통해 알게된 것 useRef의 용법 중 DOM 요소 조작이 아닌, 변수 컨테이너로 사용하는 용법에 대해 알아보았습니다. 이걸 알았다면 부트캠프에서 진행한 팀 프로젝트가 한층 더 완성도가 높았을텐대 많이 아쉽네요. 어찌 보면 프론트엔드 공부를 아직 많이~ 못했기에 그럴수도 있겠죠. 매일 매일 부족함을 많이 느낍니다. React.memo를 사용해서 props가 변하지 않을 때 리렌더링 되지 않게 시도해보았지만 잘 되지 않았다. 내가 모르는 부분이 더 있나보다. 일단 진도를 쭉쭉 나가서 한 사이클 돌린 뒤에 생각해봐야 할 문제인것 같다. 프로페셔널 프론트엔드 개발자가 되고자 하는 사람이 아직 리액트 1회독도 못했다니 😭 얼른! 한사이클 돌리고 오겠습니다. 고지가 얼마 안남았네요. 화이팅! 처음에 내가 .. 2022. 10. 24. [React.js] 제로초 웹게임 - 3. 숫자야구 (shouldComponentUpdate, React.memo) 강의를 통해 배운 것 리액트 데브 툴을 활용하면 어디서 ReRendering이 발생하는지 확인 할 수 있다. 이를 통해 성능 최적화가 가능해지고, 이 때 불필요한 리렌더링을 막는 방법이 "shouldComponentUpdate, PureComponent, React.memo"이다. 이전 까진 리렌더링 최적화에 대해선 생각해본적이 없었고, 또한 함수 컴포넌트만 사용하다 보니 setState에 같은 값이 들어가면 (참조형 변수 포함) 리렌더링이 되지 않는다는 것 까지만 알고 있었다. 하지만 class형 컴포넌트를 사용하는 경우 shouldComponentUpdate와 PureComponent를 알아야 하고, 함수 컴포넌트를 사용한다 해도 자식 컴포넌트에서 props가 변경되지 않을 때 부모 컴포넌트의 리렌더.. 2022. 10. 24. [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. [Next.js] Next.js 초기세팅에서 yarn start 하면 생기는 일 원티드 챌린지 10월 (SSR, CSR, Next.js)에서 내준 과제입니다. 해당 과제를 이해조차 못했는데, 수강하시는 분들 중 좋은 블로그 글이 있어 참고하였습니다. 아니 그냥 거의 따라 해봤습니다. 😭 개발세계엔 대단하신 분들이 많아요~! 존경 존경 과제를 잘 해주셨다고 칭찬받으신 포스팅 Next.js 초기세팅에서 Yarn Start 하면 생기는 일 import '../styles/globals.css' function MyApp({ Component, pageProps }) { return } export default MyApp yarn start를 하면 '_app.js' 파일이 먼저 실행되나 봅니다. 해당 파일은 프롭스로 { 컴포넌트와 페이지 프롭스를 받습니다. }.. 2022. 10. 6. [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. [Vue.js] 로컬스토리지 새로고침 문제 ;; (해결) To Do App을 만들다. vue2로 컴포넌트간 데이터 주고 받는게 이해가 안되서 혼자 To Do App을 만들어 보고 있습니다. 프롭스로 데이터 내리고, 이벤트로 올리는 걸 하면서 익숙해지는 중이었습니다. ⁉️ 근데 문제가 생겼네요. 말이 안되는 문제라 지금 아직 해결을 못했어요. created() { for (let i = 0; i < localStorage.length; i++) { let todoKey = localStorage.key(i); console.log(todoKey) let item = JSON.parse(localStorage.getItem(todoKey)); console.log(item); this.todoList.push(item); } }, 문제가 발생한 코드는 위 코드입니.. 2022. 9. 28. CSR과 SSR CSR (Client Side Rendering) SSR(Server Side Rendering) CSR이란? CSR이란 Client Side Rendering의 약자이다. 직역 하면 클라이언트 측에서 렌더링을 한다는 의미가 된다. CSR이라는 용어가 낯설지만, 생각보다 간단한 개념이다. CSR은 특별한 것이 아니라 나처럼 웹 개발, 프론트엔드 개발을 시작한지 얼마 안된 사람이라면 웹의 기본적인 동작으로 알고 있는 방식이다. 그 방식은 바로 서버에서는 데이터를 보내 주는 역할을 하고, 클라이언트에서는 해당 데이터를 통해 화면을 보여주고, 유저 인터렉션을 통해 데이터를 요청하는 방식이다. CSR 동작 방식을 순서대로 표현하면 다음과 같다. 클라이언트에서 서버로 Javascript 요청 서버에서 클라이언트로.. 2022. 9. 28. 이전 1 2 3 4 5 6 다음
