헬리_storage

useState를 배우고 쓰고있지만.. 아직까지 너무 혼란..(?) 스러워 이렇게 정리를 해본다..😂😂👊 Hook이란? : 클래스 컴포넌트에서만 사용할 수 있었던 상태관리와 라이프사이클 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동해 주는 함수이다. Hook을 사용할때 규칙 2가지 1. Hook은 함수 컴포넌트 혹은 custom hook안에서만 호출할 수 있고, 2. 함수 컴포넌트 내의 최상위에서만 호출해야한다 React 에서 State란? - 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값으로 UI에 보여줄 정보를 결정할 때 사용할 수 있다. - 컴포넌트 내부에 있어서 내에서 정의및 사용을 하고 얼마든지 변경할 수 있다. 어떻게 사용할까? //Main.js import React from 'r..

React는 SPA이다. SPA (Single Page Application) 여기서 Application이란? 유저랑 상호작용할 수 있는 웹페이지를 의미한다. 웹페이지 경로마다 브라우저가 HTML을 다운받아서 브라우저 화면에 그려야 하는데, 전체 웹사이트에 HTML이 딱 하나 있으면 그릴 수 있는 웹페이지도 하나밖에 없을 것이라 생각할 수 있다. React는 HTML 파일이 1개가 존재하지만, UI를 구성하는 코드는 javascript 파일에 있다. 이 파일은 index.html의 태그 중에 id 선택자가 root인 div태그에 DOM으로 연결되어 화면에 그려지므로, HTML 파일은 하나만 있어도 javascript 파일이 여러개 있으면 MPA 처럼 여러페이지를 브라우저 화면에 나타낼 수 있고, 하나의..

JSX 란? : React에서 사용하는 자바스크립트 확장 문법으로써, HTML과 Javascript를 섞어놓은듯한 형태이다. : JSX는 자바스크립트 내에서 마크업을 작성할 수 있고, 로직도 함께 작성할 수 있는 장점을 가지고 있다. 특징 1. JSX 는 자바스크립트의 값(vlaue) 이다. : 값이라고 하면, 특정한 변수에 이 값을 담을 수 있고, 함수의 인자로 전달하거나, 함수의 리턴값으로 사용할 수도 있다. 2. JSX는 자바스크립트 값을 포함할 수 있다. : JSX에서 자바스크립트 값을 사용하려면 {} 중괄호를 이용하여 자바스크립트의 값을 감싸주면 된다. name 이라는 변수를 선언하고, Hayley Lee 라는 값을 할당하였다. 이때, JSX 안에서 이 값을 사용하기 위해 {name} if문, ..

State? : 컴포넌트가 가질 수 있는 상태 useState? : 우리 컴포넌트의 상태를 간편하게 생성하고, 업데이트 시킬 수 있게 해 주는 도구를 제공해 준다. const [state, setState] = useState(초기값); // state 생성과 함께 가져야할 초기값을 useSate 함수의 인자로 넣어주면 //state와 setState라는 두가지 요소를 배열 형태로 return 해 준다. - state(변수) : 현재 상태 값 - setState(함수) : state를 변경시켜주고 싶을 때 더보기 예시) const [time, setTime] = useState(5); // 컴포넌트 안에는 time 이라는 state 가 생성되고, 초기값은 5시 를 갖게됨 // 이때, 시간을 변경하고 싶으..

브라우저를 통해 웹사이트에 들어가면 html 의 element들과 그 것들을 담고 있는 document 를 웹페이지라고 하는데, 브라우저는 이 웹페이지에 해당하는 html을 분석해서 화면에 나타나게 해 준다. DOM (document object model) DOM 이란, 웹페이지에 들어가 있는 html 요소들을 tree 형태의 구조로 표현한 것이다. 이 DOM tree 안에는 각각 요소(element)에 상응하는 노드가 들어있는데 , 개발자들은 이 DOM이 제공하는 API 를 통해 DOM에 접근을 하고, 원하는 요소의 구조,스타일, 내용 등 을 원하는대로 변경할 수 있는 DOM 조작을 할 수 있다. 만약 자바스크립트를 이용한다면, getElementbyId() 혹은 quarySelecort() API를..

1. ID 에서 onChange event가 발생합니다. {}} 2. event 발생 시 saveUserId 함수가 실행됩니다. {saveUserId}} 3. saveUserId 함수는 이벤트를 인자로 받습니다. {saveUserId(e)}} 4. event가 일어난 요소에 담긴 value 값(event.target.value)을 state에 저장합니다. const [inputId, setInputId] = useState (''); function saveUserId(e) { setInputId('e.target.value'); } 5. 위의 과정을 Password 에도 동일하게 적용합니다. import React, { useState } from "react"; const Login = (a) => ..

twoSum 함수에 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index를 배열에 담아 return해 주세요 이때, nums : 숫자 배열 target: 두 수를 더해서 나올 수 있는 합계 return: 두 수의 index를 가진 숫자 배열 target 으로 보내는 합계의 조합은 배열 전체 중에 2개 밖에 없다고 가정하겠음. 예를들어, nums는 [4, 9, 11, 14] target은 13 이라 할때, nums[0] + nums[1] = 4 + 9 = 13이다. 그러면 리턴은 [0, 1]이 되어야 한다. 풀이) const twoSum = (nums, target) => { // 가 주어 졌을때, for (let i=0 ; i< nums.length; i++) { // targ..

git에 수정한 파일을 add, commit 후 github에 push 까지 했는데, 확인해보니 private한 사진들도 같이 올라가져 버렸다😂 이때 사용 가능한 명령어 더보기 * 원격 저장소와 로컬 저장소 파일을 모두 삭제할 경우 git rm 파일명 * 원격 저장소에 있는 파일만 삭제하고, 로컬 저장소에 있는 파일은 삭제 하지 않는 경우 git rm --cached 파일명 .gitignore 파일을 만든 후 해당 파일에 삭제할 파일들 확장자를 같이 넣어주기

목표 1. Git 이 무엇이고 왜 필요한지 설명할 수 있다. 2. Github 가 무엇인지 알고 해당 개념을 Git과 구분하여 설명할 수 있다. 3. 터미널 상에서 Git의 init, add, status, commit, log, push 명령어를 사용할 수 있다. 4. Github에 Respository를 생성하고 자신의 Git 프로젝트를 업로드 할 수 있다. Git 이란? : 프로젝트의 버전 관리를 도와주는 시스템 local 로, 즉 '내 컴퓨터 안' 을 말한다. GitHub 이란? : Git을 사용한 프로젝트들의 저장소 로써, 개발자들의 social network로도 이용된다. : Git을 이용해 버전 관리를 할 수 있다. ex) 클론을 받아 협업이 가능하며, 공유도 가능하며, 같이 프로젝트를 하고..

1. inline 요소 : 전체적으로 개별적으로 글자를 꾸미는 서식 관련된 태그들 - 한 줄에 여러개 배치 - 기본 너비 값은 컨텐츠의 너비 값 - 크기 값을 가질 수 없음 - 상하 마진은 가질 수 없음 : span, a, small, big, em, u, ins, i, s, del, br, q, b, strong, mark, sub, sup, label, map , cite, addr, time 2. inline-block 요소 : 이미지 + 대부분의 폼 요소 (label은 인라인 요소) - 한 줄에 여러개 배치 - 기본 너비 값은 컨텐츠의 너비 값 - 크기 값을 가질 수 있음 - 상하좌우 마진 가질 수 있음 : img, input, button, textarea, select, 대부분의 font ic..