본문 바로가기

TIL

 (75)
TIL 23.09.11 Next.js 이미지 최적화/ lighthouse 성능검사 Next.js 에서는 이미지를 최적화하려면 , img 태그대신에 Image 컴포넌트를 사용해야 한다. Image 태그 넣기 전, lighthouse 성능 나쁜건 아니지만, 전체적으로 6~80 대를 왔다갔다 하면서 좋지도 않은 성능을 보여줬다. 이를 개선하기위해 이미지 관련해서 몇가지 해야할 일이 있었는데, 1. 이미지 넣을때 alt 꼭 써주기 2. 이미지 태그 Image 로 변경 공식문서에 있는 사용 방법은 다음과 같은데, 나는 public 안의 assets 폴더에 정적으로 넣은 이미지와 동적으로 불러오는 이미지 두가지가 존재했다. import Image from 'next/image' export default function Page() { return ( ) } 1. 동적으로 이미지를 불러올때 다음..
TIL 23.09.10 닉네임 중복검사 오늘은 프로필을 수정할 시, 닉네임 중복검사하는 로직을 추가했다. 여기서 neq 를 넣은 이유는, 유저가 정보를 수정할 때 중복검사를 해야하지만 현재 자신이 쓰고있는 닉네임에 대해서는 중복검사를 하지 않아야 하기 때문임 ! 그래서 다음과 같이 작성해주었다. // 유저 프로필 닉네임 조회 export const fetchNicknameData = async ( nickname: string, userId: string, ): Promise => { try { const { data: nicknameData } = await supabase .from("user") .select("*") .neq("uid", userId) .eq("nickname", nickname); // 데이터가 없는 경우 null 반..
TIL 23.09.07 Tailwind CSS 로 반응형 구현하기/ 커스텀 hook 오늘은 반응형 UI를 구현했다. Tailwind CSS 진짜 styled-components 에 비해 훨씬 좋고 훨씬 간편하다. 왜 이렇게 좋은걸 몰랐을까? .. next.js 를 배우니까 tailwind 도 알게되고 여러가지 스킬을 쌓을 수 있어서 너무 좋은 것 같다. Tailwind CSS 로 반응형 구현하기 일단 tailwind 는 다른것과 달리 @media 어쩌구 저쩌구를 쓰지 않아도 된다. 또한 className이 곧 css 기 때문에 따로 지정하지 않아도 되는 엄청난 장점이 있다. 이걸 몰랐을 땐 보기 지저분하고 그랬는데 반응형을 하고나서야 빛을 발하는... 다음과 같은 className 이 있다고 하자. className="h-[120px] xl:h-[158px] bg-[#5FD100] fl..
TIL 23.09.06 react-query 리팩토링 중간발표가 끝나고 전체적인 UI를 반응형으로 변경하려고 한다.. 그 전에 정말로 해야될 것은 리팩토링 이었음. supabase 를 컴포넌트에 그대로 갖다 쓴 죄로... 이번에 typeScript + react-query 콜라보로 리팩토링 작업을 했다. 단순히 정보를 받아오고 갱신하는 건 괜찮은데, 그밖에 내가 추가동작을 해야하는 것들 (좋아요) 같은것들은 DB 설계의 중요성도 뼈저리게 느끼게 만들었다. 같은 조 분께서 supabase 로 타입정보도 잘 불러와주시고, auth 훅도 만들어주셔서 남발하는 코드 없이, 상대적으로 편하게 작업할 수 있었다. 오늘 한 작업을 간단하게 요약하면, 오늘은 한 페이지에서 다양한 제품의 좋아요 숫자를 업데이트 하는 로직을 react-query로 리팩토링했다. 일단 물품 ..
23.09.05 기술 interview (11) / 프로필 업데이트 구현 11. 동기와 비동기의 차이에 대해 설명해주시고 비동기프로그래밍의 필요성에 대해 답변해주세요. 동기와 비동기의 차이는, 일단 동기는 프로그램이 순서대로 실행되는 것으로 현재 작업이 끝날 때 까지 기다린 후 다음으로 넘어가는 것이다. 비동기는, 작업이 순서대로 진행되지 않고 독립적으로 진행된다. 작업이 완료되면 콜백함수 또는 promise 로 결과가 처리된다. - 비동기 작업이 필요한 이유는, 앱의 성능 향상 및 대용량 데이터 처리 및 네트워크 작업에 유용하다. - 또한 속도도 동기 프로그래밍에 비해 빠르다. - 비동기 작업을 하면 동시에 여러가지 작업을 처리 할 수 있다. 프로필 업데이트 구현 프로필 업데이트는 firebase 로만 해 봤는데, supabase storage 를 통해 이번에 기회가 되어 ..
TIL 23.09.04 기술 interview (10) 중간발표 회고 10. Javascript의 호이스팅에 대해 설명해주세요. 호이스팅은 코드가 실행되기 전, 변수 및 함수 선언이 스코프의 최상단으로 올라가는 것을 뜻한다. 변수는 선언부와 할당부를 나누어 선언부를 끌어올리고, 함수선언은 함수 전체를 끌어올린다. var랑 함수와는 다르게 let과 const가 호이스팅된것 같지 않은 이유는 초기화 단계 이전인 선언단계까지만 진행된 상태이므로 선언문을 만나기 전까지 변수를 사용할 수 없기 때문이다. 변수 호이스팅 console.log(x); // undefined var x = 5; 함수 호이스팅 sayHello(); // "Hello, World!" function sayHello() { console.log("Hello, World!"); } 중간발표 회고록 1. 처음 진..
TIL 23.09.02 supabase Storage 에 이미지 업로드시 unauthorized 에러 문제점 프로필 이미지 등록 기능을 구현하던 중, supabase Storage에 이미지를 업로드할 때, unauthorized 에러가 발생하여 이미지 업로드가 되지 않았다. 시도해본 것 & 해결방안 authorized 권한 설정에 대한 문제라고 생각해서, 유튜브에 검색해서 해결방안을 찾았다. 프로필 이미지를 넣는 Public storage 에 들어가서, storage policies 설정을 해주면 된다. Policy name 을 지정해주고, 허용할 operation 을 선택한 뒤, 다음과 같이 설정을 저장해준다. Storage 에 사진이 잘 들어가는 것을 확인할 수 있다.
TIL 23.09.01 supabase 데이터 테이블 세팅 에러 문제점 데이터 테이블을 세팅할 때, insert로 값을 넣어주려고 했는데 다음과 같은 에러가 발생했다. 이는 유일하지 않은 키를 primary key 로 설정해놔서 insert 가 되지 않았음. 데이터 테이블 설계를 잘못해서 생긴 문제였다. code: "23505", details: "Key (product_uid)=(”키 넘버”) already exists.",…} code: "23505" details: "Key (product_uid)=(”키 넘버”) already exists." hint: null message: "duplicate key value violates unique constraint \"like_product_pkey\"" 시도해본 것 & 해결방안 유일한 값을 다루는 데이터 필드를..

티스토리툴바