혼자서 프로젝트를 하기 위해 프론트 부트스트랩에 대해서 스터디 중입니다. 틀린 부분이 있으면 답글 달아 주세요😊😊 👉 리액트 부트스트랩 (react-bootstrap) 이란 • 부트스트랩(bootstrap)은 오픈 소스 프론트엔드 프레임워크이다. • react에서 Bootstrap5을 사용 가능하도록 개발한 라이브러리입니다. • 웹사이트를 쉽게 만들 수 있도록 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 React에서 컴포넌트를 불러 사용가능합니다. • 프로젝트 내 따로 bootstrap.js 파일을 둘 필요가 없고 react-bootstrap 라이브러리만 설치하면 사용 가능합니다. 👉 Bootstrap 라이브러리 패키지 설치하기 •react Bootstrap 문서에..
코딩애플 - 리액트 기초 : 블로그 프로젝트 만들기 기반으로 스터디하며 작성하였습니다. 이전글 1. Modal 창으로 띄우는 상세 페이지 👉 Modal UI 디자인하기 위 예시처럼 return 내에서 연속된 태그들은 사용 불가능 ❌❌❌ 복잡하고 어려운 div 지옥😈 2. HTML을 한 단어로 줄여서 쓸 수 있는 방법 : 리액트의 Component 문법 👉 Component 만드는 법 1. 함수를 만들고 이름을 짓는다. 2. 축약을 원하는 HTML 넣는다. 3. 원하는 곳에서 사용 🚨 Component 유의사항 1. 이름은 대괄호로 시작한다. 2. return() 안에 있는 건 태그 하나로 묶어야함 - return() 내부를 묶을 때 의미없는 쓰기 싫으면 을 사용한다. 3. Component는 functi..
코딩애플 - 리액트 기초 : 블로그 프로젝트 만들기 기반으로 스터디하며 작성하였습니다. 이전글 1. 버튼을 누르면 첫째 제목이 '수원 카페 추천' 으로 변경하는 법 (하드코딩 버전) 🚨유의사항🚨 - 제목변경() 함수에 소괄호()를 넣을 경우, 버튼 클릭시가 아닌 바로 함수가 실행 된다. 2. 버튼을 누르면 첫째 제목이 '수원 카페 추천' 으로 변경하는 법 (복사본 만들기) 수정된 [데이터]를 만듭니다. 다만, 원본 state 수정은 불가❌❌ 👉 state 데이터 수정 테크닉 deep copy 해서 수정하는 방법 deep copy : 값 공유❌, 서로 독립적인 값을 가지는 복사 👉 Array, Object state 데이터 수정 방법 - 일단 변경함수를 써야한다. - 변경함수(대체할 데이터) - state..
코딩애플 - 리액트 기초 : 블로그 프로젝트 만들기 기반으로 스터디하며 작성하였습니다. 이전글 1. 터미널에 뜨는 warning 없애는 방법 - eslint가 잡아주는 문법 체크사항 - eslint란, 잘못된 코딩 관습을 바로 잡아주는 작업 warning을 보고 싶지 않다면, /* eslint-disable */ 작성하기 2. 좋아요 버튼을 만들어보자👍 onClick={클릭될 때 실행할 함수} onClick={()=>{실행할 내용}} 3. 따봉 누를 때마다 1 증가 시키기 따봉은 자주 변하는 숫자이므로 useState로 만들어야 한다. state는 그냥 변경이 안된다. 하단 예시로는 사용이 어렵다. 👉 state 변경 방법 따봉이랑 같이 만들었던 따봉변경() 함수 따봉변경(대체할 데이터) 따봉을 누르면 ..
코딩애플 - 리액트 기초 : 블로그 프로젝트 만들기 기반으로 스터디하며 작성하였습니다. 이전글 리액트에서 데이터는 1. 변수에 넣거나 2. state에 넣어서 사용하는 두가지 방법이 있다. 👉리액트의 데이터 저장공간 state 만드는 방법 1. { useState } 상단에 첨부 2. useState(데이터) 3. (참고) ES6 destructuring 문법 [10,100]; array 된 이 두개 데이터를 변수로 담고 싶으면? var [a,b] = [10, 100]; 이렇게 작성할 경우, 10을 a 라는 변수에 100을 b라는 변수에 담는 다는 뜻이다. ⭐⭐⭐ array, object 에 있던 자료를 변수에 쉽게 담고 싶을 때 사용 ⭐⭐⭐ 👆 [state 데이터, state 데이터 변경 함수] 👆 예..
코딩애플 - 리액트 기초 : 블로그 프로젝트 만들기 기반으로 스터디하며 작성하였습니다. 이전글 App.js 에서 필요없는 코드 기존 작성된 header 부분 삭제 왜 App.js가 메인 페이지냐? index.js가 App.js에 있는 HTML을 index.html로 넣어주기 때문에 App.js의 코드가 보여지는 것이다. 1. 블로그 navbar 만들기 React에서는 HTML처럼 생겼지만 똑같지는 않은 JSX 문법을 사용한다. 기존 으로 사용할 수 없고, 으로 사용해야 한다. 2. css 수정 3. 리액드에서 데이터 바인딩 하는 법 중괄호 { }에 변수명 또는 함수 등을 넣어서 데이터를 쉽게 넣을 수 있다. 1) 변수명 적용 2) 함수 적용 3) 이미지 적용 ⭐⭐⭐상상하는 모든 곳에 중괄호 {} 로 변수..
코딩애플 - 리액트 기초 : 블로그 프로젝트 만들기 기반으로 스터디하며 작성하였습니다. 1. Node.js 설치 https://nodejs.org/ko 사이트에서 가장 최신버전 설치 2. Visual Studio Code 설치 - 코드편집을 위한 에디터 https://visualstudio.microsoft.com/downloads/ 사이트에서 최신 무료버전 다운로드한다. 설치가 완료되면 실행한다. 3. 작업폴더 생성 프로젝트 저장을 원하는 곳에 폴더만 생성해준다. 4. Visual Studio Code 에디터에서 상단 File -> Open Folder -> 만든 작업 폴더 열어준다. 직접 작명한 작업폴더명이 뜨면 성공 5. 리액트 프로젝트 생성 Terminal -> New Terminal 누른다. O..
