그날의 공부기록

seokachu's Front-End Archive 🙂

✨ 기억보다 기록을/프로젝트

다시 리마인드....✨이번에는 React + axios 통신의 투두리스트를 만들어보았다!  `배포` : 클릭`깃허브` : 클릭  Next.js만 사용하다가 다시 React로 넘어와서 사용해보니 React-router-dom 설치와 라우터 설정도 따로 해줬어야 했던 점에서, 확실히 Next.js가 편하다는 생각이 들었다😂너무 Next.js에 편해졌었나보다...익숙함에 속아 소중함을 잃을뻔... 하지만 React버전으로 다시 만들어보면서 이렇게 했었지 라는 리마인드를 가지면서 두고두고 자주 봐야지! 라는 생각으로 만들어보았다.이번에는 혼자서 이전에 짰던 코드 안보고 작성해보려고 노력했지만,, 아직은 한번에 쭉 만들기 힘들었고 최대한 안보고 짜려고 노력했다. 특히 이번에는 검색부분을 추가해서 전역관리로 Zu..

2024. 9. 5.

✨ 기억보다 기록을/프로젝트

복습 겸 투두리스트를 다시 만들어 보았다.next14 버전으로 만들어보지는 않아서 next버전으로 만들어 보았는데, 이번에 Axios통신을 사용하지 않고 Fetch로 사용해서 만들어보았다.  `배포 링크` : 클릭`깃허브` : 클릭 Axios를 안쓰고 왜 Fetch를 썼나?Fetch를 사용하면 내장 api로 되어있어 외부 라이브러리의 의존성을 줄일 수 있다.또한, next14에서 앱 라우터로 바뀌면서 SSR을 이제 컴포넌트에서 호출할 수 있고 상황에 따라 CSR, SSR에서 불러와서 사용할 수 있다.그리고 이제 폼 액션도 사용할 수 있기 때문에 앞으로 app router이 발전하면 할 수록 Fetch를 사용할 일이 많아질 것 같았다.또한 공식문서에도 Fetch 사용을 권장하고 있어서 Fetch로 구현해 ..

2024. 8. 22.

✨ 기억보다 기록을/프로젝트

Express와 Socket.io 통신을 곁들인 카카오톡 실시간 채팅을 만들어 보았다.팀 프로젝트에서 Express와 Socket.io를 사용했는데 한번 더 연습 겸실시간 채팅을 만들어 보기로 했다!   ✨ 결과 미리보기 처음에 닉네임을 입력하고 입장할 수 있다. 닉네임이 빈 공백시 닉네임을 입력해 주세요. 라는 알림창이 뜬다.          나가면 disconnect을 사용하여 소켓에 있는 내용을 꺼버린다.           실시간 broadcast로 접속한 유저에게 전체 방송을 뿌려준다.전체메세지와 사용자가 나갔을 때, 사용자가 입장할 때 방송해준다.    1. server부터 세팅해보자! const dev = process.env.NODE_ENV !== "production";const nextA..

2024. 8. 20.

✨ 기억보다 기록을/프로젝트

프로젝트 진행 중, 페이지에서 영상을 사용하고 있는 곳이 있는데Supabase 에서 저장해두고, 그 링크를 꺼내서 사용하고 있었다.근데 트래픽이 크게 몰림에 따라 영상을 사용하고 있는 그 페이지 때문에 자꾸 락이 걸리는 거였음(...)더 결제해서 사용하면 되지만 우리는 취업준비생에 돈도 없기도 하고 🤣꼭 영상 하나로 트래픽이 꽉 차서 락이 걸린다면, 영상만 따로 빼서 외부호스팅을 이용해 사용해보기로 했다.     클라우드너리 홈페이지 Image and Video Upload, Storage, Optimization and CDNStreamline media management and improve user experience by automatically delivering images and vide..

2024. 8. 16.

✨ 기억보다 기록을/트러블슈팅

마피아 게임 개발이 끝나감에 따라, CSS총 점검에 들어갔다.수정해야 할 곳이 종종 보여서 CSS 수정작업을 하게 되었다.   마피아 게임페이지 UI/UX 수정 리스트기존 레이아웃 수정 → background 넣고, 조금 게임스럽게 변경해보기, 타이머 맨 위 상단, 가운데로 옮기기, 방 나가기 버튼 수정해보기게임 모달창이 너무 크다 → 조금 줄여야함폰트사이즈가 너무 작았다 → 16px에서 20px로 키우자플레이어들이 전부 레디를 진행했을 때, 방장이 게임시작 버튼이 white로 안보이는 현상 수정 → background 색상 추가게임 플레이어들 입장 번호 css 수정 → 기존에는 바깥에 있었는데 UI적으로 화면 안에 보이게 수정게임 시작시 직업 선택 카드 깨지는 현상 → width 조절프로그래스바 모달창..

