Frontend (290) 썸네일형 리스트형 TIL 23.09.30 기술 interview (18) 18. http, https 차이점에 대해 설명해주세요. http(hyper text transfer protocol) 서버/ 클라이언트간에 데이터를 주고받기 위한 프로토콜 http 는 일반 텍스트 이므로 권한이 없는 당사자가 인터넷을 통해 쉽게 엑세스하고 읽을 수 있다. https(hyper text transfer protocol secure) 데이터 암호화가 추가 된 프로토콜 모든 데이터를 암호화 된 형태로 전송한다. 사용자가 민감한 데이터를 전송할 때, 제 3자가 데이터를 가로챌 수 없다. TIL 23.09.19 기술 interview (15) 15. 쿠키, 세션, 웹스토리지의 차이를 설명해보세요. 쿠키 (cookie) - 쿠키는 클라이언트측에서 데이터를 저장하는 작은 텍스트 파일이다. - 주로 웹 브라우저에서 관리되며, 클라이언트 측에 저장된 정보를 HTTP 요청과 함께 서버로 전송한다. - 주로 세션 식별, 사용자 기본식별, 쇼핑 카트 등의 작은 정보를 저장한다. - 쿠키는 만료 날짜 및 시간을 설정하여 지속성을 제어할 수 있고, 보안 상의 제약이 있다. (데이터 양은 보통 4KB로 제한) 세션 (Session) - 세션은 서버측에서 상태를 관리하기위한 방법 - 클라이언트가 웹 서버에 연결하면, 서버는 해당 클라이언트에 대한 고유 식별자를 생성하고 이를 사용해 클라이언트 상태 저장 - 주로 로그인상태유지, 사용자인증, 장바구니 관리에 사용 .. TIL 23.09.15 Next.js deploy 에러 window is not defined https://handhand.tistory.com/272 [Next.js] window is not defined 원인 및 해결방법 📌 새로고침 시 오류 페이지가 떠요! 현재 회사에서 Next.js 를 이용한 프로젝트를 진행하고 있는데 특정 페이지에서 새로고침을 하거나 URL 을 통해 직접 접근을 시도할 경우 에러가 발생하며 에 handhand.tistory.com next.js 로 개인프로젝트 하면서 vercel 로 배포했는데 아니나 다를까 바로 배포되지 않았다.. 내용은 window is not defined. 내가 scroll 효과를 주려고 window 객체를 쓰는 곳이 몇 군데 있었는데, 이걸 custom hook 으로 만들어 관리하다 보니까 에러가 났다. Next.js 에서 서버사이드 렌더링을.. TIL 23.09.13 Cloudcraft 서비스 아키텍쳐 제작 프로젝트 발표준비를 하다가 서비스 아키텍쳐를 제작하기 위해 포토샵, PPT 를 사용해도 되지만 좀 더 입체감있고 멋있게 제작하면 좋을 것 같아서 아래의 사이트를 이용했다. 프론트엔드 영역과 백엔드 영역(서버리스) 으로 나누었고 이후 Deploy 와 협업툴을 정리했다. https://app.cloudcraft.co/ Cloudcraft – Draw AWS diagrams Visualize your AWS environment as isometric architecture diagrams. Snap together blocks for EC2s, ELBs, RDS and more. Connect your live AWS environment. www.cloudcraft.co:443 기술스택 선정이유 Next... TIL 23.09.12 skeleton UI Skeleton 스켈레톤 UI skeleton UI 란, 데이터가 로드되기 전 대체해서 보여주는 데이터의 골격(?) UI 라고 할 수 있다. 다음과 같이 유튜브에 접속하면, 스켈레톤 UI 가 무엇인지 알 수 있음. 빈화면을 보여주는 것 보다는 사용자경험 측면에서 우수하다. Skeleton UI 만드는 법 필요한 양 만큼의 가짜 데이터를 만들어야 하는데, 나는 12개의 골격을 보여주기위해 다음처럼 작성하였다. let product = []; for (let i = 0; i < 12; i++) { product.push(i); } 이후, 방법은 간단하다. tailwind css 를 사용해서 원래 UI 형태와 비슷한 회색의 가상 골격을 제작해주면 됨. 참고로 animate-pulse 를 넣어주면 물결처럼 일렁.. 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.. 이전 1 2 3 4 5 6 7 ··· 37 다음
