IT & Art

버튼 실습을 통해 React 컴포넌트의 props와 state를 이해해 봅니다. React 컴포넌트란, javascript 함수로 이해하면 되는데 이 때 입력이 props, 출력이 HTML 엘리먼트라고 생각하면 됩니다. Props란, 컴포넌트를 호출한 부모 컴포넌트로부터 받은 파라미터로서 변경할 수 없는 값입니다. State란, 컴포넌트 내에서 변경 가능한 정보로, state가 갱신되면 출력도 갱신됩니다. 자, 이제 예제 코드를 보면서 이해해 봅시다. 예제 코드:&nbsp&nbspGithub 링크 소스 위치: src/tutorial/Tutorial01-ButtonClick.js 결과를 먼저 볼까요? 위 예제 코드를 받아 실행 후 브라우저에서 http://localhost:3000/test01 로 접속하면..

웹앱 UI를 만들다 보면 예쁜 아이콘을 사용해야 할 때가 많은데, 그럴 때마다 일일이 그리거나 이미지를 다운받아 쓰는 것은 너무 번거로운 일입니다. 또한 라이선스가 걸려있는 아이콘 이미지를 함부로 사용할 경우에는 법적 문제가 따를 수 있지요. 따라서 항상 라이선스를 잘 살피고 사용해야 합니다. 아이콘 HTML 웹 프로그래밍에 있어서는 Font Awesome이라는 굉장히 유명한 오픈 소스 프로젝트가 있습니다. Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 가장 중요한 라이선스 문제는 사이트에 공지된 내..

웹 프로그래밍의 큰 장점 중의 하나는 UI 디자인이 분리되어 전문 디자이너와 독립적으로 개발할 수 있다는 사실입니다. 즉 일반적인 웹 프로그래밍은 3가지 섹션(HTML, CSS & Javascript)으로 나뉘는데, HTML은 컨텐츠, CSS는 디자인, Javascript는 상태 변화를 담당한다고 보시면 됩니다. &nbsp&nbspSample Code CSS 이때 CSS는 보통 .css 파일로 HTML 헤더에서 링크되곤 하는데요, 아주 유명한 Bootstrap의 경우, 아래와 같이 HTML 파일의 Hello, world! 자세히 보시면 태그에서 href 속성에 외부 URL 값이 있는데요, 이렇게 외부로부터 링크(브라우저로 다운로드)하는 것을 CDN(Content Delivery Network)이라고 부릅..