영프로 개발

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

- 의존성 제거 오늘 팀장님이 내가 만들었었던 컴포넌트들을 가져다 새로운 프로젝트에 쓸일이 있어 내가 만든 컴포넌트들을 가져다 쓰시려고 코드들은 옮겨 가고있었는데, 나의 생각이 짧았음을 느꼈다. 스타일 하나를 옮겨가더라도 여기저기 파일들에 상속을 받거나 임포트 해야하는 경우들이 있어 파일하나만 가지고서는 온전히 스타일을 못썻다. 그리고 툭하면 내가 만들었던 컴포넌트들은 무언가를 import해주던가 특정 파일들을 또 만들었어야했다. 지금 생각해보니 넘 생각이 짧았다... poc가 끝나면 의존성들을 제거하는 작업들을 해야겠다

기존 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 ? : }

웹소켓을 이용해서 웹소켓이 중간에 끊어저도 다시 자동으로 연결되어 데이터가 계속 업데이트 되게끔 해야하는 작업이 있어 간단한 웹소켓 코드를 작성 했었다. 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..

회사 회의중 생소한 용어여서 간단하게 정리를 해보았습니다 Proxy 대리의 의미로 클라이언트와 Web서버의 중간에 위치하고 있어 대신 통신을 받아주는 것이 프록시이다. 프록시는 포워드 프록시와 리버스 프록시로 나눠져 있고 기본적으로 포워드 프록시는 클라이언트 리버스 프록시는 서버 쪽의 설정을 한다. 포워드 프록시 리버스 프록시 Proxy 사용 목적 보안 - 서버의 IP를 숨기는 것이 가능하고 외부로부터 위협을 막아주는 역할을 한다. 캐시 - 프록시 서버에 요청이 된 내용들을 캐시를 이용해 저장해두고 다시 데이터를 가져올 상황이 발생하지 않기 때문에 전송시간을 절약할 수 있다. 로그 - 프록시 서버에게 클라이언트의 기록이 남아있어 어떤 IP에서 어떤 IP로 얼마나 접속해 있는지 확인할 수 있고 특정 IP가..

복잡한 이미지경로를 환경변수로 관리 하기 위의 사진과 같이 .env 파일안에 REACT_APP 으로 시작하는 변수명을 지은후 경로 지정 public안의 이미지를 쓰려면 process.env.PUBLIC_URL을 꼭 붙여줘야 사용이 가능합니다. 환경 변수를 지정해 주었다면 위의 사진과 같이 사용하실 수 있습니다.

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

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

이력서를 꽤 넣었고 꽤 많은? 회사들이 감사하게도 면접의 기회를 주셨다. 이 과정 속에서 정말 인상 깊었던 면접 후기를 작성해 보겠습니다. 1. 스타트업 CTO님과의 면접 - 보통의 회사들은 자기소개를 먼저 요청을 한다. 근데 인상 깊게도 이 회사는 지원자가 제대로 이 회사에 대해서 알 수 있게끔 먼저 회사소개를 해주셔서 되게 인상 깊었다 5분정도의 짧은 소개를 듣고 본인이 생각한 회사랑 일치하는지? 를 물어보고 이후 면접을 진행하였다. 기술 면접들은 좀 원초적인 내용들이 많았었고 나또한 대답하면서 다시한번 생각해보고 내가 조금 놓치고 있던 개념에대해서 짧게나마 피드백을 주셔서 부족한점과 보완할점을 알수있는 좋은 시간이었다. - 그리고 정중하게 면접을 본 횟수를 물어보셨는데 솔직하게 말씀을 드렸고 자신이..

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