본문 바로가기

분류 전체보기

 (265)
[TypeScript] useParams 값을 props내려줄 때 type오류(string,undefind) 한 페이지 파일에서 useParams를 사용해 얻은 id값을 다른 컴포넌트로 props내려주려하니 오류가 났다. props로 보내서 다른 컴포넌트에서 그에 맞는 id값에 따라 api를 호출하고 싶었으나,, { id: string | undefined; }' is not assignable to type 'string'. { id: string; }' 형식은 'string' 형식에 할당할 수 없습니다 .. 등의 type 오류들이 계속 발생했다. useParams사용한 파일 코드 const { id } = useParams(); return ( Gender ... props받는 파일 코드 export default function EmotionDoughnutChart(id ) { ... 해결 props받는 ..
[CSS] CSS 방법론- class naming convention (OOCSS, BEM) 1. OOCSS (Object Oriented CSS) ✔ 주로 많이 사용되는 CSS방법론 OOCSS는 약어에서도 알 수 있듯이 객체 지향에 따라서 고안된 설계 방식입니다. 중복을 최소화하고 캡슐화를 원칙으로 하는 방법론 CSS를 모듈 방식으로 코딩하여 중복을 최소하는 방법입니다. 가능한 짧고 간결하게 작성합니다. 동작과 형태가 예상 가능하도록 명확하게 작성합니다. 어떻게 생겼는지 보다는 어떤 목적인지 알 수 있도록 의미 있게 작성합니다. 지나치게 구체적이지 않게 일반적으로 사용가능 하도록 작성합니다. 외양: .button, .box, .widget, .skin… 컨테이너와 콘텐츠 분리 .globalwidth + .header-inside / .main-btn .bg-blue, .bg-red 이 방법론의..
[React] useEffect, API 2번씩 호출 (feat:<React.StrictMode/>) 오류 useEffect안에서 함수를 2번 실행시키면 해당 컴포넌트가 각각 1개씩 총 2개가 뜨도록 구현중이었다. 그런데 계속 2번씩 호출되어 총 4개가 출력되는 문제가 일어났다. 조건문을 달아 함수를 작성해도 도저히 원하던대로 화면이 구현되지 않았다. 그리고 서치중 알게된 것..... react의 index.js에 모드가 존재하는데, 이것은 개발단계에서만 오류를 잘 잡기위해 구성요소를 두번 렌더링 한다. 이것때문에 계속 API가 2번씩 호출되었던 것이다..!! React Hooks: useEffect() is called twice even if an empty array is used as an argument I am new to reactJS and am writing code so that bef..
[React] 로컬스토리지에 저장된 Token을 API header전송시 오류 로그인 후 세션스토리지에 accessToken을 저장한 후, navigate('/')를 통해 게시판 화면으로 넘어간다. 그리고, 저장된 토큰을 API의 header에 전송하여 게시판의 정보를 불러와야한다. 그런데 게시판의 정보가 새로고침시에만 API 통신이 성공되어 불러와지는 오류가 발생했다. 살펴보니 로그인 후 저장된 token이 header로 제대로 전송되지 않았던 것이다. [Try 1] 원인 navigate는 HTTP요청을 새로 하지 않고 안의 내용만 바꾸기 때문에, 페이지가 unload되지 않고 내용만 바꿔지는 라우팅이 적용되었기 때문이다. 해결 window.location.href나 window.location.replace를 통해 해결할 수 있다. 이를 통해 페이지 전환을 할 시 HTTP요청을..
[SCSS] 전역 적용 대신 한 파일에서만 사용(module)/중복 클래스 피하기 SCSS를 사용 중, 컴포넌트내에서 파일을 import해도 컴포넌트를 또 다른 파일로 import 하면 결국 파일이 한 데 모인다. 클래스명이 동일할 시, 결국 같은 SCSS의 style이 적용되어 원치 않았지만 같은 스타일이 적용되고 큰 프로젝트 진행시에는 더 큰 문제가 생길 수 있다. 따라서 SCSS를 한 파일 내에서 해당 클래스에만 적용하고자 할 경우에는 module을 사용한다. 1. 파일명을 .module.scss로 변경한다. 2. 다음과 같은 방식으로 import 한다. (import styles from '파일명' ) import styles from './footer.module.scss'; 3. 클래스명을 사용시 {styles.클래스명}으로 사용한다. + 하이픈 -이 들어간 classNam..
[React] file 전송, formdata API전송시 에러 해결 * 해결2 로 보기!! input type(file)을 이용하여 axios 를 통해 전송하려는데 오류가 났다. 아래와 같이 body에 정보들과 선택한 files를 api로 보내는데 데이터는 다 들어갔지만, 통신이 되지 않았던 것이다. (다른분이 했을땐 files의 값이 binary로 뜨고 통신 잘 됐는데 내껀 {}로 나와서 뭔가했었던... 이유가 있었다.) const body = { name: values.name, status: selectedStatus, ... files: showFileImg?.file, }; 이유는 위와 같이 설정한 body를 axios에 body로 post를 보냈는데, 내가 보낸 형식은 json이기 때문에 오류가 났다. file은 formdata로 보내야하기때문에 api보내는 ..
[React] 스켈레톤 로딩 구현하기 스켈레톤 화면에 대한 개념 정리글은 이전에 작성한 글 참고 스켈레톤을 구현하려고 한다. api 를 통해 받아온 이미지, 데이터들이 뜨기 전에 회색배경이 나오도록 할 것이다. 예제와 방법은 아래 참고사이트를 통해 진행하였다. 더 나은 UX를 위한 React에서 스켈레톤 컴포넌트 만들기 스켈레톤 컴포넌트가 무엇인지 알고 있는가? 스켈레톤 컴포넌트는 데이터를 가져오는 동안 콘텐츠를 표시하는 컴포넌트이다. 사용자는 콘텐츠를 기다리다가 쉽게 지치고 지루함을 느끼므로 단 ui.toast.com 위 사이트의 SandBox (코드 참고하기!) skeleton (forked) - CodeSandbox skeleton (forked) using axios, react, react-dom, react-scripts code..
[Reat] setTimeout 함수는 Promise반환X, new Promise객체 생성하기 스켈레톤 코딩을 위한 R&D 중 setTimeout함수를 이용하는 코드를 발견했다. 비동기를 이용해서 처음 setTimeout부분이 이루어지면 다음으로 api연결이 되어 데이터를 불러오는 로직이다. 그러던중 왜 new Promise를 사용하는지 궁금해졌다. useEffect(() => { setIsLoading(true); // Intentionally delay the function execution new Promise(res => { setTimeout(() => { res(); }, 3000); }).then(() => { axios.get("https://reqres.in/api/users?page=2").then(res => { setData(res.data.data); setTimeout(..

티스토리툴바