import 불러오기import App from './App'; 여기에import from ‘./App’; 인데 이름의 경우는 임의로 지정할 수 있는데, 변수랑 겹치지 않는 이름으로 하는 것이 좋다.만약에 App안에 App이라는 변수가 선언이 되어있다면, 변수가 2개가 되기 때문에 충돌이 날 수도 있으므로, 겹치지 않는 이름으로 지정한다. 변수 importimport App, { message } from ‘./App’변수명은 변경할 수 없다. 파일에서 불러오기라서 변경이 불가능import App ← 이 부분은 변경이 가능 export 내보내기기본 내보내기는 기본 구문으로 변수 한개만 내보내기가 가능하다.export default App 만약 변수를 내보내기 한다면,첫 번째 방법const message..

// 1) Import the React and ReactDOM librariesimport React from 'react';import ReactDOM from 'react-dom/client';// 2) Get a reference to the div with ID rootconst el = document.getElementById('root');// 3) Tell React to take control of that elementconst root = ReactDOM.createRoot(el);// 4) Create a componentfunction App() { return ;}// 5) Show the component on the screenroot.render(); 위 기본적인 틀이다..

1. 값을 바꾸면 자동 재 렌더링function Counter() { // let count = 0; // 여기 변수는 마음대로 작성이 가능하다. 하지만 그 기능에 맞게 작성하는 것이 좋다. const [count, setCount] = Index.useState(10); // const로 바꿔야 하고, 값만 바꾸는 것이 아닌 메서드 통해 변경을 해야한다. const handleDown = () => { setCount(count - 1); }; const handleUp = () => { setCount(count + 1); }; const handleReset = event => { ..

현재 실습은 Counter 라고, +를 누르면 +1가 되고, -를 -1이 되며 0을 누르면 0으로 초기화 되는 간단한 실습이다.1. HTML + JS이는 HTML 과 JS를 통해 구현한 방법이다. 아마 내가 자바스크립트를 어떤 것을 만든다면 이렇게 구성을 했을 것이다. Counter - HTML + JS 파일 경로: - 0 + 0  이렇게 body 부분은 이러한 형식으로 구현을 했을 것이다. 각 버튼에 이벤트를 걸고, 그것에 맞춰서 함수를 만들어 구현 했다.아래는 자바스크립트 부분이다. 중간에 filepath의 경우는 파일 경로를 동적으로 출력해주는 것이다. 이제 화면 갱신하는 부븐에서는 id가 counter인 요소..

이번 리액트 수업하기 전, 간단하게 자바스크립트로 Todo List를 실습해보는 것이다.나는 사실 자바스크립트로는 로그인, 회원가입을 제외한 기능을 구현해본 적이 없다. 즉 게시물이라던지 화면에서 삭제하고, 그런걸 제대로 해본 적이 없다. 그래서 이번 실습을 할 때, 코드는 이해가 되었으나 뭔가 바로 구현을 하기에는 좀 어려움이 있었다. 일단 순서대로 진행을 해보겠다. 아래 기본적인 화면이다. 할일을 적는 input과, 추가 버튼, 그리고 리스트와 삭제 버튼이 있다. 차근차근 진행해보겠다.일단 html 코드이다. Todo List - 목록 조회 :) 파일 경로: 쇼핑 목록 ..

1. 프로젝트 소개나이키 공식 홈페이지의 클론 코딩 2. 프로젝트 설명프로젝트 기간2024년 10월 14일 ~ 2024년 11월 1일 사용 기술Programming LanguageJavaScriptStylingCSSFormattingESLint, PrettierVersion ControlGit, GithubDesignFigmaCommunicationNotion, Discord3. 프로젝트에서 맡은 역할3-1. 로그인나이키는 로그인 시 위와 같이 이메일 입력이 나오는데, 이메일이 기존에 존재하다면 바로 패스워드 입력 페이지로그게 아니라면 체크 약관 페이지로 넘어간다. 3-1-1. 이메일이 존재하지 않을 때  이렇게 이메일이 존재하지 않는다면 약관 페이지로 가는데, 위와 같이 체크에 대한 유효성도 추가해놨다..