항해 중267 [TIL] 16일차 시간별로 정리 하는 건 뭔가..효율성이 떨어지는 것 같아서 중요한 일정들이나 오늘 한 것들 정리 하는 걸로 바꿈 16일차 일정 1) 기능 구현 및 주석 달기 2) S3에 호스팅(배포)하기 - 강의 5-6~5-8 참고 3) 1강부터 3-6강까지 복습 + 남은 강의 수강(3-7강~5강) 4) 팀 과제 진행 5) 2회 항해톡 - 오후 5:00 ~ 오후 6:00 (OSI 7계층, 새로운 정보를 취득하는 Tip, 프로세스 & 스레드) 6) 항해99 온라인 세미나 - 오후 8:00 ~ 오후 9:00(이력서와 면접 필패 공식 + 센스있는 주니어 되기) S3로 프로젝트 호스팅(배포)한 사이트 http://starleave.project.s3-website.ap-northeast-2.amazonaws.com React .. 2021. 11. 18. [TIL] 15일차 15일차 시간표 오전 9:00 ~ 오전 9:30 팀 회의 오전 9:30 ~ 오전 11:00 기능 구현 오전 11:00 ~ 오후 12:00 점심시간 오후 12:00 ~ 오후 1:00 기능 구현 오후 1:00 ~ 오후 2:00 팀 과제 수행 오후 2:00 ~ 오후 5:00 기능 구현 오후 5:00 ~ 오후 6:00 개인시간 오후 6:00 ~ 오후 7:00 저녁시간 오후 7:00 ~ 오후 9:00 기능 구현 styled-components 자동완성 하는 법 2021.11.17 - [더 알아보기/팁] - styled-components 자동완성 패키지 styled-components 자동완성 패키지 자동완성 플러그인을 안깔면 코드가 주황색으로 떠서 일일이 써야 했는 데 아래 사이트 참고해서 styled-comp.. 2021. 11. 17. 3주차 개인 과제 개인 과제 요구사항 11월 16일 리액트 기초 강의(3-6)까지를 기반으로 개인 과제를 시작했습니다. 1) 메인 페이지와 평점 남기기 페이지의 기본 view 설정 -> Route 쓸 때 주의 할 점 : Route를 사용해서 path나 component를 설정 할 때는 App.js에서 설정 해주고 다른 컴포넌트에서 다른 path로 이동 해야 할 때는 useHistory에 history.path를 써서 이동해야 한다. 2) 세모를 누르면 평점 남기기 페이지로 이동하는 기능 3) 평점 남기기 페이지에 요일 받아오기 -> useHistory를 사용해서 경로를 이동 시켜 주었고, 각 요일을 가지고 이동해야 하기 때문에 pathname과 state를 사용 해줬습니다. (history.push 할 때 값을 넘겨주는 .. 2021. 11. 16. [TIL] 14일차 14일차 시간표 오전 9:00 ~ 오전 9:30 팀 회의 오전 9:30 ~ 오전 11:00 강의 수강 오전 11:00 ~ 오후 12:00 점심시간 오후 12:00 ~ 오후 1:00 강의 수강 오후 1:00 ~ 오후 3:00 팀 과제 수행 오후 3:00 ~ 오후 3:30 면담 오후 3:30 ~ 오후 5:00 1주차 과제 기능 구현 (원래는 5주차 강의까지 다 듣고 하려고 했는 데 매니저님께 상담을 해보니까 3-6강까지 듣고 앞에 내용들을 과제로 만들어 보면서 이해를 하고 다음껄 하는 게 더 효율적이라고 하셔서 과제 먼저 수행 할 예정!) 오후 5:00 ~ 오후 6:00 저녁시간 오후 6:00 ~ 오후 9:00 기능 구현 + 개발일지, 진행사항 정리 상담 하면서 알게 된 점 프로젝트를 진행 하거나 코드를 짤.. 2021. 11. 16. 3주차 - 라우팅(페이지->페이지로 이동) 1) SPA란? : Single Page Application이라고 한다. 말 그대로 서버에서 주는 html이 1개 뿐인 어플리케이션이에요. 전통적인 웹사이트는 페이지를 이동할 때마다 서버에서 html, css, js(=정적자원들)을 내려준다면, SPA는 딱 한번만(처음 로딩 할 때) 정적자원을 받아옵니다. - 왜 굳이 html을 하나만 줄까? → 많은 이유가 있지만, 그 중 제일 중요한 건 사용성 때문입니다. 페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러오니까 비효율적이거든요. (예를 들어서 사용자가 회원가입 하다가 적었던 내용이 날아갈 수도 있고, 블로그 같은 경우, 페이지마다 새로 html을 받아오면 바뀐 건 글 뿐인데 헤더와.. 2021. 11. 16. 3주차 - Event Listener 1) 이벤트 리스너(Event Listener)이란? : 이벤트 리스너는 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것입니다. 대표적으로는 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등이 자주 쓰여요! (더 많은 내용은 아래 사이트 참고) https://developer.mozilla.org/ko/docs/Web/Events 이벤트 참조 | MDN DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가 developer.mozilla.org 이벤트 리스너는 에서처럼 엘리먼트에 직접 넣어줄 수도 있지만, 이번 강의에서는 addEventLi.. 2021. 11. 16. [TIL] 13일차 13일차 시간표 오전 9:00 ~ 오전 10:00 오리엔테이션 오전 10:00 ~ 오전 10:30 팀 회의 오전 10:00 ~ 오전 12:00 강의 수강 오후 12:00 ~ 오후 1:00 점심시간 오후 1:00 ~ 오후 6:00 강의 수강 오후 6:00 ~ 오후 6:30 팀 회의 오후 6:30 ~ 오후 7:00 저녁시간 오후 7:00 ~ 오후 10:00 강의 수강 오후 10:00 ~ 오후 10:30 하루 마무리 소감 리엑트는 재밌는 데 재밌지 않다. 새로 알게 되는 게 많아서 열심히 하고 있다. 너무 힘들어서 소감을 쓸 힘이 없다. 내일 남은 강의 듣기 전에 2강에 13, 14 다시 듣고 블로그에 추가 정리 하고 남은 강의 듣자.... 오늘은 끝 2021. 11. 15. 2주차 - 숙제 -> App.js import React from "react"; import logo from './logo.svg'; import './App.css'; import Start from "./Start"; function App() { const [name, setName] = React.useState("르탄이"); return ( ); } export default App; -> start.js import React from "react"; import img from "./scc_img01.png"; const Start = (props) => { console.log(props); return ( 나는 {props.name}에 대해 얼마나 알고 있을까? 시작하기 ); }; export def.. 2021. 11. 15. 2주차 - State 관리 1) 단방향 데이터 흐름이란? : 데이터는 위에서 아래로, 부모에서 자식으로 넘겨줘야 한다는 소리입니다. + 왜 단방향을 써야 하나요?? : 라이프 사이클과 함께 생각해보기 부모 컴포넌트의 state가 업데이트 되면 자식 컴포넌트도 리렌더링이 일어납니다. 만약 자식 컴포넌트의 state가 바뀐 걸 부모 컴포넌트가 props로 받는다고 생각해봅시다. 그러면 자식 컴포넌트가 업데이트 될 때 부모 컴포넌트도 업데이트 되겠죠? 앗..., 그럼 또 자식 컴포넌트가 리렌더링 될 거구요. 무한반복 렌더링이 일어나게 됩니다.!! 2) 클래스형 컴포넌트에서 state 관리 - setState() : 라이프 사이클을 볼 때 잠깐 봤던 setState()! 클래스형 컴포넌트의 state를 업데이트할 때 사용하는 함수입니다... 2021. 11. 15. 이전 1 ··· 16 17 18 19 20 21 22 ··· 30 다음 728x90
