복습용연습장

git diff diff --git a/master.txt b/master.txt //a랑 b로 이루어진 master.txt 두 파일을 비교하는 것 a는 이전의 파일 b는 이 후의 파일이다 index 74bac62..3ddcc83 100644 // 의미 x --- a/master.txt // 원래 파일 +++ b/master.txt // 이 후 파일 @@ -1,2 +1,3 @@ // -1,2에서의 -는 원래 파일을 뜻하고 1번줄 코드줄부터 보여준다는 뜻이고 //그 코드줄부터 몇개의 코드줄을 보여주는지 뜻한다. // +1,3은 +는 바뀐 파일이고 1번째 코드줄부터 3칸의 코드줄을 보여준다는 뜻 commit 완료된 코드입니다. // -, + 가 있는건 둘다 있는 코드이고 -commit 완료된 코드입니다2. ..

Git 2023. 3. 31. 02:41

https://hyunu0504.github.io/movie 영화 hyunu0504.github.io 프로젝트 과정 TMDB에서 제공하는 API를 사용하였습니다. 제공하는 API의 정보를 보고 현재 상영 중, 상영 예정작, 인기 영화를 보여주고 검색할 수도 있고 영화를 클릭했을 때 해당 영화의 상세정보를 보여주는 사이트를 만들고자 했습니다. useEffect를 사용해서 불필요한 렌더링이 안생기도록 했습니다. useContext로 데이터를 관리했습니다. 영화 상세 페이지에서 새로고침할 때 클릭한 영화의 ID값이 초기화 되는것을 local storage에 담아서 새로고침해도 보이도록 했습니다. 새로고침을 할때 404에러가 발생해서 확인해보니 깃헙은 SPA를 지원하지 않는다고 해서 react-route-dom..

REACT 2023. 2. 4. 15:21

1. 터미널에 npm install react-spinners --save 2. import import 사용하려는 스피너 from "react-spinners/사용하려는 스피너"; 여기서 고르면 된다. https://www.davidhu.io/react-spinners/ React Spinners www.davidhu.io

REACT 2022. 12. 7. 02:57

CSR,SSR CSR( Client Side Rendering ) 클라이언트에서 랜더링하는것을 CSR SSR( Server Side Rendering ) 서버에서 랜더링하는것을 SSR이라고 부른다. CSR의 장점 1. 페이지를 이동해도 웹사이트가 새로고침 되지 않는다. 2. SSR보다 훨씬 빠르고 효율적이다. SSR의 단점 1. 페이지를 이동할때 깜박인다. 2. CSR에 비해서 느리다 그 이유는 뭘까? SSR에서 요소가 추가된다고하면 서버에서 클라이언트로 보내서 원래 존재하던 요소들도 다시 랜더링해야된다 이전에 포스팅한 리액트에서 virtual DOM ( 가상 돔 )이 이전의 가상 돔과 비교해서 변경된 요소만 바꿔준다고 했다. 그게 CSR이다. 그렇기 때문에 SSR보다 빠르고 효율적이다 CSR의 단점 1..

REACT 2022. 8. 18. 20:12

SPA SPA는 Single Page Application의 줄임말이다. 말그대로 "싱글 페이지 어플리케이션" 페이지가 한개의 페이지로 구성되어있다. 예전의 웹사이트는 다른 페이지로 이동하면 서버에서 새로운 페이지를 불러와서 새로고침이 됐다면 SPA는 첫랜더링때 페이지 전체를 불러오고 페이지를 이동할때는 서버로부터 새로운 페이지를 불러오지 않고 내부를 수정해서 보여준다. 단점으로는 SEO에 좋지않다. DOM DOM은 HTML 요소들을 트리형태로 나타낸것이다. 트리 전체를 DOM이라고 하고 트리안에 있는 모든 요소 하나 하나들을 Node라과 부른다. 그리고 그 요소들은 다 API다. 사진에 있는 document가 자바스크립트에서 사용하는 document.~~이다. 그래서 querySelector처럼 DOM..

REACT 2022. 8. 16. 17:18

https://hyunu0504.github.io/todolist/ React App hyunu0504.github.io 1. useContext, useReducer 상태관리 ( 다크모드, Created Tasks, Done Tasks) 2. styled-component로 스타일링 3. modal창에서 배경 클릭시 발생하는 이벤트 버블링 해결 4. input창 입력 후 취소, 생성, 배경 클릭시 input창 값 초기화 5. input창 빈값일시 alret창 출력 6. 1023px 이하 반응형 디자인 7. useRef로 focus효과를 useEffect안에 첫랜더링, create버튼을 클릭할때 반응 8. 엔터 누르면 생성 버튼 클릭

REACT 2022. 8. 12. 17:54

useMemo, useCallback들은 컴포넌트를 최적화하기 위해서 사용한다 둘다 메모이제이션에 저장된 값을 반환한다. 메모이제이션이란 동일한 값을 가진 함수를 반복적으로 호출해야 된다면 처음 랜더링될때 그 값을 캐싱하고 그 값을 필요로할때 이전의 값을 캐싱한 값을 꺼내서 재사용하는 최적화하는 방법이다. useEffect처럼 의존성 배열안의 값이 변경되지 않는이상 메모이제이션의 값은 변경되지 않는다. 차이점은 useMemo는 값을 리턴, useCallback은 함수 자체를 리턴한다. useMemo const add = useMemo(() => { return ~~ }, [dependencyArray]) useMemo는 2개의 인자를 받는다 첫번째는 메모이제이션할 값 두번째는 의존성 배열(dependen..

REACT 2022. 7. 19. 23:24

useReducer는 useState처럼 state를 생성하고 관리할 수 있다. useReducer는 복잡합 state를 다룰때 사용하기에 여러개의 state를 관리해야 할 때 사용하면 state를 관리하기 편하고 유지보수에 좋다. useReducer를 import한다. import { useReducer } from "react"; 일반적인 useReducer 형태 const [state, dispatch] = useReducer(reducer, defaultValue) useReducer의 state, dispatch, reducer, defaltValue의 의미는 state : defaultValue의 현재상태 dispatch : reducer 함수를 실행시킨다. dispatch를 실행하면 redu..

REACT 2022. 7. 16. 17:16