IT 엘도라도

정규 표현식(Regular Expression), 줄여서 정규식은 주어진 문자열에서 원하는 패턴의 부분 문자열을 탐색하거나 다른 문자열로 바꾸고 싶을 때 사용하는 하나의 도구이다. 이때 중요한 것은 정규식은 프로그래밍 언어와 독립적인 도구라는 것이다. 즉, 프로그래밍 언어별로 정규식을 사용하기 위한 별도의 문법을 제공하고 있을 뿐, 정규식이 특정 프로그래밍 언어만의 고유한 문법은 아니다. 그렇기 때문에 정규식을 한 번만 제대로 배워두면 어느 프로그래밍 언어에서든 쉽게 정규식을 사용할 수 있게 된다. 이번 포스팅에서 다루고자 하는 것은 정규식 그 자체의 기본 개념이다. 각 프로그래밍 언어별로 정규식을 사용하는 방법은 조금씩 다른데, 이에 대해서는 여기서 다루지 않겠다. 하지만 이 포스팅의 내용을 완전히 이..

애플이 새롭게 출시하는 iOS 14에서 페이스북 픽셀 등을 활용한 마케팅에 제한을 걸게 됨에 따라(참고), 필자가 근무하고 있는 회사에서도 하이브리드 앱 개발의 필요성이 수면 위로 떠오르기 시작했다. 원래 순수한 반응형 웹사이트의 형태로 대부분의 서비스를 처리하고 있었기에, 웹에서의 페이스북 마케팅이 어려워진다면 앱에서의 마케팅으로 초점을 바꿔야 한다는 판단 때문이었다. 그런데 필자는 앱 개발 경험이 사실상 없었기에 앱과 관련된 여러 용어들에 대해 정확히 알고 있지 못했다. 그래서 이번 기회에 한 번 정리해보기로 하였다. * 본 포스팅의 내용에 직접적인 도움을 준 유튜브 '얄팍한 코딩 사전' 채널에 감사의 마음을 표합니다. (영상 링크는 게시글 하단 참조) 1. 네이티브 앱 : Native Applica..

개인적으로 React 프로젝트를 진행하면서 Redux, Redux-Thunk, Redux-Saga에 대해 공부한 내용들을 기록한 것이다. 원래는 프로젝트 폴더에 문서 형태의 파일로 아카이빙 해두던 것이었는데 이번 기회에 티스토리로 옮겨두기로 결정했다. 여기에 기록한 내용들은 주로 해당 라이브러리의 핵심 개념 혹은 동작 원리가 주를 이룬다. 필자만의 기록이라 다른 사람들에게도 도움이 될지는 모르겠으나, 혹여나 한 사람이라도 이를 참고로 살펴보고 도움될 만한 내용을 얻어갈 수 있다면 참 좋겠다. 혹시 잘못된 내용이 있다면 댓글로 지적 바란다. 1. Redux, React-Redux 주요 개념 요약 1-1. 스토어 애플리케이션의 상태를 트리 구조로 관리한다. 상태를 읽으려면 getState() 함수를 호출한다..

개인적으로 React 프로젝트를 진행하면서 각 컴포넌트의 렌더링 성능을 최적화하기 위해 사용했던 필자만의 Tip을 소개하려고 한다. 단 이는 필자만의 Tip이기 때문에 반드시 올바른 방법이라고는 보장할 수는 없다. 이 방법은 "실제로 측정해본 결과 성능이 좋게 나오더라"보다는 "개념적으로 생각했을 때 이렇게 하는 게 성능적으로 효율적이겠다"에 초점을 맞추었다. 또한 최대한 각 컴포넌트를 독립적인 하나의 부품으로 생각하여 적용할 수 있는, 그리고 최대한 다양한 유형의 컴포넌트들에게 적용할 수 있는 최소한의 일관된 규칙을 정립하는 것에 집중하였다. * 만약 더 좋은 방법이나 개선할 만한 부분을 찾아서 댓글로 달아주신다면 매우 감사드리겠습니다. 1. 전제 조건 함수형 컴포넌트와 Hook을 사용한다. 즉, 클래..

