전체 글

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)들이 남아있는 것을 확인할 수 있었다... 깨끗히 지워지길 바랬으나 파일이 남았던 모양이다. 이를 다시 지우기 위해 폴더 위치를 찾던 중 아래와 같은 경로에서 모두 확인할 수 있었다.

jQuery 에서 라이브러리 형태로 제공되는 다이얼로그를 사용하면 보다 간단하게 세련된 디자인의 다이얼로그를 사용할 수 있게 된다. 아래 링크에서 해당 라이브러리를 받을 수 있다. 이 때 반드시 필요한 파일은 jquery-ui.js와 jquery-ui.css 두 가지이다. https://jqueryui.com/download/ Download Builder | jQuery UI Download Builder jqueryui.com jQuery Dialog 호출 방식 먼저 다이얼로그를 호출할 Element가 필요하다. 그 다음, 해당 Element에 다이얼로그를 호출하는 코드는 아래와 같다. 주로 사용해본 옵션과 함수들을 나열했다. $('#dialogSample').dialog({ dialogClass: ..

requirejs.undef([js 모듈 경로]); 제이쿼리 다이얼로그를 이용해 같은 화면을 여러 번 띄울 때, html파일은 하나지만 계속해서 다른 데이터를 보여줘야 하게 되었다. 이 때 RequireJS를 통해 모듈 관리를 하고 있는 상태에서, 이미 모듈이 한 번 로드되고나면 이후에 다른 데이터를 보여줘야할 때에도 이전 값이 나오게 되어 방법을 강구하게 되었다...! requirejs의 글로벌 함수 undef을 사용하면 정의되지 않은 모듈을 허용하며, 모듈 내부 상태를 리셋하기 때문에, 내 경우에는 다이얼로그를 닫을 때(정확히는 beforeClose 함수 호출 시에) 모듈을 리셋하도록 하였다.

스코프 객체를 참조하는 것이 무한히 반복될 때 발생하는 것 같다..! 나 같은 경우에는 ng-include="스코프 변수" 형태로 URL을 동적으로 할당하고 이를 페이지에 나타나게 하려는 코드가 inlcude 되는 페이지와 include하려는 페이지 모두에 존재해 나타난 문제였다. 특정 페이지를 무한히 include하게 되는 식으로 스코프 변수에 값을 할당하는 작업이 무한히 반복되어 나타나는 바람에 문제가 발생했고, 한 쪽의 코드를 지움으로써 해결 했다.

일반적으로 jQuery를 사용해 요소에 이벤트를 걸고자 할 때, 아래와 같이 걸게 된다. $().on("event", function(e) { ... }); 이렇게 이벤트를 걸던 중, 해당 이벤트를 바인딩할 때 존재하는 데이터를 함께 전달해야하는 상황이 있었다. 나는 단순히 아래와 같이 했지만.. 해당 이벤트가 바인딩되기 보다는 해당 이벤트의 콜백함수가 바로 실행되는 문제가 생겼다. $().on("event", function(e, data) { ... }); 제이쿼리 공식 API 문서를 보면 데이터를 함께 전달하고자 할 때에는 아래와 같이 보내야 한다고 명시하고 있다. $().on("event", {dataName: data}, function(e) { ... });

1. 콘솔 로그 이슈 1(JXLS 버전 문제) 회사 제품의 데이터 엑셀 다운로드 기능 실행 시 값이 'null'인 데이터에 대해서는 출력하지 않으면 되는데, 굳이 아래와 같은 로그를 찍는 이슈가 있었다. "1018 [AWT-EventQueue-0] WARN org.apache.commons.jexl2.JexlEngine - org.jxls.expression.JexlExpressionEvaluator.evaluate@61![0,19]: ‘변수명' inaccessible or unknown property transaction" 스택오버플로우의 몇 가지 글을 보자 버전업을 해야한다는 의견이 다수였고, 실제로 2.4.6 버전이던 JXLS를 2.10.0 버전으로 업그레이드 함으로써 더이상 null값에 대한 경..