즐코

왜 타입스크립트를 쓰는거? 자바스크립트는 런타임 (브라우저 또는 노드)에서 타입이 결정되는 dynamically typed 언어이다. eslint 설정이 없는 이상, 정의하지 않은 함수, 변수를 호출해도 코드를 작성하고 저장하는 동안은 어떤 에러도 던지지 않는다. 대신, 그 코드가 실행되는 런타임에 에러가 발생하고 try-catch 문을 쓰지 않는 이상 프로그램이 멈춰버리는 경우가 발생한다! 이건 사용자경험 측면에서 최악의 경우라고 본다. 반면, 타입스크립트는 statically typed 언어다. 자바스크립트와 달리, 컴파일 환경(특정 프로그래밍언어를 다른 프로그래밍 언어로 옮기는 과정)에서 타입 검사를 실시해서 에러를 나타내준다. 따라서 코드를 작성하는 와중에 잘못된 부분이 있다면, 빨간줄로 에러를 ..

블록체인 블록 - 블록을 체인형태로 연결한 자료구조 블록? block = header + body 로 이루어진 객체와 같다. (실제론 이렇게 header, body 나누진 않는다, 그냥 이해를 돕기 위한 구조라고 생각하면됨) block hash값 header Version previousBlockHash MerkleRoot Timestamp Difficulty (난이도) Nonce Height body data (transaction) [data1, data2,....] block hash값 (블록의 이름 정보) : block header 정보를 모두 합산 후 SHA256으로 변환한 값이다. ( 버전 + 이전 블록 해시 + 블록 총 생성 수 + 머클루트 + 타임스탬프 + 난이도 + 논스 ) => SHA..

시퀄라이즈란? ORM 도구이다. mysql과 같은 DB 작업을 쉽게 할 수 있도록 도와주는 라이브러리이다. 여기서 ORM 이란 뭘까? ORM : Object-Relational Mapping : 자바스크립트 객체와 관계형 데이터인 DB를 매핑해주는 도구 쉽게 말하자면, 자바스크립트 구문을 알아서 sql로 번역해준다. Mysql 뿐만 아니라 MariaDB, PostgreSQL 등 다양한 데이터베이스를 쓸 수 있게 해준다. 1/ 시퀄라이즈에 필요한 패키지 설치 및 기본 세팅 sequelize-cli : 시퀄라이즈 명령어 실행을 위한 패키지 mysql2 : mysql과 시퀄라이즈를 이어주는 드라이버 npm install sequelize sequelize-cli mysql2 // 설치 완료 후 npx sequ..

useMemo 와 용도는 동일하다. https://yjleekr.tistory.com/68 다른 점은 useMemo는 내부의 콜백함수가 리턴하는 값을 메모이제이션 해주는 반면, useCallback은 콜백함수 자체를 메모이제이션 해준다. 아래 예시처럼, 함수 자체를 메모이제이션 해두고, 함수가 필요할때마다 새로 생성하는 게 아니라, 메모리에 저장해두고 필요할때마다 재사용할 수 있게 도와준다. 따라서, 함수형 컴포넌트 내에서 다른 값이 변경되어 컴포넌트가 재렌더링되어도 저 useCallback 으로 감싸고 있는 함수는 다시 생성되지 않고, 이전에 메모이제이션해둔 함수를 가져와서 쓰는 거다. 다만, 두번째 인자로 들어가는 의존성 배열의 값이 변경될때만 함수가 재선언된다. const calculate = us..

useMemo 컴포넌트 성능 끌어올리기에 쓰인다! useMemo => Memoization에서 따온 말이다. 메모이제이션이란!? 동일한 값을 반복적으로 호출해야한다면 맨 처음 값을 계산할 때 그 해당 값을 메모리에 저장해서 필요할 때마다 메모리에서 꺼내서 재사용하여 쓸데없이 반복되는 계산을 막아주는 기법이다. 자주 필요한 값을 맨 처음 계산할 때 캐싱해둬서 값이 필요할 때마다 꺼내서 사용한다는 뜻 함수형 컴포넌트는 말그대로 함수이기 때문에 컴포넌트가 매번 렌더링 될때마다 함수가 호출되고, 그 안의 모든 변수들도 초기화 된다는 뜻이다. 따라서, 그 안에서 무의미하게 반복적으로 실행되는 값이 있다면, useMemo를 사용해서 메모이제이션을 해주면 효율적이겠다. useMemo는 처음에 계산된 결과값을 메모리에..

