디벨롭per

간간히 해오던 Nerator 프로젝트에서 명함에 배치할 속성을 좀 더 자유롭게 편집 하고 싶어 에디터를 구현하기로 했다. 핵심 기능 LIST UP! - 명함은 앞면과 뒷면이 있다 - 앞/뒤에 따라 다르게 속성 x/y 위치를 구분해야한다. (기능적 측면) - 사용자는 쉽게 앞/뒷면을 넘나들며 편집하기 쉬워야 한다. (사용자 측면) - 명함 크기를 설정할 수 있다. - 명함 뒷면과 앞면의 디자인의 이미지를 넣을 수 있다. - 속성을 drag/drop 하여 쉽게 배치할 수 있도록 해야한다. - 미리보기 화면으로 사용자에게 예시를 줘야한다. - 마지막 결과물을 pdf저장 혹은 프린트 기능 까지 (2차개발) 현재 대략적으로 잡은 UI는 왼쪽엔 수정할 수 있는 편집 화면, 오른쪽 사이드 바에는 설정할 수 있는 옵션..

#1 기획단계 및 UI 작업 드디어 1인 토이 프로젝트를 진행하려 마음을 먹었다. 토이 프로젝트의 큰 토픽은 이름표다. (..오잉) 회사마다 다를 수 있지만 현재 본인이 다니고 있는 회사인 경우 신입들이 올 때마다 이름표 potential-coding.tistory.com ----- 기존엔 UI를 구성하기 위해 Material-UI, ant design의 컴포넌트들을 사용했다. 하지만 이번 프로젝트에서는 직접 만들어보고싶어 styled-component를 이용해 만들었다. 버튼 컴포넌트 생성 먼저, 내가 개발하면서 자율적으로 버튼을 커스텀하고 싶은 속성은 - 텍스트 - border 여부 및 색상 - outlined 여부 - backgroundColor : 버튼 색상 - fontColor : 폰트 색상 -..

Object Array update 1. Map을 이용하여 특정 고유키를 이용해 해당 json만 값 변경하는 방법 setSampleData(sampleData.map(item => (item.key === compareVal(해당 index와 비교할 고유키 값) ? { ...item, key: e.target.value } //변경하고 싶은값 : item)) );

GAPI is Google's client library for browser-side JavaScript. It's used in Google Sign-in, Google Drive, and thousands of internal and external web pages for easily connecting with Google APIs. gapi 란 브라우저 쪽 자바스크립트를 위한 구글에서 제공해주는 클라이언트 라이브러리다. gapi는 구글 로그인, 드라이브 등 api를 쉽게 연결할 수 있도록 도와준다. 나는 리액트를 이용하여 gapi Google Calendar와 FullCalendar을 연동 시켰다. 1. index.html index.html에 gapi를 로드하기 위해 를 넣어준다. 이 외의 ..

React에서 개발환경에 따라 API를 다르게 호출할 수 있는 경우가 있다 예로들면 local : axios.get("http://gateway:9010/test/api") dev : axios.get("http://devway:9010/test/api") prd : axios.get("http://prdway:9010/test/api") Webpack by default does not provide any process to load ‘.env’ files. but there many plugins and libraries that can do the same task. 출처 : https://medium.com/@bhautikbharadava/environment-variables-webpack-c..

구조는 Template - 자식1 - 자식2 설계 되어있다. 1. 먼저 최하위 자식인 MyModal에서 onDeleteLeave 함수를 실행할 경우 props로 넘어온 handleSubmit에다가 startDate값과 cnt를 넘겨준다. 2. 그럴경우 부모의 바로 밑인 하위자식이 CalendarForm은 handleSubmit으로 받아온 값을 this.props.handleApplyTemps로 값을 넘겨준다. 3. 그러면 상위부모인 Template은 CalendarForm의 handleApplyTemps 값을 가진 handleSubmit의 값을 받아온다. function MyModal(props) { const onDeleteLeave = param => { props.handleSubmit(startD..

React에서 .map 을 써서 데이터를 뿌려줄 경우 생각보다 나한테 .map is not a function 에러가 번번히 떴다. 원인은 .map()은 배열에만 가능하단 것이다. 그리하여 주로 map에서 원치 않는 포맷들로 이뤄진 데이터를 뿌려주려 할때 생기는 에러다. 예로들면 중괄호, 대괄호도 에러의 원인이 될 수도 있다. 아니면 state나 props의 형태가 Object가 아닌걸로 되어있을 수도 있다. 일단, 이 에러를 숨기는 방법 -> 이 방법은 에러를 완전히 해결한다고 볼 수 없다. 1. JSX안에는 중괄효를 이용해서 표현식을 이용할 수 있다. {tmId.map((tm,index) => { return( {index+1} {tm.hmName} {tm.leaveCategory} {tm.stDat..

내가 못찾은건진 모르겠지만 FullCalendar의 next,prev 버튼을 누를 경우 react fullCalendar에서 특정 함수를 실행시켜 줄 수 있는 메소드(?)를 제공해주지 않아 정말 많은 시행착오들이 있었다. --FULLCALENDAR 일단 여기에서 next와 prev를 누를경우 특정 함수를 실행시키고 싶었다 1. 버튼 생성 -> FullCalendar의 prev버튼 trigger -> 함수 실행 ==> 비효율적 2. FullCalendar의 customButton 생성 FullCalendar에서 제공해주는 event 가 유일하게 달이 바뀔때마다 실행되는 요소이기에 위의 코드처럼 event={this.monthChange} 함수를 실행해주었다. monthChange = () => { var ..