Daily Log

forEach: 배열의 모든 원소에 콜백함수를 1회 실행하고 종료 map: 배열의 모든원소에 콜백함수를 1회 실행하고 새로운 배열 리턴해주고 싶을 때 사용 map은 return 값이 반드시 있음 아래는 habits 라는 배열을 map으로 돌고 하나하나있는 원소의 객체의 id, name, count를 props를 통해 Habit 컴포넌트에 넘기는 과정이다. habits.jsx import React, { Component } from 'react'; import Habit from './habit'; class Habits extends Component { state = { habits: [ { id: 1, name: 'Reading', count: 0 }, { id: 2, name: 'Running',..

State, Props : 데이터를 다룰 때 사용함 State란 컴포넌트 안에서 우리가 정의한 컴포넌트의 state 오브젝트다. 컴포넌트 UI를 위한 데이터를 보관하는 오브젝트! 이 state라는 오브젝트를 통해서 데이터에 업데이트가 발생하면? 리액트가 자동적으로 우리가 구현한 redner 함수를 호출한다. =>자신이 들고 있는 값! 컴포넌트 안에서 자체적으로 데이터를 정의해서 사용함! Props란 컴포넌트 외부에서 데이터를 제공받음. 컴포넌트의 재사용을 높이기 위해서! 상황에 따라 주어진 데이터를 제공받아서 그 데이터에 맞게 UI를 보여주기 위해 사용되어짐 -> 부모 컴포넌트에서 아래와 같이 컴포넌트를 사용할 때 title, onClick을 인자로 전달해줌. 그럼 얘네가 props 오브젝트로 묶어서 L..

리액트에서 State가 업데이트 될 때면 반드시 내장함수인 setState를 통해서 업데이트 시켜야한다. -> 그냥 state에 있는 변수를 바꿔버리면 안됨. state를 전체적으로 업데이트를 해줘야하는데 그것이 바로 setState! => setState를 써야 리액트가 "아~스테이트가 변경되었구나 렌더함수를 다시 호출하자! 라는 식으로 진행이 됨. class Habit extends Component { state = { count: 0, }; // 아래는 콜백함수 addCountNumber = () => { this.setState({ count: this.state.count+1 }) }; render() { return ( ) } . . . . . } subtractNumber = () => {..

클론한 해당 프로젝트 경로로 들어가서 yarn install yarn start

span tag : 문장 단위로 텍스트 영역 지정하는 것 -> 태그 자체로 아무 역할도 하지 않음 -> 문장의 특정 구역에 CSS 스타일을 지정할 때사용 -> div와 역할은 비슷하지만 div 태그는 사각형 박스 모양으로 구역 지정, span은 한 문장단위 span은 공태그 비어있는 태그! 예를 들면, 아래 처럼 특정 단어의 크기를 조정하고 싶다면? 개발은 어렵구나. 개발은 어렵구나. 그리고 css에서 id 가 test인 것을 꾸며주면 됨. + em은 글자 1개의 높이.

크롬 개발자 도구로 react관련 앱 다운받으면 component로 해당 사이트에서 구성하는 컴포넌트들을 확인할 수 있다. 컴포넌트 표시가 안되는 부분은 순수 자바스크립트임 - state는 그 컴포넌트에서 가진 데이터 - props는 부모로부터 받아온 데이터가 props JSX - 분명 자바스크립트 코드인데 html과 비슷한 코드가 쓰여지는 중 app.jsx import React from 'react'; import './app.css'; function App() { return Hello :) } export default App; 자바스크립트 코드위에서 간단하게 html처럼 쓸 수 있게 만들어진게 jsx html class / onclick / 마크업언어 jsx className / onClick..

컴포넌트 클래스 / 함수 state라는 오브젝터가 들어있음 -> state가 변경되면 render함수가 호출됨 -> DOM TREE에 올라갔을때, 나왔을때 등 컴포넌트의 상태에 따라 함수를 구현해주면 알아서 해주는 라이프사이클 메소드가 있음 function: 간단한 함수로 만들 수 있다. 컴포넌트 데이터가 정적이면 function -> 함수는 한가지의 기능을 수행하는 단위라서.. state나 라이프사이클메소드가 없음. -> BUT, react 16.8 부터는 리액트훅이 생김. 그럼 function에서도 state, lifecyclemethod 다 가능 -> 왜 굳이 리액트 훅이 도입되었나? 기존 클래스컴포넌트에서 할 수 있는 것처럼 동일한 기능이 가능하도록 됨 그럼 왜 생김? class가 어렵다. 클래스..

node 설치(npm같이 있음) homebrew 설치 yarn 설치 homebrew로 가능 폴더에서 아래 명령어 실행시 package.json 등 패키지 매니저 등 프로젝트에 필요한 환경이 셋팅됨 -> 개인프로젝트할 때 create react-app [폴더명] 추천 yarn create react-app my-app 명령어 -> start 시작 yarn start --Starts the development server. yarn build --Bundles the app into static files for production. yarn test --Starts the test runner. yarn eject --Removes this tool and copies build dependencies,..

Font Awesome uxgjs.tistory.com/186 Font Awesome 5를 슬기롭게 사용하는 방법 웹사이트를 개발하다 보면 아이콘이 필요한 경우가 많습니다. 인터넷을 찾아보면 다양한 방법과 형식으로 무료로 제공해 주는 웹사이트가 많이 있는데요. 그중에서도 가장 많이 사용되는 폰트 ux.stories.pe.kr 1. static하게 만들고 2. CSS로 스타일링 한다음에 3. 동적으로 만들자 CSS Generator를 구글링하면 많이 나옴 CSS Gradient https://cssgradient.io/ CSS Gradient — Generator, Maker, and Background As a free css gradient generator tool, this website lets..

load => after resources : css images파일 다 로드되면 DomContentLoaded => html만 로드되면 defer를 쓰거랏 Understanding the Critical Rendering Path Introduction Lorem ipsum dolor sit amet Copyright 2017 HTML Critical rendering path의 이해 아래의 글은 "Understanding the Critical Rendering Path"의 내용을 번역한 글이다. 브라우저가 서버에서 페이지에 대한 HTML 응답을 받으면 화면에 표시되기 전에 많은 단계를 거쳐야 한다. 브라우저가 페이 blog.asamaru.net 브라우저가 서버에서 페이지에 대한 HTML응답을 받으면..