redux라이브러리를 사용하겠지만,, contextAPI 복습을 해보았다. 원래 context는 Redux에서 나온 개념인데, redux 만든 사람이 react팀으로 가면서 해당 context API 를 만들었다는 얘기가 있다. 암튼, 전역적으로 여러 컴포넌트 내에서 쓰일 데이터가 있다면 이 context API를 사용하는 게 좋다. ex) 로그인한 사용자 정보, 페이지 테마 (다크/라이트모드), 사용언어 등등.. 자세히 예를 들자면, App -> Toolbar -> ThemeButton 이런식으로 컴포넌트들이 있고, ThemeButton만 App의 특정 props가 필요하다고 가정한다. 이 때, context API 가 없었다면, props 가 필요없는 Toolbar 컴포넌트가 쓸데없이 그 prop..

useRef 에 대해서 애매한 부분이 있어 다시 공부해보았다. DOM 요소에 접근할때만 사용한다 생각했는데, 다시 공부해보니 값 변경 시 불필요한 렌더링을 발생시키지 말아야할 경우 (뭔가 굉장히 자주 바뀌는 값이 있을 때) state 대신 사용하면 매우 유용할 것 같다. const ref = useRef(value) {current:value} 객체를 반환해준다. 반환된 ref 는 컴포넌트의 생애주기 동안 유지가 되서 컴포넌트가 계속해서 렌더링이 되어도 일반 변수와 다르게 초기화가 되지 않고, unmount되기 전까지는 값을 그대로 유지할수있다. 1- 어떤 값을 저장해두는 저장공간으로써 사용 state 변화 => 새로 컴포넌트 렌더링 => 함수형 컴포넌트 내부의 함수들이 다시 호출되고 그 내부의 변수들도..

첫번째 인자인 콜백함수만 들어가면 ? 1/ 컴포넌트가 첫 렌더링 될때 useEffect의 콜백함수가 실행 2/ 화면 안의 모든 컴포넌트들이 변경될때마다 useEffect의 콜백함수가 실행됨 useEffect(() => { console.log('hi Effect') }) 두번째 인자로 배열이 들어간다면? (dependency array) 1/ 컴포넌트가 첫 렌더링 될때 useEffect의 콜백함수가 실행 2/ 배열안에는 상태나 props가 들어가는데, 이 특정값이 업데이트 될 때마다 useEffect의 콜백함수가 실행됨 마치 componentDidUpdate와 유사하다. const [count, setCount] = useState(0); const [input, setInput] = useState('..

action이 reducer에게 dispatch되기 전 추가적인 작업을 할 수 있게 해주는 게 미들웨어 쉽게 말하자면, action이 reducer-store에 가기 전 중간에 실행하는 함수들의 모음을 미들웨어라고 본다. 리액트 앱에서 back 서버에 axios요청을 날리거나 할 때 리덕스 미들웨어를 사용해서 처리하곤 한다. 액션 -> 미들웨어1 -> next -> 미들웨어2 -> next -> 리듀서 -> 스토어 미들웨어 템플릿은 아래와 같이 두 개의 함수를 연달아서 리턴해주는 고차함수이다. function middleware(store) { return function (next) { return function (action) { // 작업~~ } } } 두 개의 익명함수를 리턴하기때문에 대부분 ..

1. react router 만들기 2. redux 맛보기 1. react router 만들기 1. react-router-dom : 클라이언트의 URL 요청에 따라 페이지를 렌더해주기 위한 모듈 (SPA를 위한 react 이므로 새로운 페이지를 렌더할 때 새로고침이 아닌 한 화면에서 데이터만 바꿔주는 형태이다) npm install react-router-dom 로 설치 2. BrowserRouter / Link / Routes / Route 라우터를 react-router-dom에서 가져온다. - BrowserRouter : 최상위 컴포넌트로서 history API를 사용하여 url 과 ui를 동기화하는 라우터 - Link : A 태그 대신 써야하는 컴포넌트 (to 속성에 설정된 링크로 이동 / hi..