전체 글

1. JSONJavaScript의 객체문법으로 구조화된 데이터 교환 방식이다. JavaScript 뿐만 아니라 JAVA, Python에서도 데이터 교환 방식으로 쓰인다.JSON의  타입은 String, Number, Boolean, Object, Array, Null가 있다. 2. 직렬화, 역직렬화JSON에서는 데이터 교환하는 방식이 직렬화, 역직렬화 두가지가 있다.직렬화(Serialization)데이터를 JSON 문자열(string)로 변환하는 기술이다.JSON.stringify()역직렬화(Deserialization)내부에서 사용할 수 있도록  JSON 문자열(string)을 JavaScript의 객체문법으로 변환하는 기술이다.JSON.parse()JSON의 사용되는 사례는 주로, API 혹은 시스템..

프로젝트를 진행 하던 중 textarea를 사용하고, 여기 사용자가 입력한 데이터를 서버로 전송 그리고 이를 받아 출력하는 과정에서 문제가 생겼다. 그 문제는 이제 사용자가 입력한 내용에 태그까지 포함이 되는 것이다.위와 같이 내용에 태그까지 같이 포함된 것이다. 이는 내용 읽는데 문제 있을 뿐만 아니라 보안상의 문제가 생길수도 있다.이렇게 입력값에 태그까지 포함된 이유가 있다. {} 내부의 값이 HTML 코드가 포함된 문자열인 경우HTML 태그를 인코딩해서 처리하므로, 브라우저에는 태그가 그대로 보이게 된다. 이러한 이유로 태그가 보이는 것이다.근데 여기에 문제가 태그가 그대로 보인다면 XSS 공격에 취약해진다. 1. XSS란?웹 해킹 공격 중 XSS라는 공격 기법이 있다. 이는 Cross Site S..

1. 원하는 기능위와 같이 조건에 따라 각자 다른 페이지에서 다른 헤더를 보여주게 합니다.2. 사용한 기술useMatch 필요한 패스를 변수로 선언한다. const prId = useMatch("pr/:_id"); const prIdEdit = useMatch("pr/:_id/edit");그리고 하나의 변수로 이를 묶는다.const headerMatch = prId || prIdEdit ||패스를 할당 받은 변수를 if문으로 조건을 준다. if (headerMatch) { return ( 제목 ); }그러면 저 조건에 맞은 페이지는 위의 헤더를 보여줄 것이고, 그게 아니라면 다른 헤더를 보여준다.해결 방법1. useMatch(패스)..

1. Next.js 란React의 기능을 확장한 프레임워크로 SSR(서버 사이드 렌더링)과 SSG(정적 사이트 생성) 같은 기능을 기본적으로 제공하며, SEO와 성능 최적화에 강점을 가지고 있다. 1-1. 서버 사이드 렌더링(SSR)서버에서 HTML을 생성하며 클라이언트에 전달한다.초기 렌더링 속도가 빠르고, SEO에 최적화되어 검색 엔진에 유리하다.페이지 요청 시 데이터를 즉시 가져와서 렌더링한다. 1-2. 정적 사이트 생성(SSG)빌드 시 HTML 파일을 생성하므로 빠른 로드 속도를 제공한다.자주 바뀌지 않는 컨텐츠에 적합하며,사용자가 빠르게 접근할 수 있다.데이터는 빌드 시점에 고정된다 1-3. 파일 기반 라우팅pages 디렉터리 안의 파일 이름이 자동으로 URL 경로가 된다.별도의 라우터 설정 없..

1. persist 미들웨어persist는 Zustand 상태를 지정된 스토리지에 저장하고, 페이지를 새로고침하거나 애플리케이션을 다시 열 때 해당 상태를 복원하는 역할을 한다. 1-2. 특징상태 저장 및 원본: 상태를 브라우저의 localStorage 또는 sessionStorage 같은 스토리지에 저장한다.기본 키 제공: 저장소에서 상태를 구분하기 위한 키를 설정할 수 있다.직렬화/역직렬화: 상태를 JSON형식으로 저장하고 복원한다.선택적 상태 저장: 필요한 특정 상태만 선택적으로 저장할 수 있다.import { create } from 'zustand';import { persist } from 'zustand/middleware';const useStore = create( persist( ..

1. Fetch-on-render1-1. 개념데이터를 컴포넌트가 렌더링된 이후에 가져온다.일반적으로 useEffect를 사용하여 데이터 fetching을 실행하고, 상태를 업데이트하여 화면에 데이터를 렌더링한다.1-2. 장점구현이 간단하고, React의 기존 생명 주기를 따른다.초기에 최소한의 코드로 시작하기에 적합하다.1-3. 단점컴포넌트가 먼저 렌더링되고 데이터를 가져오는 동안 빈 상태나 로딩 화면이 보인다.사용자 경험(UX)이 떨어질 수 있다. function Component() { const [data, setData] = React.useState(null); React.useEffect(() => { fetch('/api/data') .then((response) => re..