React 14

[SVG] linear gradient 가 안보일때

이런식으로 그라디언트를 만든후 각 요소들끼리 SVG를 이용하여 연결을 시키는 작업을 하고있었는데 stroke에 선언된 gradient를 불러오면 선이 안보이는 이슈가 있었다. 하지만 단순 stroke에 #FFFFFF 같은 색상값을 바로 넣어주면 선이 잘 보이는 문제가 있었다. 문제를 해결하기 위해 구글링을 해보았는데 그라데이션의 백터를 지정할때 GradientUnits 속성이 ObjectBoundingBox로 설정되어있는데 그라데이션의 백터가 objectBoundingBox의 높이에 의존하게 됨으로 y1과 y2의 차이가 0이다보니 백터값 계산하는데 문제가 생길수 있다고 합니다. 이러한 문제점을 해결하려면 아래와 같이 gradientUnits='userSpaceOnUse'을 추가해주면 됩니다. 속성들을 변..

React 2024.01.18

프론트 Enum

기존 API를 이용하여 리턴되는 값들은 true false여서 간단하게 사용중 이었는데 return이 Enum들로 오다보니 문서를 보지않으면 나중에 절대 유지보수하는게 쉽지 않을 것 같아서 고민하던찰나 쉽게 가독성을 올릴수 있는 방법을 찾아서 기억삼아 기록합니다. //기존 {api.state ? : } //변경 {api.state === 1 ? : } //Enum export const StateEnum = { STARTING: 0, RUNNING: 1, STOPPING: 2, STOPPED: 3, DELETING: 4, DELETED: 5, DESTROYED: 6, }; {componentDetail.state === StateEnum.RUNNING ? : }

React 2023.08.31

웹소켓

웹소켓을 이용해서 웹소켓이 중간에 끊어저도 다시 자동으로 연결되어 데이터가 계속 업데이트 되게끔 해야하는 작업이 있어 간단한 웹소켓 코드를 작성 했었다. let socket = new WebSocket(url); const connect = () => { setTimeout(() => { console.log('재연결 시도중...'); socket = new WebSocket(url); socket.onopen = () => dispatch(webSocketConnected(id)); socket.onclose = () => connect(); socket.onmessage = (event: any) => { const message = JSON.parse(event.data); dispatch(sock..

React 2023.05.11

로그인 상태 확인하여 특정페이지에서 팅겨내기?

로그인 한사람이 url에 특정 url을 입력하여 다시금 login 페이지에 들어올수 있기에 팅겨낼수 있는 기능이 필요했다. 1. 첫번째 시도 내가 생각한대로 alert처리는 되었지만 navigate를 이용한 뒤로가기가 안되었다... 2. 두번째 시도 처리순서를 보장해주니 된다...! 하지만 순간의 찰나에 로그인할수 있는 화면이 보여지다보니 UX적으로는 썩 좋지않아보인다. * 의문점 - 동기적으로 실행을 했을때는 왜 안되고 promise를 이용하여 순서를 다시금 보장해주니 돌아가는지 너무 궁금하다... 알게된다면 추후 수정하겠습니다. - 아시는 분이 계신다면 댓글달아주세요 ㅠㅠ

React 2022.11.27

파이널 프로젝트 카카오 로그인 리팩토링

파이널 프로젝트 카카오 로그인 리팩토링 이전 코드에 대하여 설명해보겠습니다. 현재 프로젝트에서 1. 카카오 로그인 인가코드 받기 2.카카오 로그인 토큰 받기 3. 카카오 토큰 백엔드 서버에 넘기기 4. 백엔드 서버에서 JWT토큰 받기 의 로직으로 진행 되고 있습니다. 정석은 카카오 로그인 인가코드를 백엔드 서버에 넘겨주고 => 백엔드가 토큰으로 유저정보를 저장 및 토큰 반환 같은 로직이 맞습니다. 기존의 문제점 - AppSelector를 이용하기 때문에 불필요한 렌더링이 있다. - UseEffect안의 불필요한 dependency array가 있어 의도치 않은 결과들을 나타낼 수 있다. - 불필요한 렌더링이 일어난다 이 코드를 작성 당시엔 동기,비동기처리를 잘 몰랐다... 그러다보니 어찌저찌 돌아가게만 ..

React 2022.11.20

파이널 프로젝트 후기 -5-

1달 기간의 한 기업의 웹페이지 리뉴얼 하는 파이널 프로젝트중 로그인 & 소셜 로그인(카카오) 기능 에서 추후에 리팩토링 하면 좋을것? 작성해보겠습니다. 1. 카카오 로그인 - 카카오 로그인 같은경우에는 카카오 로그인 문서가 잘 설명되어 있어 보면서 작업하기 편했습니다. - 위의 다이어그램을 보면서 아래의 순서대로 플로우를 타면 됩니다. 1. 인가코드를 받기 2. 인가코드를 이용하여 토큰을 발급받기 처음에 생각하고 구현한 것은 1. 인가코드 받는 컴포넌트 2. 인가코드를 받아 토큰을 발급받고 백엔드에 카카오토큰을 보내고 다시 백엔드 토큰을 받는 컴포넌트 2.1 지금 생각해보면 내가 카카오토큰을 발급받는게 아닌 백엔드에서 내가 보내준 인가코드를 이용하여 토큰을 발급받고 토큰을 이용하 여 회원 정보들을 DB..

React 2022.11.18

파이널 프로젝트 후기 -4-

1달 기간의 한 기업의 웹페이지 리뉴얼 하는 파이널 프로젝트중 커뮤니티 댓글(CRUD) 에서 추후에 리팩토링 하면 좋을것? 작성해보겠습니다. 1. 댓글에 이모티콘을 사용 - 다양한 이모티콘 라이브러리를 검색하다보니 Emoji-Picker-React 라는 라이브러리를 찾았고 사용법을 LiveDemo를 해보면서 익혔습니다. - React-hook-form 을 사용했기에 이모티콘을 클릭해서 넣었을때 바로 들어갈수 있게끔 setValue를 이용하여 값을 변경 시킨 후 Emoji창을 닫도록 하였다. 2. 댓글 읽기,등록, 수정, 삭제 - 댓글 읽기 : 콘텐츠 페이지에 들어오자마자 댓글을 읽어 들일수 있게끔 설정하였습니다. - 댓글 수정 : 대댓글은 로그인 한사람만, 댓글 작성자만 수정,삭제할수 있게끔 설정하였습니..

React 2022.11.15

파이널 프로젝트 후기 -3-

1달 기간의 한 기업의 웹페이지 리뉴얼 하는 파이널 프로젝트중 커뮤니티 게시글(CRUD) 에서 추후에 리팩토링 하면 좋을것? 작성해보겠습니다. 일단 커뮤니티 페이지에서 들어가야할 기능을 알아봅시다. 1. 커뮤니티 페이지 네이션 - 처음에는 공부한다는 생각으로 라이브러리 없이 구현을 했었습니다. 구현 방법은 아래와 같이 이용하여 만들었습니다. 총 페이지가 만들어지는 수를 구한후 Array를 만든다 slice를 사용하여 보여주기 원하는만큼 자른다. 10보다 크면 block 넘버를 증가시켜 슬라이스 되는 범위를 재조정 랜더링 - 다만 데이터가 얼마 없을경우에는 프론트엔드에서 처리를해도 성능에 크게 차이가 없지만 백엔드 개발자 분과 얘기해본 결과 페이지네이션에 필요한 값들을 보내주겠다고 하셔서 더 손쉽게 구현할..

React 2022.11.13