시맨틱 태그란? 프로그래밍에서 시맨틱은 코드의 의미를 나타낸다. HTML의 시맨택 태그는 태그만 보고도 역할이나 위치를 알 수 있도록 만든 태그이다. 예를 들어, 은 페이지에서 최상위 제목인 텍스트를 의미한다. HTML은 채워질 데이터를 나타내야 하고, 보이는 것은 CSS의 역할이다. 시맨틱 태그의 이점 검색 엔진 최적화(SEO): 검색 엔진이 웹 사이트 크롤링 시 시맨틱 마크업을 통해 정확한 구조를 분석해 페이지의 검색 랭킹에 영향을 줄 수 있다. 시각 장애가 있는 사용자가 스크린 리더로 페이지를 탐색할 때 시맨틱 마크업을 이용할 수 있다. HTML 문서의 가독성과 유지보수가 쉬워진다. 시맨틱 태그 종류 시맨틱 태그 설명 제목, 로고, 검색 폼, 작성자 이름 등이 요소를 포함하는 페이지 영역. 현재 페..
NutriNotes는 제로베이스 커넥투 부트캠프에서 팀원들과 진행한 MYCHELIN 프로젝트를 마무리한 이후 혼자서 처음부터 끝까지 책임지고 구현해보고 싶다는 생각이 들어 시작한 프로젝트이다. 로그인, 회원가입부터 간단한 서버 작업까지 직접 해보았다. 처음에는 정말 간단하게 React, TypeScript로 만들어보려고 했는데 기획을 하다 보니 욕심이 생겨서 기능을 더 추가하게 되었다. 프로젝트 소개 : NutriNotes, 간편한 식단 기록 어플리케이션 해당 프로젝트는 간편한 식단 기록 어플리케이션으로, 유저가 다양한 식단을 둘러보고 날짜와 식단을 선택하면 대시보드에 기록할 수 있다. 약 3주간의 기간동안 디자인을 포함해 진행한 작업은 아래와 같다. Node.js & Express 서버 초기 세팅 JW..
문제 https://www.acmicpc.net/problem/5547 5547번: 일루미네이션 첫째 줄에 두 개의 정수 W와 H가 주어진다. (1 ≤ W, H ≤ 100) 다음 H줄에는 상근이네 집의 건물 배치가 주어진다. i+1줄에는 W개의 정수가 공백으로 구분되어 있다. j번째 (1 ≤ j ≤ w) 정수의 좌표는 www.acmicpc.net 풀이 class Queue { constructor() { this.dat = []; this.head = 0; this.tail = 0; } push(item) { this.dat[this.tail++] = item; } pop() { this.head++; } front() { return this.dat[this.head]; } rear() { return..
문제 https://www.acmicpc.net/problem/2668 2668번: 숫자고르기 세로 두 줄, 가로로 N개의 칸으로 이루어진 표가 있다. 첫째 줄의 각 칸에는 정수 1, 2, …, N이 차례대로 들어 있고 둘째 줄의 각 칸에는 1이상 N이하인 정수가 들어 있다. 첫째 줄에서 숫자를 적절 www.acmicpc.net 풀이 const fs = require("fs"); const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt"; let [N, ...nums] = fs .readFileSync(filePath) .toString() .trim() .split("\n") .map(Number); const answer ..
React@18.2.0 공식 문서 일부를 번역한 글입니다. useState useState는 컴포넌트에 상태 변수를 추가할 수 있도록 하는 리액트 훅입니다. const [state, setState] = useState(initialState) useState(initialState) 컴포넌트 최상단에서 useState를 호출해 상태 변수를 선언하세요. import { useState } from 'react'; function MyComponent() { const [age, setAge] = useState(28); const [name, setName] = useState('Taylor'); const [todos, setTodos] = useState(() => createTodos()); // ..
문제점 가게 상세 페이지에서 해당 가게에 대한 댓글을 렌더링할 때 페이지네이션을 통해 5개씩 가져오도록 구현해야 했다. 댓글 페이지네이션은 queryKey에 현재 페이지를 넣어 새로운 페이지 버튼을 클릭할 때마다 데이터를 fetching하는 방법으로 진행했다. 이 과정에서 페이지 버튼 클릭 시, 새로운 데이터를 가져올 때마다 화면이 깜빡거리는 문제가 발생하였다. 처음에는 전체 댓글 영역이 고정되어 있지 않아 댓글 데이터를 로드하는 중에 화면에 영역이 표시되지 않아서 발생하는 문제라고 생각했다. 따라서 스켈레톤 UI를 먼저 표시하고, 데이터 로드가 완료되면 댓글이 렌더링되도록 했지만 해결되지 않았다. 이후 react query 공식 문서의 Paginated Queries 관련 내용을 읽고, 다음과 같은 원..
문제 https://www.acmicpc.net/problem/17836 17836번: 공주님을 구해라! 용사는 마왕이 숨겨놓은 공주님을 구하기 위해 (N, M) 크기의 성 입구 (1,1)으로 들어왔다. 마왕은 용사가 공주를 찾지 못하도록 성의 여러 군데 마법 벽을 세워놓았다. 용사는 현재의 가지고 있는 www.acmicpc.net 풀이 class Queue { constructor() { this.data = []; this.head = 0; this.tail = 0; } push(item) { this.data[this.tail++] = item; } pop() { this.head++; } front() { return this.data[this.head]; } rear() { return this..
쿼리 키는 리액트 쿼리를 사용하는 데 핵심적 역할을 한다. 이 쿼리 키를 잘 이해하지 못하고 사용하면, 캐시를 업데이트하거나, 필요한 캐시를 가져오는 게 내 마음 같지 않다.. 분명히 getQueryData를 하는데 계속 undefined가 출력된다거나 invalidateQueries를 했는데 화면이 원하는대로 업데이트되지 않는다면 쿼리 키를 잘못 사용하고 있을 가능성이 크다. 좌절하지 말고 하나씩 확인해보고 이해가 안 되면 아래를 읽어보자 ! 확인할 사항 쿼리 키를 사용하여 직접적으로 쿼리 캐시에 접근하는 메서드(invalidateQueries, setQueryData, getQueryData 등) 사용 시, useQuery로 받아온 데이터를 캐싱하고 있나요? 변하는 값에 따라 refetch해야 하는 ..
