본문 바로가기
반응형

개념공부41

[Next.js] router, Link, a - page 이동 방법 tag 보다시피 브라우저가 다른 페이지로 보내기 위해 전체 페이지를 새로고침 하게된다. 이렇게 되면 페이지가 느려지고, SPA의 장점을 이용하지 못하게 된다. 그럼 해결방안은? Link Link태그를 사용해야한다. Link태그는 next.js에서 next/link 안에 들어있는 기능이다. 를 넣어주면 된다. 이처럼 새로고침이 안일어나고 페이지 이동이 되는것을 볼 수있다. useRouter hook 그럼 a태그는 어디에 사용하는 것일까? Link태그 말고도 next.js의 useRouter를 이용하여 페이지를 이동 시킬 수 있다. 하지만 아래에서는 next.js에서 a태그를 사용하는 것을 보여주겠다. a태그는 link를 연결하는 것이 아닌 Link 태그에서 적용 시킬 수 없는 style이나 classNam.. 2022. 3. 17.
[Next.js] Client-side Render 와 Static Pre Render (feat.Library 와 Framework ) React.js 는 Library React router DOM을 설치해야하고, router를 설정하고, 만들고, 설계하고 component를 import 해야한다. Next.js는 Framework 코드를 정해진 적절한 곳에 작성을 하면 코드를 불러와서 모든걸 동작하게 하는 것 특정한 규칙이 있어서 그것을 따라 코드를 작성해야 제대로 동작한다. React router DOM을 설치해야하고, router를 설정하고, 만들고, 설계하고 component를 import 할 필요가 없다. Next.js 란? - pages에서 name으로 router를 처리할 수 있다. - jsx를 사용하기위해 따로 React를 import 할 필요가 없다. useState나 useEffect를 사용하기 위해서는 필요하다. N.. 2022. 3. 17.
Styled-component typescript Props 받기 프로젝트를 진행하는데 JS로 개발을 할 때에는 styled-component에 props를 전달해주는데 에러가 없었는데 TypeScript로 개발을 함에 있어서 에러가 발생하였다. 에러는 Property 'height' does not exist on type 였다. 이는 props로 받는 값의 타입이 지정되어있지 않다는 뜻인걸 바로 알아차렸지만 어떻게 타입을 적용 시킬지에 대해 찾아보았다. 1) 단일 props 사용시 styled-components를 작성할 때 여러개 props를 사용하여 컴포넌트를 정의한다면 인터페이스를 사용하여 분리하여 사용할 수 있다. 컴포넌트에 타입지정할때는 styled.div 와 같이 사용한다. // styled-components에 1개 props 타입지정 // const .. 2022. 3. 16.
[Redux-middleware 리덕스 미들웨어 中] Redux-Saga란? Redux-middleware 1. 리액트 미들웨어란 무엇인가? - 기존의 리덕스는 액션이 발생하게 되면, 디스패치를 통해 스토어에게 상태 변화의 필요성을 알리게 된다. 우리가 알고있는 리덕스는 동기적인 흐름을 통해 아래와 같이 동작한다. 액션 객체 생성 -> 디스패치로 액션을 발생시킴 -> 리듀서는 정해진 로직에 의해 처리한 뒤 새로운 상태 값 반환 하지만, 동기적인 흐름만으로는 처리하기 힘든 작업들이 있다. 예를들어, 시간을 딜레이시켜 동작하게 한다던지, 외부 데이터를 요청하여 그에 따른 응답 화면을 보여주어야 한다면? 리덕스에서 이러한 비동기 작업을 처리하기 위해 사용하는 것이 리덕스 미들웨어 이다. 2. 리덕스 미들웨어의 종류 리덕스 미들웨어를 직접 만들어서 처리할 수도 있지만, 흔히 이미 만들어.. 2022. 3. 6.
React 공부한 내용 정리 [React란, 특징, 함수형컴포넌트, Hook] React란? facebook이 개발한 프론트엔드 라이브러리로, "컴포넌트" 라는 개념에 집중이 되어있다. SPA나 모바일 앱 개발 시 토대로 사용될 수 있음. 특징 Data Flow Component 기반 구조 Virtual Dom Props and State JSX 1. Data Flow React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다. Angular.js와 같은 양방향 데이터 바인딩은 규모가 커질수록 데이터의 흐름을 추적하기가 힘들지만, 단방향 흐름은 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 해준다. 2. Component 기반 구조 Component : 독립적인 단위의 소프트웨어 모듈 / 소프트웨어를 독립적인 하나의 부품으로 만드는 방법 React.. 2022. 3. 2.
Redux (리덕스)의 개념 리덕스를 쓰면 좋은 이유 - 중앙 집중적인 데이터 스토어를 이용하여 관리한다. state는 읽기전용이다. - 리액트에서 state 를 업데이트 해야 할 때, setState 를 사용하고, 배열을 업데이트 해야 할 때는 배열 자체에 push 를 직접 하지 않고, concat 같은 함수를 사용하여 기존의 배열은 수정하지 않고 새로운 배열을 만들어서 교체하는 방식으로 업데이트를 한다. - 리덕스에서도 마찬가지로 기존의 상태는 건들이지 않고, 새로운 상태를 생성하여 업데이트 해주는 방식으로 해준다. 리덕스에서 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경 되는 것을 감지하기 위하여 shallow equality 검사를 하기 때문이다. 리듀서는 순수한 함수 순수한 함수, 라는 개념이 익숙하지 않으시죠. .. 2022. 1. 28.
React 개념 및 TIC TAC TOE 만들기 React 기초 React란? 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaSrcript 라이브러리 "컴포넌트"라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 도움 개별 컴포넌트는 props라는 매개변수를 받아오고 render 함수를 통해 표시할 뷰 계층 구조를 반환 render 함수란? 화면에서 보고자 하는 내용을 반환하는 함수. 다수의 React 개발자는 "JSX"라는 특수한 문법을 사용하여 React의 구조를 보다 쉽게 작성 JSX란? JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 카멜표기법을 사용. 카멜표기법이란? class -> className / tabindex -> tabIndex 컴포넌트(Component.. 2021. 12. 27.
알고리즘 디자인 설계 : Flowchart와 Psuedo-code 알고리즘 디자인 설계란? '무엇을 어떻게 개발해?' 라는 의문에 답을 하는 작업 제일 먼저 무엇을 원하고 필요한지를 잘 파악해야함. 그 후 그것들을 잘 정리하여 기능들로 추려낼 수 있음 이 작업이 잘 되야지 나중에 필요하지 않은 기능을 개발하는 불상사를 예방할 수 있음 Flowchart란? 일의 진행 순서도를 이해하기 쉽게 그림으로 나타낸 것 Pesudo-code란? 개념적 또는 알고리즘 적으로 구조적인 규칙을 이용해서 작성하여 사람이 읽기 위한 것. 개발자가 아닌 지식이 전혀 없는 일반적인 사람이 봐도 이해 할 수 있도록 가독성 좋게 작성해야함 Pesudo-code Reference 1. Variables letter grade 2021. 12. 27.
Git 디렉토리 올리는 법, Git 디렉토리 안에 파일 올리는 법(vscode 이용) 1. git 디렉토리 올리는 법 올리고자 하는 디렉토리가 아래처럼 한 폴더 내에 있어야 한다. 상위 디렉토리에서 마우스 오른쪽 클릭 후 git bash here를 선택한다. - git init 처음 깃 등록할 때 초기설정 - git remote add origin [repository 주소] - git add . .은 폴더 내에 있는 파일을 전부 올리겠다는 뜻 - git status git status를 통해 올리고자 하는 backend, frontend, ppt 파일이 잘 들어있는지 확인할 수 있음 - git commit -m "작성하고자 하는 내용" - git push origit master or - git push origin +master 2. vscode를 이용하여 git 디렉토리 안에 파일,.. 2021. 12. 21.

티스토리툴바