게으른 나에게

JSX 표현식은 하나의 상위, 부모 요소를 가지고 있어야 함. 형제요소만을 반환하면 오류 생김.return문 : 이 모든 값을 감싸는 객체 혹은 배열But DOM에 중복되는 요소가 생김. =>      fragmentroot 컴포넌트가 필요한 경우, 형제 컴포넌트 감싸는 용도 사용 가능(화면상으로 보이는 실제 요소 렌더링 x)import { useState, Fragment } from 'react';function App () { return ( . . . );} 최근에는import { useState } from 'react';function App () { return ( . . . );}

리액트 Hooks리액트 프로젝트에서 'use'로 시작하는 모든 함수.일반 함수이지만 리액트 컴포넌트 함수 or 다른 리액트 Hook 안에서 호출되어야 함.컴포넌트 함수 안에서, 최상위에서 바로 호출.다른 코드 안(내부 함수 안)에서 중첩 X.if문, loop X. 리액트에서 처리되는 변수를 등록하는 것.리액트가 제공하는 함수의 도움을 받아 업데이트 됨.리액트에게 데이터가 변한 것을 알려주면 리액트가 UI를 업데이트.=> 이 특별한 변수들은리액트 라이브러리에서 불러와야 하는 특별한 함수의 도움으로 생성 useStateimport { useState } from 'react'; 인수를 받아들이는데 기본적으로 컴포넌트가 처음 렌더링될 ,때 리액트가 저장하고 사용하길 원하는 기본값.반환되는 값(배열) -> 변수..

컴포넌트재사용이 가능한 구성요소컴포넌트 결합해서 만들어지는 것 = ReactHTML + CSS + JS = React Component복잡한 사용자 인터페이스를 관리하기 쉽도록 작게 분리해 UI 다른 위치에 사용할 수 있음react에서 컴포넌트로 인식하기 위한 2가지 규칙1. 함수의 제목은 대문자로 시작2. 함수에서 렌더링 가능한 값 반환 컴포넌트 생성 및 활용컴포넌트 정의-js 함수 작성, 함수의 제목은 대문자-새로 생성된 헤더 함수에 값이 반환되어야 함 -> 반환된 값, return (컴포넌트 통해 화면에 보여지는 내용)function Content() { return ( 화면에 보여질 코드 (html) );}컴포넌트 사용 function App() { return ( );} props데이터 -..

1. node.js 설치https://nodejs.org/en/ Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org -설치 확인node -vnpm -v  2. 작업폴더 생성 (보통 영어 작성, 특수문자 언더바(_)와 하이픈(-)만 사용)vscode에서 폴더를 열어서 시작  3. 프로젝트 생성-터미널sudo npx create-react-app 프로젝트명npx create-react-app 프로젝트명  4. 실행npm start

폴더 생성작업 폴더에서 터미널창 열기레포지토리 생성버전 관리 할 폴더 설정 명령어 (작업 디렉터리)git init 현재 파일 기록-staging area (전체 / 파일만)git add .git add 파일명-올리고 싶지 않은 파일 (.gitignore 추가) -repository (스테이지 된 파일들만)git commit -m "메시지"상태창 열기 (어떤 파일 staging, 수정 ..)git statuscommit 내역 조회git log --all --onelinegit log --all --oneline --graph commit 전 (최근 commit vs 현재 파일)git diffgit difftoolgit difftool 커밋아이디git branch (브랜치 생성: 파일 복사본 만들기)git ..

1. 터미널 접속 2. Homebrew 설치 (코드입력)/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"https://brew.sh/ HomebrewThe Missing Package Manager for macOS (or Linux).brew.sh 3.  git 설치 (코드 입력) brew install git 4. git 버전 확인git --version 5. 환경설정 (유저이름 설정 / 이메일 설정)git config --global user.name "깃허브 닉네임 혹은 이름"git config --global user.email "github 가입 시 사용한 이메일 주소" 6..

브라우저 안 데이터 저장 가능 개발자도구 -> Application -> StoragelocalStorage, sessionStorageIndexedDBCookiesCache Storage이름(key) : 값(value) 형태로 저장구조화된 대용량 데이터 저장로그인 정보 저장html, css, js 파일 저장  localStoragesessionStorage용량 5MB문자/숫자만 저장 가능사이트 재접속시 유지휘발성 (사이트 나가면 자동 삭제)  [JavaScript] localStorage 저장 방법localStorage.setItem('이름', '값'); [JavaScript] localStorage 출력 방법localStorage.getItem('이름'); [JavaScript] localStorag..

HTML 전부 다 읽고 실행할 JS 코드$(document).ready(function(){ 실행할 코드 })document.addEventListener('DOMContentLoaded', function() { 실행할 코드 })

sort array.sort는 문자정렬  sort로 숫자 정렬 하는 법(오름차순)1. a, b 는 array안의 자료.2. return 오른쪽 양수, a -> 오른쪽3. return 오른쪽 음수, b -> 오른쪽 (내림차순) filterarray 자료 원하는 것만 가져옴filter( ) 결과는 변수에 저장해서 써야함  sort vs filter.sort( )는 원본 변형됨.filter( )는 원본 변형되지 않음 map자료 전부 변형

서버와 데이터 주고 받는 법 서버: 데이터 달라고 하면 데이터 주는 프로그램 / 유저 데이터 DB에 저장1. 데이터 종류 (url)2. 요청 방법 형태 (GET: 데이터 읽기 / POST: 데이터 보내기) GET: 주소창으로 요청하는 곳POST: 태그 GET/POST 요청하면 브라우저 새로고침 됨. ajax -> 새로고침없이 GET, POST 요청하는 기능