본문 바로가기
728x90
반응형

전체 글416

[React] 코드 스플릿팅(Code Splitting)으로 최적화하기 안녕하세요. J4J입니다. 이번 포스팅은 코드 스플릿팅으로 최적화하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 코드 스플릿팅이란? 코드 스플릿팅이라고 하는 것은 webpack, rollup, browserify와 같은 모듈 번들러를 이용하여 만들어진 하나의 번들 파일을 여러 개의 번들 파일로 나누는 것을 의미합니다. 그리고 하나의 번들 파일을 여러 개의 번들 파일로 나누는 이유는 더 빠른 속도로 화면을 로드하기 위해서입니다. 모듈 번들러를 사용하게 된 이유부터 간단히 언급을 해보자면 브라우저에서 호출하는 파일의 개수를 줄여 부하가 발생되는 것을 방지하기 위해 번들러를 사용하고 있습니다. 하지만 프로젝트의 규모가 커짐과 동시에 번들링 되는 파일의 크기도 점점 커지게 되고 이것은 결국 url을 입력하.. 2021. 8. 16.
[CSS] 책장 넘기는 CSS 안녕하세요. J4J입니다. 이번 포스팅은 책장 넘기는 CSS에 대해 적어보는 시간을 가져보려고 합니다. 책장 넘기는 CSS 책장 넘기는 CSS를 한 번 구현해보고자 하는 마음에 여러 가지 검색을 해봤습니다. 그중 이렇게도 책장 넘기는 UI를 만들 수 있구나 하는 것을 발견해서 기록도 할 겸 블로그에 간단히 포스팅을 해보려고 합니다. See the Pen bookPage_1 by 김 성찬 (@ksccmp) on CodePen. 위에 구현해둔 소스는 마우스를 페이지에 올리면 책장 넘기는 효과를 제공해줍니다. 개인적으로 이 방법에서 포인트라고 할 만한 부분은 transform-origin과 perspective라고 생각합니다. transform-origin을 이용하여 페이지의 원점을 변경할 수가 있게 되어 페.. 2021. 8. 13.
[React] Router를 타입스크립트와 같이 사용하는 방법 안녕하세요. J4J입니다. 이번 포스팅은 Router를 타입 스크립트와 같이 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 우선 들어가기에 앞서 이전에 Router를 이용한 페이지 이동하는 방법에 대해 글을 올린적이 있습니다. 타입 스크립트를 사용한다고 하더라도 router를 사용하는 것에 있어서 크게 다를 것은 없지만 일부 기능들은 타입을 지정해줘야 사용할 수가 있습니다. 대표적으로 history, location, match가 있는데 이들을 제외한 나머지는 사용방법이 동일하기 때문에 이전 글을 참조하시길 바랍니다. ※ 추가 → 해당 글은 react router v6 업그레이드 이전에 작성된 글입니다. 현재 최신 버전을 설치할 경우 다른 점이 존재할 수 있으니 변경점에 대해 확인이 필요하신 .. 2021. 8. 11.
[CSS] 타이핑 치는 효과를 주는 CSS 안녕하세요. J4J입니다. 이번 포스팅은 타이핑 치는 효과를 주는 CSS에 대해 적어보는 시간을 가져보려고 합니다. 타이핑 치는 CSS 타이핑 치는 효과를 주는 방법에 대해 궁금증이 생겨 검색을 해봤을 때 정말 다양한 방법들을 발견할 수 있었습니다. 제가 해보고자 했던 것은 개행이 존재하는 장문의 글에 대해 타이핑 효과를 주며 화면에 보이게 하는 것이었는데 마땅한 레퍼런스를 찾지 못하다가 이런 방법도 있겠구나라는 생각을 가지며 한 번 구현해봤습니다. 기본적으로 해당 방법에서 메인 역할을 하는 것은 setInterval입니다. 조건에 도달할때까지 주기적으로 계속 반복하며 글자들을 하나씩 담아내는 방법을 사용해 봤습니다. See the Pen 타이핑 효과 by 김 성찬 (@ksccmp) on CodePen... 2021. 8. 9.
[React] 함수형 컴포넌트 + 타입스크립트 환경에서 Redux 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 함수형 컴포넌트 + 타입 스크립트 환경에서 redux 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 redux가 무엇인지에 대해 궁금하신 분은 여기를 참고해주시면 됩니다. Redux 사용 방법 이번에 redux를 설정하여 최종적으로 확인해볼 것은 다음과 같습니다. store에 num값을 저장 파라미터 값만큼 num의 값을 증가시키는 액션 함수 정의 파라미터 값만큼 num의 값을 감소시키는 액션 함수 정의 증가와 감소 버튼을 누를 경우 num의 값이 실시간으로 변화되는 것을 확인 [ 1. 패키지 설치 ] $ npm install redux react-redux @types/react-redux redux-devtools-extension .. 2021. 8. 9.
[React] CRA 없이 타입스크립트 개발환경 구축하기 (webpack 구 버전 사용) 안녕하세요. J4J입니다. 이번 포스팅은 CRA 없이 타입 스크립트 개발환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 개발환경 구축 방법 [ 1. package.json 생성 ] $ npm init npm init을 입력하게 되면 다음과 같은 정보들을 추가적으로 입력해줘야 합니다. package name: (init_typescript) react_typescripot_init version: (1.0.0) description: react typescript init description entry point: (index.js) index.tsx test command: git repository: keywords: author: J4J license: (ISC) 괄호 같은 경우는 아.. 2021. 8. 9.
[Next] 초기 개발환경 구축하기 안녕하세요. J4J입니다. 이번 포스팅은 초기 개발환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 개발환경 구축 방법 [ 1. package.json 생성 ] package.json은 설치된 패키지들을 관리하는 파일입니다. package.json을 생성하는 방법은 다음 명령어를 이용하면 됩니다. $ npm init 명령어를 입력할 경우 추가적인 정보들을 기입해줘야 합니다. 원하는 텍스트를 입력하여 지정할 수도 있고 또한 괄호가 처져있는 부분은 아무것도 입력하지 않고 그냥 넘길 경우 괄호 안에 내용이 입력됩니다. package name: (init) next_init version: (1.0.0) description: next init description entry point: (inde.. 2021. 7. 28.
[React] 함수형 컴포넌트에서 Redux-Saga 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 함수형 컴포넌트에서 Redux-Saga 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Redux 미들웨어 redux-saga에 대해 알기 전 redux 미들웨어의 개념에 대해 인지를 하고 있어야 합니다. redux 미들웨어라고 하는 것은 action함수들이 reducer에 전달될 때 전달되는 action함수들을 가로채어 부가 작업들을 진행하는 장소를 일컫습니다. redux 미들웨어를 사용하는 목적으로 알고 있는 것들은 다음과 같은 것들이 있습니다. 비동기 처리 redux 로그 처리 하나의 action함수로 다수의 action함수 실행 그리고 이런 redux 미들웨어 중 대표적으로 사용되는 라이브러리는 다음과 같습니다. redux-thunk redux-s.. 2021. 7. 26.
[React] 함수형 컴포넌트에서 Mobx 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 함수형 컴포넌트에서 mobx 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Mobx란? mobx는 react에서 상태 관리를 위해 사용되는 라이브러리입니다. react에서 제일 많이 사용되는 상태 관리는 redux라는 것이 있는데 상태 관리와 redux에 대한 개념이 필요하신 분들은 여기를 참고해주시면 됩니다. mobx의 공식문서를 참고해보면 mobx는 다음과 같은 구조로 되어 있다고 합니다. Actions → Observable State에 저장되어 있는 데이터들을 변화시키는 액션 함수 Observable State → 관찰되고 있는 데이터 값들이 저장되어 있는 장소 Compute Values → Observable State에 저장되어 있는 데이터가.. 2021. 7. 24.
[CSS] 특정 위치로 부드럽게 스크롤 이동시키기 안녕하세요. J4J입니다. 이번 포스팅은 특정 위치로 부드럽게 스크롤 이동시키는 방법에 대해 적어보는 시간을 가져보려고 합니다. 방법 1: scrollBy 첫 번째 방법은 scrollBy를 이용하는 방법입니다. 간단한 예시로 버튼을 누르게 되면 원하는 위치로 부드럽게 스크롤이 이동되는 코드를 짜 보겠습니다. Section1 페이지를 내리기 위한 구간 ... Section1 Title Section1 Description ... 위의 코드처럼 button1을 클릭할 때 window.scrollBy를 이용하여 스크롤이 부드럽게 이동될 수 있도록 처리해줄 수 있습니다. 해당 코드를 실행하면 다음과 같이 부드럽게 이동되는 것을 확인할 수 있습니다. 방법 2: scrollIntoView 두 번째 방법은 scrol.. 2021. 7. 24.
[21년 상반기] 네이버 공채 2차 면접 후기 안녕하세요. J4J입니다. 코딩 테스트와 1차 면접을 모두 합격하게 되어 2차 면접을 보는 기회가 생겼습니다. 21.06.24(목)에 문자를 통해 1차 면접 합격에 대한 연락을 전달받았고 21.06.29(화)에 2차 면접에 대한 세부 일정을 전달받았습니다. 2차 면접은 1차 면접과 달리 면접 일정을 전달받고 여유 시간이 일주일 정도만 존재했었습니다. 개인적으론 일주일만 있어도 준비하는 데는 문제없다고 생각을 하며 준비했었고 1차 면접과 달리 인성과 경험적인 측면에서도 충분히 많이 물어볼 것이라고 생각되어서 제가 겪어온 경험들을 다시 한번 리마인드 해보며 준비를 하게 되었습니다. 면접은 면접관 2, 지원자 1의 2:1 면접으로 50분 정도의 시간동안 진행되었습니다. 2차 면접은 1차 면접과 동일하게 Zoo.. 2021. 7. 23.
[21년 상반기] 네이버 공채 1차 면접 후기 안녕하세요. J4J입니다. 네이버 신입 공채 코딩 테스트에 합격해서 1차 면접을 보는 기회가 생겼습니다. 21.05.14(금)에 코딩 테스트의 결과가 문자로 가장 먼저 오고 그 뒤로 면접 키트 배송지와 인성 검사를 위한 메일이 21.05.18(화)에 왔습니다. 면접 키트를 보내주는 이유는 코로나로 인한 거리두기 때문에 비대면 면접이어서 면접에 필요한 물품들이 필요했기 때문입니다. 메일을 확인하자마자 면접 키트를 전달받기 위한 주소를 입력하고 인성 검사를 마쳤고 이후로 1차 면접의 세부 일정을 21.05.27(목)에 메일로 전달받았습니다. 면접 대상자가 되었다는 연락을 받고 면접을 진행하기까지 시간이 너무나도 충분히 있어서 매일 조금씩 제가 지금까지 해왔던 공부들과 프로젝트 등을 정리하며 면접을 준비했었습.. 2021. 7. 20.
[React] regeneratorRuntime is not defined 에러 안녕하세요. J4J입니다. React를 이용하여 프로그래밍을 하다가 다음과 같은 에러에 마주한 적이 있습니다. Uncaught ReferenceError: regeneratorRuntime is not defined 해당 에러를 마주하게 된 원인은 async/await의 사용이었습니다. 사용되던 async/await을 걷어내고 promise로 변경했더니 정상적으로 실행되는 것을 확인했습니다. 하지만 그렇다고 async/await을 사용하지 않을 수 없으니 해결방법을 찾아봤고 다음과 같은 방법으로 해결할 수 있었습니다. [ 1. 패키지 설치 ] $ npm install babel-polyfill [ 2. webpack 설정파일 중 entry에 babel-polyfill 추가 ] entry: ["babel-.. 2021. 7. 17.
[React] Webpack Proxy설정을 이용하여 CORS 해결 안녕하세요. J4J입니다. 이번 포스팅은 webpack proxy설정을 이용하여 cors 해결하는 방법에 대해 적어보는 시간을 가져보려고 합니다. CORS란? cors는 cross-origin resource sharing의 약자로 교차 출처 리소스 공유라고 표현됩니다. server-client 간 개발을 하다 보면 정말 쉽게 접할 수 있는 문제가 cors문제인데 cors문제가 발생하는 이유는 간단하게 보안 때문입니다. cors는 본인이 운영하는 웹사이트가 아닌 다른 피싱 사이트에서 요청한 request가 넘어오게 되면 request처리를 하지 않고 에러를 발생되도록 도와줍니다. cors설정을 하지않을 경우 일반적으로 동일 도메인 + 동일 포트로 넘어온 request에 대해서는 데이터 처리가 정상적으로 .. 2021. 7. 17.
[React] 함수형 컴포넌트에서 Redux 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 함수형 컴포넌트에서 Redux 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 글을 작성하기에 앞서 redux가 무엇인지 궁금하신 분들은 여기를 참고하시길 바랍니다. Redux 설정 이번에 redux를 설정하여 해볼 것은 다음과 같습니다. store에 num값을 저장 파라미터로 넘어오는 값만큼 num값을 증가시키는 액션 함수 정의 파라미터로 넘어오는 값만큼 num값을 감소시키는 액션 함수 정의 view에서 store에 저장되어 있는 num값을 확인하며 실시간으로 변경까지 되는 것을 확인 [ 1. 패키지 설치 ] $ npm install redux react-redux redux-devtools-extension [ 2. action함수 저장 파일 생성 ].. 2021. 7. 17.
[React] Flux와 상태관리, 그리고 Redux 안녕하세요. J4J입니다. 이번 포스팅은 redux와 관련된 개념들에 대해 적어보는 시간을 가져보려고 합니다. Flux 패턴 redux를 알기 전에 가장 먼저 flux패턴이 무엇인지에 대한 개념이 잡혀있으면 좋다고 생각합니다. flux패턴의 등장배경에는 페이스북의 일화가 있습니다. 한때 페이스북에서 알림이 와있다고 표현되고 있지만 막상 알림을 클릭하게 되면 어떠한 알림도 오지 않았던 버그가 있었다고 합니다. 버그를 수정하고 수정을 해도 계속적으로 버그가 재 등장함에 따라 이 문제를 명확하게 해결할 수 있는 방안을 고안했고 그 결과 새로운 아키텍처인 flux패턴을 만들어 해결했다고 합니다. flux패턴은 기존에 사용되던 mvc패턴의 단점을 보완하고자 등장한 패턴입니다. mvc패턴은 사용자 인터페이스와 비즈.. 2021. 7. 14.
[React] Router를 이용한 페이지 이동 안녕하세요. J4J입니다. 이번 포스팅은 Router를 이용하여 페이지 이동하는 방법에 대해 적어보는 시간을 가져보려고 합니다. ※ 추가 → 해당 글은 react router v6 업그레이드 이전에 작성된 글입니다. 현재 최신 버전을 설치할 경우 다른 점이 존재할 수 있으니 변경점에 대해 확인이 필요하신 분들은 [React] React Router v5와 v6 비교하기를 참고해주시길 바랍니다. ※ 추가 → react router v6 업그레이드된 사항에 맞게 새롭게 정의된 router 사용 방법이 필요하신 분들은 [React] react-router 사용하기를 참고해주시길 바랍니다. Router 설정 [ 1. 패키지 설치 ] $ npm install react-router react-router-dom .. 2021. 7. 13.
[React] CRA 없이 개발환경 구축하기 (webpack 구 버전 사용) 안녕하세요. J4J입니다. 이번 포스팅은 CRA 없이 개발환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 개발환경 구축 방법 [ 1. package.json 생성 ] $ npm init npm init을 입력하게 되면 아래와 같은 부가정보들을 입력해줘야 합니다. 각 행마다 원하는 정보들을 입력해주면 되고 괄호로 덮여있는 부분은 아무것도 입력하지 않고 엔터를 입력할 경우 괄호에 해당하는 값으로 지정되는 것을 의미합니다. package name: (init) react_init version: (1.0.0) description: react init description entry point: (index.js) index.jsx test command: git repository: keywo.. 2021. 7. 12.
728x90
반응형

티스토리툴바