글을 쓰기 전 물심양면으로 도와준 날개 없는 천사 FE 개발자 정홍섭 님께 감사를 올리겠다. 지난주, 4월 25일 부산소프트웨어마이스터고등학교 입학전형 플랫폼 '마루'를 모 자사고에서도 사용하기로 결정했다.말만 들으면 진짜 축하할 일이고, 지난 운영 때 얻은 VoC를 통해 디자인을 수정할 수 있는 절호의 기회이기도 하다.나도 그렇게 생각하고 "아싸 완전 좋은 기회니까 하면 좋겠지?"하고 덥석 기회를 잡았다. 그런데, 막상 시작하고 보니 '디자인 부채(Design Debt)'를 해결해야하는 것을 깨달았다.사실 예전부터 디자인 부채가 있는 것을 알고있었음에도 불구하고 귀찮음 때문에 청산하지 않았는데,3학년이 되니 2학년 후배에게 인수인계 해줘야하기도 하고, 자사고에 납품도 해야 하니 이참에 청산해야겠다고 ..
https://supabase.com/ Supabase | The Open Source Firebase AlternativeBuild production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.supabase.comhttps://orm.drizzle.team/ Drizzle ORM - next gen TypeScript ORM.Drizzle ORM is a lightweight and performant TypeScript ORM with developer experience in mind.o..
tsrafceimport React from 'react'type Props = {}const page = (props: Props) => { return ( page )}export default pageusfconst [, set] = useState();uefuseEffect(() => { }, []); ZUSTAND 설치법yarn add zustand /src/app/zustand 폴더 생성 후 page.tsx 생성import { create } from 'zustand'type Props = {}interface TestStore { count: number; increment: () => void; decrement: () => void;}//zustand는 전역 상태 관리..
이 글의 코드를 이해하려면 이전 글을 읽는 것을 추천드립니다. https://kangwonpark27.tistory.com/67 useImperativeHandle | createPortal | forwardRef | Serveraction | middleWare에 대해 공부해봅시다useImperativeHandleuseImperativeHandle은 React에서 부모 컴포넌트가 자식 컴포넌트의 특정 메서드나 속성을 직접 제어할 수 있도록 도와주는 Hook이다. 보통 forwardRef와 함께 사용하며, ref를 통해 컴포넌트kangwonpark27.tistory.com ReactQuery는 아래의 명령어로 설치가 가능하다yarn add @tanstack/react-queryyarn add @tan..
useImperativeHandleuseImperativeHandle은 React에서 부모 컴포넌트가 자식 컴포넌트의 특정 메서드나 속성을 직접 제어할 수 있도록 도와주는 Hook이다. 보통 forwardRef와 함께 사용하며, ref를 통해 컴포넌트의 특정 기능만 노출하도록 할 수 있다. 일반적으로 React에서 부모 컴포넌트가 자식 컴포넌트의 내부 동작을 직접 제어하는 것은 권장되지 않는다. 하지만 특정 상황에서는 필요할 수 있다. 예를 들어, input 요소의 focus 메서드를 부모에서 호출하거나, 특정 컴포넌트의 메서드를 외부에서 실행할 필요가 있을 때 useImperativeHandle을 사용할 수 있다. 이 Hook은 forwardRef와 함께 사용되며, useImperativeHandle(..
카카오맵 쓰려다가 이거 때문에 정말 애를 먹었다. 검색도 아래처럼 엄청 많이 하고 ㅎㅎ.. 해결하기 위해 여러가지를 시도해보았다 첫번째. 카카오 문서 그대로 따라하기 처음에 카카오맵 연결할때는 claude(생성형 AI)에게 짜달라고 했는데 너무 미사여구를 많이 붙인 코드를 줘서 공식문서를 보고 일단 기본적인 거만 따라했다.(처음에는 바로 따라하다가 const로 변수 만들고 이러길래 바로 공식문서로 이동함) https://apis.map.kakao.com/web/guide/#ready 두번째. index.html에 api키 넣어 코드 짜기 위에서 말했듯 claude는 변수로 하길래 이게 맞나? 했는데 아니었구요.. 아래 벨로그보면서 따라했더니 됐습니다 + 'kakao' is not undefi..
코드를 작성하다가The requested module '/src/components/header/index.jsx' does not provide an export named 'Header' 이와 같은 오류가 뜨길래 2가지 방법을 시도해봤다. 첫번째로는 이 블로그를 참고해서 하다가 안되길래 https://velog.io/@ddaa111/export-default-%EB%AA%A8%EB%93%88-%EB%B6%88%EB%9F%AC%EC%98%A4%EA%B8%B0-%EC%97%90%EB%9F%AC export default 모듈 불러오기 에러1. 배경 1.1 개발 환경 Vite React JavaScript 1.2 문제 상황 components 폴더 하위에 3개의 컴포넌트 생성 후 index.js에 3개의 ..
우리는 모두 꿈꾸는 자들입니다.2023년도 시작한 부산소프트웨어마이스터고등학교 브랜딩 작업의 키포인트 단어는 ‘DREAMER’였습니다. 이 학교의 특성상 3학년에 취업을 나가는 상황이 대부분이고, 다들 취업을 통해 자신의 꿈을 이루려고 합니다. 그렇기에 저희는 신입생들에게 ‘나는 꿈을 이룰 수 있어!’ 라는 긍지를 심어주고 싶었습니다. 그렇기에 ‘DREAMER’를 키포인트로 잡고 ‘We’re dreamers’, ‘We Are Ready For The Dream’ 이런 식으로 문구를 만들었습니다. 학교 굿즈 = 로고 대문짝만하게!?사실 이렇게 웰컴키트를 만들 때 든 생각은 ‘과연 신입생 친구들이 이걸 많이 써줄까?’였습니다. 평소에 학교에서 나누어주는 굿즈(Merch)들을 생각해보면 대문짝하게 학교 로고..