전체 글

https://school.programmers.co.kr/learn/courses/30/lessons/42586 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr  ✅ 정답풀이import mathfrom collections import dequedef solution(progresses, speeds): answer = [] progress_days=[math.ceil((100-x)/speeds[idx]) for idx,x in enumerate(progresses)] queue=deque(progress_days) done=queue[..

https://school.programmers.co.kr/learn/courses/30/lessons/42577 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr  ✅ 정답풀이 (배열)def solution(phone_book): phone_book.sort() answer=True for i in range(len(phone_book)-1): if phone_book[i]==phone_book[i+1][:len(phone_book[i])]: answer=False return answer 이전에, JS로 ..

❎ 1차풀이def solution(s): words = s.split() capitalized_words = [word.strip().capitalize() for word in words] return ' '.join(capitalized_words)capitalize 메서드를 처음 사용해보아서, 혹시 연속된 공백이 존재하면 첫글자 대문자가 적용을 못해서 그런가 싶어서, strip도 사용해보았지만 계속 오답이 나왔다.    ✅ 정답def solution(s): words=s.split(' ') capitalized_words = [word.capitalize() for word in words] return ' '.join(capitalized_words)..

✅ 정답풀이def solution(strings, n): answer = [] strings.sort(key=lambda x:(x[n],x)) return strings파이썬에서 sort 조건을 key의 lambd를 통해 정의할 수 있는데,만약 첫번째 조건이 동일하다면, 이후 조건을 정의할땐 튜플을 이용해주면 된다.

❎  첫번째 풀이import itertoolsdef solution(n, left, right): n_list=[[0 for _ in range(n)] for _ in range(n)] for i in range(0,n): for j in range(0,i+1): n_list[i][j]=i+1 n_list[j][i]=i+1 flatten_list=list(itertools.chain(*n_list)) return flatten_list[left:right+1]정직하게 정사각형 이중 배열을 생성하고, flatten 해주고, slice하는 방식👉🏻 역시나, 시간 초과 발생    ✅  정답 풀이def so..

CSR의 대표적인 단점 중 하나인 취약한 SEO 점수와 모든사람들이 사용할 수 있는 서비스를 만들기 위한 웹 접근성 개선작업을 수행해야한다.    웹 접근성과 SEO을 개선하기 이전의 점수이다.접근성은 페이지 마다 상이하지만, 가장 낮은 메인페이지의 점수가 69점, SEO 점수는 83점을 기록하였다. SEO : 검색엔진 최적화🔍 React의 SEO리액트와 같은 SPA는 SSR과는 달리, 초기에 HTML이 최소한의 내용을 포함하고, 대부분의 콘텐츠는 JS를 통해 클라이언트측에서 렌더링이 되는 방식이다. 모든 크롤러가 아닌 많은 크롤러들이 JS를 지원하지 않기 때문에 이와 같은 문제가 발생한다고 한다.(구글봇은 JS를 지원해서 SEO가 나쁘지 않다고 함)Next.js를 이용한 프로젝트에서는 별다른 작업을 ..

진행중인 프로젝트는 반려동물의 기록과 사진 공유가 주된 기능인 만큼, 이미지 최적화 작업이 중요하다고 생각했다.번들사이즈를 열심히 줄여도 KB단위지만.. 이미지는 단위부터 MB이므로, 이미지 최적화는 필수이다. Next.js의 이미지 최적화Next.js는 next/image를 통해 기본적으로 다음과 같은 이미지 최적화 작업을 수행해준다.But, 리액트는 이와 같은 이미지 최적화를 자동으로 처리해주지 않으므로, 직접 최적화 작업을 수행해야한다...!🫣  자동 resizingWebp 같은 최신 이미지 포맷 지원Lazy Loading로 페이지 로딩 속도 향상CDN 지원이미지 최적화를 위한 여러가지 방법들을 공부해면서, 적용해보았다.  1. browser-image-compression 활용한 이미지 폭, 타..

사진 공유가 메인 서비스 특성 상, 텍스트보단 이미지의 관심도가 높기 때문에 이미지를 먼저 배치하였다. 그러다보니, 우려했던대로 이미지가 로딩되고나서 텍스트가 밀리게되면서 대규모 레이아웃 현상이 발생하였다. 여러장의 이미지의 경우에 CLS 점수가 0.8로 어마어마하다... 👉🏻 placeholder로 레이아웃이 밀리는 현상을 방지하려고 한다.  ❗️ 문제점처음엔 이미지를 업로드하는 사용자 입장에서, 게시물의 이미지가 규정된 사이즈 (1:1, 3:4)을 사용하면 이미지 잘림현상이 발생하는것을 피하고 싶었기 때문에 이와 같이 이미지 사이즈를 정의할 수 없었다.하지만, 이 방식을 유지한다면 기존의 원본비율을 이미지 로딩전엔 알수가 없다보니 placeholder을 정의하기가 난감해진다placeholder만 ..