JH 개발 블로그

각 컴포넌트의 state 는 완전히 독립적이다. Hook은 state 그 자체가 아니라, 상태 관련 로직을 재사용하는 방법이다. 실제로 각각의 Hook 호출은 완전히 독립된 state 를 가진다. 그래서 심지어 한 컴포넌트 안에서는 같은 custom Hook 을 두 번 쓸 수도 있다. Hook 은 state 그 자체가 아니라 "상태 관련 로직을 재사용하는 방법"이다. Custom Hook 은 기능이라기보다는 컨벤션에 가깝다. 이름이 "use" 로 시작하고, 안에서 다른 Hook 을 호출한다면 그 함수를 custom Hook 이라고 부를 수 있다. useSomething 이라는 네이밍 컨벤션은 linter 플러그인이 Hook 을 인식하고 버그를 찾을 수 있게 한다. 폼 핸들링, 애니메이션, 선언적 구독, ..

원격 저장소에서 로컬 저장소로 소스를 가져오는 명령어 pull fetch fetch 와 pull 의 차이는 가져온 소스를 merge 하느냐 안하느냐의 차이 pull과 fetch의 차이는 무엇일까? git pull: git remote 명령을 통해 서로 연결된 원격 저장소의 최신 내용을 로컬 저장소로 가져오면서 병합한다. git push의 반대 성격이라 생각하면 된다. git fetch: 로컬 저장소와 원격 저장소의 변경 사항이 다를 때 이를 비교 대조하고 git merge 명령어와 함께 최신 데이터를 반영하거나 충돌 문제 등을 해결한다. 일반적으로 브랜치를 만들지 않고 혼자서만 작업하면서 Git과 Github를 사용한다면 pull과 fetch를 사용할 일이 거의 없을 것이다. 하지만 대체적으로 Git을 ..

SPA(Single Page Application) 페이지가 한개인 애플리케이션이다. 이전에 HTML, CSS, Javascript 를 배웠을 때는 페이지 수만큼 html 파일이 존재하였다. 반면, 리액트 프로젝트에서 .html 파일의 개수는 ? 1개이다. 한 개의 웹 페이지(html) 안에서 여러 개의 페이지를 보여주는 방법은? Routing 이다. 이것은 SPA 방식이다. Routing 라우팅이란 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것이다. 리액트 자체에는 이러한 기능이 내장되어 있지 않는다. React-router (= 리액트 라우터)는 여러 페이지들을 연결시켜주는 역할을 한다. 리액트의 라우팅 기능을 위해 가장 많이 사용되는 라이브러리이다. 라우터는 페이지들을 연결해주..

Framework, library 에 대해 알아보자. 공통점: 다른 사람이 만들어 둔 코드 차이점: Framework - 다른 사람이 만든 틀(Frame) 안으로 내가 들어가서 작업하는 것 library - 내 작업에 다른 사람이 만들어 둔 코드를 가져와서 사용하는 것 Framework : Angular, Vue Library : React 프레임워크는 신라면, 주방을 제공한다고 보면 되고, 라이브러리는 냄비를 제공한다고 보면 된다. 예를 들어... ▼ 프레임워크가 모두 제공되서 편리하지만 문제는 신라면만 제공되면 신라면만 먹어야 한다. 또한 해당 조리도구를 익혀야 한다. 하지만 라이브러리는 라면을 끓이기 위한 하나의 도구인 냄비 (남들이 만들어 놓은 도구) 를 제공 받는다. 안성탕면이나 불닭볶음면 등 ..

return ( ) return 소괄호 안에 이렇게 div 태그가 여러개 들어가는 것은 불가능하다. 대신 하나의 큰 div 태그가 여러 div 태그들을 감싸는 것은 가능하다. return ( 개발 Blog 버튼 { 글제목[0] } {따봉변경(따봉 + 1)}}>👍 {따봉} 11월 14일 발행 { 글제목[1] } 11월 15일 발행 { 글제목[2] } 11월 16일 발행 // 주목하기 제목 날짜 상세내용 ); div 태그 지옥... 리액트는 HTML 을 한 단어로 줄여서 쓸 수 있는 방법을 제공한다. --> 이것이 리액트의 Component 문법이다. ↓ return ( 개발 Blog 버튼 { 글제목[0] } {따봉변경(따봉 + 1)}}>👍 {따봉} 11월 14일 발행 { 글제목[1] } 11월 15일 발행..

