함께 알아가는 IT 정보

CSR(Client-Side Rendering) vs SSR(Server-Side Rendering)CSR (Client-Side Rendering)개념: 웹 페이지의 렌더링을 클라이언트(브라우저)에서 처리하는 방식.동작 원리: HTML 문서 로드 후, JavaScript가 실행되어 페이지의 UI를 렌더링하고 데이터를 채워주는 방식.장점:빠른 인터랙션: 처음 로드 이후에는 클라이언트에서 처리되므로 페이지 전환이 빠름.리치 인터페이스: React 같은 프레임워크와 함께 사용하여 더 다이나믹한 사용자 경험 제공 가능.리소스 절약: 서버는 초기 HTML만 전달하고 나머지는 클라이언트에서 처리.단점:SEO 문제: 크롤러는 기본적으로 자바스크립트를 실행하지 않기 때문에, 초기 HTML이 비어있어 SEO에 불리함...

useEffect빈 배열이 없으면 useEffect 안에 있는 로직은 매번 리랜더링빈 배열이 있으면 useEffect 안에 있는 로직은 한 번만 실행배열에 값이 있다면 배열 값이 바뀔 때 리랜더링.빈 배열은 []이걸 뜻한다. 예시 코드를 보면let AppCallCount = 0;const App = () => { AppCallCount++; console.log(`App1 : ${AppCallCount} 번 실행`); const inputNameRef = useRef(null); const inputAgeRef = useRef(null); const [num, setNum] = useState(0); // setTimeout(() => inputNameRef.current.f..

See the Pen Untitled by qBlackBirdp (@qBlackBirdp) on CodePen.우선은 이렇게 만들어 두었다.이제 수정 기능을 만들 차례이다. const changeEditMode = () => { setEditMode(true); };함수 선언.{/*{JSON.stringify(editMode)}*/}{editMode ? ( ) : ( todo )} 수정 버튼과 삼향연산자 선언. 삼향연산자에서 setEditMode가 트루일 때, input창이 나온다. See the Pen Untitled by qBlackBirdp (@qBlackBirdp) on CodePen.준비준비는 끝났으니까 ..

완성은 아직 멀긴 했는데 발표 준비로 미리 써야될 것 같아서 한번 써본다.기술 스택1. 프레임워크 및 언어Java 17: 최신 LTS(Long Term Support) 버전의 Java를 사용하여 애플리케이션을 개발.Spring Boot 3.x: REST API 개발과 보안, 데이터 관리 등을 처리하는 기본 프레임워크.Spring Security: OAuth2 클라이언트 및 JWT 기반 인증 구현. 사용자 인증과 권한 관리를 담당.Spring Data JPA: 데이터베이스 접근을 위한 ORM(Object Relational Mapping) 기술을 사용하여, 엔티티와 데이터베이스 간의 매핑을 자동화.2. 데이터베이스MySQL: 관계형 데이터베이스.JPA / Hibernate: Java Persistence ..

지금 뭐 중복 이메일 처리 자체는 시큐리티 때문에 잘 되는데 로그인과 회원가입만 막는거지 알람 같은건 뜨지 않아서 유저가 영문도 모른채 다른 아이디를 사용해야된다는 불편함이 있다.문제 발견 이유.현재 내 스포티 파이 계정의 이메일과 세개의 구글 계정중 하나가 이메일이 같아서 알게 되었다.그래서 기존 Ut 클래스를 사용해서 알람을 띄워보려고 했다. if (localUser.isPresent()) { return new CustomOAuth2User(localUser.get(), oAuth2User.getAttributes()); } else { // 이메일 중복 확인은 새로운 회원을 등록할 때만 실행 if (memberRe..

Module 'blackbirdLOFI' production: java.lang.ClassCastException: class org.jetbrains.jps.builders.java.dependencyView.TypeRepr$PrimitiveType cannot be cast to class org.jetbrains.jps.builders.java.dependencyView.TypeRepr$ClassType (org.jetbrains.jps.builders.java.dependencyView.TypeRepr$PrimitiveType and org.jetbrains.jps.builders.java.dependencyView.TypeRepr$ClassType are in unnamed module of l..

CREATE TABLE `samples` ( `id` int(10) NOT NULL AUTO_INCREMENT, `u_id` int(10) NOT NULL, `istm_id` int(10) NOT NULL, `reg_date` DATETIME(6) NOT NULL DEFAULT CURRENT_TIMESTAMP, `s_name` varchar(100) NOT NULL, `bpm` int(10) NOT NULL, ..

js 함수 실행 방법이 여러가진데 그걸 배우는 와중에 템플릿 리터럴도 배웠다. 내 개인프로젝트할 때 사용했어서 뭔지는 대충 안다.템플릿 리터럴function a(index){ console.log(`a실행, index : ${index}`);}결과 :a실행 : index : undefind${}이거만 보면 짜증이 나네.. 여튼 이렇게 활용할 수 있다.프론트엔드에서는 HTML을 데이터와 결합해서 DOM을 다시 그려야 하는 일이 빈번하기 때문에, 템플릿을 좀 더 쉽게 편집하고 작성해야 할 필요가 있어서, 이러한 기능이 추가되었다고 한다.내 개인 프로젝트에서 애를 먹었던 이유는 이게 프로젝트 내에서 한번 해석 하고, js에서 한번 해석 하는 과정에서 두번 해석을 하려고 해서 null을 반환하는 문제가 있었다..

이거 상당히 재밌는 것 같다. (여담)console.clear();import React, { useState } from "https://cdn.skypack.dev/react@18";import ReactDOM from "https://cdn.skypack.dev/react-dom@18";const App = () => { const [number, setNumber] = useState(0); const [recordNums, setRecordNums] = useState([]); const saveRecord = () => { setNumber(0); setRecordNums([...recordNums, number]); }; return ( ..

계속 로그인하면서 테스트하다가 알았는데 계속 같은 곡들이 나열되어있는 것을 알았다.이걸 랜덤한 곡으로 추천하고 싶어서 랜덤성을 부여해보도록 결정. 그리고 ui가 조금 더 깔끔하게 보일 수 있게 수정하는 것이 필요했다.랜덤성 부여는 offset 활용으로 쉽게 적용했다. 그 때 겪었던, text interpolation 이슈도 신경써서 처리해서 오류 없이 바로 해결했다.// offset을 랜덤하게 설정 (예: 0에서 90까지의 랜덤 값)const randomOffset = Math.floor(Math.random() * 90); // 0부터 90 사이의 랜덤 숫자fetch(`https://api.spotify.com/v1/search?q=lofi&type=track&limit=10&offset=${'${ra..