문제상황 Next.js 환경에서 페이지를 구현하고 있었다모든 코드에서 문제 없는데, localhost에 접속하니 이런 build error가 떴다 You'r importing a compoenet that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.Learn more: https://nextjs.org/docs/getting-started/react-essentials 에러 메세지를 읽어보니 useState를 쓰려면 use client를 명시해야 한다고 한다  해결 방법 해결 방법은 간단하..

✏️ 한 줄 설명동아리 홈페이지를 React+Next.js+schadcn/ui 를 이용해 개발중인데, Card content에 넣은 이미지가 불러와지지 않는 문제를 next.js의 Image 태그로 해결한 이야기를 기록해본다   문제 상황Next.js + shadcn/ui 를 이용해서 개발중인데, card 컴포넌트 사용시 card contents에서 이미지가 안 불러와지는 오류가 발생했다 코드를 살펴보자 1.우선 이렇게 코드 맨 위에 이미지를 import 했다 2.그리고 카드 배열을 만들었다 3.마지막으로 Card 컴포넌트의 CardContent 부분에 img 태그로 scr={card}로 붙여넣었다 그럼 문제가 뭐였는지 자세히 살펴보자  트러블 슈팅문제는 이미지가 StaticImageData 타입이라 과..

자주 사용하는 tailwind class 이름을 정리해보자이 글에 없는 다른 className을 찾고 싶다면 다음 공식문서에서 확인 할 수 있다: https://tailwindcss.com/또한, 카카오 엔터 기술블로그에서도 tailwind css 사용기에 대해 정리해두었으니, 흥미가 있는 사람들은 한번 들어가서 보길 추천한다: https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/ Tailwind CSS 사용기 | 카카오엔터테인먼트 FE 기술블로그서종만(coze) 생산성을 높이는 일을 좋아합니다. 오늘 1분 걸린 작업이 내일 30초 걸리는 방법을 발견하면 기뻐합니다.fe-developers.kakaoent.com 레이아웃(Layout)contain..

프론트엔드 공부를 하면서 Figma 디자인을 직접 하고, 웹 페이지를 만들어야 할 일이 종종 있었다. 문득 내가 하고 있는 일은 프론트 개발이 아니라 웹 퍼블리싱인것 같다는 의문과 현타가 왔다. 내 진로는 프론트엔드 개발자인데, 국비 출신 비율이 높은 웹 퍼블리셔 가 되는것이 아닌지 걱정이 되었다. 웹 퍼블리셔를 무시하는것이 아니라, 나는 개발자가 되고 싶은데 컴퓨터 전공과 멀어지고 있는 기분이 들었다. 프론트엔드 개발자로서 이정표를 확실하게 하기 위해 웹 퍼블리셔와 프론트엔드 개발자가 각각 어떤 일을 하고 그 차이점이 무엇인지에 대해 알아보자 프론트엔드 = 웹 퍼블리셔 ??웹퍼블리셔와 프론트엔드 개발자는 둘 다 웹 사이트 제작 과정에서 중요한 역할을 한다. 많은 국비학원에서 이를 동일시 하는데 업무 범..

프로젝트를 하다가 이미지 슬라이드를 만들 일이 있었다 그래서 다양한 영상을 찾아봤는데 좌우로 슬라이드 되는 코드는 아래 영상을 보면 된다 https://youtu.be/qHzSQrLjxlQ?si=qu4nNl1GeI4PdhyJ 근데 나는 위 아래로 슬라이드 되는 코드가 필요했다 30분 정도 구글링을 하다가, 시간이 조금 지연되길래 날먹 방법을 생각해냈다 슬라이드 되는 동영상 다운 받아서 video로 만든 다음에 autoplay, loop로 자동재생, 무한루프 시키는것이다 그렇게 되면 슬라이드가 계속 바뀌는 것 처럼 보인다~ 방법 넣을 동영상을 import 한 뒤에 넣고자 하는 위치에 아래 태그를 사용한다 직접 이미지를 쪼개서 넣고 직접 슬라이드를 만들어봐야겠지만, 이렇게 야매로 짜서 완성만 하는 경험도 중..