리액트의 데이터 저장공간 state 만드는 법 1. { useState } 상단에 첨부한다. 2. useState{데이터} import React, { useState } from 'react'; // 1. state 사용하려면 상단에 이렇게 첨부 import logo from './logo.svg'; import './App.css'; function App() { useState('남자 코트 추천'); // 2. [a, b] let posts = '강남 고기 맛집'; return ( 개발 Blog { posts } 11월 14일 발행 ); } useState 함수를 실행해주고 나면 두개의 원소를 가지고 있는 array 를 리턴해준다. ==> [a, b] a 는 useState() 안에 작성해준 sta..

index.js ReactDOM.render( , document.getElementById('root') ); index.js 라는 파일에서는 app.js 에 있는 코드를 public 폴더 밑에 있는 index.html 에 박아넣으라는 문구가 보인다. JSX 에 대하여 function App() { return ( ㄴㅇㄹㄴㅇㄹㄴㅇㄹ ); } app.js 파일 안에서 return 안의 소괄호에는 html 코드를 작성할수 있다. 그런데 여기에는 정확히는 JSX 문법을 작성해야 한다. (HTML 처럼 생긴 JSX 코드) 그러나 html 의 div class 를 쓰면 안된다. 자바스크립트의 문법을 가지는 JSX 이기 때문에 class 는 자바스크립트의 class 를 나타내므로 div className 을 써주..

위코드 2주차....바쁘게 지나간 일주일이었다. 나는 이 일주일을 기록해보고 회고해보고자 한다. 월 - 금 우선 이번 주 중점적으로 했던 일은 HTML + CSS + JS 로 인스타그램을 따라 만들어 보는 것이다. 아래는 결과물이다. 인스타그램을 따라 만들면서 느꼈던 생각은... 역시 난 프론트엔트 개발자가 적성에 맞는다는 느낌이었다. 기능 하나하나를 구현하고 원하는 대로 결과가 이루어질 때마다 희열이 느껴졌다. 사실 나는 HTML 과 CSS 가 좋아서 프론트엔드 개발자가 되기로 맘 먹은 거였는데 JS 로 기능을 구현할 때, 내가 이런 기능을 구현하려면 어떤 순서와 절차가 필요할까? 내가 빼먹은 순서, 절차가 있는가? 그게 화면에서 구현이 잘 되어지는가? 이렇게 수학 문제를 푸는 느낌이고 직접적으로 해결..

깃(Git) 에서 브랜치(branch) 를 사용하는 방법에 대해서 알아보자. 깃(Git) 은 동시에 여러 개발자들이 프로젝트에서 각기 다른 기능을 개발할 수 있도록 브랜치 기능을 제공한다. 각자 각기의 작업공간에서 작업하므로 서로에게 영향을 주지 않는다는 면에서 서로 다른 개발 작업을 수행할 수 있다. 브랜치의 기본 동작과정 기본적으로 Git 저장소를 만들면 자동적으로 마스터 브랜치가 생성이 되는데, 이 브랜치는 일반적으로 배포가 가능한 수준의 안정화된 버전을 포함하고 있다. 마스터 브랜치는 항상 안정화되고 배포가 가능한 상태여야 한다. ↓ 즉, 합치기(Merge) 가 수행되기 전까지는 안정적으로 배포가 이루어지고 있다가, 모든 기능이 합쳐진 이후에 또 다시 배포할 수 있으므로 개발의 안정성이 매우 뛰어..

const information = { name: '김개발' } 여기에서 키 하나를 생성하고, 그 키에 값을 할당하기 위해서는 다음과 같이 써줘야 한다. const verb = 'developes' const project = 'facebook' information[verb] = project // [A] information.developes = 'facebook' // [B] B의 방식으로도 할당이 가능하지만 이 경우 키와 값은 항상 정해진다... 하지만 A와 같은 방법은 변수 verb와 project 가 가지는 값에 따라 다른 키와 다른 값을 가지는게 가능해진다. 객체 순회하기 object.keys 메서드 Object.keys 메소드는 어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드..