React
1.[React] 1. 리액트 왜 쓸까?
1. 거대 회사들이 많이 사용한다. 한국 상위 1만 개의 웹 사이트 중에서 44.76%가 사용하고 있다. 개발자는 시간이 제일 중요하다. 어떤 기술을 2달 배워서 6개월을 쓸 수도 있으며, 5년을 쓸 수도 있다. 거대 회사들이 React를 사용하고 있으며 이들이 f
2.[React] 시간을 환산해 주는 사이트
동적으로 데이터가 변경되는 State를 활용해 시간 환산 사이트
3.[React] JS 말고 "JSX" 를 사용하는 이유
React 공식 문서를 참조했습니다.
4.[React] Prop
Props을 사용해서 코드를 재사용하자!
5.[React] 공식 문서로 제대로 설치하기
❗️React 18.0.0 실행시 주의 ❗️ReactDom.render로 실행이 불가공식 문서 참조👇https://github.com/facebook/react/blob/main/CHANGELOG.md따라서 ReactDom.render이 아닌 -> React
6.[React] module css
👇 https://react.vlpt.us/styling/02-css-module.html 사이트에서 랜덤한 클래스 이름의 유용성에 대해서 알았습니다. 파일 별로 관리할 수 있게 된것(import, export)는 NodeJS 환경이라서 가능하다.
7.첫 디자인 툴 도전기!
디자인적 감각이 부족하지만, 혼자서 프로젝트를 진행할 때는 어쩔 수 없이 디자인을 해야할 상황에 놓입니다.✅ 아무리 대충 프로젝트를 진행한다고 해도, 큰 틀 없이 진행하면 흔들거리는 젠가처럼 쉽게 무너지고 모든 코드를 다시 수정해야하는 상황이 많았습니다.✅ 때문에 디자
8.[React] 영화 소개 사이트 완성!
2일에 걸쳐서 하나의 앱을 개발은 완성했습니다.많은 기능을 구현하지 못했지만, 많은 것을 배울 수 있었습니다.useState를 왜 사용해야 하는지useMemo를 왜 써야 하는지component를 왜 생성해야 하는지MVC를 맞춰서 개발을 어떻게 해야할지CSS 작업할 때는
9.[React] Next.js
Next.js는 React 라이브러리의 프레임워크이다.next.js는 pre-reloading을 통해 미리 데이터가 렌더링된 페이지를 가져올수 있게 해주므로 사용자에게 더 좋은 경험을 주고, 검색 엔진에 잘 노출 될 수 있도록 해주는 SEO에서도 장점을 얻을 수 있다고
10.[React] 가로 스크롤 캐로셀(Carousel) 구현
스크롤바 기능은 하지만 보이지는 않게 하기실패모든 영화를 포함하고 있는 div에 styles를 적용해주어야 한다.여기서 white-space는 CSS white-space 속성은 요소가 공백 문자를 처리하는 법을 지정한다.이미지들의 나열이기 때문에 불필요하다고 판단해서
11.[React]Redux를 사용하는 이유
전역을 상태관리 해준다! 또한, 비즈니스 로직을 분리해준다. data를 불러오는 과정을 컴포넌트와 불리해줄 수 있다. 때문에 redux를 사용하면 컴포넌트를 화면을 그리는 코드만 들어갈 수 있다.
12.[React] React hook
context를 사용하면 컴포넌트를 재사용하기 어려워 질 수 있다.Prop drilling을 피하기 위한 목적이라면 Component Composition을 먼저 고려해보자중간 컴포넌트가 많아지면, 불필요하게 props를 넘겨줄 수 있다.
13.Code Splitting, SSR 번역글
성능 개선을 하다가 SSR과 CSR의 코드 스플리팅이 어떻게 다를까? 큰 효과가 있을까? 라는 의문에 글을 찾아봤고, SSR 관련 code spliting 영어 블로그글을 발견하게 되어서 작성하게 되었습니다. 성능 개선을 하기 위해 코드 스플리팅, lazy loadi