Hoo_Dev

버튼들과 a태그에 적절한 이름이 있지 않아 스크린리더에게 좋지 않은 사용자 경험을 주고있다. element가 빠진 부분은 SEO 개선에서 해결하고자 한다. 해당 오류가 생긴 곳에 aria-label 속성을 태그 안에 추가시켜줌으로서 각 버튼들과 태그의 기능에 대해 명시해준다. (aria-label을 사용 할 경우 voiceover 기능으로 웹 화면을 보지 못하는 사용사들에게 음성으로 해당 UI들의 기능을 음성으로 설명해준다.) https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label aria-label - Accessibility | MDN The aria-label attribute defines a str..

이전에 포스팅에서 저하된 성능들에 대한 개선을 진행 해 볼 예정이다. Largest Contentful Paint (LCP) 최적화 https://nextjs.org/docs/api-reference/next/image#priority next/image | Next.js Enable Image Optimization with the built-in Image component. nextjs.org 해당 서비스를 개발자 모드에서 실행 해보면 다음과 같은 warning이 콘솔창에 나타나는데 이가 뜻하는 것은 Image 태그 안에 priority 속성을 true로 바꿔주라는 말인데 그 이유는 모든 priority의 기본값은 false이고, 공식 문서를 참고하면 되도록이면 웹사이트에서 스크롤을 내리지 않고 제..

Next.js를 활용한 네이버 맵 관련 토이 프로젝트의 웹 성능 검사를 진행해보려 한다. 테스트 하고자 하는 페이지의 주소로 접속 후 Lighthouse 탭으로 이동한다. Performance 웹 페이지의 로딩 속도 등 실제 성능을 측정합니다. Progressive Web App PWA로 부르며, 웹과 네이티브 앱의 기능 모두의 이점을 가지도록 만들어진 서비스인지 체크합니다. Best practices Best practices를 따라 개발되었는지 체크합니다. Accessibility 접근성입니다. 보통 폰트 사이즈, 메뉴간 간격 등을 측정합니다. SEO Search Engine Optimization의 약자로 검색 엔진 수집 최적화에 관련된 부분입니다. 여긴 아마 웹 사이트 운영하시면 많이 민감하게 신..

https://nextjs.org/docs/basic-features/data-fetching/get-static-paths Data Fetching: getStaticPaths | Next.js Fetch data and generate static pages with `getStaticProps`. Learn more about this API for data fetching in Next.js. nextjs.org getStaticPaths를 사용하여 빌드 타임에서 페이지 경로를 정적으로 생성해둔다. ex) getStaticPaths export const getStaticPaths: GetStaticPaths = async () => { const stores = (await import('../..

def solution(n, words): dic = {words[0] : 1} for i in range(1, len(words)): if words[i][0] != words[i-1][-1]: return [i % n + 1, i // n + 1] else: if words[i] not in dic: dic[words[i]] = 1 else: dic[words[i]] += 1 return [i % n + 1, i // n + 1] return [0, 0] 딕셔너리를 생성 후 끝말잇기의 첫 값을 키밸류로 넣는다. for문을 1번 인덱스부터 시작해 각 단어의 끝과 첫 글자를 비교한다. (다르면 return) 이후 딕셔너리에 없으면 추가, 있으면 +1을 해주면서 만약 +1이 된다면 중복이므로 return ..

SWR은 React 프레임워크인 Next.js를 만든 팀이 만들었다. https://swr.vercel.app/ko 데이터 가져오기를 위한 React Hooks – SWR 데이터 가져오기를 위한 React Hooks Suspense Pagination swr.vercel.app react query에 비해 진입 장벽이 낮고, fetch 속도가 빠르며 코드가 경량화 돼 있는 특징이 있다. useSWR SWR은 useSWR이라는 훅을 사용하여 데이터를 조작한다. const { data, error, isValidating, mutate } = useSWR(key, fetcher, options) 파라미터 key : 요청을 위한 고유한 값 fetcher : 데이터를 조작하기 위한 함수를 반환하는 Promise..

def solution(s): global answer answer = [0, 0] first_arr = list(s) first_arr = list(map(int, s)) answer[1] = len(first_arr) - sum(first_arr) def binary(n): global answer arr = [] while n >= 1: next_n = n % 2 arr.append(next_n) n //= 2 answer[1] += len(arr) - sum(arr) return arr while True: if len(first_arr) == 1 and sum(first_arr) == 1: return answer next_arr = binary(sum(first_arr)) answer[0] +..

def solution(n): memo = [0] * (n+2) memo[1] = 1 memo[2] = 2 for i in range(3, n+1): memo[i] = (memo[i-1] + memo[i-2]) % 1234567 return memo[n] dp문제 중 하나 n개의 칸을 뛰려면 n-1개 칸을 뛸 때의 경우의 수 + n-2개 칸을 뛸 때의 경우의 수가 돼야 한다. (5개의 칸 = 4개의 칸 + 3개의 칸 .... 3개의 칸 = 2개의 칸 + 1개의 칸) 과 같은 식으로 결론적으론 피보나치 수열과 같은 방식의 풀이로 풀이하게 된다. memo 배열을 초기화 하는 방법 중 n+1로 둔 이유는 만약 n이 1이 들어오게 된다면 3번째 인덱스인 memo[2] 를 생성할 수 없기 때문에 그 부분을 고려해..

def solution(s): answer = -1 stack = [] for i in range(len(s)): if len(stack) == 0: stack.append(s[i]) else: if stack[-1] == s[i]: stack.pop() else: stack.append(s[i]) if stack: answer = 0 else: answer = 1 return answer stack을 활용 한 풀이. stack과 현재 순회하는 값을 비교 한 후 stack의 마지막 원소와 순회하는 원소가 같으면 stack을 pop 해준다. 같지 않다면 stack에 순회하는 원소를 append 순회가 끝났을 때, stack이 비어있다면 1, 비어있지 않다면 0

from collections import deque def solution(people, limit): answer = 0 people.sort() people = deque(people) while len(people) > 1: if people[0] + people[-1]