1. 컴포넌트개발자들은 리액트를 컴포넌트 기반의 UI 라이브러리라고 소개한다. 페이지의 모든 요소를 컴포넌트 단위로 쪼개어 개발하고, 완성된 컴포넌트를 마치 레고 조립하듯 하나로 합쳐 페이지를 구성하기 때문이다. 리액트의 핵심 개념 중 하나인 컴포넌트를 자세히 알아보겠다.  1-(1) 실습 환경 설정하기앞서 리액트 앱을 생성했던 방법과 동일하다.npx create-react-app . Documents 폴더 아래 chapter5 폴더를 만든 다음, 해당 폴더 안에서 터미널을 열어 위 명령어로 새로운 리액트 앱을 만든다. 그 후 사용하지 않을 파일과 코드를 삭제하면 실습 환경 설정이 완료된다.1-(2) 첫 컴포넌트 만들기리액트 컴포넌트는 주로 자바스크립트의 클래스나 함수를 이용해 만든다. 클래스로 컴포넌트..

24-25/React.js 1 2024. 11. 8. 13:36

1.  컴포넌트   [실습 환경 설정] 실습 환경 설정을 위해 새 폴더 chapter5를 만들고 터미널에서 npx create-react-app . 명령어로 새로운 리액트 앱을 만든다. 그리고 src 폴더에서 실습에 사용하지 않을 아래의 파일들을 제거한다. - src/App.test.js- src/logo.svg- src/reportWebVitals.js- src/setupTest.js Create React App이 자동으로 생성하지만 실습에는 사용하지 않는 코드를 모두 삭제한다.각각 index.js와 App.js의 파일이 아래와 같은 코드들만 남도록 불필요한 코드를 모두 삭제한다.import React from 'react';import ReactDOM from 'react-dom/client';im..

24-25/React.js 2 2024. 11. 8. 10:00

1. 리액트의 탄생리액트는 페이스북 개발팀이 만들어 2013년 오픈소스로 세상에 공개했다. 페이스북은 출시 초기부터 페이스북은 다른 웹 서비스 보다 유독 인터렉션(Interaction)이 많아서 이를 잘 수행하기 위해 react를 만들었다.( 인터렉션: 좋아요 버튼이나 채팅처럼 사용자와 웹 서비스 간에 양방향으로 소통하는 기능을 지칭) 웹 서비스를 쉽고 빠르게 개발할 수 있는 Node.js의 라이브러리 가운데 하나로 리액트를 한마디로 표현하면 "서비스의 변화가 많고 사용자와 상호작용이 원활한 대규모 웹 애플리케이션을 쉽게 구축할 수 있는 기술"이다. 실제로 리액트는 페이스북, 인스타그램, 넷플릭스 등  서비스를 개발한 기술에 사용된다.       리액트의 3가지 특징 >1. 컴포넌트 기반의 유연성2. 쉽..

24-25/React.js 1 2024. 10. 11. 10:00

스프링 빈과 의존관계 컴포넌트 스캔과 자동 의존관계 설정 📍  회원 컨트롤러에 의존관계 추가// controller/MemberController.java@Controllerpublic class MemberController { private final MemberService memberService; @Autowired public MemberController(MemberService memberService) { this.memberService = memberService; }} → @Autowired 어노테이션: 스프링이 연관된 객체를 스프링 컨테이너에서 찾아서 넣어줌→ DI (Dependency Injection): 의존성 주입. 객체 의존관계를 외부에서 넣어주는 것을 뜻함..

24-25/Spring 3 2024. 10. 11. 10:00

1. 이벤트 처리하기 이벤트 : 웹 페이지에서 일어나는 사용자의 행위이다. ex) 버튼 클릭, 페이지 스크롤, 새로고침 등 이벤트 핸들링 : 이벤트가 발생하면 특정 코드가 동작하도록 만드는 작업이다. ex) 버튼을 클릭했을 때 경고 대화상자를 브라우저에 표시 function Body() { function handleOnClick() { alert("버튼을 클릭하셨군요!"); } return ( 클릭하세요 ); } export default Body; 이벤트 핸들러 표기에서 HTML은 onclick이지만 리액트는 카멜 케이스 문법에 따라 onClick으로 표기한다. Props로 전달할 값을 지정할 때처럼 onClick={} 문법으로 이벤트 핸들러를 설정한다. 이벤트 핸들러를 설정할 때는 함수 호출의 결괏..

23-24/React.js 2 2023. 11. 10. 17:39

