최상단 컴포넌트의 state를 말단 컴포넌트까지 전달하고 싶으면 이렇게 반복적인 작업을 해야함. → 이러한 불편함을 해소하기 위해 Redux 사용!! ★ Redux가 없는 컴포넌트들은 그냥 props로 유선 연결되어있는 거라고 생각하면 됨. Redux는 블루투스 느낌! ★ Redux는 독립적인 도구!! 이 독립적인 Redux와, 또 하나의 독립적인 도구인 React를 서로 연결해주는 게 ‘React Redux’라는 도구! ★ 로컬 컴퓨터에서 설치하려면 : npm install redux react-redux ★ redux를 사용하려면 : import { createStore } from ‘redux’; ※ store를 생성할 때 반드시 주입해줘야 하는 게 reducer!! reducer의 역할은, sto..
1. Typescript이란? ▶ Typescript : Javascript에 type을 부여한 언어! Javascript의 확장판! ※ Typescipt를 브라우저에서 실행하려면 파일을 한번 변환(=Compile)해주어야 한다! 2. Typescript를 써야하는 이유 ▶ 자바스크립트 코드의 품질과 개발 생산성을 높일 수 있기 때문!! ① 에러의 사전 방지 10+20 = 30의 결과를 내고 싶은데, ‘10’+‘20’이 돌아가면 안되잖아! ts는 그걸 막아줌! ② 코드 가이드 및 자동 완성(개발 생산성 ↑) 코드 작성 시, 개발 툴의 기능을 최대로 활용 가능! 3. Typescript의 기본 타입 ※ 타입 표기(Type Annotation)란? :을 이용하여 js 코드에 타입을 정의하는 방식 ① Bool..
💥5주차 & 6주차 통합본! 0. React란? React의 장점과 단점? ▶ React란? → A JavaScript library for building user interfaces. → 사용자와 웹사이트의 상호작용을 돕는 인터페이스를 만들기 위한, 즉, 화면을 만들기 위한 기능들을 모아놓은 자바스크립트 *라이브러리! → Meta(前 facebook)에서 만든 오픈소스 자바스크립트 UI 라이브러리. 현재 가장 많이 사용되는 라이브러리! 복잡한 사이트를 쉽고 빠르게 만들고 관리하기 위해 만들어짐! (*라이브러리 : 자주 사용되는 기능들을 정리해 모아놓은 것) ★ 사용자 인터페이스(User Interface, UI) : 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로간의 입력과 출력을..
역시나 완강은 했으나 정리의 속도는 그에 미치지 못하는...^_ㅠ 실습과 함께하는 강의여서 실습에 더 집중하였다. 어차피 이번 주가 프로젝트 기간이니까, 프로젝트하면서 다시 반복해서 보고 기억하고 싶은 것만 기록해야겠다! ✨ 1. create-react-app으로 React 프로젝트 만들기 ① Windows Powershell을 열어준 뒤, npx create-react-app voca(=프로젝트 폴더) ② 예전에 react 프로젝트를 조금 해본 적이 있어서 그런지, 최신 버전이 아니라고 뭐시기뭐시기 군더더기가 뜨고 프로젝트가 안 만들어짐. 그래서 하라는 대로 함. npm uninstall –g create-react-app ③ 위의 명령을 실행시켜준 뒤, 다시 npx create-react-app vo..
✨ 1. DOM이란? ▶ DOM : Document Object Model의 약자! 즉, 문서 객체 모델! DOM은 HTML 문서의 각 요소들을 트리 형식으로 표현! Javascript를 이용해서 이를 생성/수정/삭제할 수 있다! 2. Node에 접근하기 ★ 하나의 객체(Object)를 노드(Node)라고 한다. Node에는 다양한 타입들이 있음! 개발할때는 주로 html element에 접근함 ★ document를 제외하고, 최상단의 이 root 노드. ★ 모든 html 태그는 객체!! 객체는 js로 접근하고 제어 가능 ★ id로 접근 : const el = document.getElementById(‘id 이름’); / el; ※ id는 한 페이지에 딱 한번만 사용가능 ★ 특정 tag에 접근 : co..
완강은 했으나...정리는 모든 강의를 하지는 못했다. 정리도 중요하지만, 일단 학습을 하고 이해를 해서 내 머릿속에 남기는 게 더 중요하다고 생각했다. 처음에는 꼼꼼히 정리하다가, 이러다가는 완강도 다 못하겠다 싶어서, 중간부터(4차시부터)는 핵심만 정리하기 시작하다가, 그것도 시간이 좀 걸려서 이후에는 이해만 하면서 쭈욱쭈욱 들었다..! (근데 사실 어려워서 이해가 잘 안된 부분들도 좀 있다. 이건 이번 주에 과제도 하면서, 계속 반복해서 보고 또 정리도 하면서 완전히 이해하도록 노력할 예정이다.) 혹시나 나중에 내가 원하는 내용을 다시 기억하거나 공부하려고 정리본을 다시 봤을 때, 자세한 내용은 그 강의를 다시 찾아가서 공부할 수 있도록 제목과 소제목 옆에 타임라인을 적어두었다. (핵심만 정리한 4차..
5. CSS 이해하기 5-1. CSS란? ▶ Cascading Style Sheet. HTML을 꾸며주는 표현용 언어. ▶ 마크업 언어(HTML)이 몸의 구조(뼈, 근육)라면, CSS는 옷과 신발과 같이 외적으로 꾸며주는 역할! 즉, HTML이 문서의 정보, 구조를 설계한다면, CSS는 문서를 보기 좋게 디자인! 5-2. CSS 문법과 적용 ① CSS 구문 (ex) h1 { color: yellow; font-size:2em; } ★ 선택자(selector) - "h1" ★ 속성(property) - "color" ★ 값(value) - "yellow" ★ 선언(declaration) - "color: yellow", "font-size: 2em" ★ 선언부(declaration block) - "{ c..
1. HTML이란? ▶ HTML (Hyper Text Markup Language) : 웹에서 내용을 파악하기 쉽게 문서화하는 언어, 웹페이지를 만드는 언어. 확장자가 .html이다. 90년대 초반에 개발됨. 영국의 물리학자 팀 버너스 리가 개발. 웹 사이트들은 모두 HTML을 사용하여 만들어짐. ♥ Hyper Text : (텍스트 그 이상, 텍스트를 초월하는.) == 링크 ♥ Markup Language : 프로그래밍 언어의 한 종류. 정보를 구조적, 계층적으로 표현 가능한 언어라는 게 특징. 2. HTML 문법 2-1. 태그 : 무언가를 표시하기 위한 꼬리표! 각각의 태그들이 모여서 하나의 요소를 만들고, HTML 문서를 만들어낸다! ▶ HTML은 태그들의 집합! 태그는 HTML에서 가장 중요하고 기..
👩🏻💻 1. Git과 GitHub란? ▶ Git : 버전 관리 시스템. (쉽게 말해, 원하는 시점마다 깃발을 꽂고(=버전을 만들고), 이들 간에 자유롭게 돌아다닐 수 있다. 내가 만든 버전 뿐만 아니라, 동료가 만든 버전으로 이동할 수 있고, 동료와 내 버전을 비교해서 최신본으로 코드를 업데이트를 할 수 있다. 간단히 말해, 우리가 작업하고 있는 파일들을 원하는 순간으로 다시 돌아갈 수 있게 만들어주는 도구! Git Bash로 CLI 방식(‘git 명령어 -옵션’)으로 쓸 수도 있고, SourceTree라는 GUI 방식으로 쓸 수도 있음. branch가 많을 땐 GUI 방식이 더 유용!) ♥ Git에서 이용 가능한 모든 명령어 확인 : https://git-scm.com/docs ♥ git 명령어 –h..