공부 및 일상기록

지난 포스팅에서 SSE를 적용한 계기와 적용하기 위한 과정, 그리고 서버쪽 코드에 대해 작성했었다.https://huirin.tistory.com/264 [Express.js] 무거워진 요청에 SSE를 적용해보자 (백엔드편)SSE를 적용하게된 계기최근 요약의정석이라는 요약 AI 학습 사이드 프로젝트를 진행하고있다.아주 대강 설명하면 내가 어떤 긴 글을 읽고 요약을 하면 요약을 잘 했는지, 뭘 잘 못했는지 피드백huirin.tistory.com위 글을 참고하면 알 수 있다. 이번엔 프론트엔드에서 적용하기 위한 과정을 작성해보겠다. 다시 회고하는 SSE를 적용한 계기요약의 정석이라는 사이드프로젝트에서 기존 기능이였던 "AI 분석 요청" 기능은 약 3~5초정도의 분석시간이 필요했고, 그래서 따로 Falling..

항해 플러스 과정에서 CSR을 바닐라 JS로 직접 구현했던 적이 있다.이번에는 그 CSR 구조를 바탕으로 SSR(Server Side Rendering)과 SSG(Static Site Generation) 를 직접 구현해 보는 것이 과제였다.추가로 React로 SSR, SSG를 구현하는 과제도 있었는데, 일단은 바닐라 JS 쪽을 먼저 정리한다.(Next.js로 SSR/SSG 경험은 있었지만, 직접 바닥부터 짜보려니 꽤 막막했다.) 시작하기 전에 알아보는 CSR, SSR, SSG CSR(Client Side Rendering)브라우저가 빈 HTML + JS를 받고, JS가 실행되면서 fetch로 데이터를 가져와 DOM을 채움.→ 단점: 초기 로딩이 늦고, SEO에 불리.SSR(Server Side Rend..

Side프로젝트로 진행하는 방탈출 관련 웹페이지를 만들고 있다. 오늘은 방탈출 테마들을 여러가지 카테고리를 받아서 해당하는 테마만 필터링 하는 기능을 만들었다. 아직 백엔드쪽에서 서버도 구현되지 않고 API 명세서도 확실하지 않아서 기능만 구현된 상태다. 여기서 한가지만 선택한다면 쉽게 구현되었겠지만 나는 중복 선택을 가능하도록 만들어야 했다. 버튼컴포넌트 먼저 저 버튼들을 만들어줄 컴포넌트를 만들었다. //버튼 컴포넌트 import { useEffect } from "react"; import styled from "styled-components"; const CategoryBtn = ({ categoryIndex, state, setState }) => { useEffect(() => { if (s..

useState 연습의 아주 기초내용이므로 먼저 스스로 코드를 작성해 본 후 아래 내용 참고하시면 실력향상에 더욱 효과적 입니다. import React, { useState } from 'react'; const App = () => { const [number, setNumber] = useState(0);//기본값은 0으로 설정했다. const plus = () => {//plus 함수에 setNumber로 number를 받아서 +1을 함 setNumber(number + 1) }; const minus = () => {//minus 함수에 setNumber로 number를 받아서 -1을 함 setNumber(number - 1) }; return ( {number} +1//onClick에 plus..