분류 전체보기

주차별 멘토링 미션 시작! 앞으로 있을 클론과제를 위해 사용해 보면 좋을 거 같은 CSS를 모아봤다. 근데 내가 쓸 수 있을지는 모르겠네..^^ 아냐 할 수 있어ㅎ 1. button See the Pen Button Hover Effects by Kyle Brumm (@kjbrum) on CodePen. See the Pen CSS BUTTONS!! by Derek Morash (@derekmorash) on CodePen. - 가상선택자 hover 와 가상요소 before, after를 사용해서 버튼에 다양한 효과를 준다. - 나는 뭔가 어떤 사이트에 들어갔을 때 간단해도 버튼에 간단한 효과가 있으면 계속 마우스를 올리게 되는 거 같음...!😋 See the Pen Confetti Button by M..

- 개발자라면 떼놓으려고 해도 떼놓을 수 없는 git 과 github를 정리해보자 - 특강을 들으면서 정리해 둔 내용 # 버전이란? - “프로젝트 범위”에서 유의미한 수정(변화) 1. 버전 관리 시스템(Version Control System, VCS) 버전 관리 백업, 복구 (선택) 협업 2. 버전 관리 시스템의 종류 로컬식 : 내 컴퓨너 안에서만, 협업 X 중앙 집중식 VCS : 서버에서만 버전 관리(백업), 파일 하나하나 분산식 VCS : 모든 컴퓨터에서 "프로젝트 단위" -> 번거로운 / 위험성 X (ex. Mercurial, Bazaar, Git-Github) 3. 깃과 깃허브의 관계 깃은 OO식 버전 관리 시스템 깃은 우리들 컴퓨터에 설치하는 프로그램 “버전 관리” 우리 컴퓨터에서만 일어나는 ..

✨프로젝트 생성하기 1. firebase 홈페이지 접속하기 Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 2. 시작하기 클릭 3. 기존의 프로젝트가 있다면 프로젝트 만들기 클릭 or 처음이라면 프로젝트 추가하기 클릭 4. 프로젝트 이름 지정하기 5. Google 애널리틱스 체크박스 해제 → 프로젝트 만들기 클릭 ✨호스팅 설정하기 빌드 탭 → Hosting 클릭 1. 시작하기 클릭 2. 윈도우는 명령프롬프트 → 오른쪽버튼 → 관리자권한으로 실행 3. 명령어 복사해서 설치 → 다음 클릭 4. 내 프로젝트 루트 디렉토리로 가서 명령어 복사해서 설치 (vs code로 했다면 해당 프로젝트..

# CSR (클라이언트 사이드 렌더링) 이란? ​ SPA(Single Page Application) → 사용자가 한페이지 내에서 머무르면서 필요한 데이터를 서버에서 받아 와서 부분적으로 업데이트 하는것 ​ CSR (클라이언트 사이드 렌더링) 서버에서 인덱스라는 HTML 파일을 클라이언트에 보내주면 HTML은 텅텅 비어져 있기 때문에 처음에 접속하면 빈 화면만 보인다. 다시 링크된 어플리케이션 자바스크립트를 서버로 부터 다운받는데 이 자바스크립트에는 로직, 여러가지 소스코드들이 모두 다 포함되어 있다. 그렇기 때문에 사이즈가 커서 다운받는데 시간이 소요된다. 추가로 필요한 데이터가 있다면 서버에 요청해서 데이터를 받아온 다음에 이것을 기반으로 동적으로 HTML 을 생성해서 사용자에게 최종적인 어플리케이션..

# useReducer useState 처럼 리액트의 상태관리를 돕는 도구 복잡한 상태변화 로직을 컴포넌트에서 분리 복잡한 코드를 깔끔하게 정리할 수 있어서 유지보수에 좋음 Readucer / Dispatch / Action 으로 이루어져 있다. 예를들어 우리가 은행거래를 할 때를 생각하면 쉽다. 1. 철수가 은행에서 거래를 하기위해 요구(Dispatch)를 한다. 2. 그 요구에는 '만원을 출금해주세요' 라는 내용(action)이 있다. 3. 그리고나서 은행(Reducer)에 전달을 한다. 4. 은행은 내용대로 처리를 한뒤 철수의 은행거래내역(state)에 업데이트를 해준다. reducer : state를 업데이트 하는 역할(은행) dispatch : state 업데이트를 위한 요구 action : 요..

# React.memo 리액트에서 제공하는 고차 컴포넌트(HOC) 고차 컴포넌트? 어떠한 컴포넌트를 인자로 받아서 최적화된 컴포넌트를 반환해주는 함수 최적화된 컴포넌트는 props check를 통해 자신이 받는 props에 변화가 있는지 확인한 후 있다면 렌더링 해주고 없다면 기존에 있던 내용을 재사용 해준다. 오직 props 변화에만 의존하는 최적화 방법 React.memo가 필요할 때? 1. 컴포넌트가 같은 Props로 자주 렌더링 될 때 2. 컴포넌트가 렌더링이 될때마다 복잡한 로직을 처리해야 할 때 # 예제 1 부모 컴포넌트 import React, { useState } from 'react'; import './App.css'; import Child from './Child'; functio..