그날의 공부기록

seokachu's Front-End Archive 🙂

📚 이론정리/React & Next.js

제어 컴포넌트와 비제어 컴포넌트에 대해서 공부를 했다.이번에 투두리스트를 비제어 컴포넌트로 다시 만들어 보았다.코드 정리가 필요할 것 같아서 작성해보고, `FormData`는 무엇인지 정리해보았다.   ✨ 제어 컴포넌트와 비제어 컴포넌트 정리요약은 요기 ✏️ 제어 컴포넌트와 비제어 컴포넌트제어 컴포넌트와 비제어 컴포넌트`제어 컴포넌트`는 React에 의해서 값이 제어 되는 것, `비제어 컴포넌트`는 React에 의해서 값이 제어되지 않는 컴포넌트 이다.   제어 컴포넌트제어 컴포넌트seokachu.tistory.com   먼저 FormData란 무엇인가? 자바스크립트에서 `FormData`를 다루는 객체이다.`이미지`, `파일`등을 서버로 보내줄 때 FormData 객체가 많이 사용된다.  multipa..

2024. 8. 28.

📚 이론정리/React & Next.js

FontAwesome이란?폰트어썸은 웹페이지에서 아이콘이 필요할때 가장 많이 사용되는 라이브러리이다.지금 포스팅을 작성하는 이후로는 주변에서 쓰는 사람을 많이 못봤지만 (ㅠㅠ) 미래의 내가 다시 사용할 때 빠르게 보려고 정리하는 겸 작성해본다!     링크  Font AwesomeThe internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.fontawesome.com         Icon탭으로 가서 free를 클릭하면 내가 필요한 아이콘들을 볼 수 있다.    ✨ 순서대로 설치해보자npm add @fortawesome/f..

2024. 8. 23.

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

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

2024. 8. 22.

📚 이론정리/React & Next.js

Swagger는 무엇인가?Swagger은 애플리케이션의 `RESTful API`문서를 자동으로 구성해주는 도구이다.Swagger를 사용하면 API버전 관리가 용이해지고 다양한 API 메서드를 볼 수 있다!또한 Swagger의 UI를 이용하면 API호출 결과가 어떻게 되는지 쉽게 테스트하고, 확인해 볼 수 있다.백엔드 개발자분이 만들어주시면, 그 문서를 이용하여 프론트는 어떻게 활용하면 되는지 한눈에 볼 수 있다.예전에 퍼블리셔로 일했을 때, 개발자 분이 이 문서를 종종 보는 것을 봤는데 (심지어 나한테 설명도 해주셨던 기억이...😂)드디어 나도 프론트를 공부하면서 직접 써먹어 볼 수 있게 되었다🔥  실무에 가면 Swagger이외에도 다른 것을 사용할 수 있는데Docs를 못받았으면 API Docs를 요..

2024. 8. 22.

📚 이론정리/React & Next.js

next.js 에서 프로젝트를 진행할때 13버전 이상부터는 `next/font`라는 자체 호스팅이 내장되어 있어 구글 폰트를 사용할 수 있다.이미 next.js를 사용해보면 기본 보일러플레이트에서 내장되어 있는 모습을 알 수 있는데이것을 활용하여 구글 폰트를 적용해 보기로 했다.    import type { Metadata } from "next";import { Inter } from "next/font/google";import "./globals.css";const inter = Inter({ subsets: ["latin"] });export const metadata: Metadata = { title: "Create Next App", description: "Generated by cr..

2024. 8. 21.

📚 이론정리/CSS

Next.js에는 scss,sass 내재되어 있는 방식 (CSS Module)같이 지원하기 때문에패키지 하나 받으면 이름.module.scss 형식을 사용할 수 있다.   패키지 다운로드npm install sassyarn add sass     다운로드 하고 next.js docs에 나와 있는대로 next.config.js 폴더에 넣어준다.const path = require("path");module.exports = { sassOptions: { includePaths: [path.join(__dirname, "styles")], },};export default nextConfig;    준비는 끝났다! 어떻게 적용하지? 모듈 css처럼 뒤에 module.scss 확장자를 붙여주면 된다...

2024. 8. 20.

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

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

2024. 8. 20.

📚 이론정리/React & Next.js

socket.io와 Express를 사용해서 채팅을 연습하려고 만들었는데,Vercel에 배포를 하려다 보니 Vercel은 클라이언트에만 초점을 맞춘 플랫폼이고찾아보니 서버리스를 활용하여 활용해도 됐지만 복잡한 Express의 기능을 완전히 실행하는것이 어렵다고 한다.그래서 결국은 Express같은 백엔드 서버는 지원이 안되다보니 결국 다른 컴퓨터에서는 통신이 안되고 있었다!AWS를 사용해도 되지만, 일단 연습이니 간단하게 서버와 클라이언트 전부 지원이 되는 Render로 배포를 시작해 보기로 했다.     Render 사이트 Cloud Application Hosting for Developers | RenderRender is a unified cloud to build and run all your ..

2024. 8. 17.

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

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

2024. 8. 16.

🐶 etc/Github

Vercel에서 배포를 진행했는데, 팀 배포는 2주일 동안 무료로 진행되는 거라 개인 배포로 진행해보기로 했다. 그 전에 할일1. 팀 레포 fork떠가기 2. 버셀에 fork 떠간거 개인 hobby로 배포해두기 먼저 이 두개를 세팅해둔 뒤, 깃허브 세팅으로 들어간다. 깃허브 세팅 먼저 내 깃허브로 들어가서 Settings로 들어간다 설정으로 들어갔으면, 맨 왼쪽 아래에 있는 Developer settings를 클릭해준다. 그리고 Tokens(classic)을 클릭 한 뒤, Generate a personal access token을 클릭해줘서 토큰을 발급 받아 준다. 이름을 입력해주고, 나는 토큰 발급 기간을 무제한으로 설정해주었다. 그리고 아래에 있는 repo만 체크하고 맨 아래에있는 Generate ..

2024. 8. 13.