728x90 분류 전체보기748 [TIL] 6일차 어제 최종적으로 프로젝트 제출하고 오늘은 마무리 멘토링 전에 기능에 주석 달고, README 작성했다. 6일차 시간표 오전 9:00 ~ 오후 12:00 회의+ 기능에 주석 달기 + README 작성 오후 12:00 ~ 오후 1:00 점심시간 오후 1:00 ~ 오후 3:00 팀별 회고 멘토링 오후 3:00 ~ 주특기 최종 선택 설문 오후 3:00 ~오후 5:00 주특기 Open QnA 세션 오후 5:00 ~ 오후 9:00 주특기 선택 1:1 매니저 면담 플로우 차트 팀별 회고 멘토링 시간에 답변으로 들었던 것 중에서 프로젝트를 진행 할 때 어떤 순서, 방향으로 기능을 짜면 좋냐는 질문에 플로우 차트를 사용해서 기능을 구상 해보면 좋다는 말씀을 해주셨다. 이 사이드에 플로우 차트에 대한 자세한 설명이 나와 .. 2021. 11. 6. 6일차 - 주석 추가, README 작성 5일차는 개발일지에 같이 작성함. 오늘 할 일 README 작성 연습 2021. 11. 6. [React] Component로 HTML 깔끔하게 줄이기 페이지 구분은 라우터를 써야 하지만 그건 나중에 배우겠다. 이번에는 Modal 창으로 띄우는 상세페이지를 만든다. return 안에는 여러개의 div 태그를 연달아 사용 할 수 없다. 복잡하고 어려운 div 지옥 -> HTML을 줄여서 쓸 수 있는 방법(HTML을 한 단어로 줄여서 쓸 수 있는 방법) : 리액트의 Component 문법을 사용한다. Component 만드는 법 1) 함수 만들고 이름 짓고 2) 축약을 원하는 HTML에 넣고 3) 원하는 곳에서 Component 유의사항 1) 이름은 대문자 2) return() 안에 있는 건 태그 하나로 묶어야 함 추가사항 1) return() 내부에 묶을 때 의미없는 쓰기 싫으면 , 를 사용하면 됨 2) Component를 만들면 관리가 편해짐 어떤 걸 .. 2021. 11. 5. [React] state 변경하는 법 (setState는 너무 옛날꺼야!) 리액트의 대원칙 : immutable data(직접 수정 하지 말고 복사해서 사용해라) state 데이터 수정 테크닉 수정된[데이터]를 만든다. 근데 state 복사본(deep copy)으로 해서 수정한다. (그냥 let newArray = 글제목은 값을 복사하는 게 아니라 공유하는 것이다.) deep coppy : 값 공유 X / 서로 독립적인 값을 가지는 복사 Array, Object state 데이터 수정 방법 - 일단 변경 함수를 써야 한다. - 변경함수(대체할 데이터) - state는 직접 건드리지 마라(재렌더링이 안될지도 모름) - deep copy해서 그걸 건드려라 Q. 버튼을 누르면 제목들을 글자순 정렬? 1) 일단 기본 state 카피본을 만든다. 2) 카피본 수정사항을 반영한다. 3) .. 2021. 11. 5. [React] 버튼에 이벤트 리스너(핸들러) 장착하는 방법 리액트 이벤트 리스너(핸들러) = 이벤트를 다루는 법 1. onClick = { 클릭 될 때 실행할 함수 } 2. onClick = { () => {실행할 내용} } Q. 따봉을 누를 때마다 콘솔창에 1이 뜨게 하려면? {글제목[0]} { console.log(1) } }>👍0 {date} Q. 따봉을 누를 때마다 1 증가 시키기 1) state를 변경하는 방법은 따로 존재한다. -> state 변경 함수를 사용하면 된다. -> 변경 함수(대체 할 데이터) {글제목[0]} { 따봉변경(따봉+1) } }>👍{ 따봉 } {/* onClick 함수를 사용해서 눌렀을 때 실행될 함수를 설정 해준다. 이때 state 함수를 사용해서 따봉을 불러오기 때문에 값을 변경 할 때는 따봉변경 함수를 사용해서 인자에 변경 .. 2021. 11. 5. [React] state(useState) 사용법 데이터는 1. 변수에 넣거나 2. state에 넣거나 두가지 방법이 있다. 리액트의 데이터 저장공간 state 만드는 법 1) { useState } 상단에 첨부 or useState 키워드 작성 시 자동으로 생성됨 2. useSate(데이터) -> [state 데이터, state 데이터 변경 함수] let [글제목, 글제목변경] = useState('남자 코트 추천'); -> destructuring 문법이다. -> 각각의 변수에 각각의 값이 들어간다. -> array, object에 있던 자료를 변수에 쉽게 담고 싶을 때 사용한다. state란? 1. 변수 대신 쓰는 데이터 저장 공간 2. useState()를 이용해 만들어야 함 3. 문자, 숫자, array, object 다 저장 가능 그렇다면 그.. 2021. 11. 5. [React] JSX 사용법 JSX라는 문법은 HTML처럼 생겼는데, HTML의 대용이라고 보면 된다 1. 태그에 class 주고 싶을 때는 사용이 불가능하다. -> 2. 리액트가 쌩HTML 코딩보다 편리한 이유 - 리액트는 데이터 바인딩을 쉽게 할 수 있다. - {변수명} or {함수명} or src, id, href 등의 속성에도 {변수명, 함수 등} (상상하는 모든 곳에 {}로 변수 집어넣기가 가능하다. (데이터 바인딩 : 데이터를 받아와서 자바스크립트로 저장해서 HTML에 박아 넣어서 출력하는 것) (데이터 바인딩이 쉬워지는 React, Vue, Angular 등이 있다.) 3. JSX에서 style 속성 집어 넣을 때 : 그냥 쓰면 안되고 object 형식으로 넣어야 한다. - style = { object 자료형으로 만든.. 2021. 11. 5. [React] 리액트 설치와 세팅 리액트 설치 / 세팅 - npx : 라이브러리 설치 도와주는 명령어(nodejs 설치가 잘 되어 있어야 이용 가능) - create-react-app : 리액트 셋팅 다 된 boilerplate 만들기 쉽게 도와주는 라이브러리 - blog : 프로젝트 이름 설치 후 src -> App.js가 main 페이지이다. 코드 짠 거 미리보기 띄우기 terminer -> 프로젝트명 확인 -> npm start 에러 발생 : ERR_OSSL_EVP_UNSUPPORTED라는 에러가 발생해서 찾아보니 node.js를 최신 버전으로 깔 지 말고 왼쪽에 있는 걸로 깔아야 미리보기가 띄워진다고 한다. 상세 설명 - node.js를 설치하는 이유는? : create-react-app 라이브러리 때문에 : npm이라는 툴 이용.. 2021. 11. 5. [TIL] 5일차 어제 프로젝트 마무리 하고 오늘은 aws, filezla에 프로젝트를 올렸는 데 팝업창이 안뜨는 오류 수정하고 사후 문서 관리를 진행했다. 5일차 시간표 오전 9:00 ~ 오전 10:00 회의 + 오류 수정 + API / Collection 수정 오전 11:00 ~ 오후 3:00 개인사정 오후 3:00 ~ 오후 5:00 React 기초 강의 오후 5:00 ~ 오후 8:00 개인 공부 오후 8:00 ~ 오후 9:00 저녁시간 오후 9:00 ~ 프로젝트 서류 작성 및 최종 제출 기술 스택 쓰는 법 프로젝트 서류에 기술 스택이라는 걸 적어서 내야 해서 어떤 것인지 알아보니까 backend, frontend, hosting 할 때 어떤 언어, 툴, 라이브러리를 사용 했는 지 적는 것 같다. Git 업로드 htt.. 2021. 11. 5. 이전 1 ··· 73 74 75 76 77 78 79 ··· 84 다음 728x90