이벤트 처리하기 이벤트란 웹 페이지에서 일어나는 사용자의 행위로 버튼 클릭, 페이지 스크롤, 새로고침 등의 행위에 해당합니다. 이벤트 핸들링과 이벤트 핸들러 이벤트 핸들링 : 이벤트가 발생하면 특정 코드가 동작하도록 만드는 작업 이벤트 핸들러 : 이벤트를 처리하는 함수 ex. 리액트 사용하지 않고 HTML과 자바스크립트만으로 이벤트를 핸들링 Click Me! 함수 handleOnClick ⇒ 이벤트를 처리하는 함수로 이벤트 핸들러입니다. 리액트의 이벤트 핸들러 ex. Body 컴포넌트에 버튼 하나 만들고 버튼을 클릭하는 이벤트가 발생하면 실행되는 이벤트 핸들러를 만듭니다. function Body() { function handleOnClick() { alert("버튼을 클릭하셨군요!"); } // 함수..

23-24/React.js 1 2023. 11. 10. 10:00

1. 컴포넌트 리액트 앱 만들기 문서(Documents) 폴더 아래에 chapter5 폴더를 만든 다음 비주얼 스튜디오 코드에서 생성한 폴더를 연다. 단축키 +를 눌러 터미널을 열고, 다음 명령어로 새로운 리액트 앱을 만든다. npx create-react-app . 사용하지 않는 파일 삭제하기: 혼동을 피하고자 src 폴더에서 실습에 사용하지 않을 파일 일부를 제거한다. src/App.test.js src/logo.svg src/reportWebVitals.js src/setupTest.js 이 파일들은 Create React App이 자동으로 생성한 파일들로 테스트 코드를 작성하거나 리액트 앱의 성능을 살필 때 사용한다. 진행할 실습에서는 사용하지 않으므로 삭제한다. 사용하지 않을 코드 삭제하기: C..

23-24/React.js 2 2023. 11. 3. 17:35

컴포넌트 리액트는 페이지의 모든 요소를 컴포넌트 단위로 쪼개어 개발하고, 완성된 컴포넌트를 마치 레고 조립하듯이 하나로 합쳐 페이지를 구성합니다. 리액트의 핵심 개념인 컴포넌트에 대해 자세히 알아보겠습니다. 실습 환경 설정하기 앞에서 Create React App으로 리액트 앱을 생성했던 방법과 동일합니다. npx create-react-app . Documents 폴더 아래에 chapter5 폴더를 만든 다음, 해당 폴더 안에서 단축키 +를 눌러 터미널을 열고, 다음 명령어로 새로운 리액트 앱을 만듭니다. npm run start 터미널에서 npm run start 명령으로 리액트 앱을 시작합니다. 첫 컴포넌트 만들기 리액트 컴포넌트는 주로 자바스크립트의 클래스나 함수를 이용해 만듭니다. 클래스로 컴포..

23-24/React.js 1 2023. 11. 3. 10:00

컴포넌트 실습 환경 설정하기 본격적인 실습에 앞서 5장에서 사용할 새 리액트 앱을 만든다. 리액트 앱 만든다. npx create-react-app . 사용하지 않는 파일 삭제한다. → Create React App이 자동으로 생성한 파일들로 테스트 코드를 작성하거나 리액트 앱의 성능을 살필 때 사용한다. 진행할 실습에서는 사용하지 않으므로 삭제한다. src/App.test.js src/logo.svg src/reportWebVitals.js src/setupTest.js 사용하지 않을 코드를 삭제한다. index.js → 주석으로 표시된 코드는 모두 삭제한다. import React from 'react'; import ReactDOM from 'react-dom/client'; import './in..

23-24/React.js 3 2023. 11. 3. 10:00

Node.js의 개념 자바스크립트 런타임 : 자바스크립트를 실행하는, 자바스크립트의 구동 환경 (ex: 웹 브라우저) Node.js 등장 이후 어떤 환경에서도 자바스크립트 실행이 가능해졌다. Node.js로 자바스크립트 실행 1. 비주얼 스튜디오 코드에 sample.js 파일을 생성한다. 2. 코드 작성 후, Ctrl + S로 작성한 코드를 저장한다. 3. Ctrl + J로 비주얼 스튜디오 코드의 터미널을 오픈한다. 4. 경로가 해당 폴더에 있는 것을 확인한 후, 터미널에 명령어를 입력한다. node sample.js // js파일을 node.js로 실행하는 명령어 Node.js 패키지 만들기 패키지 : Node.js에서 여러 개의 자바스크립트 파일을 실행하고 관리하는 일종의 관리 단위 1. 패키지 단위..

23-24/React.js 3 2023. 10. 13. 12:09

1. 리액트의 특징 복잡한 웹 서비스를 쉽고 빠르게 개발할 수 있는 Node.js의 라이브러리이다. 프론트 엔드 기술 중 가장 많은 프로그래머가 사용하는 기술이다. 페이스북 개발 팀이 만들어낸 기술이다. [ 컴포넌트 기반 유연성 ] 새로운 기능 추가 및 업그레이드 시 코드 수정이 많이 필요하지 않다. 중복 코드: 동일한 내용을 여러 번 작성해야 하는 코드이다. 코드의 중복 -> 유연성을 크게 해친다. 리액트는 모듈화를 이용하여 중복 코드를 제거한다. 공통 사용되는 코드를 컴포넌트 단위의 모듈로 만든 후 호출로 사용한다. 업데이트: 웹 페이지의 정보를 교체하는 일이다. 문서 객체 모델을 조작하여 업데이트를 한다..

23-24/React.js 2 2023. 10. 13. 12:08

3장 1. Nods.js Node.js 등장 이전에는 웹 브라우저가 유일한 자바스크립트 런타임이었습니다. 따라서 자바스크립트는 웹 브라우저 외에서는 사용할 수 없었습니다. 그러나 독립적인 자바스크립트 런타임인 Node.js가 등장한 이후에는 어떤 환경에서도 자바스크립트를 실행할 수 있게 되었습니다. 결국 자바스크립트를 이용해 웹 서버나 모바일 애플리케이션을 개발하는 등 자바스크립트의 활용 범위가 넓어졌고, 이를 사용하는 개발자도 많이 늘어나게 되었습니다. 2. Nods.js 환경 설치 - 윈도우 사용자 계정 이름 바꾸기 PC의 사용자 계정명이 한글로 되어 있다면, Node.js 설치 및 향후 이용 과정에서 문제가 발생할 수 있습니다. 따라서 Node.js 설치 전에 윈도우의 사용자 계정을 영문명으로 변경..

23-24/React.js 1 2023. 10. 13. 10:00