Next.js 14를 사용한 프로젝트에서 SEO 최적화를 진행했다. Sitemap.xml과 Robots.txt 파일을 설정했던 경험을 공유하려고 한다. 읽으시는 분들께 조금이라도 도움이 되었으면 좋겠습니다!SEO 최적화의 중요성SEO(Search Engine Optimization)는 웹사이트가 검색엔진에서 더 잘 노출되도록 돕는 중요한 작업이다. 검색엔진이 웹사이트를 더 잘 이해할 수 있도록 도와주는 두 가지 핵심 파일이 있다.Sitemap.xml: 웹사이트의 URL 구조를 알려주는 파일Robots.txt: 검색엔진 크롤러가 어떤 페이지를 크롤링할 수 있는지 제어하는 파일이 두 파일을 설정하면 검색엔진이 더 효율적으로 웹사이트를 크롤링하고 색인화할 수 있다.Next.js 14 App Router의 파일..

한 해가 빠르게 지나갔다. 2024년 연말, 팀원들과 함께 지난 한 해를 돌아보며 회고를 진행했다. 서로 칭찬과 피드백을 주고받는 것이 어색하기도 했지만, 팀워크를 다지는 데 큰 도움이 되었다. 자유롭게 이야기를 나누며 느낀 점들을 KPT 방법론(Keep, Problem, Try)으로 팀과 개인의 관점에서 정리해 봤다.KPT 방법론이란?KPT(Keep, Problem, Try)는 프로젝트 회고에서 자주 사용되는 간단하고 효과적인 방법론이다.Keep: 잘했던 점이나 유지해야 할 것들Problem: 아쉬웠던 점이나 해결이 필요한 문제Try: 앞으로 시도해보고 싶은 것들 개인 KPT 회고Keep - 잘했던 점, 유지할 것들 💪올해는 라이브러리와 프레임워크를 사용할 때 공식 문서를 적극적으로 참고하고 핵심을 ..

💬 "속성값이 변수가 아닌 문자열인 경우, 왜 중괄호({})를 붙이는 거예요?"팀 프로젝트 중에 속성값 표기 방식이 제각각이라, 개발팀 회의 때 이렇게 질문한 적이 있다.프론트엔드 개발자분들, 혹시 비슷한 상황을 겪어본 적 있으신가요? 🤔이 글에서는 태그 속성값을 작성하는 두 가지 방법과,언제 어떤 방식을 사용하면 좋은지를 간단하고 쉽게 정리해보려고 한다. 😊✨ 태그 속성값 작성법에는 두 가지 방법이 있다태그 속성값을 작성할 때 사용하는 방식은 크게 두 가지입니다.1. 문자열로 표기하기가장 기본적인 방법으로, 속성값을 따옴표(" 또는 ')로 감싸서 작성한다.특징속성값이 항상 동일한 정적인 값을 유지한다.HTML 속성과 유사해서 읽기 쉽고 간단하다.언제 사용하면 좋을까?색상 값, 고정된 텍스트, 불리..

💬 어떤 타입을 써야 더 안전할까?팀 프로젝트에서 TypeScript로 코딩할 때, 매개변수 타입을 any로 선언했더니 코드 리뷰에서 "unknown을 사용하는 게 더 좋다"는 피드백을 받았다.둘 다 모든 값을 받을 수 있는 타입인데, 왜 unknown이 더 나은 선택일까? 차이를 간단하고 쉽게 정리해 봤다. 🧐🔎 any: 모든 걸 허용하지만 위험!any는 모든 타입의 값을 허용한다. 하지만 컴파일러가 타입 검사를 건너뛰기 때문에 문제가 생길 수 있다.잘못된 타입의 값을 써도 TypeScript가 알려주지 않으니, 디버깅할 때 골치 아픈 상황이 올 수도..특징모든 값을 받을 수 있음.타입 검사 없어서 런타임 오류 가능성 높음.남용하면 코드 안정성 저하, 디버깅이 어려워질 수 있음.예시let valu..

💬 최근 회사 프로젝트에서 SCSS를 처음 사용해봤다. CSS와 비슷한 문법을 가지고 있지만, 더 강력한 기능을 제공하는 어썸한 CSS 느낌이었다. 특히, @mixin과 @include를 사용하는 스타일링 방식이 굉장히 신선했다. SCSS를 사용하며 알게 된 주요 내용을 공유해본다!🔍@mixin과 @include, 둘은 공동체?!@mixin은 반복적으로 사용할 스타일을 정의하고, @include는 이를 호출해 적용하는 데 사용된다. 둘의 조합으로 코드 재사용성이 극대화된다. 예시 태그에 아래 스타일을 적용해야 한다고 가정해보자.div { display: flex; flex-direction: column;}@mixin와 @include를 사용하면 아래와 같이 작성할 수 있다.@mixin flex-..

💬 최근 과 태그를 사용해 토글 버튼을 만들었는데, 버튼의 테두리를 둥글게 만들어야 하는 상황이 있었다. 처음에는 태그에 각각 left와 right하는 클래스를 추가하고 border-radius 속성을 적용했다.하지만 이후 상태가 3개 이상으로 확장될 가능성을 고려하면, 클래스 이름을 지정하기보다 :first-child와 :last-child 의사 클래스를 사용하는 것이 더 나을 것 같다는 리뷰를 받았다. 의사 클래스를 활용해 본건 처음이라 정리해 보기로 했다.🏃‍♀️의사 클래스(Pseudo-Class)란 무엇일까? 🤔의사 클래스는 CSS에서 HTML 요소의 특정 상태를 선택해 스타일을 적용할 수 있는 기능이다. 내가 지금까지 써본 의사 클래스는 :hover, :active, :focus, :d..