Clerk OrganizationSwitcher 컴포넌트 렌더링 안 되는 문제 해결법

Clerk OrganizationSwitcher 컴포넌트 렌더링 안 되는 문제 해결법 next.js와 Clerk을 활용해서 로그인 인증 관련 테스트를 하는 도중에 OrganizationSwitcher 컴포넌트가 렌더링 되지 않는 문제를 발견했습니다. import { SignedIn, SignOutButton, OrganizationSwitcher } from '@clerk/nextjs' import Image from 'next/image' import Link from 'next/link' import { dark } from '@clerk/themes' function Topbar() { return ( Threads ) } export default Topbar 로그인이 되어 있는데도 해당 컴포넌트..

• format_list_bulleted 문제 해결
• · 2023. 8. 26.
• textsms

[vscode] 커서 커스터마이징, mac처럼 타이핑, 커서, 스크롤 부드럽게 만드는 법, 커서 화면 고정시키기

[vscode] 커서 커스터마이징, mac처럼 타이핑, 커서, 스크롤 부드럽게 만드는 법, 커서 화면 고정시키기 vscode의 커서를 커스터마이징 하면 윈도우에서도 mac처럼 vscode 에디터에 부드러운 효과를 적용할 수 있습니다. 설정 탭에서 상단 우측에 있는 설정 열기 버튼을 클릭하여 setting.json 파일을 엽니다. 아래 코드를 적용하면 위의 이미지와 같은 효과를 적용할 수 있지만, 커스터 마이징을 위해 하나씩 살펴보겠습니다. "workbench.colorCustomizations": { // 에디터 커서 색상 "editorCursor.foreground": "#ffff00", // 터미널 커서 색상 "terminalCursor.foreground": "#ffff00" }, "editor.c..

• format_list_bulleted 문제 해결
• · 2023. 8. 25.
• textsms

[Next.js] Error: ENOENT: no such file or directory 에러 해결

[Next.js] Error: ENOENT: no such file or directory 에러 해결 next.js 프로젝트를 실행하다가 종종 아래와 같은 에러가 나타났습니다. [Error: ENOENT: no such file or directory, open 'C:\next-study\.next\BUILD_ID'] { errno: -4058, code: 'ENOENT', syscall: 'open', path: 'C:\\next-study\\.next\\BUILD_ID' } 해결법 1 프로젝트 빌드가 아직 안된 상태에서 실행하는 경우에 발생하는 에러입니다. npm run build npm run start .next 디렉터리에 필요한 파일을 먼저 빌드를 통해 생성한 후 서버를 작동하면 잘 되었습니다...

• format_list_bulleted Next.js
• · 2023. 8. 25.
• textsms

[Java] 프로그래머스 : 예상 대진표

[Java] 프로그래머스 : 예상 대진표 https://school.programmers.co.kr/learn/courses/30/lessons/12985 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 접근 토너먼트가 진행될 때마다 변하게 되는 순서에 포커스를 두어야 하는 문제입니다. 첫번째 케이스를 예시로 들면, 1~8번까지의 참가자는 다음과 같이 순서를 부여받게 됩니다. 4번 참가자와 7번 참가자가 몇 번째에 만나는지 알기 위해서는 각각의 숫자를 반복문을 돌리면서 새로 부여될 번호로 바꾸고, 두 숫자가 같아질 때까지 몇 번이나 순회를 하였는지를 구하면..

• format_list_bulleted 알고리즘 문제 풀이
• · 2023. 8. 25.
• textsms

[React] 커스텀 훅 만들기

[React] 커스텀 훅 만들기 로그인 화면을 구성할 때, 아이디 비밀번호 입력창을 구현하기 위해서는 State와 Onchange 함수가 필수적으로 사용됩니다. const [id, setId] = useState(''); const onChangeId = useCallback((e) => { setId(e.target.value); }, []); const [password, setPassword] = useState(''); const onChangePassword = useCallback((e) => { setPassword(e.target.value); }, []); 만약에 해당 페이지에 입력 폼이 훨씬 더 많아진다면 정말 귀찮은 일이 될 것입니다. 한 번에 두 가지 기능을 담당하도록 커스텀 훅을 ..

• format_list_bulleted React
• · 2023. 8. 25.
• textsms

vscode에서 제네릭이 html 태그처럼 자동으로 닫기는 문제 해결

vscode에서 제네릭이 html 태그처럼 자동으로 닫기는 문제 해결 타입스크립트로 리액트를 사용하고 있는 도중에 html 자동 닫기 기능이 html 태그와 제네릭을 제대로 구분하지 못하는 것을 발견했습니다. 수정 전 자동으로 닫기는 태그를 매번 삭제하는 것도 귀찮고, 심지어 그걸 지우면 열린 태그까지 같이 삭제가 됩니다... 다행히 해결 방법이 있었습니다! 먼저 Auto Close Tag라는 확장프로그램을 설치합니다. 톱니바퀴 버튼 - 확장 설정을 클릭합니다. 맨 아래로 스크롤하면 sublime text3 mode라는 설정이 있습니다. 이걸 체크해주면

• format_list_bulleted 문제 해결
• · 2023. 8. 23.
• textsms