frontEnd/React

👋 왜 전역상태관리를 해야할까? React의 사용목적 상 component로 만들어 기능을 구현하고 page를 라우트 처리해서 사용하는 경우가 정말 많다. 그러다보면 데이터를 부모->자식에게 전달하게 된다. ex. 게시글의 id값, 쇼핑몰 구매 수량 등 그런데 상태관리(= 데이터를 전달/변경하는 과정) 시 여러가지 문제에 부딪히는데 몇 가지를 소개하자면 상태관리 시 문제점 1.부모-> 자식에게만 데이터를 전달할 수 있다.(일반적으로) 2.Props drilling으로 인해 코드가 복잡해진다. (아래의 Children이 100개라면...? 한개의 상태를 100번 건네줘야함) 3.상태가 변경되면 체인된 모든 컴포넌트가 재랜더링된다.(Children3의 상태가 변경되면 Ch2,Ch1,Parent 도 재랜더링 ..

👋 1...2...3... 안녕... 구글 조사에 따르면 3초 이상 웹사이트가 지연되면 53%가 떠나간다는 통계가 있다. 따라서 최적화는 정말 중요하다. 웹사이트의 최적화를 위해 코드스플리팅이 사용되는데 어떤 기술인지 알아보자! How mobile latency impacts publisher revenue - Think with Google As people’s expectations for mobile experiences have grown, simply loading on a mobile device is no longer enough; mobile sites must be fast and relevant. Learn why. www.thinkwithgoogle.com 🌈 코드스플리팅(CodeSp..

🌈 JS에서 new Date( ) 객체 JavaScript에서는 Date 객체를 생성하므로 현재 시간 등을 표시할 수 있다. 아래처럼 new Date()를 통해 날짜 표시할 수 있는데 문제는 format이 정돈되지 않았다는 점! export default function App() { const date = new Date(); return {date.toString()}; } ☀️ Day.js를 사용해서 format 변경하기 naver News API에서 날짜를 가져와서 표시할 경우 아래처럼 기본 포맷으로 표시가 됐다. 이걸 custom 해보자! 1) Day.js 라이브러리를 설치한다. npm install dayjs --save 2) dayjs 라이브러리를 import 해준다. import dayjs..

☀️ 일반적인 path 경로설정 특정 컴포나 파일을 import 할 때 경로를 설정한다. 이때 파일의 위치에 따라 경로가 상대적이기 때문에 지저분한 경우가 많다. 초기 디렉토리를 구성 할 때 컴포의 성격에 따라 파일을 구분지어 분류하기 때문에 경로는 동일한 경우가 대부분이다. 따라서 경로를 깔끔하게 설정해봤다. //경로 관리 전 import Navbar from '././././layouts/Navbar' import Header from '././././layouts/Header' import Button from '././././components/Button' import Banner from '././././components/Banner' //경로 관리 후 import Navbar from '@..

실시간 채팅기능을 구현하기 위해서 JS의 라이브러리인 Socket.io를 사용한다. Socket.io는 Websocket을 기반으로 만들어진 라이브러리인데 Websocket에 대해서 좀 더 알아본다. 🌈 Websocket 이란? - RFC 6455 명세서에 정의된 프로토콜 - 서버와 브라우저 간 연결을 유지한 상태로 데이터를 교환할 수 있다 - 데이터는 ‘패킷(packet)’ 형태로 전달되며, 전송은 커넥션 중단과 추가 HTTP 요청 없이 양방향으로 이뤄짐 - 온라인 게임이나 주식 트레이딩 시스템같이 데이터 교환이 지속적으로 이뤄져야 하는 서비스에 적합 ☀️ Websocket 이 있는데 Socket.io 라이브러리가 필요한 이유? Socket.io 공식문서에서 말하길 아래와 같은 이유 때문이라고 한다 T..

🌈 에러 아래 코드를 실행시키면 이런 에러가 뜬다. 코드에서 어떤 부분이 잘못 됐을까?? 답은 if 문의 return 값이 hook인 useEffect 보다 위에 있기 때문이다. 그럼이게 왜 잘못된 것일까?? 이것을 이해하기 위해선 Hook 작동원리에 대해서 이해해야한다. Error Rendered more hooks than during the previous render. function Form() { const [name, setName] = useState('Mary'); if(!name == ''){return null} useEffect(function persistForm() { localStorage.setItem('formData', name); }); } ☀️ Hook의 규칙 Hook..