공부 및 정리16 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. 머신러닝의 기본 프로세스 및 기초 개념 머신러닝의 기본 프로세스 학습하고자 하는 가설을 수학적 표현식으로 나타내기 가설의 성능을 측정할 수 있는 손실함수를 정의 손실 함수를 최소화 할 수 있는 알고리즘 설계 위의 과정들을 통해서 머신러닝 학습을 진행하게 됩니다. 아래에서 순서대로 프로세스에 해당하는 내용을 알아보도록 하겠습니다. 1. 모델 머신러닝 모델 중 가장 간단한 모델은 선형 회기 Linear Regression 모델이 있습니다. 회기 란 어떠한 실수값(1.2, 2.6...) 을 예측하는 문제를 의미합니다. 예측하는 값이 실수값이 아닌 이산값(0, 1, 2, 3...) 이라면 분류 라고 합니다. 선형 회기 모델은 선형 함수를 이용하여 회귀를 수행하게 됩니다. y = Wx + b 위의 선형함수에서 x는 입력으로 주어지는 데이터, y는 입력.. 2022. 3. 5. 인공지능 학습을 위한 기초 학습 📖 인공지능 학습을 위한 기초 학습 인공지능이란? 인공지능(Artificial Intelligence, AI)은 인간의 학습능력, 추론능력, 지각능력을 인공적으로 구현하려는 컴퓨터 과학의 세부분야 중 하나입니다. 다시 말해, 컴퓨터가 인간과 유사한 지능적인 행동을 할 수 있도록 해주는 기법을 연구하는 분야입니다. 인공지능, 머신러닝, 딥러닝 머신러닝은 데이터를 이용하여 컴퓨터가 어떠한 지식이나 패턴을 학습시키는 것을 말합니다. 머신러닝은 인공지능의 다양한 기법들 중 하나로 데이터를 이용하여 컴퓨터를 학습시키는 방법을 말합니다. 딥러닝은 머신러닝의 여러 방법 중 하나로 인공 신경망을 여러겹 쌓아 올려낸 방법을 의미합니다. 전체적으로 보았을때 인공지능의 여러 기법 중 하나로 머신러닝이 존재하고, 머신러닝의 .. 2022. 3. 4. [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. 이전 1 2 다음
