front-end38

• 

  [NextJS] CRA+TypeScript 에서 Nextjs이사 - 폴더 구조 비교 1. 폴더 구조의 비교 1.React 프로젝트 - CRA+TypeScript 우선 가장 큰 특징은 리액트 프로젝트에선 다음과 같이 src폴더가 존재하고 그 안에 component apis assets feature hook pages shared stores types utils 와 같은 큰 카테고리의 폴더들이 존재한다. 각 폴더 안에는 또 component단위 혹은 기능 단위로 쪼개어 파일이 배치되어 있다. 위 폴더 구조를 보면 component폴더 안에 card컴포넌트를 구현할 폴더를 하나 만들고 그에 해당하는 index.tsx파일과 styeld.ts파일이 존재하는 것을 확인할 수 있다. 또한 리액트 프로젝트에서는 src폴더 안에 assets폴더를 만들어 사용할 아이콘, 폰트, 이미지들을 모아둘 수 .. front-end/Nextjs 2022. 6. 29.

• 

  [NextJs] CRA+TypeScript에서 NextJS로 이사 1. Create Next-app 추가 1. create next-app --typescript npx create-next-app@latest --typescript # or yarn create next-app --typescript # or pnpm create next-app --typescript 다음과 같은 코드로 typescript템플릿의 nextjs를 설치해준다. 2. yarn add next react react-dom npm install next react react-dom # or yarn add next react react-dom # or pnpm add next react react-dom 3. Package.json script 수정 "scripts": { "dev": "ne.. front-end/Nextjs 2022. 6. 29.

• 

  [React] 구글 폰트 리액트 프로젝트에 적용하기 1. 구글 폰트 사이트 접속 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 구글 폰트를 접속한 후 마음에 드는 폰트를 찾는다. 2. 폰트를 다운로드 후 압축해제 원하는 폰트를 누른 후 들어가면 다운로드를 하는 버튼이 존재한다. 그 후 프로젝트 폴더에 원하는 위치에 압축을 해준다. 나의 경우 src폴더 안에 assets폴더를 만들고 그 안에 fonts 폴더를 만들어 그 안에 사용하는 폰트들을 모아주었다. 구글 폰트에서 다운 받은 폰트를 압축해제해 보면 다음과 같은 파일이 들어 있을 것이다. 이 중 폰트 파일은 ttf파일이다. ... front-end/react 2022. 6. 28.

• 

  [React] CRA + Typescript Proxy 구축 1. Proxy란? 프록시란 대리라는 의미로 네트워크 기술에서 대리 응답을 해주는 개념이다. 보안 상이 문제로 직접 통신을 주고 받을 수 업는 사이에서 프록시를 이용해서 중계를 해준다. 그렇다면 proxy는 왜 사용하는 것일까? 캐쉬를 이용해 더 빠른 통신을 가능하게 한다. 차단된 사이트를 IP우회하여 접속이 가능하게 한다. 보안 문제를 해결해준다. 개발을 하면서 발생하는 CORS(Cross-Origin Resource Sharing)문제를 해결할 수 있다. 2. CORS(Cross Origin Resource Sharing) 일반적으로 브라우저에서는 보안 문제로 인해 동일 출처 정책을 따른다. 두 URL의 프로토콜, 호스트, 포트가 모두 같아야 동일한 출처로 볼 수 있는데 이 경우에서는 express... front-end/react 2022. 6. 22.

• 

  [React] react-router실험 1. react-router-dom 리액트에서는 클라이언트 단에서 routing을 자유롭게 해주기 위해 react-router-dom이라는 라이브러리를 제공하는데 대부분의 리액트 웹사이트를 보게 되면 가장 위의 App.tsx 파일에서 라우팅을 세팅해주고 Link component를 통해 페이지 별 이동을 제어해준다. 기본적인 내용은 가장 최상위 app의 모든 라우팅을 담고 있는 App.tsx에서는 다음과 같이 설정이 되어 있어야한다는 것이다. 위를 확인해보면 BrowserRouter컴포넌트 안에 Routes컴포넌트들이 들어있고 Route컴포넌트 안에 주소와 해당 주소로 이동했을 때 불러올 element를 설정해준다. 이 element는 우리가 만든 page가 되겠다. 2. 실험 내용 나는 div태그 하나.. front-end/react 2022. 6. 22.

• 

  [React] 파일 업로드 기능 구현 React를 통해 파일 업로드 기능을 구현하기 위해 우리는 미리 알아야할 지식이 있다. 첫 번째는 이미지와 비디오, 오디오 파일과 같은 파일이 어떻게 이루어져 있는 지를 알아야한다. 두 번째는 input태그의 type이 file일 때 미리보기 기능의 경우 올린 파일의 URL객체의 createObjectURL메소드를 이용하는 것이다. 세 번째는 React의 useRef훅을 사용해 직접적으로 HTML요소의 레퍼런스 값에 접근하는 법이다. 1. BLOB이란? 우리가 웹에서 객체를 다룰 때 흔히 json이라는 형식의 key, value쌍으로 이루어진 형식으로 다루게 된다. 하지만 파일이나 영상 이미지와 같이 용량이 큰 파일은 어떻게 다룰 것인가? 우리는 웹에서 이렇게 멀티미디어 데이터를 다룰 때 Blob이라는 .. front-end/react 2022. 4. 5.

