본문 바로가기

Development

(18)
[GITLAB] DISCORD 커스텀 알림 만들기 build가 약 5분정도 걸리는데, 애매하게 신경쓰여서 알림을 만들기로 했다.현재 나는 discord를 사용 중이기때문에, Discord에 알림을 오는 것을 목표로 했다. 방법 1. GITLAB에서 WEBHOOK 설정하기 다음처럼 pipeline에 check를 하면 알림이 온다!그럼 현재 프로젝트는 파이프라인이 두 단계여서 알림이 두 번 온다.gitlab에서 이를 커스텀하는 부분까지는 제공 하지 않았다. 나는 성공했을 때, 단 한 번만 알림을 받고 싶었다. 방법2. CI 단계에서 WEBHOOK에 직접 메시지를 보내기찾아보니까 ci단계에서 yml script에서 curl을 사용할 수 있었다.그러면 그냥 curl로 discord webhook을 호출하면 된다 생각했고, 마지막 CI 단계에서 호출하면 완료 메..
컴포넌트는 어떻게 설계해야할까? 컴포넌트를 어떻게 설계해야할까? 요즘 최대 고민이고, 이에 대한 내 의견을 적어두려합니다. 자문자답인 만큼 더 많은 경험에 의해서 바뀔 수 있으며, 중간 정답으로 봐주시면 좋을 거 같습니다. 글을 읽고 피드백을 해주신다면, 정말 감사합니다. 컴포넌트란?컴포넌트는 화면의 구성요소를 의미한다. 작은 단위로는 button, input 등이 있을 거고 점점 커져가서 dropdown, header, carousel, 화면 그 자체 등 화면에 보이는 거의 모든 요소가 컴포넌트가 될 수 있습니다.  그러면 컴포넌트는 왜 나누는 걸까요?보통은 "복잡성을 줄이기 위해서"과 "반복되는 코드를 줄이기 위해서 (재사용성을 통해 생산성을 높이기 위해서)" 나누게 됩니다. 1. 복잡성을 줄이기 위해서구글 코드가 20억줄이라 하는..
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를 사용할 필요가 없다 느껴서 서버 주소를 직접 입력하여서 보냈다. 그리고 아래 사진처럼 제한된 값이 도달했다. 하지만, 네트워크에는..
Konva vs Fabric vs Canvas API 라이브러리 선택과정 Drawing 기능 +@를 구현하기 위해서 canvas 라이브러리를 선택하는 과정에 고민이 생겼다. 이 기능을 제공하는 여러 라이브러리가 있지만, 리액트와 충돌 이슈가 있는 라이브러리를 모두 제외하니 Konva, Fabric, 자체 구현 세 가지 방식이 남았다. 이 중 자체 구현은 기능이 확장 될 때마다 새로 만드는 부분에서 시간적인 효율이 나오지 않는다 생각하여 제외했다. 결론을 먼저 말하면, Konva를 선택하였다. (이후 나올 모든 그림의 순서는 canvas - konva - fabric 순입니다.) 1. 성능 비교 lighthouse 렌더링 성능 비교 lightHouse 성능은 다 고만고만하다. fabric이 미세하게 빠르다. 최적화가 안되어있을 때는 canvas 라이브러리들을 사용하면 SI가 굉..
리드미 작성 시 참고하기 좋은 사이트 https://readme.so/editor readme.so Use readme.so's markdown editor and templates to easily create a ReadMe for your projects readme.so 리드미 양식을 만들어주는 에디터이다. 이 사진처럼 원하는 섹션을 선택해서 내용을 수정해서 더한 뒤 다운로드를 받으면 이쁜 리드미가 완성된다!