감자 성장일기

- Summary - 리액트 프로젝트 설치 / 레이아웃 JSX 문법 / state / 버튼 기능 개발 / array, object state 변경 강의를 들으며 나중에 참고할 부분 따로 정리 보기 좋게 정리한다기보다 낙서하듯이 정리할 예정.. 1. 리액트 프로젝트 설치 npx create-react-app 이거 쓰려면 npm 필요한데 node.js 설치하면 따라 옴 2. vs코드에서 폴더 열기 node_modules : 라이브러리 모아둠 public : static 파일 모아둠 src : 소스코드 모아둠 - 보통 App.js에서 메인페이지 구성 package.json : 프로젝트 정보 모아둠 3. 리액트에서 레이아웃 만들 때 쓰는 JSX 문법 3개 원래 자바스크립트로 변수를 사용해 값을 넣어주려면 복잡했..

Web/FrontEnd 2023. 3. 26. 21:17

#️⃣ 라우터 기본 라우팅 : 웹페이지 간 이동방법. 싱글 페이지 애플리케이션에서 사용. 라우팅을 사용하면 화면 간 전환이 매끄러울 뿐 아니라 애플리케이션의 사용자 경험을 향상 시킨다. 페이지가 바뀔 때 나타나는 깜빡거림이 사라지기 때문이다. 뷰, 리액트, 앵귤러 모두 라우팅을 이용하여 화면을 전환하고 있다. 뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원한다. 뷰 라우터를 사용하면 자유로운 페이지 이동이 가능해진다. Vue 라우터 예제 메인 컴포넌트로 이동 로그인 컴포넌트로 이동 화면상에서 태그로 변환되어 표시. 각 버튼을 클릭하면 to=" "에 정의된 텍스트 값이 브라우저 URL 끝에 추가됨 갱신된 URL에 해당하는 화면을 보여주는 영역...

Web/FrontEnd 2022. 11. 17. 08:12

컴포넌트는 각각 고유한 유효 범위를 가지고 있으므로 직접 다른 컴포넌트의 값을 참조할 수 없다. 따라서 뷰에서 정의한 방법을 따라야 하는데, 가장 기본적인 데이터 전달 방법은 상위-하위 컴포넌트 간의 데이터 전달 방법이다. 😊 1. 상위 컴포넌트 -> 하위 컴포넌트 props 속성 : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성 예제 코드에서 child-component를 전역으로 등록한 것 외에 딱히 상위 컴포넌트를 지정하지 않았으나 마치 컴포넌트 안에 상위 컴포넌트가 존재하는 것처럼 하위 컴포넌트로 props를 내려보냈다. 컴포넌트를 등록함과 동시에 뷰 인스턴스자체가 상위 컴포넌트가 되기 때문이다. 😊😊 2. 하위 컴포넌트 -> 상위 컴포넌트 하위 컴포넌트에서 상위 컴포넌트로의..

Web/FrontEnd 2022. 11. 16. 08:50

컴포넌트 : 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역) 😀 1. 전역 컴포넌트 등록하기 컴포넌트 등록 😀😀 2. 지역 컴포넌트 등록하기 컴포넌트 등록 😀😀😀 3. 인스턴스 유효범위와 지역 컴포넌트, 전역 컴포넌트 간 관계 확인하기 첫번째 인스턴스 영역 두번째 인스턴스 영역 첫번째 영역에서는 전역, 지역 컴포넌트가 모두 정상적으로 나타났지만 구분선 밑 두번째 인스턴스 영역에는 전역 컴포넌트만 나타나고 지역 컴포넌트는 나타나지 않았다. 전역 컴포넌트와 지역 컴포넌트의 유효범위가 다르기 때문이다. 전역 컴포넌트는 인스턴스를 생성할 때마다 등록할 필요 없이 한 번 등록하면 어느 인스턴스에서든지 사용할 수 있다. 반대로 지역 컴포넌트는 새 인스턴스를 생성할 때마다 등록해줘야 한다.

Web/FrontEnd 2022. 11. 14. 22:30