짧은코딩

axios 분석 axios는 XMLHttpRequest 기반이라 fetch보다 기능이 다양하다. 게다가 브라우저와 노드 모두 사용이 가능하다. -가상 api 주소가 필요할 때 사용하는 주소 사이트 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2021, serving ~1.7 billion requests each month. jsonplaceholder.typicode.com -ts에서 함수에 속성 추가하..

react-cookie react-cookie는 쿠키를 만들어 줄 수 있는 라이브러리이다. -npm 사이트 https://www.npmjs.com/package/react-cookie react-cookie Universal cookies for React. Latest version: 4.1.1, last published: a year ago. Start using react-cookie in your project by running `npm i react-cookie`. There are 505 other projects in the npm registry using react-cookie. www.npmjs.com npm i react-cookie 이 명령어로 다운 받을 수 있다. 적용 -uti..

X-Requested-With 프로젝트 중에 로그인 axios를 했는데 실행이 되지 않았다. 백엔드 요청에 X-Requested-With 헤더가 포함되어 있었다. X-Requested-With 헤더는 해당 요청이 Ajax라는 것을 의미한다. 저렇게 백엔드 요청을 보고 있는 헤더는 추가해줘야 된다. 그리고 X-Requested-With를 쓰는 다른 이유는 CORS를 통해 서버 동의 없이 Ajax 요청을 할 수 없기에 CSRF 공격을 방지할 수 있다. 즉 보안을 강화시켜준다. 적용 const headers = { "X-Requested-With": "XMLHttpRequest", }; 먼저 이렇게 headers 안에 헤더를 만들어 놓는다. axios .post( "https://waycabvav.shop/l..

form form 안의 버튼에 보통 submit를 많이 사용한다. 하지만 form 안에 버튼이 여러 개인데 하나의 버튼에서만 submit를 사용하고 싶으면 다른 버튼의 type에는 이렇게 type을 button으로 만들어야 한다. 그렇지 않으면 다른 버튼을 눌러도 요청이 가버린다. -예시 가입하기 이런식으로 form 안에서는 type을 지정해줘야 한다.

TS로 컴포넌트 파일 만들 시 주의점 TS에서는 파일 경로명의 앞 글자를 무조건 대문자로 해야한다. 그렇지 않으면 Property 'checkIdModal' does not exist on type 'JSX.IntrinsicElements'. 이런 오류가 발생한다. 컴포넌트의 앞 글자를 대문자로 바꿨더니 에러가 바로 해결되었다. 처음에 아무리봐도 틀린 것이 없었었다. 구글링을 해보니까 해결법을 알게되었다. 다음부턴 꼭 기억해야겠다.

슬라이드 만들기 이미지 준비하기 우선 슬라이드에 활용 할 이미지를 준비한다. 이미지 리스트 만들기 -slideList.ts export const slideList = [ { id: 1, src: "slideImage/img1.jpeg", alt: "첫번째 슬라이드", }, { id: 2, src: "slideImage/img2.jpeg", alt: "두번째 슬라이드", }, { id: 3, src: "slideImage/img3.jpeg", alt: "세번째 슬라이드", }, { id: 4, src: "slideImage/img2.jpeg", alt: "세번째 슬라이드", }, ]; id, src, alt로 이미지의 정보를 담은 리스트를 만든다. 이미지 출력하기 {slideList.map((v) => ..

HTTP/1.0 HTTP/1.0은 기본적으로 한 연결당 하나의 요청을 처리하도록 설계되었다. 이로인해 RTT가 증가한다. 서버에서 파일을 가져올 때마다 TCP의 3-way handshake를 열어야해서 RTT가 증가한다. RTT: 패킷이 목적지까지 갔다가 돌아오는 시간, 즉 패킷 왕복 시간 RTT 증가 해결 방법 연결할 때마다 RTT가 증가하면 서버에 부담이 많아지고 응답 시간이 길어진다. 이를 해결하기 위해 이미지 스플리팅, 코드 압축, 이미지 Base64 인코딩을 사용했다. -이미지 스플리팅 이미지를 많이 다운 받으면 과부하가 걸려서 많은 이미지가 합쳐져 있는 하나의 이미지를 받고 이를 기반으로 background-image의 position을 이용해 이미지를 표기하는 법이다. -코드 압축 코드 압축..

기본 설정 강좌에서 Next는 9버전을 사용했다. Next는 import React from 'react'가 있어도 없어도 상관없다. 넥스트는 pages 안에 있는 파일들을 인식해서 코드 스플리팅 된 개별적인 페이지로 만들어준다. 따라서 pages의 이름은 무조건 pages이어야 한다. -package.json "scripts": { "dev": "next" }, dev에 next를 넣어주면 npm run dev를 했을 때 next가 실행된다. 페이지 추가하기 -회원가입 페이지 const Signup = () => { return 회원가입 페이지 }; export default Signup; 만약 회원가입 페이지를 만들고 싶으면 그냥 이렇게 만들면된다. 그리고 url에 /singup을 붙이면 회원가입 페..

Next.js Next.js는 리액트를 기반으로 만들어진 프레임워크이다. 기능이 더 추가 되었지만 프레임워크다 보니까 자유도는 떨어졌다. 그리고 서버 사이드 렌더링(SSR)을 사용한다. 전통적인 SSR 이런식으로 요청을 한다. 이런 방법도 비교적 간단한 방법이다. -단점 사용자는 방문 할 페이지가 1개인데 다른 페이지도 주면 낭비가 될 수 있다. => 코드 스플리팅을 하면 모든 페이지를 불러오지 않아도 되기 때문에 위에서 말한 단점을 해결할 수 있다. Pre-Rendering 프리 랜더링은 검색 엔진이라는 것을 알아차리고 검색 엔진일때만 백엔드 서버에서 데이터를 받아서 html을 완성해서 준다. 일반 유저에서는 리액트 방식처럼 준다. Sever Side Rendering 첫 방문만 전통적인 방식으로 불러..

모든 이나그램 찾기 해결법 이 문제는 해쉬, 투포인터를 활용해서 풀어야 하는 문제이다. 처음에 생각한 풀이와 답의 로직이 한 70% 정도는 유사했다. 하지만 해쉬의 자료구조인 Map를 비교할 때가 문제였다. 그래서 처음에는 배열로 바꿔서 비교했지만 쉽지 않았고 해결하지 못했다. 강사님의 코드를 보면 두 Map 중 하나를 for문으로 돌리고 나머지 Map를 맞춰보는 형식으로 풀었다. Map은 valuse 값이 0이 된다고 해서 삭제되는 것이 아니기에 만약 value가 0이면 delete로 삭제해줘야 한다. 코드