🔎들어가기 전 react로 개발할 때 아래와 같은 패턴을 많이 접했을 것이다. return ( ...someting ) 잘 알고 쓰고 있다면 베스트! 하지만, 나는 그냥 요렇게 감싸야 빨간 밑줄이 안쳐져서? 또는, 단순히 여러개의 엘리먼트들을 그룹화하고 싶을 때 사용하고 있었다. 그러던 중 아래와 같은 코드를 보게 되었다. ...someting 응? 이게 뭘까? 알고 보니 와 같은 의미였다. 제대로 모르고 그냥 쓰다보니 마치 계피와 시나몬이 다른 건 줄 아는 느낌이었다..^^;;... 그래서 이번 기회에 간단하더라도 짚고 넘어가자! 라는 의미로 포스팅하게 되었다. 📍Fragments란? Fragment는 React v16에 추가된 기능으로, DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화한다. ..

📝 들어가기 전 프로젝트에서 React를 실제로 사용하고 있어서 React의 장점에 대해서는 어느 정도 파악하고 있다고 생각했다. 그런데 갑자기 의문이 들었다..! 화면 깜빡임 없이 변경사항만 부드럽게 화면에 표시해주는게 사용자 경험이 향상되는데 도움을 주는 건 알겠어, 근데 Virtual DOM은 왜 쓰는거지? 실제 DOM 조작이 왜 비효율적인거지? 어떤 부분 때문에 비효율적인거지? 등등.. 브라우저 작동원리에 대한 이해도가 부족함에서 오는 의문들이었다. 그래서 이번 기회에 React의 작동원리도 제대로 짚고 넘어갈겸 브라우저 작동 원리 그리고 왜 DOM을 직접 조작하는게 비효율적인지에 대해서 공부해보려고 한다. ps. 다른 분들이 잘 정리해놓은 글을 스스로 공부하기 위해 요약한 정도의 글이라 부족할 ..

이슈: F/E에서 쿠키를 설정하는 과정에서 어떤 곳에서는 react-cookie 라이브러리를 사용하고, 어디서는 react-cookies 를 사용하고 어디서는 universal-cookie를 사용하고 있었다.. 이 라이브러리는 어떤 차이점이 있길래 각각 쓰이고 있는건가 정리하고 싶어서 남긴다. react-cookie Universal cookies for React (말그대로 react에서 사용하기 위한 쿠키 라이브러리) React The library for web and native user interfaces react.dev universal-cookie Universal cookies for JavaScript react-cookie보다 더 업그레이드된 모듈 [react-cookie]() - U..

확장성을 고려한 코드를 짜기 개발할 때 항상 확장성을 고려해야 유지보수 시 어려움을 겪지 않을 수 있다. 그런 의미에서 업무를 진행하면서 구성했던 부분들을 간단하게 정리하고자 한다. 다른 주니어 개발자 분들에게 도움이 되었으면 좋겠다. 일단 첫번째 주제는 정말 간단하지만, 놓치기 쉬운 부분으로 정리했다. 처음엔 단순한 조건이었지만, 분명 운영 쪽에서 추가 요청이 있을 것이야........... 요청사항: 계절이 SUMMER(여름) 일 경우에만 '따뜻하다'라는 문자열을 RETURN해줘 변경 전 const getWeather = () => { String season = ''; if (season === 'SUMMER' ) { return '따뜻하다' } } 몇 달 후... - 추가 요청사항1 : 계절이 S..

[NEXT] router.isReady (router.query가 빈 값일 경우) Next.js 에서 router.query에 값을 넘기는데도 빈 값일때 해결방법! 이슈 localhost:3005?param=”qsdfsdfsdfsdf’ 이렇게 보내는데, 자꾸 router.query객체를 확인해보니 빈객체였음 빈객체면 로그인을 못하는데, 자꾸 빈객체가 뜨니 로그인으로 넘어가는 이슈가 생김 이유 automatic static optimization에 의해 정적으로 최적화된 페이지는 루트 매개변수가 제공되지 않아서 query가 빈객체가 된다고 한다. 컴포넌트 밖에 있는 wrapper에서 호출하는 거니까 정적으로 최적화된 페이지인가..? 해결 NextJS @10.0.5이후 - isReady 사용 라우터 필드가 ..