Proxy 모든 출처의 리소스를 허용한다면 보안에 큰 문제를 야기할 수 있습니다. 그래서 브라우저는 동일 출처의 리소스만 접근을 허용하는 정책을 기본적으로 채택하고 있으나 어플리케이션을 사용하면서 출처가 다른 리소스를 사용할 수 밖에 없으므로 CORS를 통해 그 제한을 해제할 수 있습니다. 하지만 모든 출처의 접근을 허락한다면 보안성이 낮아지고 해킹 위험이 높아지는 굴레에 들어오게 됩니다. 따라서 모든 도메인의 접근을 허용해서는 안되고 특정 도메인을 허용하도록 구현해야합니다. 정석대로라면 프론트엔드에서 백엔드에게 특정 도메인을 허용해달라는 요청을 보내면 백엔드에서 응답헤더에 필요한 값들을 넣어 전달을 해주어야 합니다. 하지만 리액트 라이브러리나 Webpack Dev Server에서 제공하는 Proxy ..
열거형(Enum) : 특정 값들의 집합 ✔️ 숫자형 이넘 디폴드 값으로 숫자형을 사용하며 아래와 같이 선언한다. enum Computer { Monitor = 3, Mouse = 7, Keyboard = 1, Speaker = 5, } 초기 값을 주면 차례로 1씩 증가한다. Monitor - 1 Mouse - 2 Keyboard - 3 Speaker - 4 초기 값을 주지 않으면 0부터 차례로 1씩 증가한다. Monitor - 0 Mouse - 1 Keyboard - 2 Speaker - 3 이넘 값에 대해 산술 연산을 수행할 수도 있다. enum Computer { Monitor = 3, Mouse = 7, Keyboard = 1, Speaker = 5, } let a: Computer = Comput..
데이터 만들기(토이플젝) 지금 하고 있는 토이프로젝트에서 각 유형별로 이미지경로, 이미지 사이즈 정보를 이미지 태그의 속성을 주고 유형 이름 데이터를 텍스트로 넘겨주어야 했다. 처음 아이디어는 1. 이미지+유형 이름을 가진 컴포넌트를 만들어줘서 2. 상위 컴포넌트에서 각 정보를 props로 넘겨준다. 였다. 이렇게 되면 상위 컴포넌트에서 이미지+유형 컴포넌트를 3000개 만들어야 하는데 그렇게 되면 코드도 3000줄이 되지만 각각의 속성이 다르기 때문에 어쩔 수 없다고 판단했었다.(사실 데이터화 시키는 것도 생각했지만 어떻게 만드는지 찾아보는 게 귀찮았었다ㅎㅎㅎ) 그런데 프로젝트를 같이 하는 동기분이 데이터를 만들어서 map을 돌리자고 하셨고 data 폴더에 배열로 각 유형별 속성을 넣어 데이터를 만들어..
TypeScript 프로젝트 환경 설정 1. 프로젝트 폴더 생성 mkdir (폴더명) cd (폴더명) 2. 프로젝트 초기화 npm init -y 3. 타입스크립트 설치 npm install typescript --save-dev 4. 루트 디렉토리에 tsconfig.json 파일 생성 후 아래 코드작성 { "compilerOptions": { //컴파일러옵션설정 "target": "es6", "module": "commonjs", "sourceMap": true, "outDir": "./dist" }, "include": [ //TypeScript 파일 경로 src외에서 파일생성시 오류난다 "src/**/*" ] } 5. src 폴더에 index.ts 파일 만들어 TypeScript 코드 작성해보기 기본..
오늘 만난 오류들 Next.js에서 fetch를 사용해서 delete 요청할때.... method:'DELETE'로 하면 자꾸 400에러가 떴다. 그런데 POST로 바꿨더니 정상 실행이 되었다. 이걸로 오늘 2시간 날림. 왜그런지 살펴봤더니 delete요청 메세지에 body가 포함되어있으면 민감한 정보가 요청 응답 되면서 저장될 수 있기 때문에 보안상 요청을 거절해버리는 서버가 많다고 한다. Only plain objects can be passed to Client Components from Server Components. Objects with toJSON methods are not supported. Convert it manually to a simple value before passing..
next.js에서는 폴더구조를 유의하자 next.js에서는 서버에게 api요청을 간단하게 할 수 있다. pages/api 폴더안에 js 파일로 만들어주는 방법을 사용했는데 처음에 pages 폴더를 app 폴더 안에 생성해서 아무리 get요청을 보내도 404에러가 뜨는 것이다! 공식문서에 구글링에 아무리 찾아봤는데도 안되어서 결국 다시 강의를 보는데 pages폴더가 최상단에 있었다. ㅎㅎ ㅎㅎ ㅎㅎ 이걸로 한 40분을 날림. 멘토님의 폴더구조 조언 /msgs export const EMPTY_SEARCH_ALERT: string = '검색어를 입력해 주세요.'; export const ADD_BOOKMARK_MSG: string = ‘북마크에 상품이 추가되었습니다’; 자주쓰는 메세지도 저렇게 따로 저장을 ..
스토리북 만들기 처음에 키노트에 캡처해서 개선점 찾으라해서 일단 다 캡쳐해서 다 올렸는데 개선점을 찾기가 어려웠다. 솔로프로젝트 피그마에서 토큰을 만들어서 추출하는 줄 알았는데 토큰이 없었다..! 어느 부분부터 만들어야 하는지 헷갈렸는데 스토리북의 의미를 다시 되새겨본다면... 콘셉트를 잡는 것? 버튼은 이런 모양~ 모달은 이런모양~ 이렇게 정해두는 것 그중 컴포넌트 중에 드롭다운, 토스트를 해보기로 결정했는데 드롭다운기능을 못 넣은 드롭다운 메뉴만 만들기 성공했다. 내일은 드롭다운기능 + 스토리북 배포까지 해보기! 만난 오류 app-index.js:32 Warning: Extra attributes from the server: data-new-gr-c-s-check-loaded, data-gr-ext..
https://nextjs.org/docs/app/api-reference/next-config-js/reactStrictMode next.config.js Options: reactStrictMode | Next.js Using App Router Features available in /app nextjs.org 위 문서에 대한 번역을 진행합니다. 번역시점은 05-23로 공식문서의 추가적인 업데이트가 있을 수 있습니다. DeepL translator와 ChatGPT에 의존해서 번역하고 있습니다. 번역체를 자연스러운 어투로 옮기는 과정에서 오역이 발생할 수 있는 점 미리 알립니다. 이에 대한 피드백은 댓글로 알려주시면 감사하겠습니다. 한글로 번역하는 것이 더 어색한 경우 원문을 먼저 표기하겠습니다. 제..
코드스테이츠 부트캠프에서 솔로프로젝트를 진행했습니다. 디자인 시안은 피그마로 전달받았고 데이터는 Swagger API 문서를 참고하여 불러왔습니다. 🔨구현 기능 - 모달 redux를 사용하여 모달창 on, off의 상태를 전역에서 관리하였습니다. 아이템 컴포넌트 이미지를 클릭하면 모달창이 열리게 구현을 했습니다. 모달이 닫히는 경우는 다음과 같습니다. 1. 모달창 위의 X 버튼 클릭 2. 모달 이외의 영역 클릭 이미지 위의 북마크 기능을 수행하는 별이미지에는 클릭 시 event.stopPropagation() 메서드를 사용해 이벤트 버블링을 막았습니다. - 무한스크롤 react-intersection-observer 라이브러리의 useInView훅을 사용했습니다. 불러오는 데이터의 최하단 부분요소에 re..
지난번엔 DFS문제를 만나 가볍게 다뤄본 적이 있는데 이렇게나 빨리 BFS를 만났다. BFS는 너비 우선 탐색으로 그래프 탐색 알고리즘 중 하나입니다. 시작 정점으로부터 거리가 가까운 정점부터 탐색해 나가는 방식으로, 레벨 순서대로 탐색하는 방법입니다. BFS는 큐 자료구조를 이용하여 구현할 수 있습니다. 시작 정점을 큐에 넣고, 해당 정점과 인접한 정점을 모두 큐에 넣어 탐색합니다. 그러고 나서 큐에서 하나씩 정점을 꺼내면서 그 정점과 인접한 정점을 다시 큐에 넣어 탐색을 진행합니다. 이 과정을 큐가 비어질 때까지 반복합니다. 최단 경로를 찾는 문제에서 많이 사용되며, 그래프의 정점들이 거리에 대한 정보를 가지고 있을 때 유용합니다. ex) 길찾기, 네트워크 최적 경로, 게임 맵 최단거리, 퍼즐, 탐사..
