즐겁게, 코드

📋 내용 : Tailwind CSS의 클래스로 스크롤바 숨기기 한 페이지에 컨텐츠가 전부 표시되지 않을 경우, 브라우저는 스크롤바를 통해 화면을 스크롤할 수 있게 합니다. 다만 이 스크롤바가 디자인을 해치는 경우가 있어서 스크롤바를 숨기고 싶은 경우도 많이 생기는데요, w3schools 에 나와있는 스크롤을 숨기는 방법을 살펴보겠습니다. /* 클래스명이 example인 요소의 스크롤바를 숨기는 코드 */ .example::-webkit-scrollbar { display: none; } .example { -ms-overflow-style: none; /* IE and 엣지 */ scrollbar-width: none; /* 파이어폭스 */ } 이 방법은 분명 동작합니다! 다만 추가적인 CSS 파일 생성..

프론트엔드 개발자로의 취업을 준비하는 과정에서 자연스레 UI/UX에도 많은 관심을 갖게 되었는데요, 그러던 중 Diana Malewicz 님의 글을 읽으면서 한국어로 옮겨본 내용입니다. 오탈자 및 오역 지적은 소중히 받겠습니다! 😄 모던 미니멀 UI 스타일 가이드 : A guide to the Modern Minimal UI style 기능, 가독성, 매끄러움, 매력을 모두 갖는 UI 디자인하기 저는 오래 전부터 기능 및 시각적으로 매혹적인 새 디자인이 나타나기를 기다려 왔는데요, 오늘 다룰 모던 미니멀 UI는 오랜만에 제 마음에 쏙 들었습니다. 많은 인터페이스들의 디자인 스타일 유형을 보아왔을 때 눈길을 끌면서도 가독성이 좋고, 친근하면서 너무 튀지도 않는 인터페이스가 바로 UI의 기능성과 디자인을 모..

📋 내용 : 리액트 코드 작성 시, vs code가 emmet 자동완성을 지원하지 않음. 저는 마크업을 작성할 때 에밋을 자주 활용하는데요, 갑자기 vs code에서 에밋을 지원하지 않아 난감했던 일이 있었습니다. 원래 지금까지 CRA를 사용해 리액트 프로젝트를 구성하면 jsx 파일에서는 언제나 에밋을 지원했는데, 이게 어떻게 된 일일까요? 이번 문제는 CRA가 아니라 create-next-app을 사용했을 때 발생했는데, 지금까지는 CRA에 포함된 웹팩 설정이 jsx 파일에서 에밋을 자동으로 지원하게끔 도와주는 것이었습니다. 그러나 create-next-app에는 이런 설정이 포함되지 않아 에밋이 갑자기 사라지게 된 것으로, 이럴 경우 에디터의 설정을 직접 수정해 에밋을 사용할 수 있게끔 해야 합니다...

"프론트엔드 개발자라면 내 테마정도 한번은 만들어 봐야지" 라는 헛된 생각으로 시작한 Gatsby 블로그 프로젝트가 있는데요, 이 블로그에는 정말 정말 치명적인 문제가 하나 있습니다. 바로 매번 들어갈때마다 메인 아이콘 이미지들이 약 1 ~ 2초간 로드된다는 문제로, 얼핏 보면 대수롭지 않아 보이지만 매번 저렇게 1 ~ 2초간 블러 이미지를 보게되면 "왜 캐싱이 되지 않은거지?", "netlify 서버가 느려서 문제인가?" 등의 생각이 들면서 답답함이 밀려옵니다. 다만 오늘 우연히 원인을 발견해 개선할 수 있었고, 그 내용을 간단하게나마 기록으로 남겨보려 합니다. 🛠 이미지 최적화를 통한 로딩시간 개선 시도 먼저 이미지 최적화를 위해서는 PNG보다는 무손실 압축 포맷인 JPEG를 사용하는것이 효율적이지만..

타입스크립트에는 원시 타입 외에도 타입을 조작할 수 있는 유틸리티 타입이 존재합니다. 오늘은 여러 유틸리티 타입 중 Partial, Required, Pick이라는 타입을 사용해 보겠습니다. type userType = { id: number; email: string; password: string; firstname: string; lastname: string; }; 여기 이름, 비밀번호, 이메일, 고유번호로 구성된 타입이 있습니다. 하지만 어떤 컴포넌트에서는 비밀번호가 필요하지 않을 수도 있고, 또다른 컴포넌트에서는 이메일이 필요하지 않을 수도 있습니다. type userType = { id?: number; email?: string; password?: string; firstname?: st..

[백준 온라인 저지 링크] 10026번: 적록색약 적록색약은 빨간색과 초록색의 차이를 거의 느끼지 못한다. 따라서, 적록색약인 사람이 보는 그림은 아닌 사람이 보는 그림과는 좀 다를 수 있다. 크기가 N×N인 그리드의 각 칸에 R(빨강), G(초록) www.acmicpc.net 아, 이 문제는 다른 탐색 문제들보다 조금 더 특별합니다. 바로 제 손으로 처음 푼 골드 문제인데요, 정말 상쾌하네요! 🤣 [정답 코드 - Python] from collections import deque N = int(input()) board = [] visited = [[False] * N for _ in range(N)] dy = [-1, 0, 1, 0] dx = [0, 1, 0, -1] countNormal = 0 co..

📋 내용 : 쿠키의 Expires 옵션값 형태로 인한 에러 해결법 '클론코딩으로 시작하는 Next.js' 라는 책을 따라가다가 발견한 문제입니다. (이 책 괜찮아요) res.setHeader( "Set-Cookie", `access_token=${token}; Path=/; Expires=${new Date( Date.now() + 60 * 60 * 24 * 1000 * 3 //3일 후 쿠키 만료 )}; HttpOnly` ); 문제의 코드를 살펴보면 setHeader 메서드를 통해 헤더에 쿠키를 설정하고, 이 때 쿠키에는 인증을 위한 access_token과 쿠키 옵션인 Path, Expires, HttpOnly를 문자열 쌍으로 대입합니다. 이제 이 이슈를 해결해보도록 하겠습니다. 원인은 Expires ..