분류 전체보기101 Git branch & merge 개요 및 Git Flow 전략 branch의 개념 🔖git에서 어떠한 작업을 독립적으로 진행하기 위한 개념 git branch mybranch ⬆️이와 같이 특정 디렉토리 안에서 신규 브랜치를 생성한다. 🔖브랜치를 이동하는 커맨드로는 ==checkout==이 있으나, 현재는 기능별로 분리 (switch, restore) git checkout mybranch git switch mybranch git checkout -b mybranch (구버전) git switch -c mybranch ⬆️생성과 이동을 동시에 하는 커맨드 git branch -d mybranch git branch -D mybranch (강제 삭제) ⬆️브랜치를 삭제하는 커맨드 🔖신규생성한 branch를 원격 레포지토리에 push하기 위해서 커맨드를 이용한 설정이.. 2024. 3. 18. [1주차] CSS Cascading Cascading은 기본적으로 "폭포, 위에서 아래로 떨어지는" 이라는 뜻을 가진다. CSS에서의 Cascading CSS의 맨 앞 글자의 의미이기도 하듯이 가장 중요하게 적용되는 원리이다. 같은 요소에 대해 여러 스타일이 중복되는 경우의 어떤 스타일을 기준으로 적용할지 결정하는 규칙 "스타일 우선순위"와 "스타일 상속"을 기반으로 규칙을 설정 스타일 우선순위 스타일 요소는 우선순위를 가지고 있는데, 우선순위에 따라서 적용되는 스타일이 결정된다. 1. 중요도 스타일을 선언한 주체(작성자, 사용자, 사용자 도구)에 따라 우선순위를 설정 작성자 > 사용자 > 사용자 도구 순서로 결정 (!important를 사용해 최우선순위 설정 가능) 2. 명시도 셀렉터가 가리키는 것이 명확할 수록.. 2024. 3. 11. 페이지 라우팅 브라우저를 거쳐 웹 서버에 원하는 http를 요청하고 이에 맞는 html 파일을 받아와 렌더링하는 과정 원리 전통적인 방식 : MPA (요청한 페이지의 html을 다 받아오는 방식) -> 페이지를 변경할 때마다 기존의 렌더링했던 페이지를 모두 제거하고 다시 받아옴(효율성 X) 리액트의 방식 : SPA (하나의 페이지를 통해 모든 라우팅을 처리) -> HTML (빈 껍데기) + JS Files (.jsx등의 모듈, etc…) = Bundling (파일묶음) => React App -> Bundling된 컴포넌트 단위의 모든 파일이 제공되어 요청이 필요없이 페이지 스스로 변경 하나의 HTML파일만 존재하고 JS로 여러 요소를 그려내는 것 : CSR (Client Side Rendering) // Router.. 2024. 2. 22. 최적화 웹 서비스의 구현에 필수적인 항목(서버 성능 개선, 로딩 속도 개선, 불필요한 재연산 방지, etc…) useMemo 특정 함수 호출 시 정해진 조건을 만족해야 호출될 수 있도록 하는 Hook // ex) // 첫번째 인수로 callback 함수를 넣고, 리렌더를 원하지 않는 연산을 작성 const {totalCount, doneCount, notDoneCount} = useMemo(() => { const totalCount = todos.length; const doneCount = todos.filter((todo) => todo.isDone).length; const notDoneCount = totalCount - doneCount; return { totalCount, doneCount, no.. 2024. 2. 21. useReducer 컴포넌트 외부에 State 관리 로직 분리✅ 로직 useState()와 거의 동일 import { useReducer, useState } from "react" function Reducer(state, action) { // Reducer 함수 if(action.type === "DECREASE"){ return state - action.data; } else if(action.type === "INCREASE"){ return state + action.data; } } export default function B() { // count는 State값, dispatch는 type과 data와 같은 action값 const [count, dispatch] = useReducer(Reducer, 0.. 2024. 2. 20. React Custom Hooks 🚫 React Hooks는 일반 함수에서 호출할 수 없다. -> Component 내부 or ==또다른 React Hook(Custom Hook 제작 후 로직 분리)==에서만 가능 // Custom Hook 만드는법 // 이름 앞에 use를 붙여 Custom Hook으로 인지시키기 // useInput.js import { useState } from "react"; export default function Input(){ const [value, setValue] = useState(); // 부모로부터 value와 onChangeText를 받아옴 const onChangeValue = (e) => { setValue(e.target.value); }; return [value, onChangeVal.. 2024. 2. 20. 이전 1 ··· 6 7 8 9 10 11 12 ··· 17 다음