전체 글

오늘은 TodoList를 만들어 볼 것이다. 내가 할일을 작성하고 추가하면, 아래와 같이 체크박스로 나타나는 형태로 만들어주고 완료를 했을때 오른쪽과 같은 화면을 만들어보자 📘 APP.js 1. components 폴더의 components/R05_todolist1.js를 사용 import TodoList1 from './components/R05_todolist1'; 2. TodoList1으로 불러오기 function App() { return ( {/* R05_todoList1 */} ); } export default App; 📘 R05_todolist1.js const TodeList1 = () => { // 할일을 저장할 변수 // -> 상태가 변하면 컴포넌트 (TodeList1)을 리랜더링 c..

🤔💬 props - 금수저 부모 - 부모가 자식한테 값을 준다 ! 쉽게 생각하고 싶어 '금수저부모'라고 생각하기로 했다. 🤔💬 state lifting up - 자수성가 ❗ 자식이 부모한테 값을 전달 할 수 있도록 하는 것이다 ! (자식 값이 변함으로서 부모가 값이 바뀐다!) React에서는 상위 컴포넌트가 하위 컴포넌트의 상태를 직접 변경할 수 없습니다. 따라서 React에서는 하위 컴포넌트에서 발생한 이벤트를 상위 컴포넌트에서 처리하도록 하는 상태 끌어올리기 패턴을 사용합니다. prop와 다르게 자식이 부모한테 값을 주니 ! '자수성가' 라고 생각하기로 했다. 📘 APP.js 1. 서버 연결을 위해 APP.js에 import 해주고, import 해줄때 별칭을 넣어준다. /* import logo f..

❗ 컴포넌트 이름은 대문자 ! ❗ 리액트는 컴포넌트 상태가 변할때 마다 리렌더링 수행! 🤔💬 Props ❗ Props 부모 -> 자식 데이터 전달 가능! (역방향 불가!) Props는 React 컴포넌트에게 데이터를 전달하는 방법 중 하나입니다. Props는 부모 컴포넌트로부터 자식 컴포넌트로 전달되며, 컴포넌트 내부에서 변경할 수 없 는 읽기 전용 데이터입니다. Props를 사용하면 컴포넌트 간의 데이터 전달이 간단하고 유지보수하기 쉬워집니다. 또한 컴포넌트의 재사용성을 높일 수 있습니다. Props가 뭔지 알아봤으니 직접 실습을 해보자 ! ◾ 실습하기전 파일 만들기 📚 VS code 📘 APP.js /* import logo from './logo.svg'; */ import './App.css'; ..

🤔 클래스형 컴포넌트 js 폴더를 만들때에 대문자로 작성해야한다 (Exam1.js) Component 상속 받기 render () 함수 작성하기 (필수) 만든 class를 export deault 지정하기 🤔 함수형 컴포넌트 js 폴더를 만들때에 대문자로 작성해야한다 (Exam2.js) 함수 설정하기 return 구문에 출력하고자 하는 html 코드 작성 만든 함수를 export default 지정하기 ➰ 클래스형 컴포넌트 만들기 📘 Exam1.js ◾ js 폴더를 만들기 ◾ Component 상속 받기 ◾ render () 함수 작성하기 ( 필수 ) ◾ 만든 class를 export deault 지정 📘 App.js ◾ components 폴더의 Exam1.js를 가져와서 사용을 이름 지정 후 작성해주..

📘 React : 자바스크립트 프레임 워크 (틀에 맞춰 일하는 것) 📘 React 간단한 특징 리액트의 컴포넌트는 딱 ! 하나의 요소만을 반환할 수 있다. 여러 요소를 반환하고 싶다면 부모 요소로 묶어준다! fragment() : 반환 요소를 감쌀 때 사용, 해석 X 📘 React Component : React 컴포넌트는 React 애플리케이션의 구성 요소이며 컴포넌트는 재사용 가능하도록 만들어져 있으며, UI를 작은 조각으로 나누어 관리할 수 있습니다. React 컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트로 나뉜다 (요즘 트랜드는 함수형 컴포넌트) [ React ] React 클래스형 컴포넌트 알아보기 ② jnaa.tistory.com 💻 React 설치하기 💻 ❗ 설정하기 전 VS가 열려있으면 ..

이전시간까지 채팅에 필요한 화면 및 이론을 알아봤다. 이제 본격적으로 알아보자! 이론 및 설정 하는 방법은 아래 포스팅을 먼저 보고 오길 바란다. [ Spring ] 채팅 구현하기 - 이론편 ① 💬 구현 하기 전에 오늘 알아 할 내용 JSON / SET 💬 파이널 프로젝트에서 채팅구현을 하기로 해서 찾아보고 있던 중 수업시간에 운 좋게 배우게 되었다. 우선 채팅 구현을 위해서는 웹소켓이라는 jnaa.tistory.com [ Spring ] 채팅 구현하기 - 실전편 ② 이전 시간에 채팅 구현하기 앞서 어떻게 세팅해야할지 어떤 식으로 돌아가는지 콘솔을 통해 알아보았다. 오늘은 직접 채팅을 구현해보자! 🔮 출력 화면 미리보기 체팅 기능을 실행하기 위한 DB jnaa.tistory.com 💻 코드로만 보기 📚 ..

이전 시간에 채팅 구현하기 앞서 어떻게 세팅해야할지 어떤 식으로 돌아가는지 콘솔을 통해 알아보았다. 채팅을 구현하기 전 필요한 내용을 모두 세팅을 하고 진행하는데 보기가 좋을 것 같아서 이번시간은 DB및 화면에 대해서 먼저 구현해보자 🔮 구현 화면 미리보기 체팅 기능을 실행하기 위한 DB 테이블을 만들어준다. CREATE TABLE "CHATTING_ROOM" ( "CHATTING_NO" NUMBER NOT NULL, "CH_CREATE_DATE" DATE DEFAULT SYSDATE NOT NULL, "OPEN_MEMBER" NUMBER NOT NULL, "PARTICIPANT" NUMBER NOT NULL ); COMMENT ON COLUMN "CHATTING_ROOM"."CHATTING_NO" IS..

💬 구현 하기 전에 오늘 알아 할 내용 JSON / SET 💬 파이널 프로젝트에서 채팅구현을 하기로 해서 찾아보고 있던 중 수업시간에 운 좋게 배우게 되었다. 우선 채팅 구현을 위해서는 웹소켓이라는 것을 알아야 한다. 🤔💭[WebSocket] 웹소켓이란 ? * 소켓 ( 양 끝단 ! 연결 시켜주는 것 ) : 클라이언트와 서버를 연결시켜 주는 것으로 서버는 모든 클라이언트의 정보를 가지고 있다. - 브라우저와 웹서버간의 전이중통신을 지원하는 프로토콜이다 - HTML5버전부터 지원하는 기능이다. - 자바 톰캣7버전부터 지원했으나 8버전부터 본격적으로 지원한다. - spring4부터 웹소켓을 지원한다. (전이중 통신(Full Duplex): 두 대의 단말기가 데이터를 송수신하기 위해 동시에 각각 독립된 회선을 ..