• 

  [TS]타입스크립트 react props intrinsic attributes 오류 React에서 나는 이 오류가 리스트를 자식 component에게 주입하려고 할 때 발생했다. 내가 구성한 component 부모 - 자식 구조는 다음과 같다. 부모 - memoList -> contens -> contenItem - 자식 다음은 내가 최상위 component memoList에서 자식 컴포넌트로 내려보내려고 한 리스트이다. 여기는 memoList의 자식 컴포넌트 contents에서 contentList를 구조 분해 할당 문법을 사용하여 받으려고 하니 발생한 react props intrinsic attributes 오류이다. 리액트에서 props는 한 객체로 내려가게 되는데 이 props객체를 구조분해하여 할당하려고하니 다음과 같은 오류가 났다. 그래서 다음과 같이 타입을 정의해주니 오류.. front-end/JavaScript, TypeScript 2022. 3. 26.

• 

  React - Memoization 1. 리액트에서의 Memoization memoization이란 반복되는 연산이 많은 경우 이미 한 번 계산된 결과를 저장해두고 같은 component를 렌더링할 경우 저장해둔 값을 사용하는 방식이다. 프론트엔드는 화면에 많은 정보를 서버로부터 받아온 후 띄워야하는 과정이 있고 Dom Tree에 일부 컴포넌트가 추가되거나 삭제될 때마다 모든 Dom Tree의 값을 리렌더링해야한다는 점은 굉장히 비효율적이고 이 문제를 해결하기 위해 많은 고민을 해왔다. 그 중 React에서 렌더링 시간을 조금이라도 줄일 수 있는 방법을 제공하는 것이 오늘 소개할 React.memo, useMemo, useCallback과 같은 훅이다. 2. React.memo 우리는 흔히 화면에서 같은 디자인의 컴포넌트지만 안의 내용만 .. front-end/react 2022. 3. 26.

• 

  React - React Slick 1. React Slick 소개 쇼핑몰 사이트나 OTT 서비스 사이트 같은 곳을 방문하면 영화들이 slider 형태로 돌아가는 것을 확인할 수 있다. 넷플릭스같은 사이트만 봐도 여러가지 콘텐츠를 다음과 같이 한 화면에서 오른쪽 버튼을 누르면 돌아가는 형태의 slider 형태로 콘텐츠를 제공하고 있다. 이러한 컴포넌트를 우리는 carousel이라고 한다. 한글로는 회전목마라는 뜻이다. 이 Slider형태의 컨테이너는 CSS로 구성해도 되지만 React에서는 이 Slider형 컴포넌트에 대한 라이브러리를 제공하고 있다. 바로 React Slick 이다. 2. 구현 방법 1. npm을 사용할 경우 npm install react-slick 2. yarn을 사용할 경우 yarn add react-slick 먼저.. front-end/react 2022. 3. 24.

• JAVASCRIPT에 대한 고찰-함수편 javascript는 상당히 매력적인 언어이다. 브라우저 상에서 동작하는 언어이기 때문에 다양한 이벤트 함수들이 존재하고 다른 언어들과는 달리 비동기 처리에 특화되어 있는 면이 있다. 리액트로 개발을 하면서 나는 자바스크립트와 타입스크립트를 많이 사용했다. 하지만 항상 사용하던대로 사용했지 이 언어가 어떻게 브라우저 상에서 돌아가는 지 메모리 구조는 어떤 방식으로 할당이 되는지가 궁금해졌다. 사실 리액트로 프론트 엔드 개발을 하면 더 빠른 렌더링에 대한 고찰이 필요하다. 요즘 핫한 next sj 리액트 프레임워크또한 serverside rendering 과 staticside rendering 방식을 사용하여 더 빠른 렌더링 더 빠른 반응성에 대한 고민을 보여주고 있다. 기본을 알아야 심화를 더 잘 이해.. front-end/JavaScript, TypeScript 2022. 3. 19.

• 

  useParams를 통한 라우팅 react-router-dom에서는 useParams라는 훅을 기본적으로 제공한다. useParams는 기본적으로 query string의 매개변수를 값으로 받아오는 훅이다. 쉽게 말하면 https://api.themoviedb.org/3/movie/12321?api_key=&language=en-US 이러한 api키가 있다고 가정했을 때 movie뒤에 위치한 12321을 값으로 사용할 수 있게 만들어주는 훅이다. 실사용에서는 어떻게 사용되는 지 살펴보면 우리는 페이지를 만들고 라우팅 할 때 예를 들어 쇼핑몰사이트나 ott사이트에서 각 상품이나 각 영화에 관한 상세페이지를 만들고 싶다고 하자 그럴 때 각 상세페이지를 상품마다, 혹은 영화마다 다 만든다면 프론트 개발자들은 다 죽어나갈 것이다. 이러한 문제.. front-end/react 2022. 3. 3.

• 

  리액트 로그인 패턴 (with Redux, Axios) 리액트로 로그인 기능을 구현하는 패턴을 알아보겠다. 1. 우선 로그인 기능을 구현하는 feature폴더의 login.tsx 2. feature안에서 실질적으로 값들을 입력받아 async함수로 api를 호출한 값을 토대로 데이터를 가공하는 useLoginForm 커스텀 훅 3. 유저에 관한 서비스이므로 AuthService 클래스에 존재하는 login 함수 = 실제로 axios를 통해 api를 호출하는 함수 4. Redux를 이용한 상태관리를 할 것이므로 api로 받아온 데이터의 값에 따라 상태를 변경해 줄 리듀서와 acion들 5. Redux-saga를 이용한 middleware 1. feature 폴더의 login.tsx에는 로그인에 관련된 기능을 적어준다. 클라이언트가 직접 form에 id와 pass.. front-end/react 2022. 2. 18.