공부 및 정리/프론트엔드14 webpack, babel 절대 경로 사용하기 이전 포스트에서 webpack 과 babel 의 기본 개념과 함께 사용하기 위한 기본 설정 방법을 알아보았습니다. 이번에는 webpack 과 babel 을 이용하여 절대 경로를 설정하여 import 시 경로 설정 하는 방법에 대해 알아보겠습니다. 절대 경로 설정 개발을 진행하다보면 다른 파일을 불러오는 경우가 많이 발생합니다. 파일을 불러오기 위해 상대 경로로 해당 파일의 위치를 찾아가는 경우가 많습니다. 상대 경로를 이용하면 아래와 같은 경우가 많이 발생할 수 있습니다. import { util } from '../../../modules/util.js'; 위의 경우 해당 파일을 찾기에도 불편함이 있고, 불러오는 파일이 많은 경우 가독성도 떨어지게 됩니다. 그래서 특정 경로를 절대 경로로 지정하여 가독.. 2022. 9. 17. Webpack, Babel 의 이해와 기본 설정 JavaScript 를 이용하여 개발하다보면 webpack 과 babel 에 대해 자주 접할 수 있습니다. webpack 과 babel 에 대해 이해하고 함께 사용하기 위해 설정하는 방법에 대해 알아보도록 하겠습니다. 추가적으로 다음 포스트에서 아래의 내용을 다루겠습니다. 절대 경로 설정 추가 (Path Alias) JavaScript, Json 파일 외의 파일 번들링 (CSS, SASS, PNG 등) Webpack 이란? Webpack 공식 문서에는 아래와 같이 소개하고 있습니다. webpack 의 공식 홈페이지는 한글 번역도 지원이 되어 읽기 수월합니다. 이후 추가적인 필요사항은 해당 페이지에서 직접 쉽게 찾아볼 수 있습니다. webpack is a static module bundler for mo.. 2022. 9. 16. [React] 숫자 증가 애니메이션 만들기 (with. TypeScript) 여러 웹 서비스를 이용하다 보면 숫자를 강조하는 방법 중 하나로 숫자가 빠르게 올라가는 애니메이션을 확인할 수 있습니다. 리액트를 이용하여 어떻게 구현할지에 대해 작성해보도록 하겠습니다. ❗️ 조건 1. 숫자는 0부터 시작해서 증가해야 합니다. 2. 숫자들이 주어진 시간 동안 증가하는 애니메이션을 보여주어야 합니다. 3. 시간이 흐를수록 숫자 증가량이 줄어들어야 합니다. (easeOut 효과) 📖 컴포넌트 및 변수 구성 컴포넌트와 변수는 해당 포스트 작성을 위해 임의로 작성된 내용입니다. 최종적으로 보여질 숫자와 텍스트를 변수로 저장하였습니다. 부모 컴포넌트를 하나 생성하고, 그 아래에 방문수, 좋아요, 댓글수가 보여질 컴포넌트를 반복문을 이용하여 생성하였습니다. type TyContents = [str.. 2022. 7. 7. [React Native] 모바일 서비스 개발 유형과 프로젝트에 사용한 이유 많은 사람들이 모바일 환경에서 여러 서비스를 이용하고 있습니다. 이에 맞춰 모바일 서비스 개발을 고려하게 되는데, 모바일 서비스 개발하는 방식에는 여러 가지가 존재합니다. 이번 포스트에서는 모바일 서비스를 개발하는 여러 유형들에 대해 특징, 장단점을 알아보고 비교해 보도록 하겠습니다. 또한, 제가 진행한 프로젝트에서 여러 방식들 중에서 React Native를 선택하여 개발하게 된 이유에 대해 작성하였습니다. 📘 모바일 서비스 개발 유형 모바일 환경에서의 서비스를 제공하기 위하여 네이티브 앱, 웹, 하이브리드 등 여러 방법으로 개발하여 서비스를 제공하고 있습니다. 개발하는 여러 방법들에 간략히 알아보도록 하겠습니다. 네이티브 앱 여러 서비스에서 제공하는 방법으로 스마트폰이나 태블릿에 어플리케이션을 설치하.. 2022. 6. 13. 음성 녹음 크로스브라우징 이번 포스트는 말듣꾸 프로젝트를 진행하는 당시 겪었던 이슈로 음성 녹음 기능을 구현하는 과정에서 OS와 브라우저에 따라 녹음이 불가능한 문제를 대응하였던 내용을 다루었습니다. 말듣꾸 프로젝트는 테스트 서비스로 사용자가 음성을 녹음하여 제출하면, 사용자가 어느 지역의 방언을 구사하는지 학습된 인공지능이 추론하여 결과를 제공하는 서비스입니다. 프로젝트에 관한 자세한 사항은 링크를 통해 확인 부탁드립니다. 🔥 발생한 이슈 음성 녹음 기능을 추가하기 위하여 MediaRecorder 를 이용하였습니다. 해당 기능을 Chrome 브라우저를 기준으로하여 개발을 진행하였는데, MediaRecorder 인스턴스 생성시 옵션으로 mimeType 을 Chrome 에서 사용가능한 audio/webm 으로 지정하였습니다. 기능.. 2022. 6. 9. [Next.js] SSR, SSG, ISR 구성하기 이전 포스트를 통해 Next.js 에서 SSR(Server Side Rendering) 과 SSG(Static Site Generation)의 방식으로 페이지를 생성하는 방법에 대해 다루었습니다. 이번 포스트에서는 SSR, SSG 과 함께 추가적으로 ISR(Incremental Static Regeneration)도 함께 다루어보겠습니다. 이전의 Next.js 기본 개념과 프로젝트에 사용한 이유 포스트에서 CSR, SSR, SSG 방식에 대한 설명을 이미 다루었으므로 관련된 설명은 생략하도록 하겠습니다. 관련 내용 확인이 필요한 경우 위의 포스트를 확인해주시기 바랍니다. 📘 SSR SSR(Server Side Rendering) 은 사용자가 서비스에 접속하여 서버로 요청을 보내는 경우, 서버에서 렌더링을.. 2022. 6. 9. [Next.js] 페이지 나누기 (라우팅) Next.js 를 이용한 개발에서 가장 기초적이며 필수적인 요소로 페이지 라우팅 입니다. 해당 포스트는 Next.js 에서 페이지 구성하는 방법과 진행한 프로젝트에서 어떠한 방식으로 라우팅을 이용하였는지에 대해 다루었습니다. 📘 React 페이지 구성과 라우팅 React 를 이용할때는 페이지를 구분하고 이동시키기 위하여 라우터 기능이 있는 react-router 라이브러리를 이용해야 합니다. 해당 라이브러리를 이용하기 위해서는 react-router 에 대한 추가적인 학습이 필요하고, 와 등을 이용하여 라우팅 구성이 필요합니다. 이러한 점이 React 에서 페이지를 구성하는것에 어려움을 가져다줍니다. 📗 Next.js 페이지 구성과 라우팅 Next.js 는 라우팅 기능을 내장하고 있어 손쉽게 페이지를 구.. 2022. 5. 28. [Next.js] 기본 개념과 프로젝트에 사용한 이유 진행하는 프로젝트의 프론트엔드 기술 스택으로 Next.js 를 사용하게 되었습니다. 해당 포스트는 Next.js 에 대한 간략한 설명과 진행한 프로젝트에서 Next.js 를 사용하게 된 이유에 관한 내용을 담았습니다. 이후의 Next.js 관련 포스트는 Next.js 를 이용하면서 발생한 이슈들에 대해 다룰 예정입니다. 📖 Next.js 에 대하여 위키백과에서는 Next.js 를 아래와 같이 설명하고 있습니다. Next.js 는 Node.js 를 기반으로 구축된 오픈 소스 웹 개발 프레임워크로, 서버 측 렌더링 및 정적 웹사이트 생성과 같은 React 기반 웹 애플리케이션 기능을 가능하게 합니다. 위키 백과 : https://en.wikipedia.org/wiki/Next.js 위의 내용에서 Next.j.. 2022. 5. 12. 함수형 프로그래밍 함수형 프로그래밍이란? 함수형 프로그래밍은 프로그래밍 관점을 갖게 해주고, 결정하는 역할을 하는 프로그래밍 패러다임의 한 종류입니다. 프로그래밍 패러다임 분류 명령형 프로그래밍 무엇을 하는지를 나타내기보다 어떻게 할 것인지를 설명하는 방식 절차지향 프로그래밍 (C언어 등) 수행할 내용들이 순서대로 처리되는 방식 객체지향 프로그래밍 (C++, C#, Java, Python 등) 객체들의 모임으로 각각의 객체들이 메시지를 주고받고, 데이터를 처리하는 방식 선언형 프로그래밍 어떻게 할 것인지를 나타내기보다 무엇을 할 것인지를 설명하는 방식 함수형 프로그래밍 (클로저, 하스켈 등) 자료 처리를 수학적 함수의 계산으로 취급하고 상태와 가변 데이터를 멀리하는 방식 최근 자바스크립트, 파이썬 등에도 함수형 프로그래밍.. 2022. 3. 14. [React with Typescript] React에 Typescript 적용시키기 (1) 개인 학습 과정에서 작성한 markdown 문서로 잘못된 내용이 존재할 수 있습니다. 잘못된 내용 또는 개선 방안을 말씀해주시면 수정하겠습니다. 📝 React에 TypeScript 적용시키기 (1) 본 글은 자세한 개념 정리가 아닌, 공식문서 및 여러 강의를 듣고 개인 학습 및 복습용으로 작성하였습니다. 리액트에 타입스크립트 추가하기 CRA (create-react-app) 을 통해서 간단하게 적용시킬 수 있습니다. 초기 새로운 프로젝트를 생성할때 적용시키기 위해서는 아래의 명령어를 사용하면 됩니다. npx create-react-app my-app --template typescript 리액트 프로젝트 생성을 위해서는 --template 옵션이 들어가지 않아서 모르다가 타입스크립트를 추가하면서 처음 접.. 2022. 1. 8. [CSS] CSS-in-CSS vs CSS-in-JS 개인 학습 과정에서 작성한 markdown 문서로 잘못된 내용이 존재할 수 있습니다. 잘못된 내용 또는 개선 방안을 말씀해주시면 수정하겠습니다. CSS-in-CSS 와 CSS-in-JS CSS 관련 학습 중 CSS-in-CSS 와 CSS-in-JS 라는 개념을 듣게 되어 학습 및 정리하게 되었습니다. '웹 컴포넌트 스타일링 관리: CSS-in-JS vs CSS-in-CSS (우창균님)' 글을 참고하여 학습 및 정리하였습니다. 자세한 사항은 해당 게시글을 확인 부탁드립니다. 1. CSS (Cascading Style Sheets) CSS는 1996년도에 처음 발표되어 사용되어졌는데, 이전의 웹 페이지는 HTML만으로 이루어져 디자인이 없는 투박한 모습만 보이는 웹페이지였습니다. (참고) 이후 CSS는 여러.. 2022. 1. 6. [TypeScript] 기초 학습 (1) 개인 학습 과정에서 작성한 markdown 문서로 잘못된 내용이 존재할 수 있습니다. 잘못된 내용 또는 개선 방안을 말씀해주시면 수정하겠습니다. 📝 TypeScript 기초 학습 (1) TypeScript 학습을 위해 공식문서를 참고하여 읽고 정리한 내용입니다. 1. 배경 타입스크립트(TypeScript) 는 자바스크립트(JavaScript) 를 기반으로 한 확장된 언어로 타입스크립트에서는 자바스크립트의 모든 문법을 사용할 수 있다. 자바스크립트에서는 string, number, object 등 데이터 타입이 있지만, 변수에 직접 지정해주지 않고, 값을 넣을때마다 데이터 타입을 모두 담을 수 있다. 이런 특징은 변수 타입을 지정하지 않아도 되고 모든 타입의 값을 할당할 수 있어 좋을 수 있지만, 프로그래.. 2022. 1. 1. 이전 1 2 다음
