탐구소년

함수형 컴포넌트 함수형 컴포넌트는 객체가 아닌 함수입니다. 따라서 함수형 컴포넌트 영역에서는 this가 없습니다. 함수형 컴포넌트는 속성을 인자로 전달받아 그것을 기반으로 동작을 실행한 후 DOM 엘리먼트를 반환하는 함수입니다. 컴포넌트 구조를 단순하게 유지하고자 할 때에는 클래스 기반의 컴포넌트보다 함수형 컴포넌트를 사용하는 편이 좋습니다. 아래는 함수형 컴포넌트를 사용한 예제 코드인데, 이 글의 앞선 글에서 사용했던 예제를 거의 재활용하다시피 하는 예제이므로 앞선 글을 참고하시면 비교적 편하실 것입니다. 이전 글 => https://penguingoon.tistory.com/214 React 컴포넌트 만들기 | React.Component React.Component 최신 자바스크립트에서는 객체를 만..

React.Component 최신 자바스크립트에서는 객체를 만들기 위한 설계도의 개념인 class가 추가되었습니다. 그리고 리액트를 사용해 컴포넌트를 새로 만들 때는 React.Component라는 클래스를 기반으로 생성하는 것이 가능합니다. 아래는 class 기반의 컴포넌트를 적용한 예제입니다. 이 글 이전의 글에서 사용했던 예제와 거의 흡사합니다. 프로젝트 구조 index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 React Simple Example sample-class-component.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 class nameList extends React.Com..

React 소개 리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리로, 2013년에 페이스북에서 만들었습니다. 리액트를 사용하면 자바스크립트 안에서 HTML처럼 보이는 코드를 작성할 수 있습니다. 그리고 이러한 코드를 렌더링하여 웹문서 인터페이스를 만들게 됩니다. 리액트는 점진적으로 적용할 수 있도록 설계되어 있어 학습이 용이합니다. 다만 다른 낯선 기술을 배울 때와 마찬가지로 러닝 커브(learning curve)가 존재하므로, 초기 진입장벽을 잘 넘기는 것이 중요합니다. React 동작 원리 HTML은 브라우저가 문서 객체 모델(DOM)을 구성하기 위해 따라야 하는 절차라고 말할 수 있습니다. HTML 문서를 이루는 엘리먼트는 브라우저가 HTML 문서를 읽어 들이면 DOM 엘리먼트가 되고..

안녕하세요 탐구소년입니다. HTML로 웹문서를 만들 때 태그를 사용하면 데이터를 입력할 수 있는 양식을 만들 수가 있습니다. 이 양식에 입력된 데이터를 사용자가 서버 프로그램으로 전달하게 되면, 해당 서버가 그것을 처리할 수 있습니다. 이번 포스팅에서는 사용자가 직접 서버의 역할까지 수행할 수 있도록, HTML 웹문서에 자바스크립트 코드를 추가하여 폼에 입력된 데이터를 처리해보도록 하겠습니다. 사용자가 폼을 통해 몇가지 데이터를 입력하고 제출을 하면, 제출된 데이터를 화면 상에 출력하는 흐름으로 코드를 작성해 볼 것입니다. 먼저, 다음과 같이 HTML 코드를 작성하여 간단한 양식을 만듭니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ..

안녕하세요 탐구소년입니다. 오늘은 웹접근성을 고려하여 HTML 코드를 작성할 때 지켜주면 좋은 사항 몇 가지를 정리해보도록 하겠습니다. 각종 문서와 블로그의 글들을 활용하여 정리한 내용을 나름대로 정리하여 올린 것이니 참고하시면 좋을 것 같습니다. 그럼 바로 시작하겠습니다^^ 1. 크로스 브라우징이 가능하도록 한다. 크로스 브라우징이란? 크로스 브라우징이란, 웹표준 기술을 적용하여 웹페이지가 서로 다른 운영체제나 플랫폼에서 이상없이 구현되도록 하는 기술을 말합니다. 설명 크로스 브라우징이란 브라우저의 종류에 상관없이 웹사이트의 레이아웃이나 이미지, 데이터 등이 동일하게 보여지게 하는 상호 호환성에 대한 기술을 의미합니다. 그리고 이는 웹사이트를 개발하는 데 있어 상당히 중요한 개념이자 기술입니다. 참고자..

안녕하세요 탐구소년입니다. 오늘은 웹 개발을 공부하시는 분들이 자주 접하실 법한 단어, '웹 접근성'에 대해서 알아보도록 하겠습니다. 웹 접근성 사전적 의미(를 좀 더 쉽게 풀어서) 웹 접근성(web accessibility)이란 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 함께 이용할 수 있도록 배려하는 것을 말합니다. 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있습니다. 웹 접근성을 위해서는, 사용자의 시각적, 체력력, 청각적 능력들을 고려하여야 합니다. 설명! 웹 접근성은 웹사이트를 만들 때에 적용되는 기술이자 한 개념입니다. 웹 접근성의 철학은 "어떤 장애가 있더라도 웹 사이트를 사용하는 데 불편이 있어서는 안 된다"라..

리액트 앱 만들다가 '이것은 따로 기록해두면 편하겠다' 싶었던 것들을 keynote(ppt)로 만들어두곤 했는데, 그런 것들을 블로그에 올리는 것입니다. 개인 소장용이긴 하지만, 어차피 거의 노는 블로그니까.

리액트 앱에서 mui 버튼 컴포넌트를 사용할 때가 (자주) 있는데, 이 포스트는 버튼에 마우스 커서를 얹었을 때의 스타일을 지정하는 방법에 대하여 정리한 자료입니다. 다른 목적이 있어서 만든 것이 아닌지라 다소 성의없어 보일 순 있습니다. 또한 이미지라서 복사가 안됩니다 ㅈㅅ