2024. 8. 12.

✨ 기억보다 기록을/프로젝트

↓↓↓↓↓ 이전 포스팅 ↓↓↓↓↓ 폭죽효과 넣기 - js-confetti 라이브러리프로젝트에서 게임을 만들던 중, 마지막에 승리 모달창에서 게임이 종료될 때승리 결과창과 함께 폭죽효과를 넣고 싶어서 찾아보게 되었다.그 중에 초보자도 쉽게 적용할 수 있는 js-confetti 라이seokachu.tistory.com   이전 포스팅에서 폭죽효과 라이브러리를 적용해보는 예제를 만들어 보았다.이제 본격적으로 우리 프로젝트에 적용해보기로 했다✨   마피아 게임 - 승리 모달창에 폭죽효과 추가하기import { useCountDown } from "@/hooks/useCountDown";import { useGameActions } from "@/store/game-store";import { useModalAc..

2024. 8. 10.

✨ 기억보다 기록을/프로젝트

이전 포스팅애니메이션 라이브러리 공부 겸 정리 Framer motion 애니메이션 라이브러리이번 프로젝트에서 스크롤 애니메이션 요소를 추가하면 홈페이지가 더 멋지게 보일 것 같아스크롤 애니메이션 라이브러리를 써보기로 했다.여러가지 애니메이션을 지원하는 라이브러리가 있seokachu.tistory.com 프로젝트 PR [Feat #396] - 마피아 설명 페이지 애니메이션 추가, 배포 후 수정 작업 by seokachu · Pull Request #398 · i📌 관련 이슈 closed #396 Task TODOLIST 마피아 info페이지 애니메이션 추가 마피아 info페이지 이미지 수정 로그인,회원가입 페이지 수정 배포 후 수정 url 수정 작업github.com   이번 프로젝트에서 배포 하고 난 ..

2024. 8. 10.

✨ 기억보다 기록을/프로젝트

프로젝트를 배포하고 난 뒤, 앞으로 기존 프로젝트에서 마이그레이션이나 리팩토링을 진행할 때앞으로의 유지보수 방향성을 알기 쉽게 추적하기 위해 도입하기로 했다. 구글 애널리틱스 말고도 다른 분석 툴 들이 있지만, 실무에서 구글 애널리틱스를 개발단계에서 사용하기도 했었고가격이 무료인점, 어렵지 않게 프로젝트에 도입할 수 있다는 점에서 선택하게 되었다.   구글 애널리틱스 링크 Redirecting... analytics.google.com     들어가서 가입하고 체크만 해주면 된다. 기존에 체크되어 있는 내용으로 그대로 진행했다.        체크해주고 마지막에 데이터 수집은웹사이트의 데이터를 수집할 것이기 때문에, 웹을 선택해 주었다.        웹사이트 URL을 추가하고 만들고 계속하기를 클릭해준다...

2024. 8. 6.

✨ 기억보다 기록을/트러블슈팅

[Fix #333] - 메인페이지 오류들 수정, 타입봇 추가 by seokachu · Pull Request #341 · ice-craft/ice-craft📌 관련 이슈 closed #333 Task TODOLIST 메인페이지에서 방 리스트 계속 리랜더링 되는 오류 수정 메인페이지 함수 클릭 이벤트들 함수만 모아둔 컴포넌트 수정 메인페이지 방 만드는 모달창 수정 후github.com  우리 프로젝트에서 BaaS로는 supabase를 사용하고 있는데,현재 데이터가 5번이나 계속 불러와지고 있었다.  수파베이스 코드export const getUserInfo = async () => { const { data } = await supabase.auth.getUser(); return data.user;..

2024. 7. 23.

✨ 기억보다 기록을/트러블슈팅

↓↓↓↓↓ 이전 포스팅 (typebot 적용해보기) ↓↓↓↓↓ IceCraft - TypeBot 추가하기리팩토링 과정이 거의 끝나고, 마지막으로 추가하고 싶었던 TypeBot을 넣고 싶어서 넣게 되었다.  타입봇 링크 Typebot - Open-source conversational apps builderPowerful blocks to create unique chat experiences. Embed theseokachu.tistory.com   이전 포스팅에서 타입봇을 적용하여 우리 프로젝트에 넣는 것 까지 적용을 해보았는데,커스텀CSS까지 마치고 난 뒤 테스트해보니 위치가 적용이 안되는 현상이 일어났다.     현재 초기 랜더링시 이렇게 떠버리는 것임...       클릭하면 내가 원하는 위치에 ..

2024. 7. 22.