간단하게 포트폴리오 웹사이트를 제작하면서 이것을 어떻게 배포해볼까 찾아보다가 Netlify라는 호스팅 서비스를 최근에 알게 되었는데, 단순한 정적 웹사이트를 배포하는 것에 있어서는 AWS와 비교도 안 될 정도로 간편하다는 것을 알게 되었다. Node.js 의존성 설치 등 기본적인 환경 설정은 대부분 생략 가능할 뿐 아니라, GitHub이나 BitBucket과 같은 Git Provider의 특정 저장소와 연결을 시켜서 해당 저장소의 특정 브랜치에 Push를 할 때마다 미리 지정해둔 명령어를 통해 배포를 자동화(Continuous Deployment, CD)하는 것도 매우 간편하기 때문이다. 따라서 이번 포스팅에서는 Netlify로 React 앱과 같은 SPA 앱을 간편하게 배포하는 방법, 그리고 GitHu..

특정 서비스를 이용하다 보면 카카오 로그인, 페이스북 로그인, 구글 로그인 등의 기능을 본 적이 있을 것이다. 이는 해당 서비스를 위해 별도의 번거로운 회원가입 절차를 진행하지 않고도 이미 가지고 있는 카카오 계정, 페이스북 계정, 구글 계정으로 간편하게 서비스를 이용할 수 있도록 해주는 기능이다. 이 기술의 핵심이 바로 OAuth 2.0이다. 즉 OAuth 2.0은 특정 서비스에서 카카오, 페이스북, 구글 등의 소셜 서비스를 연동할 수 있도록 돕는 기술이다. 이번 포스팅에서는 OAuth 2.0의 핵심적인 개념만을 설명할 것이다. 각 웹 어플리케이션 혹은 라이브러리가 구체적으로 이러한 OAuth 2.0을 어떻게 이용하여 소셜 로그인을 구현하는지는 각자 한 번 찾아보자. (참고로 Django의 라이브러리 ..

👉 모듈(Module)이란? import 또는 export가 있는 파일은 모듈(Module)로 취급이 된다. 즉, 외부에서는 직접적으로 모듈을 불러오지 않는 이상 그 모듈의 데이터를 사용할 수 없다. import는 모듈에서 데이터를 불러올 때, export는 모듈에서 데이터를 내보낼 때 사용한다. 👉 import, export 데이터 : 변수, 상수, 함수, 클래스, 타입, 네임스페이스 TypeScript 컴파일러가 모듈 로더를 통해 실제로 불러오는 건 오로지 타입 정보뿐이다. 변수, 상수, 함수, 클래스 : JS 모듈 로더 코드로 컴파일이 된다. 타입 : JS 코드로는 컴파일 되지 않는다. 즉, JS 코드에서는 삭제된다. 네임스페이스 : JS 일반 객체로 컴파일 된다. IIFE 함수에 해당 객체를 전달..

TSConfig Reference - Docs on every TSConfig option From allowJs to useDefineForClassFields the TSConfig reference includes information about all of the active compiler flags setting up a TypeScript project. www.typescriptlang.org TSConfig 파일이 위치한 디렉토리는 TypeScript 혹은 JavaScript 프로젝트의 루트 디렉토리가 된다. 해당 TSConfig 파일은 tsconfig.json 파일일 수도 있고, jsconfig.json 파일일 수도 있다. 이 둘은 동작 방식이 거의 같으며, 동일한 설정 변수들의 집합을..

Documentation - What is a tsconfig.json Learn about how a TSConfig works www.typescriptlang.org 1. Overview tsconfig.json 파일이 위치한 디렉토리는 TypeScript 프로젝트의 루트 디렉토리가 된다. tsconfig.json 파일은 해당 프로젝트를 컴파일 하기 위해 필요한 루트 파일들과 각종 컴파일러 옵션들을 설정한다. JavaScript 프로젝트의 경우 jsconfig.json 파일을 대신 사용할 수 있는데, 이는 사실 tsconfig.json과 동작 방식이 거의 비슷하다. 다만 JavaScript와 관련된 컴파일러 플래그들을 가지고 있을 뿐이다. TypeScript 프로젝트는 다음과 같은 두 가지 방식 중..

Documentation - Triple-Slash Directives How to use triple slash directives in TypeScript www.typescriptlang.org Triple-Slash 디렉티브는 하나의 XML 태그를 포함하는 한 줄 짜리 주석이다. 디렉티브란 JavaScript 코드로 컴파일이 되진 않지만 컴파일러에게 컴파일에 도움이 될 만한 어떠한 정보를 알리는 부분을 의미한다. Triple-Slash 디렉티브는 참조해야 할 선언 파일의 경로를 컴파일러에게 알려주는 역할을 수행하며, 앞서 말했듯 별도의 JavaScript 코드로는 컴파일 되지 않는다. 컴파일 후에는 단순한 주석의 형태로 남게 된다. 단, 이는 파일의 맨 위에 있을 때만 유효하다. 즉, 주석이나 또..