XSS - 크로스 사이트 스크립팅
2022. 7. 5. 15:27
TIL/개념정리
개요 가장 기초적인 취약점 공격방식이지만 OWASP Top 10에서 중요하게 여기던 취약점 중 하나로 공격자의 Javascript 코드를 입력해놓으면 실제 사용자가 동적인 웹 페이지를 클릭하거나 열람할 때 페이지에 의도하지 않은 악성 스크립트가 실행되는 공격 방식 중 하나입니다. 일반적으로 의도하지 않은 행동을 수행시키거나 쿠키, 세션, 토큰같이 민감한 정보 혹은 악성코드를 다운로드하게 됩니다. https://www.riskbasedsecurity.com/2014/06/11/cross-site-scripting-xss-found-in-tweetdeck/ Cross-site Scripting (XSS) Found in Tweetdeck Tweetdeck tab. It turns out that someon..
타입을 어떻게 선언해야할까
2022. 7. 5. 10:16
TIL/트러블슈팅
1. 문제 정의 → NextJS에서 Redux를 도입할 때 발생한 store 타입을 정의하는 오류입니다. 'CounterState' 형식의 인수는 'CombinedState' 형식의 매개 변수에 할당될 수 없습니다. 'counter' 속성이 'CounterState' 형식에 없지만 '{ counter: CounterState; }' 형식에서 필수입니다.ts(2345) → makeStore 딱 보자마자 직접 정의할 수 없는 타입이라고 생각이 들었습니다. 2. 해결과정 Redux를 도입하고 설정하면서 발생한 오류들입니다. 정리해보니 이미 짜여진 틀에서 많이 사용되고 있어 이걸 정리해야할까를 고민해보았습니다. 따라서 개인적으로 자료를 찾아보며 과정만을 정리해봤을 때 시작부터 문제를 너무 어렵게 생각했고 Typ..
React hook is called in a function which is neither a React function or a custom React Hook
2022. 7. 4. 22:33
TIL/트러블슈팅
결론 : 컴포넌트 생성할 때는 무조건 대문자로 한다 https://www.youtube.com/watch?v=KxHOHg5raQ4&t=436s 여기에도 소개 되었다 import React from 'react' import "./PortfolioList.scss" function portfolioList({title, active, setSelected, id}) { return ( setSelected(id)}> {title} ) } export default portfolioList 위 예시에서 발생하였습니다. 처음 jsx파일을 만들었을 때 portfolioList로 생성했는데 글자 맨 앞이 소문자로 선언했다면 hook을 사용할 때 에러가 발생하게 됩니다. import React from 'react..
중첩 라우팅 / router hook
2022. 7. 4. 22:23
TIL/개념정리
https://velog.io/@yiyb0603/React-Router-dom의-유용한-hooks들 React Router dom의 유용한 hooks들 📃 안녕하세요! 오늘은 제가 프로젝트들을 진행 해오면서 편리함을 느꼈던 react-router-dom의 유용한 hooks들에 대해서 소개하려고 합니다. velog.io import React, {useEffect, useState} from 'react' import { Switch, Route, useLocation, useParams, Link, useRouteMatch} from 'react-router-dom' function Coin() { const {coinId} = useParams(); const { state } = useLocation..
Redux in NextJS + typescript
2022. 7. 3. 08:02
TIL/개념정리
개요 [Next.js] Next.js + redux toolkit 기본 세팅 [Next.js] Next.js + redux toolkit 기본 세팅 사전 준비 create-next-app으로 프로젝트 생성 npx create-next-app redux 세팅에 필요한 패키지 설치 npm i @reduxjs/toolkit npm i react-redux npm i next-redux-wrapper npm i redux-logger --save-dev # 필.. cotak.tistory.com Nextjs에서 Redux를 설치하는 것은 React에서 하는 것보다 설정할 것이 더 많은데 그 이유는 아래 문서에서 확인해볼 수 있습니다. next-redux-wrapper가 필요한 이유 next-redux-wrapp..
React-query란?
2022. 7. 1. 22:31
TIL/개념정리
react-query react-query Hooks for managing, caching and syncing asynchronous and remote data in React. Latest version: 3.39.1, last published: a month ago. Start using react-query in your project by running `npm i react-query`. There are 851 other projects in the npm registry usi www.npmjs.com React Query React Query Hooks for fetching, caching and updating asynchronous data in React react-query..
Recoil
2022. 6. 30. 21:32
TIL/개념정리
https://www.notion.so/Recoil-dfe0e9475a3144eeacf1f51e2c2267ec#08e1c5fe174044cbb4ca88a806b19e55 Recoil이란? Redux와 비슷한 상태 관리 라이브러리로 사용되고 있으며 처음 사용하기 복잡한 Redux와 다르게 React hook과 유사한 구조를 가져 Recoil 상당히 쉽습니다. 용어 atom 기존의 redux에서 쓰이는 store 와 유사한 개념으로, 상태의 단위로 설명되곤 합니다 기본적인 atom의 구조는 유니크한 키값과 default값을 가지게 되며 한가지 상태를 관리하기 위해 한가지 atom이 만들어지게 됩니다 상태 불러오기(useRecoil...) 상태를 가져올 때는 만들어뒀던 atom을 import 시켜 사용하면 되..
Redux
2022. 6. 29. 18:58
TIL/개념정리
https://www.notion.so/Redux-90761b4b69d94b09b96c1cb2b14dcd9d#da259a9617044ce09f7943475721ebb6 Redux를 쓰는 이유 Context API → 사용하기 쉽지만 복잡해진다면 관리, 추가하기 어렵다 Redux → 상태 관리 라이브러리로써 가장 많은 기능을 지원하기 때문에 현업에서 자주 많이 사용됨 이전 상태관리 라이브러리에 대해 잠시 정리헀지만 다시 간단히 정리해보면 Redux : 변수들을 어느 곳에서나 접근하고 관리하기 쉽게 만들어 주기 위해 사용하는 변수를 모아두는 창고라고 연상할 수 있다. 관련 정보 홈페이지 https://redux-toolkit.js.org/ Redux Toolkit | Redux Toolkit The offi..
상태관리 라이브러리
2022. 6. 28. 16:38
TIL/개념정리
개요 리액트에선 상태(state)를 관리한다고 하는데, 이 상태라는 것은 변수라고 하기도 하고 데이터라고 하기도 하는 것으로 이 상태를 컴포넌트 구조(일종의 규격 , 박스)를 만들어 이것을 웹 페이지에 보여주는 것이 리액트의 개발방식입니다. 이렇게 컴포넌트구조를 만들어 개발하게 된다면 상위 컴포넌트에서 쓰던 상태, 변수, 데이터라는 것을 하위 컴포넌트에 넘겨주는 일이 매우 빈번하게 발생합니다 위 이미지에서 예시로 들면 메뉴 컴포넌트에서 현재 메뉴가 열려있는지 닫혀있는지에 관한 변수(state → 메뉴오픈 true / false)가 있다고 할 때, 이 변수에 따라 글자 컴포넌트의 text 색깔이 검정색에서 하얀색으로 바뀌어야 한다고 한다면 개발자는 메뉴 컴포넌트에 메뉴오픈 값을 글자 컴포넌트에게 넘겨주고 ..
SSG를 업데이트하기 위한 증분 정적 재생(ISR)
2022. 6. 27. 11:41
TIL/트러블슈팅
개요 앞선 내용과 이어지는 내용입니다! https://choiblog.tistory.com/2 SSG, SSR의 차이점을 문제를 통해 확실히 정리 요약 노션을 사용한 블로그 개발을 Nextjs로 진행하던 중 초기 Notion API를 사용하는 부분에서 어려움을 겪어 유튜브를 참고하여 진행하였습니다. 이때 유튜브에서 진행하는대로getStaticProps를 사용 choiblog.tistory.com https://choi-notion-blog.vercel.app/ HOME | CBJ Blog useState가 어느 부분에서 문제였는지 팀원에게 질문을 받아 이전에 잘 몰랐던 사항들을 정리하여 설명해주었습니다 June 23, 2022 |#React choi-notion-blog.vercel.app 요약 1. N..