Web (23) 썸네일형 리스트형 [Clone Coding] Make Chrome App with Vanilla.js Nomad Coders "바닐라 JS로 크롬 앱 만들기" - JavaScript for Beginners GDSC FE-Toy Project Study Plan • 되도록이면 기능 단위 commit (branch 생성) • 제작 시 커스텀, 수정, 추가 자유롭게 해보기 • 전 과정, 시행착오 기록하기 • PR 미리 날려서 commits 기록 및 간단한 수정 계획 comments로 남기기 Week 1) ~10/7 • 강의 #3.5까지 수강 (개념 & 예제) • 강의 내용, 추가 공부 내용 정리 Week 2) ~10/14 • 강의 JavaScript Basics • 브라우저는 html 파일을 열고, html은 css와 javascript를 가져온다. (html = glue) • variables 선언 1) .. [Clone Coding] Twitter - Nomad Coders #1 SETUP #1.1 Securing the Keys - .env 파일 만들어서 환경변수 따로 설정 - 무조건 REACT_APP_'KEY' 형태 - gitignore에 .env 파일 추가 (key들을 github에 보이기 싫어서 정리한 것이라고 생각) - 사용자들은 볼 수 있지만 그냥 github에서 key들이 보이지 않도록 정리한 것이다. #1.2 Router SetUp - 라우팅: 다른 주소에 따라 다른 뷰를 보여주는 것 리액트 자체에는 라우팅 기능이 내장되어있지 않기 때문에 직접 브라우저의 API를 사용하고 상태를 설정하여 다른 뷰를 보여주어야 한다. - 인증(로그인) 여부에 따라 render시킬 routes가 달라지게 하자. → LogIn 되어 있으면 Home / LogIn 안되어 있으면 Au.. [과제 #1] 바닐라 자바스크립트로 To Do App 만들기 웹 크기 조절 시 박스가 원하는 모양으로 커지지 않아서 padding, margin값 조절하면서 계속 헤맸는데, 처음 설정할 때 input 부분 width를 80%로 해서 양쪽에 남게 나오는 것이었다. width: 100%로 변경 후 남는 부분 없이 꽉 차게 수정. document.querySelector(“` “); 통해 document에서 매치되는 첫번째 요소 가져오기 vercel 배포 방법 새로 알게 되었다. 처음 배포한 후 설정에 들어가서 브랜치를 수정해도 계속 메인 브랜치 화면이 떴는데, 코드에 수정사항이 생긴 후 다시 push하면 내 브랜치로 잘 뜬다. 추가 버튼에 커서를 올렸을 때 색이 변하게 하고 싶어서 button:hover background-color랑 color값 따로 설정. dis.. Update/Delete 구현 코드 정리! import React, { Component } from 'react'; import TOC from "./components/TOC"; import ReadContent from "./components/ReadContent"; import CreateContent from "./components/CreateContent"; import UpdateContent from "./components/UpdateContent"; import Subject from "./components/Subject"; import Control from "./components/Control"; class App extends Component { constructor(props) { super(prop.. Create 구현 props vs state Props State read-only asynchronous can not be modified can be modified using this.setState - 상위 component가 하위 component에 명령할 때 Props를 사용하고, 하위 component가 상위 component에 명령할 때는 이벤트를 사용한다. - Props는 read-only. 자신의 하위에 포함된 것들은 변경할 수 있지만, 자신의 상위에 포함된 것들은 변경할 수 없다. 이 경우 이벤트를 사용해 간접적으로 명령해 바꾼다. - props는 상위 component가 하위 component에게 데이터 값만 전달하는 반면, state는 component 내부에서 선언해 이벤트를 생성, 변경한다. .. 이벤트 이벤트, state, props가 상호작용하며 애플리케이션을 역동적으로 동작할 수 있게 해 준다. react에서는 props값이나 state값이 바뀌면 그 state를 가지고 있는 component의 render 함수가 다시 호출된다. 그러면 이 render 함수 하위에 존재하는 components의 render 함수들도 모두 다시 호출된다. Subject.js 안의 {this.props.title}을 클릭했을 때, Subject 바깥에 있는 App.js의 state를 바꾸는 것이 최종 목표이다. 일단은 Subject라는 component를 풀어헤쳐 그 내용을 그대로 App.js에 도입해서 이벤트를 구현해보자! 원래 a 태그에는 링크를 눌렀을 때 href 속성이 가리키는 페이지로 이동한다는 기본적인 동작.. State - component가 좋은 부품이 되기 위해서는 component를 사용하는 외부의 props와 그 props를 구현하는 state가 철저하게 구분되어 있어야 한다. - component가 실행될 때 constructor 함수가 존재하면 가장 먼저 실행되어 초기화를 담당한다. - constructor(props) { super(props); this.state = { subject:{title:'WEB', sub:"World Wide Web!"} } } → subject의 state값을 위와 같이 설정 - → App component의 state값을 Subject component의 props값으로 준다. → 상위 component의 상태를 하위 component로 전달하고 싶을 때, 상위 compon.. Component React: JavaScript Library For Building User Interfaces Component: 사용자가 정의한 태그 (사용자가 만든 태그) → props를 input으로 하고 react element를 output으로 하는 함수 → component를 작성하면, 1) 가독성을 획기적으로 높일 수 있다. (복잡한 코드를 태그만을 명시하는 것을 통해 숨길 수 있다.) 2) 한 번 정의해놓으면 여러 곳에서 재사용할 수 있다. 3) 유지보수가 쉽다. (component를 수정하면 사용하는 모든 곳에서 수정사항이 자동으로 업데이트된다.) - 그냥 html으로 작성한다면 위와 같이 코드가 길게 늘어져 있을 것이다. 예시에서는 코드가 짧으니까 괜찮은데 코드가 많이 길어진다고 생각하면 내용을 보.. 이전 1 2 3 다음
