전체 카테고리

1. 테이블 생성 생성한 파워포인트 파일에 슬라이드 추가 후 슬라이드에 테이블을 생성하고 그 크기를 정할 수 있다. 테이블의 내부 셀 크기에 따라 크기가 달라지므로 이전의 이미지 삽입과 달리 시작 지점의 x좌표, y좌표만을 정해줬다. 만약 테이블 생성 시(createTable) 인자로 로우 수와 컬럼 수를 지정해준다면, 로우 추가 시에 셀을 추가하지 않아도 해당 컬럼 수 만큼 셀이 생성된다. 때문에 그럴 경우에는 row.getCells().get(컬럼 인덱스)의 방식으로 해당 셀에 접근해야 한다. (Paragraph까지는 자동으로 생성해주나. 따라서 접근한 Cell에 getParagraphs().get(idx);를 통해 Paragraph에 접근한 뒤 TextRun 역시 같은 방법으로 접근하려 하면 nul..

이전에는 POI와 Jxls를 이용한 템플릿 기반 엑셀 파일을 생성 및 다운로드 하는 게시글을 작성했다. 이번에는 특정 데이터를 템플릿을 기반으로 보여주되 엑셀이 아닌 파워포인트에 내용을 작성하는 작업을 맡게 되었다. 0. 의존성 1) Maven 이용 시 org.apache.poi poi 4.1.2 2) Gradle 이용 시 implementation 'org.apache.poi:poi:4.1.2' 1. 템플릿 파일 가져오기 File originalFile = new File(servletContext.getRealPath("/WEB-INF/template"), "템플릿 파일명"); 2. 가져온 템플릿 파일을 기반으로 새로운 파워포인트 파일 생성 FileInputStream is = new FileInpu..

State 이전 글에서 소개한 리액트의 props는 props를 사용하는 컴포넌트를 호출하는 부모 컴포넌트에서 그 값을 전달해주고, 해당 컴포넌트는 그 값을 변경할 수 없다. 반면에 state는 컴포넌트 내부에서 변경될 수 있는 값을 의미한다. 2021.11.11 - [React] - React) props란? React) props란? props란 properties의 약어로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있고, 해당 컴포넌트 자신은 이를 변경할 수 u-u002.tistory.com 리액트에서는 컴포넌트를 생성하는 방식이 두 가지 존재한다. 컴포넌트 종류에 따라 클래스형 컴포넌트에서는 state 그대로, 함수형..

props란 properties의 약어로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있고, 해당 컴포넌트 자신은 이를 변경할 수 없다. props는 컴포넌트의 JSX를 리턴하는 부분에서 클래스형 컴포넌트의 경우에는 'this.props.props명', 함수형 컴포넌트의 경우에는 'props.props명'의 형태로 사용할 수 있다. 1) defaultProps props 값을 따로 설정하지 않았을 때 보여줄 기본값을 설정하는 것으로, defaultProps는 해당 컴포넌트 자신의 파일에서 설정할 수 있다. 2) children props의 종류 중에 부모 컴포넌트에서 해당 컴포넌트 태그 사이에 전달하는 내용을 값으로 삼는 것을..

화살표 함수는 ES6의 문법에서 함수를 표현하는 새로운 방식이다. 하지만 화살표 함수는 완전히 기존의 function을 대체하는 것은 아니니 유의하자. 사용 용도가 다른데, 일반적으로 화살표 함수는 파라미터로 함수를 전달할 때 유용하게 사용된다. 형태적으로는 일반 함수는 'function 함수명( ) { ... }'의 형태를 지니지만 화살표 함수는 'const 함수명( ) { ... }'의 형태를 가진다. 일반 함수는 자기 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킨다고 한다. Javascript에서의 객체가 Java에서의 인스턴스, Javascript에서의 인스턴스가 Java에서의 클래스의 느낌으로 다가오는데 이 부분에 대해서는 다시 확인해봐야 겠다.

1. 컴포넌트 생성 방식 // 함수형 생성 방식 (1) function ComponentName() { return ( // HTML 삽입 ) } // 함수형 생성 방식 (2) const ComponentName = () => ( // HTML 삽입 ); // 클래스형 생성 방식 class ComponentName extends Component { // 이 때 상속받는 Component는 react.Component render() { return( // HTML 삽입 ) } } export default ComponentName; App.js 생성한 컴포넌트들을 최상위 컴포넌트인 App에 추가함으로써 원하는 위치에 렌더링할 수 있다. index.js ReactDOM.render함수는 컴포넌트를 페이지..

1. 빌드(빌드 파일 생성) 빌드 시 build 디렉토리 내부에 compressed 형태의 파일들이 생성된다. 기본적으로 개발이 진행되는 리액트 프로젝트는 제법 큰 용량을 지니는데, 이 용량을 그대로 사용자가 사용하게 될 경우 프로그램이 지나치게 무거워진다. 이를 대비해 빌드 시에는 압축된 형태의 파일들로 생성되게 된다. 이 build 디렉토리 내부(웹 서버가 document를 찾는 경로)에 파일들을 위치시키면 실 서버 환경 구축은 완료되는 것이다. npm run build 2. 웹 서버 다운로드 serve는 npm을 통해 설치할 수 있는 간단한 웹 서버이다. 'create-react-app'을 통해 리액트 프로젝트를 생성할 때 'create-react-app .' 명령어를 사용했던 것 처럼 serve ..

1. 리액트 프로젝트의 기본 구조 1) project index.html이 존재하는 디렉토리 2) src 모든 소스코드가 존재하는 디렉토리 3) build 빌드할 경우 해당 디렉토리 하위에 빌드 파일들이 생성된다. 2. 리액트 프로젝트의 주요 파일 1) index.html index.html 파일의 소스코드를 열어보면, 실상은 별다른 코드가 없다. 이는 이 한페이지 속에서 많은 코드가 숨어있기 때문이다. 이 div#root 하위에 들어갈 내용들은 src 디렉토리 하위에 작성하는 파일들에 의해 구성된다. '' 를 기억하자. 2) index.js 익숙한 단어가 보일 것이다. 좀전에 index.html에서 보았던 'root'는 여기서 찾을 수 있다. 리액트에서는 일부 화면을 컴포넌트화하여 사용할 수 있다. 우..

이 글은 생활코딩(egoing)의 리액트 강의와 리액트를 다루는 기술(저자 김민준)을 읽고 기억하고자 하는 부분들을 정리한 글입니다. 생활코딩 - 리액트 https://www.youtube.com/watch?v=XMb0w3KMw00&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi React 리액트를 다루는 기술 https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=204819510 리액트를 다루는 기술 리액트 베스트셀러 1위, 리액트를 다루는 기술 개정판. 리액트 16.8 버전에 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태 관리를 할 수 있게 되었다. 이에 맞춰 책에 사용된 주요 예시 www.aladin.co.kr React ht..

인텔리제이를 사용하느라 VS Code는 잘 사용하지 않아 지우게 됐었다. 다시 깔자 이전에 다운받았던 확장(Extension)들이 남아있는 것을 확인할 수 있었다... 깨끗히 지워지길 바랬으나 파일이 남았던 모양이다. 이를 다시 지우기 위해 폴더 위치를 찾던 중 아래와 같은 경로에서 모두 확인할 수 있었다.