FrontEnd92 Resend로 발송 시 개발 모드에서 이메일이 오지 않는 경우 const res = await resend.emails.send({ from: 'onboarding@resend.dev', to: process.env.NODE_ENV === 'development' ? 'id@naver.com' : email, subject: ' 🚀', react: DailyBriefingEmail({ repositories: datas, }) as React.ReactNode,});위와 같이 개발 모드라면 특정 이메일을 설정한 뒤 제대로 오는 지 확인 할 때 데이터 처리는 성공이라고 떴지만 실제로 이메일이 도착하지 않았다. 이슈를 뒤져보니 naver가 @resend.dev 발신자 메일을 차.. 2025. 8. 19. [issue] shadcn/ui 라이브러리 사용 시 body 주의할 점 웹 프로젝트지만 모바일 환경 친환적이게 꾸리고 싶어서 body에 max-width를 420px min-width 360을 줬었다.그 뒤 margin x 를 auto를 줘서 뷰포트 기준 가운데에 위치시켰다. 그렇게 스타일링을 하면서 shadcn/ui의 컴포넌트들을 사용했는데 Select와 Dropdown을 사용하면서 각 컴포넌트의 Content가 예상치 못한 곳에서 렌더링 되었다. Content는 Trigger를 기준으로 포지셔닝 되는 것으로 확인했는데 렌더링 되는 위치는 body에 margin x 에 auto를 주지 않는 곳에 위치해있었다. 이같은 점이 되는 이유가 trigger를 기준으로 포지셔닝 되지만 이것은 뷰포트를 덮는 Portal가 베이스가 되기에 그런 것 같았다. 그렇다고 Portal에 스타일.. 2025. 7. 27. [next.js] next/headers cookies로 set을 했지만 이후 undefined가 뜨는 이유 oauth를 구현하기 위해 인가 서버로부터 받아온 인가 코드를 통해 액세스 토큰을 받아오고 그것으로 유저 정보를 받아왔다.유저 정보의 이메일 값(유니크)이 디비에 저장되어 있지 않았다면 새로운 유저 테이블을 생성해줬다.로그인 유지를 세션 방식으로 하기 위해 유저와 연결 된 세션을 새로 생성해줬고 생성된 세션의 id를 쿠키에 저장하기 위해 next/headers의 cookies를 가져왔다. import {cookies} from "next/headers"const ServerComponent= async()=>{ const cookieStore = await cookies() cookieStore.set("key","value",options)}위와 같이 서버 액션으로 set을 하면 에러가 발생한다... 2025. 7. 24. JWT 관련 면접 질문 모음 1. Explain the difference between request and response interceptors in Axios.Request interceptor: 요청 보내기 전 가로채서 수정.Response interceptor: 응답 받은 후 가로채서 처리.2. How would you add a custom header to all Axios requests using interceptors?axios.interceptors.request.use(config => { config.headers['Custom-Header'] = 'value'; return config; });3. What is a JWT, and what are its three components?J.. 2025. 4. 26. 토스의 "자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기"를 구현해보기 (3) https://toss.tech/article/frontend-tree-structure 자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기왜 토스증권 PC의 그리드 레이아웃을 왜 직접 구현하게 되었는지, 그리고 어떻게 만들어져 있는지를 이제부터 소개해 드릴게요.toss.tech1. 드래그 앤 드랍시 트리 구조가 변하게 되므로 이를 위한 메서드를 추가해준다.2. 각 컴포넌트에 draggable을 추가해준 뒤 (1)번 포스팅에서 구해놨던 드랍 시 어떤 사분면일지 결정 할 함수를 생성해준다. 3. DnD시 메서드에 따른 DnD 동작이 잘 되는지 확인해준다. (이 떄 DnD와 연관 없는 컴포넌트가 리렌더링 되지는 않는지 확인도 필요) 1. 드래그 앤 드랍시 트리 구조가 변하게 되므로 이를 위한 메서드를 추가.. 2025. 4. 14. 토스의 "자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기"를 구현해보기 (2) https://toss.tech/article/frontend-tree-structure 자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기왜 토스증권 PC의 그리드 레이아웃을 왜 직접 구현하게 되었는지, 그리고 어떻게 만들어져 있는지를 이제부터 소개해 드릴게요.toss.tech1) 레이아웃 노드인 패널과 스플릿트 노드를 제작한다.2) 생성 된 트리를 통해 컴포넌트와 연결한다.1) 레이아웃 노드인 패널과 스플릿트 노드를 제작한다.type LayoutNode = PanelNode | SplitNode;interface PanelNode { type: "panel"; id: string;}interface SplitNode { type: "split"; id: string; le.. 2025. 4. 13. 토스의 "자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기"를 구현해보기 (1) https://toss.tech/article/frontend-tree-structure 자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기왜 토스증권 PC의 그리드 레이아웃을 왜 직접 구현하게 되었는지, 그리고 어떻게 만들어져 있는지를 이제부터 소개해 드릴게요.toss.tech토스의 포스팅에서는 자료구조 이진트리를 활용하여 그리드 레이아웃을 유연하게 그릴 수 있는 혜안을 제시해줬다.이 포스팅을 직접 구현해보기 위해 각각의 단계에 필요한 개념들을 만들어본 뒤 적용해볼려고 한다./** 이후 수정할 계획1. 드래그 앤 드랍을 구현해본다.2. 드랍 할 위치에 있는 콘텐츠를 대각선 2개 그은 뒤 사분면 중 어느 곳에 둘지를 결정하는 함수를 작성한다.3. 드래그 드랍과 사분면 함수를 연결하여 드래그 한 것을 드.. 2025. 4. 9. [RN] xcode 초기 셋팅 시 시뮬레이터가 실행 되지 않을 때 https://de-code.tistory.com/3 Xcode로 ios simulator 사용하기React Native 앱 개발을 하면서 핸드폰으로만 개발상황을 확인하는 게 불편해서 가상 simulator를 설치하게 됐다. Xcode는 Mac OS환경에서만 사용할 수 있다. expo simulator 실행방법 먼저 Xcode앱을 설치한다.de-code.tistory.com해당 블로그에서 제시한 방법 순서대로 진행하더라도 6번째에서 i 키를 누르면 사용가능한 시뮬 앱이 없다는 에러 문구가 터미널에 나온다.지피티한테 물어보니 아래와 같은 에러 원인들을 제시해줬고 나는 첫번째 문제를 통해 해결할 수 있었다.이전에 시뮬레이터에 직접 접근하여 새로운 시뮬 앱을 생성할려고 할 때는 os version 에서 클릭이.. 2025. 3. 27. 모노레포의 공통 ui 컴포넌트에 tailwind 적용 안될 때 (turborepo, tawilwind) 이전 포스팅에서 공통된 tailwind-config을 생성하여 apps/web에 적용시키는 것을 학습하였다.똑같은 방식으로 packages/ui에 컴포넌트를 생성한 후 tailwind 들을 적용시킨 뒤 webs 에서 사용할려고 하는데 공통 컴포넌트에 작성해두었던 tailwind가 먹히지 않는 사례가 생겼다.packages/ui 에 tailwind config도 똑같이 적용시켰는데 안되는 것에 대해 여러 삽질을 해본 결과 apps/web/tailwind.config.ts의 content에 /packages/ui에 있는 요소들에게도 tailwind를 입혀줘야한다고 설정하지 않아서였다.즉, // apps/web/tailwind.config.jscontent: [ "./pages/**/*.{js,ts,js.. 2024. 12. 11. 이전 1 2 3 4 ··· 11 다음
