본문 바로가기

전체 글29

2024-04-17 TIL Image 태그 기본 img 태그 대신 next 내장 Image 컴포넌트를 사용하면 lazy loadin(지연 로딩), 이미지 최적화, placeholder 등의 장점이 있다. LCP(Large Contentful Paint) 란 각 페이지에서 가장 큰 이미지이며, 해당 이미지에 priority 속성을 추가해서 이미지 로드의 우선순위를 줄 수 있다. (다른 Image 컴포넌트에도 사용 가능) 초기 렌더링 시, 빠르게 보여줘야 하는 Image 컴포넌트에 priority 속성을 추가하여 빠르게 보여줘야 할 이미지는 lazy loading을 하지 않도록 설정할 수 있다. lazy loading 이미지를 로드하는 시점을 필요할 때까지 지연시킬 수 있으며, 예를 들면 뷰포트 밖에 있는 이미지들은 로딩을 지연시키.. 2024. 4. 23.
2024-04-16 TIL NextJS 기본 컴포넌트 NextJS는 컴포넌트를 생성하면 서버 컴포넌트로 작용한다. 그 증거로 console.log를 찍어보면 브라우저 console에 찍히는 것이 아닌 서버가 실행 중인 터미널에서 찍힌다. 폴더구조 기반 라우팅 (보호파일명) 폴더구조 기반 라우팅이 가능하며, 내부에서 작동하는 파일명에 따라 next가 자동으로 역할을 부여할 수 있다. layout, error, loading 등이 있다 a태그를 사용한 라우팅 시 문제점 (feat. ssr, csr, spa) ssr 환경에서 a태그로 페이지 이동 시, 새로고침이 일어나면서 다시 서버에서 html 파일을 받기 위해 서버로 요청을 보내게 되는데 이 때, 불필요한 깜빡거림이나 데이터 재요청으로 인해 유저경험을 해칠 수 있다. csr인 리액.. 2024. 4. 23.
AWS S3 업로드 속도를 개선해보자 (feat. webp, loseless) 현재 회사에서 운영하는 서비스에서는 유저가 원하는 사진파일을 활용해 이벤트 썸네일, 유저 프로필 사진 등으로 사용할 수 있다. 이 때, 유저의 사진파일을 저장하고 요청 시에 불러올 수 있도록 AWS의 S3를 활용하여 해당 기능들을 구현했다. 1. 어떻게 구현한 코드가 업로드 속도가 느렸는지 AWS SDK를 이용해 S3와 connection 후, 유저가 업로드할 파일의 buffer를 upload 옵션에 맞게 S3에 업로드하는 간단한 코드다. 여기에서 파일의 용량을 압축시켜 S3 bucket의 가용 용량을 확보하고, 페이지 로드 시 빠르게 이미지를 업로드할 수 있는 장점을 취하기 위해 webp로 변환하는 convertToWebp 함수를 작성해 사용하였다. 해당 코드를 file.module에 작성해놓고, 이.. 2024. 3. 11.
여러모로 뜨거웠던 23년 상반기 회고 달마다 회고를 남기는 것을 항상 목표로 두고 있었는데, 그 목표를 달성하지 못한 것이 벌써 9~10개월이 되었다. 달마다 회고를 남기는 이유는 그 달의 나를 돌아보고, 좋았던 것들과 좋지 못했던 것들을 다시 복기하고 좋았던 것은 지속하고, 좋지 못했던 것은 개선해나가기 위함이었는데, 핑계일수도 있겠지만 회사에서의 나를 돌아볼 시간은 있었으나, 개인적인 나를 돌아볼 시간이 꽤나 부족했던 상반기였던 것 같다. 늦었지만, 누군가에게 보여지는 것이 아닌, 나 스스로 어떤 상반기를 보내왔는지 다시 생각해보면서 당시의 마음과 지금의 나를 이어주는 시간을 가져보려고 한다. 12월 중순, 위코드 부트캠프를 수료하고 짧게나마 혼자 제주도 여행을 다녀왔다. 여행으로는 제주도를 처음 가봤기 때문에 꽤나 설렜고, 오랜만에 가.. 2023. 9. 3.
코딩 금쪽이의 첫 리팩토링 후기(DB편) 현재 진행 중인 선물 추천 서비스 제작 프로젝트에서 나는 선물 추천 API 작성과 기획단계에서 미리 정리해놓은 상품데이터들을 DB로 Migration하는 역할을 담당하게 됐다. 먼저 선물 추천 API를 작성해보려 했으나, 데이터베이스에 데이터가 들어있지 않으니 쉽지 않은 부분들이 있어 프론트엔드 개발자 분들께 양해를 구하고, API작성이 완료되기 전까지의 모든 작업은 Mock data를 사용해서 진행하기로 하고 먼저 데이터베이스에 데이터를 어떤 식으로 Migration 할 것 인가를 고민하게 됐다. 같이 프로젝트를 하게 된 분들과 기획 단계에서 ERD를 작성하였고, ERD를 토대로 DB를 구성하였다. 그 이후 데이터를 넣는 작업을 해야하는데, Nest.js로 진행하게 된 프로젝트다 보니 Nest.js에 .. 2023. 2. 18.
인증 & 인가 (Authentication & Authorization) # 인증 인증이란 누군가 또는 시스템이 실제로 누구인지 혹은 어떤 시스템인지 결정하는 과정이다. 사용자의 자격 증명 정보와 서버의 자격 증명 정보와 일치하는지 확인하고 이 절차를 통과한 것들에 대해 엑세스 제어를 제공한다. 쉽게는, 돈을 인출하려고 은행에 가면 은행원에게 통장과 도장 혹은 사인을 제시해야한다. 내가 제시한 정보가 은행의 정보와 맞지 않는다면 돈을 인출할 수 없게 된다. ## 인증의 유형 1. SFA(단일요소인증) : 자격 증명 정보로써 사용자 ID와 암호만을 요구한다. SFA는 ID와 비밀번호만 알아도 보안에 쉽게 문제가 생길 수 있다는 단점이 있다. 2. 2FA : 자격 증명 정보를 한가지 더 요구한다. 지문이나 디바이스의 고유코드를 추가적으로 요구해 인증을 강화했다. 3. MFA : .. 2023. 2. 14.
제일 작은 수 제거하기(배열의 재정렬을 경계해야 하는 이유) # 문제 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다. # 입력 예 [4,3,2,1] # 출력 예 [4,3,2] # 입력 예2 [10] # 출력 예2 [-1] # 풀이과정 첫 풀이는 arr를 sort로 내림차순으로 정렬 후, 배열의 맨 뒤 요소를 제거하는 pop 메서드로 제거 후, 남겨진 값을 반환했는데, 테스트 하는 과정에서 통과가 되지 않았다. 그 후에, filter 메서드를 사용해서 arr의 가장 작은값과 같지 않은 값들을 가진 새로운 배열을 반환하는 식.. 2023. 2. 11.
디자인 패턴의 의미와 여러가지 디자인패턴 # 디자인패턴 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 '규약' 형태로 만들어 놓은 것을 의미. 우리가 코드를 칠 때 사용하는 라이브러리나 프레임워크의 이론적인 뼈대가 되는 개념이기 때문에 반드시 알아둬야 한다. * 라이브러리나 프레임워크도 코드를 칠 때 어떤 문제를 보다 쉽고 효과적으로 해결하기 위해 등장한 것이기 때문 # 싱글톤 패턴 하나의 클래스에 하나의 인스턴스만 가질 수 있도록 하는 패턴. 기본적으로는 하나의 클래스를 기반으로 여러 개의 개별적인 인스턴스를 생성할 수 있지만 그렇게 하지 않고 하나의 인스턴스만 만들어 이를 기반으로 로직을 만드는 데 사용되며 보통 I/O 바운드 작업에 사용된다. * I/O 바운드 : 디스크 연결, 네트워.. 2023. 2. 11.
이터러블(iterable)과 이터레이터(iterator) 디자인 패턴 관련 내용을 학습하던 중, 이터레이터 패턴(Iterator Pattern)에 관해 학습하게 되었다. 패턴 자체는 이해가 갔지만, 이터레이터가 무엇인지 그리고 이터러블은 무엇인지에 대해 알지 못하면 정확하게 이해하지 못한 것이라는 생각이 들어 따로 내용을 정리했다. # 이터러블(iterable) 자료를 반복할 수 있는 객체를 말하며 흔히 쓰는 배열, 문자열이 이터러블이라고 볼 수 있다. 또한, 이터러블한 객체는 이터러블 규약(iterable protocol)을 따르는 객체라고 보는데, 여기서 이터러블 규약은 for~of문, 전개연산자 등 연산자들과 함께 약속된 동작을 하도록 만들어진 규약을 의미한다. 그래서 이터러블한 객체란 이터러블 규약을 따르는 객체라고도 볼 수 있다. # 이터레이터(ite.. 2023. 2. 7.