일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 렛츠기릿 자바스크립트
- 토익
- HTTP
- 회고
- 손에 익히며 배우는 네트워크 첫걸음
- 자바스크립트
- 정재남
- 타임어택
- 리액트
- 타입스크립트
- programmers
- 백준
- js
- javascript
- 4주 프로젝트
- SQL 고득점 Kit
- 파이썬
- 제로초
- 코어 자바스크립트
- 코드스테이츠
- 타입스크립트 올인원
- 토익 900
- 프로그래머스
- codestates
- LeetCode
- 리덕스
- 2주 프로젝트
- Async
- til
- 알고리즘
- Today
- Total
목록전체 글 (473)
Jerry
리덕스 공식 문서, Redux Essentials, Part 2: Redux App Structure 를 학습을 하였다. 다시 보면 좋을 내용은 노션에 메모하였다. https://www.notion.so/Redux-Essentials-Part-2-Redux-App-Structure-c185491791d542c7be659eb706bf7544 Redux Essentials, Part 2: Redux App Structure In Part 1: Redux Overview and Concepts, we looked at why Redux is useful, the terms and concepts used to describe different parts of Redux code, and how data flo..
리덕스 공식 문서, Getting Started with Redux, Redux Essentials, Part 1: Redux Overview and Concepts 를 학습하였다. 다시 보면 좋을 내용은 노션에 메모하였다. https://www.notion.so/Getting-Started-with-Redux-4df0d4799ec647f8aa192a6eabffdc6f https://www.notion.so/Redux-Essentials-Part-1-Redux-Overview-and-Concepts-812cc5760e184808b5cf666cf74fef7b 참고 https://redux.js.org/tutorials/essentials/part-1-overview-concepts#state-managem..
오늘 한 것 React로 NodeBird SNS 만들기 - Redux 연동하기 개인적으로 리덕스와 친해지려고 하는데 쉽지 않다... 디버깅하느냐 시간을 많이 소비했다..ㅠ 기존에 작성했던 코드에 리덕스를 연동하는 내용을 학습을 하면서 리덕스의 개념부터 redux devtool 사용, 구조 등 관련한 내용을 익히는 중이다. 한숨자고 복습하고 프로젝트에 리덕스를 연동해보면서 리덕스와 더더욱 친해지도록 해보겠다!
오늘 한 것 React로 NodeBird SNS 만들기 강좌에서 Redux 연동하기, 리덕스 파트를 끝내는 것이 목표였다. 하지만, 다 못 끝냈다 배운 내용 버전 6들어와서 Provider로 페이지를 감싸주는게 자동으로 되도록(생략되어 알아서 감싸준다) 업데이트돼서 한 번더 쓰면 중복처리가 된다. return ( 공통메뉴 ); 리덕스 - 중앙 데이터 저장소 역할 컨텍스트api, mobex, redux의 가장 큰 차이점은 비동기를 지원하기 쉽냐? 어렵냐? 보통 중앙 저장소가 있다면, 서버에서 데이터를 많이 받아오고 비동기로 받아온다. 데이터를 받는건 100%가 아니다. 실패를 대비해야한다. 비동기는 3단계로 나뉜다. 요청→ 성공(받는것)→ 실패 컨텐스트api는 3단계를 직접 만들어줘야한다. 아래와 같은 코..
Project https://juicyjerry.tistory.com/233 배운 내용 1. lazy loading과 code splitting의 차이점 우리가 번들러 같은 빌드 툴 체인(소스 빌드 과정에 필요한 도구)을 사용하여 번들링 하는 이유로 여러 개로 흩어져 있는 파일들(static file: html, css, image...)을 압축, 난독화하여 하나의 파일로 모아주어 최적화를 해주면 웹에서 여러 개로 나눠진 파일을 받는 경우보다 하나로 된 파일로 받는 경우의 속도가 훨씬 빠릅니다. 이런 번들링 툴인 웹팩은 번들링을 할 때 dependency graph라는 것을 호출합니다. 이 그래프는 모든 import 되는 파일이 서로 연결되어 있는 그래프입니다. 웹팩은 이 그래프를 이용해 번들링해야할 파..
SideProject 오늘 기존 정적 웹 페이지인 HTML 마크업을 리액트 코드로 전환하였다. next.js를 적용해서 하다보니 에러 핸들링 하면서 시행착오가 많았다. 1. Prerender Error prelendering error가 특히 많이 발생했는데 이 에러 대한 레퍼런스를 보긴했지만, export 설정을 잘 해주었고 pages 폴더 안에 해당 페이지를 잘 위치해두었기에 결국에 발견하지 못한 에러를 찾으려고 시간을 많이 보냈다. cf) Prerender Error : https://nextjs.org/docs/messages/prerender-error 2. styled-components 활용한 리렌더링 방지 또한, 인라인 스타일로 css 속성을 적용할 경우, 불필요한 리렌더링을 발생하게 되는..
Project https://juicyjerry.tistory.com/231 오늘 배운 내용 scss content extends: 같은 코드를 중복하고 싶지 않을 때 쓰는거야, 말그대로 다른 코드를 확장하거나 너가 코드를 재사용하고 싶을 때 사용 minxins: 상황에 따라 다르게 코딩을 하고 싶으면 사용 varialbes: 해당 css속성은 변수화 _의 의미는 기본적으로 css로 변하지 않았으면 하는 것 ex. _varialbes scss는 기본적으로 css preprocessor다. scss을 compile해서 css로 바꾼다. sass가 먼저 만들어졌는데 syntax가 달라서 scss를 쓰게 되었고 scss가 scss를 위한 공식적인 syntax로 릴리즈되었다. scss나 sass를 같은 것을 의..
SideProject 오늘은 CSS 작업을 하였다. CSS가 아닌 SCSS(SASS)를 이용하였다. Header → Main → Login → SignUp → Cart → Item Info 순 위 순서대로 하려고 했는데, 하다보니 Header, Main, Cart, Item Info 페이지 순으로 했다. 못한 Login, Signup 페이지는 다음날 계속 이어서 할 예정이다. 예전에 SCSS를 처음 접할 땐, 익숙하지 않았는데 이번에 다시 복습하고 적용해보니 저번보단 유연하게 현재 개발코드에 적용시킨거 같아서 재미있었다. 모르거나 어려운 문제일수록 자주보고 오래보면 자연스럽게 알게 되는거 같다!