사람이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록(semantic) 만든 태그를 뜻한다. 즉, 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그를 의미한다.그 외에 <address>, <figure>, <details> 등

LOL 챔피언 사이트 바로가기HomeItemChampionChampion DetailRotation반응형KEEP : 만족하는 부분PROBLEM : 문제가 발생한 부분TRY : 개선방안메타데이터 활용이 아쉽다. 각 페이지별 메타데이터를 적극 활용해서 SEO 최적화, 접근

README는 Github 프로필 혹은 Repository에 대한 설명을 나타내기 위해 작성하는 문서로, 가이드라인, 안내문 정도로 생각할 수 있다.즉, GitHub에서 README는 프로젝트의 첫인상이다. 프로젝트를 처음 접하는 사람들에게 어떤 프로젝트인지, 어떻게

MPA(Multi-Page Application)는 전통적인 웹 애플리케이션 방식으로, 사용자가 새로운 페이지로 이동할 때마다 서버에서 HTML 파일을 받아오는 방식이다.MPA의 특징각 요청마다 새로운 HTML을 서버에서 렌더링하여 클라이언트에 전달한다.SEO에 유리하

일반적으로 데이터를 업데이트할 때, 서버 응답을 기다린 후 UI를 변경한다. 하지만 낙관적 업데이트 Optimistic Update는 서버 응답을 기다리지 않고 먼저 UI를 변경한 후, 요청이 실패하면 롤백하는 방식이다.낙관적 업데이트는 SNS의 좋아요 기능에서 자주

이번 프로젝트에서 Next.js와 TypeScript를 사용해보게 되었다. 아직 React도 낯선데... 벌써 Next.js에다 TypeScript까지? 프로젝트 시작과 동시에 또 막막함에 의욕이 사라졌지만, 어쩌겠는가. 해야지!이번에는 Riot Games API를 활

React state 관련 게시글 ▶️ 이전 정리글 참고React 컴포넌트는 로직을 처리하기 위해 저장하는 특정한 값을 state라고 한다. state 값이 변화했을 때, 컴포넌트는 리렌더링을 한다.상태의 종류는 크게 3가지이다.전역 상태 : 프로젝트 전체에 영향을 끼

1. 주제 선정 이유📖 01. 프로그래머스 입문 - 안전지대 프로그래머스 코딩테스트 입문 - 안전지대 02. 그래서 여기서 뭐 어떻게 하라구요...?

annotation 은 "주석"이라는 뜻으로, TypeScript에서 변수나 함수 등에 데이터 타입을 지정하기 위해 주석을 다는 것을 타입 명시 type annotation이라고 한다. 즉, 어떤 값이 어떤 타입을 참조하고 있는지 개발자가 직접 타입을 명시하여 Type

TypeScript는 JavaScript의 상위 언어로, JS의 모든 기능과 정적 타입 시스템을 제공한다. 즉, JS처럼 작동하지만, 코드에서 예상치 못한 동작을 감지하여 버그 가능성을 낮출 수 있다. 모던 개발 환경에서 안전한 프로그래밍을 위해 TypeScript는

PINGER(핑거)는 지도를 활용한 혁신적인 구직 플랫폼으로, 공공기관 취업을 준비하는 구직자들을 위해 기획재정부 공공기관 채용정보 API와 카카오 맵 API를 활용하여 실시간 채용 리스트와 위치 정보를 제공합니다.단순한 채용 정보 제공을 넘어, 구직자는 해당 공고에

1. 문제 발생🤯 01. 나 구글로 로그인할래 이번 팀프로젝트에서 로그인/회원가입 기능을 담당하면서, 꼭 구현해보고 싶었던 부분이 바로 소셜 로그인이었다. 구글이나 카카오를 통해 로그인이 되면 사용자 수가 폭발적으로 증가한다는 기사가 어렴풋이 기억이 났고, 최종 프

MBTI 사이트 바로가기HomeTestMyPageResultsMyResult⬆️ 본인 계정이면 공유하기 버튼 표시 ⬆️ 로그아웃/타 계정이면 테스트 버튼 표시SignUpLogin반응형KEEP : 만족하는 부분PROBLEM : 문제가 발생한 부분TRY : 개선방안대부분의

이번 프로젝트에서 담당한 부분은 로그인/회원가입이다. 지난번 게시글, 댓글 CRUD를 구현했기 때문에, 이번에는 로그인/회원가입을 담당했다. 사실 오늘 회원가입/로그인 로직을 모두 구현하고, 내일까지 zustand를 활용해서 AuthContext 구현하는 것이 목표였는

포켓몬 사이트 바로가기HomeDexDetailCardToaseKEEP : 만족하는 부분PROBLEM : 문제가 발생한 부분TRY : 개선방안React 17버전 이상부터는 컴포넌트 모듈에 React를 import 하지 않아도 된다. 즉, 불필요한 코드이므로 제거하자!Re

이번 프로젝트에서는 styled-components가 아닌 심화주차에서 배운 Tailwind CSS로 UI 스타일링을 해야한다. 다행히 강의 내용과 발제 문서에 Tailwind CSS를 사용하는 방법에 대해 친절하게 설명되어있어, 그대로 따라해보았다.Tailwind C

Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등 요소를 JavaScript에서 접근/조작할 수 있도록 한다. 즉, 전역 fetch() 메서드를 활용해 네트워크의 리소스를 비동기적으로 가져올 수 있다. fetch()는 브라우저 window 객체에 소속되

1. 동기 vs 비동기☕️ 01. 동기(Synchronous)란? 02. 비동기(Asynchronous)란? 2. Promise🤙 01. Promise란? 02. Promise의 상태 03. Promise의 메서드 04. 비동기 작업의 병렬 처리 : Prom

1. useMemo🔖 01. useMemo란? 2. memoization🗃️ 01. memoization이란?

프로젝트가 끝나고 KPT 회고까지 작성했는데, 이제서야 트러블 슈팅을 쓰는 사람이 있다? 그건 바로 나! 팀프로젝트 일정 때문에 미뤄두었던 트러블 슈팅 내용을 다 잊어버리기 전에 미리 작성하고자한다.supabase에서 데이터를 가져올 때 사용할 함수는 재사용성이 있다고