< devHyebin/>

협업하기 git clone "주소" 브랜치 생성 + 이동 git checkout -b git switch -c feat/기능브랜치명 git add 해당파일 git commit -m "커밋메세지" git push -u origin 브랜치명 pr 작성후 원격 브랜치 삭제 클릭 로컬로 돌아와 브랜치 삭제 git branch -d 브랜치명 ⭐️ 내 브랜치에서 최신버전 받아오기 : 내 브랜치 작업 중 머지된 코드를 pull 받고 싶은 경우 git branch -u origin/develop 기능브랜치명 설정 해두기 ‘나는 이미 작업중이었어’ 를 잠시 stash로 임시저장 git stash 신규파일이 있는 경우 : git stash --include-untracked git pull 작업하던거 다시 가져와야 함 g..

React Router v6은 2021년 11월에 나왔습니다. (주의: 현업에서는 새로운 버전이 나왔다고 해서 바로 적용하지는 않습니다.) 리액트에서 갑자기 라우터는 뭐고 왜 배워야 할까? URL에 따라서 그에 상응하는 화면을 전송해주는 것을 Routing이라고 한다. 리액트는 SPA 방식에서는 오직 하나의 페이지만 가지고 있기 때문에 MPA 방식으로의 페이지 이동이 불가능하다. 왜냐하면, 페이지 (html)가 아닌 데이터를 가지는 JS 파일로 구성이 되어 있기 때문이다. ​React-Router는 페이지를 새로 불러오지 않는 상황에서 각각의 선택에 따라서 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리이다. 1. 터미널 열어서 npm install react-rout..

ES6부터 Map, Set 자료형도 추가되었다. 아직 자주 쓰이지는 않지만 미래에 우리를 생각하며 배워보자! Map : Object 자료형과 똑같이 key, value 형태로 자료를 저장할 수 있는 자료형이다. ► Map에 값을 넣는 방법 1. set 이라는 키워드를 사용 2. [ ] 대괄호로 자료를 한 번에 넣기 let m = new Map(); m.set('하나', '1'); m.set(1, '하나'); m.set(true, 1); m.set(false, 0); //-------------------- let person = new Map(); let person = new Map([ ['age', 20], ['name', 'Kim'] ]); 👉 출력해보면 기존 object와는 다르다.!! 1. 화살..

useEffect의 Clean up? : useEffect 안에서 리턴할 수 있는 함수로, 컴포넌트가 언마운트 되기 전에 코드를 청소하는 것이다. # 실습: 계속 돌아가는 타이머 멈추기 App.jsx import Timer from "./components/Timer"; import React, { useState } from "react"; function App() { const [showTimer, setShowTimer] = useState(false); return ( // 트루 일때만 보이게 하기 {showTimer && } setShowTimer(!showTimer)}>Toogle Timer ); } export default App; src>components>Timer.js import ..

컴포넌트도 인생이 있다. 컴포넌트 인생 중간중간에 간섭해보자. 1. 생성이 될 수도 있고 ( mount) 2. 재 렌더링이 될 수도 있고 (update) 3. 삭제가 될 수도 있다.( unmount) 이렇게 우리 코드에 갈고리를 달아서 넣어주면 된다. => 페이지 장착시, 업데이트 시, 제거 시 코드 실행 가능 갈고리는 영어로 hook, 그래서 저걸 Lifecycle hook이라고 부른다. useEffect 이란? : 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook useEffect을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있다. (함수의 핵심기능 외에 쓸데없는 기능들을 프로그래밍 용어로 side effect) 🌟 한마디로, 컴포넌트의 핵심 기능은 html 렌..

리액트에서의 Elements? 리액트 앱을 구성하는 가장 작은 블록 화면에 표시할 내용을 기술 자바스크립트의 객체형태로 존재 ► 더 널리 알려진 개념인 “컴포넌트”와 엘리먼트를 혼동할 수 있지만 이런 구조로 되어있다. DOM에 엘리먼트 렌더링하기 HTML 파일 어딘가에 다음과 같은 가 있다고 생각 해보자. 루트 노드에 엘리먼트 렌더링 하기 const element = Hello, world; ReactDOM.render(element, document.getElementById('root')); 위 코드를 실행하면 화면에 “Hello, world”가 보인다! 이때 모든 엘리먼트는 React DOM이라는 곳에서 관리하고, 루트(root)DOM 노드라고 부른다. => React 엘리먼트 -> 루트 DOM 노..

먼저 이 코드를 보자 안에 글제목 state 가 필요한데? 하지만 제대로 실행되지 않는다. '글제목'이라는 변수가 define 되지 않았다고 에러뜸.. function App() { let [글제목, 제목변경] = useState(["남자코트 추천", "강남우동 맛집", "파이썬독학",]); return( (생략) ) } function Modal() { return ( {글제목[0]} 날짜 상세내용 ); } 그 이유는? 당연히 글제목이라는 state 변수는 function App()에 있지 function Modal()에 없으니까! 그럼 어떻게 하면 저 위에있는 state을 쓸 수 있을까!!? 정답: props props 란? - 프로퍼티, props(properties의 줄임말) - 상위 컴포넌트가 ..

1. html css로 미리 UI 디자인을 다 해놓고 2. UI의 현재 상태를 state로 저장해두고 3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성 # 제목을 클릭시 모달창이 스위치처럼 만들기 function App (){ let [modal, setModal] = useState(false); return ( (생략 : 모달창 ) { setModal(!modal) } }> {글제목[0]} { modal == true ? : null } ) } 👉 위에 있는 step대로 하면 된다. 1. 모달창 디자인은 했다 치고 (css파일로) 2. UI의 현재 상태를 state로 저장해두는 것. let [modal, setModal] = useState(fals..

component 란? 이렇게 복잡한 html을 한 단어로 치환할 수 있는게 컴포넌트이다. 👋 어떤걸 보통 컴포넌트로 만들까요 ? 반복적인 html 축약할때 자주변경되는 ui 들 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용 또는 다른 팀원과 협업할 때 웹페이지를 Component 단위로 나눠서 작업을 분배하기도 한다. 컴포넌트는 그냥 함수 문법이랑 똑같아서 용도도 똑같다고 보면 된다. 하지만 아무거나 컴포넌트를 만들면 안된다. 컴포넌트를 만드는 것은 항상 책임이 따른다 1. function 만들기 function 만들때 다른 function 바깥에 만들기 영어 대문자로 보통 작명 arrow function 써도 된다. function Modal(){ retur..

우리는 state 형태로 array, object 올 수 있다는 것을 알고 있다 Array,object 경우에는 원본은 보존하는게 좋다. 그리고 카피본을 만들어서 수정하는 것. 이게 무슨 말일까? 버튼을 클릭 하면 첫번째 제목을 바꿔주자! 🚫 잘못된 예시 function App(){ let [글제목, 제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ); return ( { let copy = [글제목]; copy[0] = "여자코트 추천"; 제목변경(copy); }} > 제목바꿔줘제발 ) } 👀 저 copy 변수는 뭐지? copy 변수에 기존 array를 복사 해놓고, 기존 값을 보존하는 것이다. 이렇게 Array,object 경우에는 원본은 보존하는게 좋다. ..