본문 바로가기

프로젝트

 (5)
서버사이드 렌더링 ssr 구현해보기 (feat:하이드레이션) 간단한 서버사이드렌더링을 한번 직접 구현을 해보았다.(feat:엄청 간단하게) 현재 이전에는 클라이언트에서 렌더링을 담당을 해보았다. 이럼 당연히  내려오는 response html에는   이런식으로 app만 달랑 보인다.  그리하면 이제 검색 엔진이  이 코드만 보게 될것이다 .  이제  여기서 express를 통해  서버에서 html을 조작해 프론트에 처음로딩시에 내가 원하는 html을 보내줄려고 한다. 그리하여 getinitHTML 을 따로 함수로 빼고export function getInitialHTML() { return ` Movie Info Search replace `;}그것을 export 를 해서 build된 파일에서도 ge..
csr공부 사이드 프로젝트)- csr 구현하기(class,function) 처음에는 이런식으로 간단하게 짯지만 간단하게 클라이언트에서 렌더링을 할 수 있게 구현을 했다. 여기서 push,replace라는 상태값을 주었다.import { TGotoOptions } from "./types";let routes: Record;window.addEventListener("popstate", (event) => { if (routes[location.pathname]) { routes[location.pathname](); return; }});export const goto = (url: string, { push, replace }: TGotoOptions = {}) => { const pathnameArr = url.split("?"); const params ..
React에서 data-*와 name 속성: 적절한 선택과 사용법 React로 컴포넌트를 개발하다 보면, 요소에 데이터를 저장하거나 전달해야 할 때가 많습니다. 이때 우리는 name 속성이나 data-* 속성을 고려하게 되는데요. name 속성은 폼 요소에서 자주 사용되지만, 비폼 요소에서도 사용할 수 있습니다. 그렇다면 언제 name 속성을 쓰고 언제 data-* 속성을 사용하는 것이 좋을까요?이번 글에서는 name과 data-* 속성의 차이점과 적절한 사용 시점에 대해 알아보겠습니다.1. name 속성: 주로 폼 요소를 위한 데이터 식별자name 속성은 HTML에서 주로 폼 요소를 구별하고 서버로 데이터를 전송할 때 사용됩니다. 예를 들어, 로그인 폼에서 사용자 이름과 비밀번호를 전송할 때 name 속성은 서버가 데이터를 올바르게 매핑하는 데 중요한 역할을 합니다...
프로젝트 리팩토링 - 날짜를 렌더링을 하기 위해 배열에 두었다 const DAYS_OF_WEEK = ['월', '화', '수', '목', '금', '토', '일']; -> 하지만 이렇게 뒤에 const를 명시하면  타입 안정성: 두 번째 방식은 각 요소의 값이 정확히 무엇인지 타입스크립트가 알 수 있게 하므로, 코드의 타입 안정성을 높일 수 있습니다. 예를 들어, 특정 함수가 요일 이름 중 하나를 인자로 받는다고 할 때, 그 함수의 인자로 이 배열의 요소를 사용할 때 타입 체크를 통해 잘못된 값을 전달하는 실수를 방지할 수 있습니다.불변성: as const를 사용하면 배열과 그 요소가 변경 불가능하게 되어, 원치 않는 변경으로 인한 버그를 방지할 수 있습니다.  const DAYS_OF_WEEK = ['월', '화', '..
여행 프로젝트(구글API) 여행 프로젝트를 시작을 하게 되었다. 프론트 한분과 같이 만들기로 했으며 나는 지도 관련된 부분을 담당을 하기로 했다. 또한 상태관리는 react-query를 사용하기로 했다. 그리하여 먼저 구글 api를 사용하는 법을 익혀볼려고 한다. 같이 협업을 하면서 에러상황, 대체법 등을 적어가면서 만들어갈려고 한다 .

티스토리툴바