전체 글
React : 다른 파일의 데이터 바인딩하기 (import, export)
코드가 길어지면 state나 데이터를 다른 파일로 분리해서 export/import 해오면 된다. export할 파일 let a = 10; export default a; import할 파일 import a from './data.js'; function App() { return ( {a} // 10 ) } export 여러개 하고 싶은 경우 let a = 10; let b = 100; export {a, b}; import {a, b} from './data.js'; function App() { return ( {a} // 10 {b} // 100 ) }
React : 프로젝트생성/bootstrap 연결/이미지경로 연결/public폴더
프로젝트 생성하기 원하는 폴더 shift+우클릭해서 powerShell 터미널 연 후에 아래 프로젝트 생성 명령어를 입력한다. npx create-react-app 폴더명 bootstrap 연결하기 npm install react-bootstrap bootstrap bootstrap css 연결하기 사이트 css 파일을 stylesheet link로 연결하거나 App.js에 import 'bootstrap/dist/css/bootstrap.min.css';한다. import {Button, Navbar, Container, Nav} from 'react-bootstrap' 원하는 컴포넌트들을 상단에 import 해줘야 한다. 이미지경로 연결하기 css파일로 연결 css파일에서 src폴더 안에 있는 사진을..
React : 옛날 class문법
class 문법으로 컴포넌트 만드는 법 class Modal2 extends React.Component { constructor(){ super() } render(){ return ( 컨텐츠.. ) } } class 컴포넌트명 extends React.Component를 만든 후 그 안에 constructor, super, render 세 가지 함수를 넣는다. return 안에 축약할 html을 적는다 class 컴포넌트에서 state 만드는 법 class Modal2 extends React.Component { constructor(){ super(); this.state = { name : 'noran', age : 20 } } render(){ return ( 내 이름은 {this.state...
문제해결 : hash값 받아서 scroll 조정하기
상황 A 페이지에서 a태그 여러개에 링크를 걸어서 누르면 B페이지의 각각 다른 위치로 연결되게 하려고 한다. (여기서 A페이지와 B페이지는 각기 다른 HTML이다.) A페이지 제목1 제목2 제목3 제목4 ... B페이지 컨텐츠 제목 1 컨텐츠 ... 컨텐츠 제목 2 컨텐츠 ... 컨텐츠 제목 3 컨텐츠 ... 컨텐츠 제목 4 컨텐츠 ... 컨텐츠 제목 5 컨텐츠 ... ... 문제 항상 상단에 css가 fixed로 고정되는 header가 있어서 링크로 이동했을 시 원하는 정확한 위치의 처음부터 보이지 않고 중간부터 보이는 현상이 있었다. 조건 A페이지에서 a태그를 누르면 B페이지의 해당 해시아이디를 가진 h4가 header 바로 아래 오도록 스크롤이 이동되어야 한다. 해결 B페이지에서 아래 코드를 실행시..
React : input에 글 쓰면 게시글 추가하기 (onChange, 매개변수, trim, splice)
input에 글 쓰면 게시글 추가하기 조건 input에 텍스트를 넣고 발행버튼을 클릭하면 게시글 목록 상단에 추가된다. 아무 텍스트도 입력하지 않았다면 발행을 막는다. 풀이 let [input, setInput] = useState(''); let handleSubmit = (e) => { e.preventDefault(); if (input.trim() !== ""){ let copyTitle = [...title]; copyTitle.unshift(input); setTitle(copyTitle); } else {alert(`글제목을 입력하세요.`)} } return ( { title.map(function(a,i){ return ( { title[i] } handlesetLike(i)}>👍 { li..
Git : 작업폴더에서 git 이용 시작하기 (add, commit)
1. 작업폴더에서 git 시작하기 작업폴더를 추가한 후 터미널에 입력한다. git init 2. 파일 현재 버전 생성(기록)하기 동일한 파일을 수정했을 경우에도 동일하게 두 줄 다 입력한다. git add main.html git commit -m '메모가 여기에 들어갑니다.' 작업폴더 ----- git add(staging한다) ----→ staging area ----- git commit ----→ repository(저장소) 2-1. 작업 폴더의 모든 파일 한번에 버전 기록하기 git add . 3. 상태창 열기 어떤 파일들이 staging되었고 수정되었는지 확인할 수 있다. git add status 3-1. commit 내역 조회 git log --all --oneline 출처 : 코딩애플 h..