목록웹 개발 (20)
Gom3rye
cra 이용해 npx create-react-app {프로젝트명} 로 리액트 시작하기 HTML으로 Hello HTML! 출력하기 Hello HTML! JS로 Hello Javascript! 출력하기 React로 Hello React! 출력하기 // react를 가져오기 위한 코드 비교 - JS에서 createElement 한 후 textContent로 따로 저장해준 것처럼 하지 않아도 React에서는 children을 통해서 "Hello React!"라는 string을 받아줄 수 있다. - ReactDOM이라는 친구가 render 함수를 통해 element를 rootElement에 넣어서 렌더링 해준다. JSX로 Hello JSX! 출력하기 // react를 가져오기 위한 코드 // 바벨 스크립트 넣어주..
컴포넌트 성능 최적화 useMemo useCallback 위 : 컴포넌트 성능 최적화를 위한 hook 2가지 리액트가 리렌더링 하는 조건 자신의 state가 변경될 때 부모 컴포넌트로부터 전달받은 props가 변경될 때 부모 컴포넌트가 리렌더링 될 때 Memoization 해당 값을 메모리에 저장해 필요할 때마다 다시 계산하지 않고 메모리에서 꺼내서 재사용하는 개념. 즉 함수를 새로 실행하지 않고 메모리에 있으니까 그 값을 다시 가져오기만 하는 개념. 함수형 컴포넌트의 렌더링 과정 1. 함수 호출 2. 모든 내부 변수 초기화 -> 함수가 복잡할 경우 모든 변수들이 초기화 되고 그 안에 있는 함수들이 또 반복적으로 호출되니까 비효율적이다. useMemo를 사용한 함수형 컴포넌트의 렌더링 과정 1. 함수 첫..
Hooks란? 먼저 side effect 개념 알기 side Effect : react 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과 >> 데이타를 가져오려고 외부 api를 호출할 때 화면에 렌더링할 수 있는 건 뿌려주고 실제 가져 올 데이타는 비동기로 가져오는 것이 권장되고 있다. 사용자 경험 측면에 유리하도록 -> 즉, 요구되어지는 effect 이외에 다른 effect가 발생하는 현상으로 Hook은 이 side effect를 수행하는 역할은 한다. - 함수현 컴포넌트에서 사용되어지는 몇 가지 기술을 hook이라고 한다. - 함수형 컴포넌트에서 상태 관리를 할 수 있는 useState, 렌더링 지표에 작업을 설정하는 useEffect 등의 다양한 기능을 제공한다. - side..
package.json 파일이 있는 곳에서 git clone 명령어를 쳐야지 말을 듣는다. 요새는 하나의 파일 안에 html, css, js를 모두 포함하는 패턴이 인기를 끌고 있다. Styled Component : class, id, tag name을 가져와 css를 적용시키지 않고도 js에서 css를 작성하는 방법 - 사용자는 원하는 스타일이 지정된 컴포넌트를 생성해 하나의 태그처럼 사용할 수 있다. - 리액트에서 ui단위를 나누어 컴포넌트화 하듯, 스타일을 컴포넌트화 해서 재사용이 가능하며 전역에서 중첩 사용되지 않게 (컴포넌트 자체에서만 적용됨) 만들어준다. - const 컴포넌트명 = styled.컴포넌트 `스타일코드`; => styled. 뒤의 컴포넌트는 반드시 react에서 제공하는 컴포넌..
git remote add origin 주소 : 해당 주소에 깃 연결 git init > git add . > git commit -m "~~" > git push origin master src 폴더에서 index.js, app.js 빼고 전부 삭제 React의 역할 index.html "root" div안에 생성한 element(ex, App.js)를 넣는 역할 id = "root" 가 있는 것이 실제로 보여지는 화면 React의 특징 Virtual DOM 웹 페이지를 이루는 태크들을 자바 스크립트가 이용할 수 있게끔 브라우저가 트리 구조로 만든 객체 모델 DOM 변경될 때마다 웹브라우저가 CSS를 다시 연산하고 레이아웃을 구성하고, 렌더링이 일어나는 과정에서 많은 시간이 허비된다. => 새로운 el..
각 사용자의 권한을 관리할 Enum 클래스 Role을 생성 스프링 시큐리티에서는 권한 코드에 항상 ROLE_ 이 앞에 있어야 한다. -> 코드별 키 값을 ROLE_GUEST, ROLE_USER 등으로 지정 시큐리티 관련 클래스는 모두 gom2rye.book.springboot.config.auth 패키지에 담는다. 설정 코드 작성이 끝났다면 CustomOAuth2UserService 클래스를 생성에 구글 로그인 이후 가져온 사용자의 정보등을 기반으로 가입 및 정보 수정, 세션 저장 등의 기능을 지원한다. registrationId : 지금은 구글만 사용하는 불필요한 값이지만, 이후 네이버 로그인 연동 시에 네이버 로그인인지, 구글 로그인인지 구분하기 위해 사용한다. userNameAttributeName..