DAY 76 - React HOMEWORK (2024.10.24)
·
REACT
HOMEWORK                      TodosTodoForm                             TodoList           상태변수 : text                                              TodoItem포커스                                                            삭제 버튼 : onDelete추가버튼 :  submitseq를 잡아서 같은 공부하기가 두 개 들어간 상태에서 하나 지우면 하나만 지워지게 해야한다. cssTodoForm.module.css.TodoForm { text-align: center; padding: 40px 0; background: be..
DAY 76 - React - Hook: useEffect / 컴포넌트별 CSS (2024.10.24)
·
REACT
SPA(Single Page Application)컴포넌트 - App.js (메인화면 단을 가리키는 함수 하나하나를) -- 메인함수 (화면 꾸며주는 역할)TestMain.jsx TestInput.jsx 전부 컴포넌트 -- 독립적으로 잡혀있기 때문에 재사용 목적으로 언제든지 다시 부를 수 있다. 클래스 컴포넌트는 사라짐 / 함수형 컴포넌트만 보면 된다. JSX 규칙을 따라간다. 자바스크립트와 XML이 섞임return 안에 있는 구역이 전부 jsx 구역예전에는 바벨을 깔아서 직접 교환하라 했지만 지금은 노드가 알아서 해준다. Props -- 데이터 전달 useState -- 현재 갖고 있는 값을 바꾸고싶다.useRef -- 현재 갖고있는 값 바꾸고싶지 않다. 이제 숙제 검사 !! 어제 블로그로 가자.Test..
DAY 75 - React / HOMEWORK (2024.10.23)
·
REACT
로그인창 컴포넌트 / 검색창 컴포넌트 이런것들을 컴포넌트라 생각하면 된다.우린 App이라는 함수 컴포넌트를 사용하는 것이다. App.js에서 export하면 main.jsx가 받고 id가 root인 애한테 넘겨주는데 넘겨주는 곳이 index.html이다. 이제 여기서 화면에 뿌려주는 것이다. App.jsx에서 Test06.jsx가 꾸며주는 거고 그걸 main.jsx가 받아서 index.html에 뿌려주는거index.html이 렌더링 된다는 것이다. 빨간 네모가 자바스크립트 영역밑에 노란색 영역이 jsx영역 - 이 영역을 자바스크립트 코드로 바꿔주는게 바벨의 역할이다. jsx가 뭐인가? javaScript와 xml의 결합된 것이다.return 문에 사용하는 문법 !babel과 같은 변환기를 통해 JavaS..
DAY 74 - React (2024.10.22)
·
REACT
React리액트란? 리액트 공식 홈페이지: https://react.dev/ ReactReact is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizatireact.dev • 사용자 인터페이스(UI)를 구축하기 위해 메타(페이스북)에서 개발한 Javascript 기반의 라이브러리 • SPA(Single Page Appli..
DAY 74 - ES6 (2024.10.22)
·
REACT
09_비구조할당.html비구조 할당(구조 분해) 예) const object = {a:1, b:2, c:3}     const {a, b, c} = object 낱개로 받음 object.a object.b이렇게 쓸 수 있다. 배열 형태로도 쓸 수 있다 !! 알아두기 console.log(dog.name, dog.age) console.log(dog['name'], dog['age'])비구조 할당 //비구조 할당 const {name, age} = dog; console.log(name, age)3가지 방법 다 쓴 경우 const data = { name2: '홍길동', kor: 95, ..
DAY 73 - ES6 (2024.10.21)
·
REACT
일단 D드라이브의 React lib에 3개 다 다운로드 하기 !!https://code.visualstudio.com/ Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.code.visualstudio.com https://nodejs.org/en Node.js — Run JavaScript E..
DAY 69 - NCP 서버에 프로젝트 올리기 (2024.10.15)
·
NCP
보호되어 있는 글입니다.
DAY 68 - 스프링 프레임워크 HOMEWORK - NCP 파일 삭제 (2024.10.14)
·
Spring
파일삭제uploadList.jsp체크박스와 삭제버튼 만들기 !어떤걸 체크했는지 확인하기 위해 seq를 가져가야지 어떤 파일인지 확인 후 지울 수 있다.  번호 이미지 상품명 ${userUploadDTO.seq} ..
summ.n
이것저것