디벨롭per

#4 [REACT.JS] 사진 불러오기, 엑셀 읽어오기 #3 기본 레이아웃 구성 및 팝업 생성 #2 기본 버튼 컴포넌트 만들기 #1 기획단계 및 UI 작업 드디어 1인 토이 프로젝트를 진행하려 마음을 먹었다. 토이 프로젝트의 큰 토픽은 이름표다. (..오잉) 회 potential-coding.tistory.com 엑셀로부터 해당 속성을 받아오고, 이를 통해 명함에 드래그앤 드랍을 통해 좌표를 지정하도록 기능을 구현했다. 1. 명단 업로드를 통해 엑셀을 불러온다. 2. 속성의 이름을 해당 명함에 출력하고 싶은 부분에 좌표를 찍어준다. --- 구현해야 할 기능 - testPrint를 할 때 해당 속성에 관련된 이름 데이터를 출력하는 기능 구현 - 명함 사이즈에 맞춰서 기능 구현

Intersection ObserverAPI를 사용하게 되면, 우린 특정 element가 viewport에 보일때 관찰이 가능하다. 주로 해당 기능을 페이지 성능 개선을 위해 Lazy Image loading에 사용하곤 한다. intersection observerAPi를 사용하지 않고, react.js, typescript를 사용하여 구현해보도록 하겠다. | 화면 크기 구하기 element가 viewport에 표시되는 것을 관찰하기 위해서는, window의 width, height를 먼저 알아내야한다. 유동적 화면 변화를 위해선 eventHandler를 사용하여 크기를 감시해야한다. useEffect(() => { handleObserveElement(); }, [handleObserveElement]..

막대를 x축 방향으로 슬라이드를 통해 두개의 이미지를 보여지도록 개발했다. 1. 이미지 2개 겹치기 //이미지 1개 /** 막대 setPressed(true)} onMouseUp={() => setPressed(false)} > {""} **/ //이미지 2개 styled-components const Layout = styled.div` display: flex; justify-content: center; width: 100%; height: 100%; position: relative; overflow: hidden; border: 1px solid ${({ theme }) => theme.gray300}; div[class^="crop"] { position: absolute; width: 100..

저번에 리액트 프로그램을 진행하게 되면서 CICD 구축의 중요성을 새삼 깨닫게 되었다. 운영할때마다 로컬에서 배포폴더 만들고, 서버에 직접 올리는 작업은 너무 시간도 많이 들었고, 무엇보다도 생산적이지 않았다. 그리하여 이번 리액트 프로그램을 진행할때엔 dev 브랜치에 푸쉬하면 바로 서버에 자동 빌드되는 환경 속에서 개발되길 원했다. 그리하여 본인은 젠킨스를 통해 자동 빌드를 하게 되었다. 먼저 GitHub에 Webhook을 설정해준다. Webhook(웹훅)이란, 서버에서 어떠한 작업이 수행 되었을 때 해당 작업이 수행되었음을 HTTP POST로 알리는 개념을 말한다. (https://docs.iamport.kr/tech/webhook) ## 소스 코드 관리 1. 해당 깃 레포지토리와 자격 입력 2. 설..

1. JPA 상황: Team(팀 table)과 department(파트 table) join 을 하려고 한다. 원인 : 단방향이 아닌 양방향 연관관계를 맺기 때문에 이 관계를 맺은 두 엔티티가 서로 toString을 호출하면서 무한반복된다. error Message : Method threw 'java.lang.StackOverflowError' exception. Cannot evaluate 패키지.toString() 코드 관계 Team -> department : 1:N department -> Tean : N:1 에러 해결 : ToStringBuilder을 사용하여 해결하였다.