[React] 리액트 다루기 (계속업데이트)

1. 이미지 import logo from './logo.svg'; 이런식으로 불러오는게 좋다. 이렇게 사용하면 이미지경로에 해시값이 들어가기떄문에 , 브라우저 캐싱을 효율적으로 사용할수있다. 이미지 내용변경시 해시값또한 변경된다. 기존에는 그냥 src에 때려박았는데 수정해야할듯하다.

→2021.05.05

JavaScript/Redux

[Redux-toolkit] Redux-toolkit 이란?

기존에 Redux- saga를 사용하면서 기능면에서는 만족했으나 코드가 너무 길어진다는 단점이있었다. 그에 비해 Redux-tookit은 CreateSlice를 통해 Action과 Reducer를 한번에 정의할수있고, 자체적으로 immer를 내부적으로 도입해서 사용하고있어서 코드가 짧아진다. 또한 비동기처리도 CreateAsyncThunk를 통한 , thunk 미들웨어를 내장하고있어서 추가로 비동기를 위한 외부 라이브러리를 설치할 필요가없다! 물론 saga의 기능을 쓰고싶다면 따로 설치하여 연동이 가능하다. 또한 redux devtool를 디폴트로 제공한다. Redux-toolkit에 포함되는 것 configureStore() : 단순화 된 구성 옵션을 제공합니다 . 슬라이스 리듀서를 자동으로 결합하고 ..

→2021.04.18

카테고리 없음

[Redux] Redux , Redux -saga 사용이유

로그인, 회원가입 ,프로필 같은경우 공통적인 데이터가있다. 그것은 바로 로그인한 사람의 정보, 로그인여부 등등이있다. 이 공통적인데이터는 컴포넌트가 분리되어있으므로 데이터가 흩어져있는데 이값을받을려면 부모 -> 자식 컴포넌트 이렇게 받아올수밖에없다. 이런경우를 중앙에서 한번관리를 하기위해 리덕스를 사용한다. ==중앙저장소 역할을 하자 리덕스이외에도 .... mobex , contextapi , graphql(아폴로) 등 이있다! 규모가 된다면 웬만해서는 중앙저장소가 하나는 있으면 좋다 . 리덕스 장점 : 에러가나면 추적이 쉽다. 앱이 안정적이게된다 단점 : 코드가 길어진다.(앱이커지면 데이터도 커진다) 극복방안 : 중앙데이터 저장소를 쪼갤수있다., 완벽한 극복은 아니지만 어느정도 극복가능 . 모백스 장점..

→2020.12.03

카테고리 없음

Next.js 사용이유 ,하는일

검색엔진 SEO 최적화 고객들이 접근하는 페이지 기존 렌더링방식 브라우저 -> 프론트서버 -> 백엔드서버 -> DB ->백엔드 ->프론트 -> 브라우저 장점: 화면이 한번에 그려진다. 단점: 로딩속도가 느리다 과정이 길기떄문에. = 사용자불편 SPA 페이지 하나만받고 DB없이 화면만 받고 DB를 백엔드서버에서 직접받아옴 DB에 따라 화면을다르게 보여준다 장점 : 화면을 먼저 그려주기때문에 사용자가 만족 = 사용자의 인터렉션이 빨라짐 . 단점: 검색엔진 에서 DB 값이 없고 로딩만 나오기떄문에 . 국내 검색엔진은 인식을 못함 SEO 에 불리함 .검색엔진 노출에 불리함. 무조건 리액트가 빠른건아님 => 해결방안 코드스플리팅을 통해 방문한 곳에 값만 보내줄수있다. Next.js 첫방문시 모든페이지를 받아옴 다..

→2020.12.02

카테고리 없음

[이론] 브라우저 랜더링 과정 , 리액트를 왜쓰는가?

렌더링 과정 1.DOM ,CSSOM 생성 서버로부터 HTML ,CSS 를 받는다. HTML ,CSS 는 단순한 텍스트 이므로 연산과 관리에 유리하도록 Object Model 로만든다. HTML,CSS 는 각각 DOM (Docoument Object model) ,CSSOM (Css Object Model) 로 만들어진다. 2.Render Tree 생성 Dom 과 Cssom 을 이용하여 Render Tree 를 생성한다. Render tree 는 스타일정보가 설정되어있으며 실제 화면에 표현되는 노드들로만 구성된다. 실제 화면에 표현되는 노드: display: none 은 render tree에 포함안됨 visibility : invisible 은 공간을 차지하기에 포함됨 3.Layout 브라우저의 뷰포트내..

→2020.12.01

JavaScript/Redux

[Redux] Redux-Saga 원리 , 개념정리

saga의 아이디어는 generater 함수인데 .. * 별을찍는것이다 이렇게 function* 충격과 공포임 function* idMaker(){ var index = 0; while(true) yield index++; } 보통 함수라면 while(true)시 무한 반복이 되겠지만 generater 함수에서 yield를쓴다면 함수를 호출할떄마다 한번 하고 멈추고 한번하고 멈추게된다. var gen = idMaker(); // "Generator { }" console.log(gen.next().value); // 0 console.log(gen.next().value); // 1 console.log(gen.next().value); // 2 실제 콘솔로그를 찍는다면 0 멈추고 다시 호출하면 1 멈추..

→2020.11.26

JavaScript/Redux

[Redux] redux-thunk / redux-saga

redux - thunk , saga 는 리덕스 미들웨어라고 부른다 . redux-thunk는 리덕스 미들웨어에서 비동기 작업을 처리하는데 사용하는 미들웨어로 비동기 작업을 다루는 미들웨어 중에서 가장 대표적인 리덕스 미들웨어이다 . 여기서 비동기 작업을 처리한다는게 핵심 ! 기존 리덕스는 비동기처리가 안되기때문에 thunk를 간단히 찾아보았을때, dispatch를 나중에 , 한번에 dispatch를 여러개해준다! 이게 핵심이었다. 또한 saga와 비교하였을때 매우간단하다. 파이썬 프레임워크로 예를 들자면 thunk는 플라스크 , saga 는 장고 같은 느낌을 받았다. 내가 내린결론은 간단한 프로젝트에서는 thunk를 쓰면 낫베드지만 결국 조금규모가있다면 saga를 쓰는게 맞다 이다. saga에는 대표적..

→2020.11.26

Python/Django

[Django] django -mysql 연동

@@@@ 2020/6/20 aws ec2 ubuntu 18 기준! @@@@2020/10/27 mysqld.cnf 파일수정 추가 외부접속 1. mysql 설치 apt install mysql-server mysql-client // 아마존 리눅스 일경우 (mysql 5.7) -sudo yum install mysql57-server -sudo service mysqld start 2 . 아이디 생성 mysql -u root -p //임시 db 생성 create database django ; //사용자 생성및 '%' 외부권한 접속 허용 grant all privileges on django.* to 사용자이름@'%' identified by '사용자패스워드'; //저장 flush privileges; qu..

→2020.10.27

카테고리 없음