그날의 공부기록

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.

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

↓↓↓↓↓ 이전 포스팅 ↓↓↓↓↓ 폭죽효과 넣기 - 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.

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

리팩토링 과정이 거의 끝나고, 마지막으로 추가하고 싶었던 TypeBot을 넣고 싶어서 넣게 되었다.  타입봇 링크 Typebot - Open-source conversational apps builderPowerful blocks to create unique chat experiences. Embed them anywhere on your apps and start collecting results like magic.typebot.io  타입봇은 웹페이지를 둘러보면 오른쪽 하단아래에 종종 보이는 1:1채팅이나 질문을 할 수 있는 공간이 있는데QnA 뿐만 아니라 직접 사용자가 메시지 내용을 적는칸을 만들어서 보낼 수 있고, 질문이 있으면 AI가 대답해줄 수 있다.우리는 이미 emailJS를 사용하면서 ..

2024. 7. 22.

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

이전 포스팅 EmailJS 라이브러리를 활용하여 문의사항 받기내 이메일 주소를 공개하지 않으면서 접속자로부터 메일을 받을 수 있는 기능을 추가하고 싶었다.우리가 게임을 진행하다가 차마 못잡은 버그 부분이나 유저가 느꼈을때 불편한 사이트라면 피seokachu.tistory.com  이전 포스팅에서 EmailJS 라이브러리를 활용하여 문의사항을 받으려고 했었다.이걸 직접 우리 IceCraft 프로젝트에 직접 적용해보자Docs example만 그대로 따라해도 구현 가능해서 쉽게 구현 가능했음  전체 코드"use client";import React, { useRef, useState } from "react";import S from "@/style/commons/commons.module.css";impor..

2024. 6. 30.

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

프로젝트에서 우리가 캠과 마이크가 필요한 게임을 만들다 보니 사용자에게 공지사항겸 팝업창을 만들기로 하였다.팝업은 자바스크립트나 제이쿼리를 사용해서 만들었던 기억이 있었는데 리액트는 어떻게 구현하나 찾아보던 중쿠키 라이브러리가 있었다.   쿠키 라이브러리  react-cookieUniversal cookies for React. Latest version: 7.1.4, last published: 3 months ago. Start using react-cookie in your project by running `npm i react-cookie`. There are 661 other projects in the npm registry using react-cookie.www.npmjs.com   간단..

2024. 6. 30.