프론트엔드

리액스 시작이자 구동실행이 잘 되고 나면 사진처럼 리액트를 시작하기 위한 파일들이 파일들이 자동으로 잘 생성되어 나온것을 확인 할 수 있다.이제 여기에 사진파일에 있는 yarn start 를 통해서 리액트로 만들어진 웹 앱이 자동으로 실행되는데 http://l

위 코드는 간단하게 설명하면 파일들의 상대경로로 작성되는 일반적인 경로 설정을src 파일 하위의 모든 파일들에 대해서는 절대경로로 작성을 하겠다라고 명시하는 파일이다.그래서 실제로 파일 생성 위치는 src 폴더와 같은 정확히 말하면 root 의 위치에 존재해야하며,파일

리액트(React)는 페이스북에서 개발한 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다. 리액트는 단일 페이지 애플리케이션(SPA)을 쉽게 개발할 수 있도록 도와주며, \[컴포넌트] 기반 아키텍처를 기반으로 하고 있습니다.여러 가지 특징을

src 폴더 내부에 있는 app.js 파일이 실제로 가장 많이 사용될 파일이라고 생각하면 되겟다.초기 파일 내부의 코드는 저렇게 생겼으며, function App() 내부에서 return 을 기준으로 그 위쪽은 자바스크립트를 사용할 수 있는 영역그 아래쪽은 JSX 를

State란 무엇인가? 💡 State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. 왜 바뀌어야 할까요? 목적은 하나에요. 바로 UI(엘리먼트)로의 반영을 위해서죠. 우리가 앞에서 name이라는 정보를 const name = “홍부인”; 이라고 만들었는데,

업로드중.. 완성 전체코드 함수 미리 만들어놓기 return 을 기준으로 위쪽에 미리 사용할 함수들을 만들어놓습니다 useState 를 사용할것이기 때문에 id 와 password는 useState 를 사용해서 미리 만들고, 값을 입력할때마다 setState를

(1) 불변성이란? 불변성이란 메모리에 있는 값을 변경할 수 없는 것을 말합니다. 그래서 자바스크립트의 데이터 형태중에 원시 데이터 (숫자, 문자, 불리언) 들에게는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성이 없습니다.만약 우리가 let n

버튼을 눌러서 숫자가 변하는 카운팅 만들어보기

제목 그대로 기존에 있던 리스트에서 새로운 항목을 추가한다고 했을때, 어떻게 추가해야하는지에 대한 예시코드입니다.

첫번째 삭제 방법인 filter를 사용해서 스테이트를 변경형하는 방법입니다.로직은 순서는 다음과 같습니다.삭제버튼을 클릭하면 clickDeleteButtonHandler 함수를 실행하도록설정이때 어떤것을 삭제해야될지를 명시해야되기 때문에 item.id 값을 미리 전달해

기존에 사용하던 부분에서 자주 사용될 것 같은 코드를 컴포넌트 단위로 나눠놓은 과정입니다.전체코드에서 변경된부분은 App 컴포넌의 return 부분부터 참고하면 되겠습니다.1.app-style 하단 부분의 return 부분의 있던 <div> 부분을 따로 복사해둡니