예외 처리

[Next.js] 왜 Next.js는 "풀스택" 프레임워크라고 불리는가?

Next.js는 풀스택인가? Next.js를 처음 접한 사람들은 막연하게 Next.js를 "풀스택 프레임워크"로 알고 있을 것입니다. 공식 홈페이지에서도 분명히 "프론트엔드 풀스택 프레임워크"라고 설명하고 있으니까요. 하지만 예전 Next.js에 처음 입문했을 당시의 저를 포함해 많은 개발자들이 이 "풀스택" 프레임워크라는 표현을 정확하지 이해하지 못하거나 혼란스러워하는 것처럼 보였습니다. 기존의 리액트와 달리 서버 사이드 렌더링(SSR)이라는 것이 가능하다는 것은 알지만 그것이 왜 "풀스택"으로 연결되는지에 대해서는 많은 초보 개발자들은 명확하게 이해하기 쉽지 않을 것 같습니다. 심지어 구글링을 하다 어떤 개발 관련 포스팅에서 "왜 Next.js을 풀스택이라고 하는지 이해할 수 없다"는 반응을 목..

[CSS Modules] CSS 클래스에 카멜케이스(camelCase) 네이밍 컨벤션을 고려해야 하는 이유

컨트롤(ctrl) + 클릭으로 해당 CSS가 정의된 module.css 파일로 이동할 수 없는 현상 최근 포트폴리오를 만드느라 계속 CSS를 수정하고 있는데 문득 어떤 의문이 들었습니다. 분명 전에는 특정 키를 누른 상태에서 html 요소에 부여된 CSS 클래스명을 클릭하면 해당하는 CSS 클래스가 정의되어 있는 modules.css 파일이 열리고 그 CSS가 정의되어 있는 부분을 보여주었던 것 같은데 말이죠... 찾아보니까 해당 클래스 네이밍 부분을 컨트롤(ctrl) 키를 누른 채 클릭하면 그렇게 된다는 정보가 있습니다. 이상하군요 분명 그렇게 했었을 때 제대로 동작하지 않았던 것 같은데.. 역시나 이 ctrl + 클릭의 방법은 저에게 해결책이 되어주지 못했습니다. 이렇게 해도 아무런 반응이 없거나 m..

[Next.js] 포트폴리오 성능 점수 100점 도전하기 (feat. 라이트하우스, 폰트 최적화)

(F12 개발자도구 devtools) 라이트하우스 개발자 도구의 라이트하우스로 제가 지금까지 만든 포트폴리오 웹사이트(프로덕션 배포된)의 성능검사를 했을 때 결과입니다. (저는 이 점수만 보고.. 참 기분이 좋았는데..) 근데 알고보니 개발자 모드(크롬 devetools)의 라이트하우스와 구글 확장 프로그램인 라이트하우스와는 좀 다르다고 하더군요. 구글 확장 프로그램에서의 라이트하우스가 더 신뢰도가 높고 엄격하다고 합니다. (구글 확장 프로그램) 라이트하우스와 페이지스피드(구글 확장 프로그램에서의 라이트하우스는 페이지스피드와 라이트하우스 두 가지로 나눠져 있는데, 성능 분석 후의 보고서 형식에서 약간의 차이점이 있지만 검사 자체에 있어서는 거의 유사한 것 같습니다. 테스트 결과는 거의 항상 동일했..