sohyeon kim

🫠 최종 프로젝트 시작..! 오늘은 하루종일 프로젝트 기획에 매달렸다. 정리는 Miro 에 하기로 결정! (노션 에러 많음 이슈..) 미로에 생각보다 다양한 템플릿이 있었다. icebreakers 까지 있다는.. 적극 활용해 줬다. 서로 생각해 온 레퍼런스에 대해서 얘기 나눈 뒤에 비슷한 걸 추려서 멘토링을 받았다. 꼭 들어가야 한다고 생각해서 로그인, CRUD 등 계속해왔던 기능들이 많았는데 퀴즈나 게임, 에디터 기능이 있는 게 재밌을 것 같다고 하셨고.. 피드백 토대로 2차 회의를 해서 나온 게.. 🙋‍♂️ 외국인을 위한 한글 공부 사이트 ! 어떻게 구현해야 할지는 다시 꼼꼼하게 생각해 봐야겠지만.. 다들 재밌게 만들 수 있을 거 같다! 기능 엄청 넣다가 다시 피드백받고 빼고 하는 중이다. 허허 한..

💡 mutate, mutateAsync 차이점에 대해 알아보자. mutatemutate 를 기다리고 실행 될 동작이 없다!const onSubmitHandler = (e: FormEvent) => { e.preventDefault(); newTodoMudation.mutate( { title, contents }, { onSuccess: () => { setTitle(''); setContents(''); queryClient.invalidateQueries({ queryKey: ['todos'], }); }, onError: () => { ..

💡 심화 프로젝트 기록.. 점점 카테고리 구분이 흐려지고 있다.. 💬 와이어프레임 우리 주제는 투두 공유 사이트! 계속 만들었던 투두를 좀 더 발전시킨 ~ 😶 주제 정하고 와이어프레임 짜는데 하루 반? 정도가 걸렸다. 생각보다 오래 걸렸지만 그래도 구체적으로 얘기하고 넘어가는게 좋은 거 같다. 💬 github issue & PR 해리님이 이슈 활용 특강을 해주셔서.. 🥹 열심히 활용하려고 하고 있다. 언젠간 멋드러지게 쓰겠지.. 또한 PR 특강도 해주셨다. 원래 따로 본문을 안 쓰고 날리기만 했었는데, 이렇게 보니 내가 맡은 일 기록하기에 좋은 거 같다. 다른 분들 구현하신 내용 파악하는데도 좋다! 💬 기능 구현 : 캘런더, Todo & User 현황, Footer 우선 캘린더! 기획 단계에서 tui 캘..

📝 문제 두 문자열 s와 skip, 그리고 자연수 index가 주어질 때, 다음 규칙에 따라 문자열을 만들려 합니다. 암호의 규칙은 다음과 같습니다. 문자열 s의 각 알파벳을 index만큼 뒤의 알파벳으로 바꿔줍니다. index만큼의 뒤의 알파벳이 z를 넘어갈 경우 다시 a로 돌아갑니다. skip에 있는 알파벳은 제외하고 건너뜁니다. 예를 들어 s = "aukks", skip = "wbqd", index = 5일 때, a에서 5만큼 뒤에 있는 알파벳은 f지만 [b, c, d, e, f]에서 'b'와 'd'는 skip에 포함되므로 세지 않습니다. 따라서 'b', 'd'를 제외하고 'a'에서 5만큼 뒤에 있는 알파벳은 [c, e, f, g, h] 순서에 의해 'h'가 됩니다. 나머지 "ukks" 또한 위 규..

💡 tailwind 로 그림자 효과를 넣어보자! github 링크에 호버하면 그림자를 주고싶었다! 🎀 디자인을 바꾸고 싶다면 tailwind.config.ts 에서 설정할 수 있다. theme: { extend: { dropShadow: { DEFAULT: '2px 2px 0 #890105', }, }, }, DEFAULT 말고도 md, 3xl 등 사이즈 별로 추가할 수 있다! 🔗 https://tailwindcss.com/docs/drop-shadow Drop Shadow - Tailwind CSS Utilities for applying drop-shadow filters to an element. tailwindcss.com

💡 tailwind 로 text-shadow 를 적용시켜보자. tailwind 에 텍스트 섀도우를 검색하면 drop-shadow 가 나온다. 이걸로 폰트도 적용하는건가? 하고 클래스에 넣어봤지만 적용 안된ㄷ.. 알아보니 tailwind 에서 text-shadow 는 공식적으로 지원을 안한다고 한다. 그래도 적용하는 법이 따로 있긴 했다! 원래는 이런식으로 class 명을 넣어주는데, text-shadow 는 방식이 조금 달랐다. _x_y_blur_color 순으로 보면 된다. tailwind.config 를 수정해서 text-shadow 옵션을 직접 등록하는 방법도 있었는데, (그럼 원래 class 명처럼 깔끔하게 쓸 수 있다.) 한 곳에서 한 컬러만 쓸거라 따로 등록하진 않았다. 🔗 https://ww..

💡 events 데이터 타입 에러 해결 supabase 에서 가져온 투두 리스트를 캘린더에 넣었더니 이런 에러가 떴다. fakeData 로는 안뜨더니?! // fakeData { title: '아침 먹기', start: '2024-03-17', end: '2024-03-17', }, //supabaseData { contents: string | null; created_at: string; end: string; file: string | null; likeCount: number | null; liked: boolean | null; nickname: string | null; start: string; title: string; todoId: string; }; 찾아보니 fullcalendar 에서..

💡 어김없이 나타나는 타입오류.. 아래글과 타입 이름만 다른.. database.types.ts title: string | null; start: string | null; end: string | null; supabase 에서 각 column 설정을 Allow Nullable 로 해두고, (초기값이었다.) 타입을 가져왔었는데 아래 같은 오류가 떴다. todos 데이터베이스여서 title, start, end 값은 꼭 필요하니 supabase 에서 null 허용 옵션은 해제하고 ts 파일에서 타입들도 string 으로 변경했다. 🙂

💡 fullcalendar 캘린더를 꾸며보자! 거의 비슷하긴 한데 ^^.. 노력했다. fullcalendar css 변경은 클래스명으로 접근해서 css 파일에 원하는 대로 적거나 fullcalendar 에서 정해둔 root 변수값을 바꿔야 한다. Calendar.tsx import "../style/calendar.css"; Calendar.css .fc-day-sun a { /* 일요일 컬러 */ color: var(--mainColor1); } .fc-day-sat a { /* 토요일 컬러 */ color: var(--subColor1); } .fc .fc-toolbar.fc-header-toolbar { padding: 10px 20px; font-size: 12px; font-weight: 500..

📝 문제 햄버거 가게에서 일을 하는 상수는 햄버거를 포장하는 일을 합니다. 함께 일을 하는 다른 직원들이 햄버거에 들어갈 재료를 조리해 주면 조리된 순서대로 상수의 앞에 아래서부터 위로 쌓이게 되고, 상수는 순서에 맞게 쌓여서 완성된 햄버거를 따로 옮겨 포장을 하게 됩니다. 상수가 일하는 가게는 정해진 순서(아래서부터, 빵 – 야채 – 고기 - 빵)로 쌓인 햄버거만 포장을 합니다. 상수는 손이 굉장히 빠르기 때문에 상수가 포장하는 동안 속 재료가 추가적으로 들어오는 일은 없으며, 재료의 높이는 무시하여 재료가 높이 쌓여서 일이 힘들어지는 경우는 없습니다. 예를 들어, 상수의 앞에 쌓이는 재료의 순서가 [야채, 빵, 빵, 야채, 고기, 빵, 야채, 고기, 빵]일 때, 상수는 여섯 번째 재료가 쌓였을 때, ..