sungwook

이전편에서 JSX를 이용해서 함수형 컴포넌트를 만들어보았다.이번에는 css 전처리기 모듈인 scss를 적용해보려고 한다. css 전처리기란 무엇일까?vanilla css를 사용할 수도 있지만 프로젝트를 할 때 css 전처리기 또는 CSS-In-JS를 많이 사용한다.css 전처리기는 mixins라는 것을 통해 재사용 가능한 CSS 규칙을 만들 수 있고 기존 스타일을 확장하거나상속받아 새로운 스타일을 정의할 수 있다. 이렇게 작성된 코드는 일반 CSS로 컴파일되어 사용된다. 이와 달리 CSS-In-JS는 동적으로 스타일을 생성하여 런타임에 스타일을 생성한다.JSX로 합쳐진 HTML, Javascript 파일에 CSS까지 추가할 수 있게 되는 것이다.동적인 스타일링을 할 때 유리하지만 런타임에 스타일이 적용되..

내가 이 프로젝트를 시작하면서 가장 먼저 하고 싶었던게 바로 이 JSX를 사용하는 것이다.물론 react를 사용하지 않으면서 말이다. 그렇다면 JSX는 뭘까?JSX는 Javascript XML의 줄임말이다. XML의 예시는 다음과 같다. Harry Potter and the Philosopher's Stone J.K. Rowling 1997 24.99 A Brief History of Time Stephen Hawking 1988 19.99  많이 낯이 익지 않은가?HTML 태그랑 비슷한 것 같기도 하고 React를 써봤다면 return문에 들어가는 형식과 똑같다는 것을 알 수 있다. HTML과 XML은 모두 마크업 언어인 SGML(Standard ..

프론트엔드 개발자로 살아남기 위해 필요한 역량이 무엇일까 생각을 많이 해봤다.javascript, html, css 를 기본으로 typescript도 알아야하고 React, Next.js, react-query, redux, webpack, babel 등등나열해보면 공부하고 알아야할게 끝이 없다. 그래서 이 모든걸 다 준비하고 다시 취업시장에 뛰어들기 보다는 초심으로 돌아가 기초를 다잡기로 마음먹었다.바로 vanilla javascript로 리액트라는 프레임워크를 구현하는 것이다. 단, 한가지 조건이 있다. 함수형 컴포넌트 제작으로 리액트를 쓸 때와 거의 동일하게 만드는 것이다. 이런 결정을 하게 된 이유는 다음과 같다.1. 자바스크립트와 리액트에 대한 이해도를 높이고 싶다.2. 리액트를 바닐라 자바스크..

버전 정보next 14.2.3 (app router)react 18.3.1@tanstack/react-query 5.40.1 suspense의 존재에 대해 알고 있었지만 시간에 쫓겨 대충 고차 컴포넌트로 로딩을 관리하면서 코드를 짜왔다.하지만 어제 suspense에 대해 좀 더 공부하고 react-query에서 useSuspenseQuery를 사용하면비교적 쉽게 도입할 수 있다는 것을 깨닫고 이를 진행중인 프로젝트에 도입해보기로 했다. 결과적으로 하루만에(야근은 덤..) 40여개의 api를 모두 useSuspenseQuery로 수정했고Next에서 서버사이드렌더링을 사용하면서 겪었던 이슈들을 정리해보려 한다. 1. prefetch로 서버사이드에서 미리 데이터 불러오기공식문서를 보고 prefetch가 서버사..