본문 바로가기

Frontned Development/FE 프로젝트 개발

(11)
[GITLAB] DISCORD 커스텀 알림 만들기 build가 약 5분정도 걸리는데, 애매하게 신경쓰여서 알림을 만들기로 했다.현재 나는 discord를 사용 중이기때문에, Discord에 알림을 오는 것을 목표로 했다. 방법 1. GITLAB에서 WEBHOOK 설정하기 다음처럼 pipeline에 check를 하면 알림이 온다!그럼 현재 프로젝트는 파이프라인이 두 단계여서 알림이 두 번 온다.gitlab에서 이를 커스텀하는 부분까지는 제공 하지 않았다. 나는 성공했을 때, 단 한 번만 알림을 받고 싶었다. 방법2. CI 단계에서 WEBHOOK에 직접 메시지를 보내기찾아보니까 ci단계에서 yml script에서 curl을 사용할 수 있었다.그러면 그냥 curl로 discord webhook을 호출하면 된다 생각했고, 마지막 CI 단계에서 호출하면 완료 메..
Styled-Components 에러 - 'Over 200 classes were generated for component Component. Consider using the attrs property' drag & drop을 styled-components로 제작도중 갑자기 속도가 느려지면서 다음 경고문이 발생했다. Over 200 classes were generated for component styled.div with the id of "sc-jwKbUx". Consider using the attrs method, together with a style object for frequently changed styles. Example: const Component = styled.div.attrs(props => ({ style: { background: props.background, }, }))`width: 100%;` 문제의 원인 원인은 drag & drop에서 props를 이용하여 le..
Axios를 이용하여 formData 객체를 전송 시, 서버에 빈 객체가 전달되는 문제 문제의 발생 비어있는 FormData가 전달되는 현상이 발생했다. 난 분명 데이터를 담아서 보냈는데, 빈 객체가 전달된다. 결론부터 말하면 axios 요청으로 formdata를 넘길 때, 1번처럼 보낼 시 form이 빈 객체로 전달된다. // 1, 빈 객체가 전달됨 axios .post( '/test1', { form }, { headers, } ) } // 2, 제대로 form이 전달됨 axios .post( '/test1', form, { headers, } ) } 그러니 절대로, 1번처럼 {}를 씌우지 말자. 왜 이런 일이 발생할까...? 원인은 axios 에 있을 것이라 생각하여 axios 코드를 분석해봤다. Axios 코드 분석 axios는 Content-Type과 data에 따라서 데이터를 가..
FormData 에러 (console.log , boundary 미확인) FormData에 대한 지식이 부족해서 사용하면서 생긴 사소한 에러들이다. 1. console.log가 안찍히는 현상 아래 내장 함수를 통해서 확인할 수 있다. form.forEach((value, key) => { console.log(`key: ${key} / value: ${value}`); }); 2. header에서 boundary가 안보임 Content-Type은 Header에, Data(payload)는 body에 담깁니다. 그래서 header에서 저 한 줄만 보이는 게 정상이고 Data는 payload 탭에서 확인하는 게 맞습니다.
API의 속성이 제한되는 현상 (CORS-safelisted response header, Access-Control-Expose-Headers) API를 받았는데, API의 속성이 제한되는 현상이 일어났다. 하지만, 동료는 정상적으로 API 정보(속성들)가 전달된다한다. 무엇이 문제였을까? 결론부터 말하면, 백엔드에서 Header 설정을 하지 않았다. 좀 더 구체적으로 보자. 문제의 발생 몇 가지 조건이 겹쳤다. 1. 현재 우리는 local Proxy를 이용하여 가볍게 개발중이다. 2. 백엔드에서 cors 에러를 방지하기 위해서 'Access-Control-Allow-Origin: *' 설정을 하여서 예외처리 해두었다. 이 상황에서 나는 테스트 서버로 api 요청을 보내야했고, 이 과정에서 굳이 local Proxy를 사용할 필요가 없다 느껴서 서버 주소를 직접 입력하여서 보냈다. 그리고 아래 사진처럼 제한된 값이 도달했다. 하지만, 네트워크에는..
[프로젝트 세팅] gitignore.io를 이용하여 .gitignore 생성하기 git을 사용하다보면, git을 통해서 관리하기 애매한 파일들이 존재한다.-  보안상 위험이 있는 파일- 프로젝트와 관계가 없거나 무의미한 변동사항이 너무 많은 파일- 용량이 너무 큰 파일이런 생략해야하는 파일을 모아둔 파일이 .gitingore 이다. 이를 통해서 핵심파일들을 관리할 수 있다. ex). node_modules아래 참조에 적힌대로 여러가지 룰 등을 통해서 직접 파일을 제외할 파일을 정하는 것도 좋지만, .gitignore.io 사이트를 통해서 프로젝트 생성시에는 디폴트값을 만드는 것이 편하다.https://www.toptal.com/developers/gitignore  gitignore.ioCreate useful .gitignore files for your projectwww.top..
ESLint와 React 안정성 에러 - Enforce a specific function type for function components (react/function-component-definition) Error Name 다음과 같은 에러가 발생하였다. "Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “TabButtons” and pass data as props react/no-unstable-nested-components" 발생 fun..
ESLint 자동 변환 이슈(에러) 발생 //1 const Test = () => { return test; }; //2 function Test() { return test; } 현재 프로젝트에 Test 컴포넌트를 1번과 같이 선언했을 때, 2번 코드로 바뀌는 현상이 있었다. 본래 우리 팀은 최상위 컴포넌트는 2번으로 그 외 컴포넌트는 1번으로 짜는 팀 내 규정이 있었는데, 이 때문에 찾아보게되었다. 원인 원인은 기존 프로젝트와 달리 airbnb style을 적용해서 그렇다. ESLint는 2번 style을 기준으로 잡고 그 외는 틀린 것으로 처리하여 자동으로 변환해준다. 해결법 "react/function-component-definition": [, { "namedComponents": "function-declaration" | "..