개발/React Native

[리액트 네이티브(React-Native RN)] Expo에서 localhost webview 사용하는 방법

리액트 네이티브(React-Native RN)에서 localhost webview를 구성해야될 때가 있습니다. 웹뷰를 좀 더 편하게 디버깅하기 위해서도 있고, 좀 더 효율적으로 개발환경을 구성하기 위해서도 꼭 필요한 작업입니다. 하지만 단순하게 웹서버에서 열어준 localhost:{PORT}로 webview uri를 구성하면 아래와 같은 에러를 맞이하게 됩니다. Error loading page Domain: undefined Error: Code: -6 Description: net::ERR_CONNECTION_REFUSED 정말 간단하게 리액트 네이티브 웹뷰에서 우리가 구성하려는 웹뷰 로컬환경을 설정하는 방법은 웹뷰 개발 환경을 실행하기 전에 HOST=0.0.0.0을 설정하는 것입니다. // pack..

개발/Vue

엑심베이(Eximbay)에서 자바스크립트(Javascript)로 FGKEY 설정하는 방법

회사에서 엑심베이(Eximbay) 결제 모듈을 연동할 일이 생겨서 Nuxt.js에 엑심베이 FGKEY를 설정했을 때 사용한 코드를 공유하도록 하겠습니다. 기본적으로 엑심베이에서 FRKEY를 사용하는 이유는 가맹점과 Eximbay 사이에 전송되는 파라미터의 유효성을 확인하기 위해 사용됩니다. Eximbay에 모든 거래 요청 시, 파라미터를 SHA-256으로 Hashing 하여 fgkey 파라미터로 전달하며, 이 값은 Eximbay에서 생성된 Hashing 값과 비교하여 거래의 유효성을 확인합니다. 응답 파라미터의 fgkey는 Eximbay에서 생성하며, 동일한 방법으로 가맹점에서 거래의 유효성을 확인합니다. fgkey생성을 위해서는 승인된 key가 필요하며, 해당 key는 Eximbay로부터 할당받습니다...

개발/Nuxt.js

nuxt.js asyncData에서 form data 전달받는 방법

nuxt(vue ssr framework)에서 form으로 지정한 페이지에 form data를 post 메서드로 넘겨야될 경우가 생깁니다. 저는 아래와 같은 예시로 POST request를 전송하려고 합니다. // pages/index.vue submit 하지만 index 페이지에서 status 페이지로 전달할 폼데이터를 만들어서 status 페이지로 전달하면 status 페이지의 req.body는 undefined를 전달할 것입니다. // pages/status.vue status 이때 우리가 추가적으로 해야될 작업이 있습니다. body-parser 라이브러리를 설치합니다. body-parser란 Node.js의 POST 요청 데이터를 추출할 수 있도록 만들어 주는 미들 웨어입니다. body-parse..

개발/CSS3

overscroll-behavior 속성을 활용해서 스크롤 체이닝 현상 막는 방법

웹에서 스크롤 작업을 하다보면 항상 마주치는 문제가 있습니다. 바로 스크롤 체이닝(scroll chaining) 입니다. 스크롤 체이닝이라고 표현하면 해당 이슈가 뭔지 모르실 수 있으니 아래 간단한 예제를 한번 다뤄보도록 하겠습니다. See the Pen BajEOGZ by ruden (@ruden91) on CodePen. 예시를 보면 overscroll-behavior 속성이 auto로 설정된 기본값 영역은 스크롤 영역이 모두 끝나면 부모 스크롤 영역이 움직이기 시작합니다. 이것을 스크롤 체이닝(스크롤이 연결되어 있기 때문에 체이닝이라는 단어를 사용)이라고 합니다. 하지만 overscroll-behavior 속성이 contain 값인 경우에는 어떻게 동작할까요? contain 값을 적용한 스크롤 영역..

개발/기타

npx란 무엇일까? 그리고 npm이랑 어떤 차이점이 있을까?

우리는 종종 npx 명령어를 사용해서 패키지를 설치하곤 합니다. 예를 들어 리액트 CRA를 설치할 때 npx create-react-app을 사용하고 , nuxt를 설치할 때 npx create-nuxt-app을 사용하고, 리액트 네이티브를 설치할 때 조차도 npx create-react-native-app를 사용해서 설치합니다. npx create-react-app my-app // react CRA npx create-nuxt-app my-app // Nuxt npx create-react-native-app my-app // React Native 아무 생각 없이 문서에서 npx를 사용해서 설치하라고 해서 설치는 했다만! 도대체 npm을 사용할 때가 있고(yarn도 있음), npx를 사용할 때가 있..

개발/Third-party

카카오 로그인(Kakao Login) 인증 API을 활용해서 간단하게 사용자 로그인 처리하는 방법

카카오 개발자 지원 사이트가 굉장히 깔끔하게 변경되었습니다! 개인적으로 이전 사이트보다 깔끔하고 사용하기 편리하게 구조가 잡힌 느낌이네요. 이전에 웹(Web) 서비스에서 카카오맵 API를 활용하는 방법에 대해서 소개했는데, 이번에는 웹 서비스의 핵심인 로그인 프로세스를 카카오 로그인 인증 API(Kakao Login API)를 활용해서 구현해보려고 합니다. 사전 설정 카카오 로그인 기능을 구현하기 위해서는 카카오 개발자 지원 사이트에 로그인을 하셔야 합니다. 상단에 배치된 메뉴에서 내 애플리케이션이나 로그인을 누르시면 로그인을 하실 수 있습니다. 저는 내 애플리케이션을 통해서 로그인을 했기 때문에 바로 내 애플리케이션 페이지로 이동한 모습입니다. 애플리케이션 추가 테스트를 위해서 애플리케이션을 추가하겠습..

개발/Javascript

NVM을 활용해서 쉽고 효율적이게 노드(Node.js) 버전을 관리해보자

노드(Node.js)를 사용하는 분이라면 여러 프로젝트를 관리하면서 여러 노드 버전을 사용해야 될 상황이 오게 됩니다. 프로젝트를 변경할 때마다 해당하는 특정 노드 버전을 설치해주는 것은 굉장히 비효율적인 방법입니다. 이렇게 여러 노드 버전을 관리하기 위해 등장한 도구가 바로 NVM(Node Version Manager) 입니다. 루비(Ruby)나 파이썬(Python)을 사용하시는 분이라면 루비의 rvm, rbenv나 파이썬의 pyenv와 비슷하다고 생각하시면 됩니다. NVM은 다양한 버전의 노드(Node.js) 리스트를 확인할 수 있고, 편하게 설치 및 삭제 그리고 전환까지 할 수 있는 매우 편리한 도구입니다. NVM 설치하기 NVM을 설치하기 위해서 brew를 사용하거나 cURL이나 Wget을 활용할..

개발/기타

스토리북(Storybook) v5.3 시작하기 - Vue에서 사용하는 방법

스토리북의 기본 정의나 사용법에 대해서는 여기에서 상세히 설명 되어 있으니 참고하시면 됩니다. 스토리북(Storybook)은 굉장히 많은 프론트엔드 view 라이브러리를 지원하고 있습니다. 스토리북은 현재 React, Vue, Angular, Mithril, Marko, HTML, Svelte, Meteor, Ember, Riot, Preact를 지원하고 있습니다. 그 중 Vue.js에서 스토리북을 사용하는 방법을 소개하도록 하겠습니다. 패키지 버전(dependencies) { "dependencies": { "vue": "^2.6.11" }, "devDependencies": { "@babel/core": "^7.10.5", "@storybook/addon-actions": "^5.3.19", "@st..

개발/기타

스토리북(Storybook) v5.3 시작하기 - 기본적인 사용법

스토리북이란 스토리북(Storybook)은 UI 컴포넌트를 위한 유저 인터페이스 개발 환경 및 자유롭게 컴포넌트를 테스트할 수 있는 도구입니다. 스토리북을 활용하면 개발자는 독립적인 환경에서 컴포넌트를 개발할 수 있고, 개발환경에서 컴포넌트들을 인터랙티브하게 보여줄 수 있습니다. 스토리북(Storybook)은 기본적으로 애플리케이션 외부(독립적인 개발환경)에서 실행되므로 사용자는 애플리케이션별 종속성 및 요구 사항에 대해서 걱정할 필요 없이 UI 컴포넌트를 독립적으로 개발할 수 있습니다. 스토리북은 다양한 부가기능(addons)를 지원하며 커스터마이징하기 쉽게 굉장히 유연한 API를 제공합니다. 스토리북의 정적 버전(a Static version of Storybook)은 빌드하여 HTTP 서버에 배포할..

개발/UI개발

[SEO] target="_blank" 좀 더 알고 사용하자 (noopener, noreferrer, nofollow 차이점에 대해서)

웹사이트를 개발할 때 종종 외부링크로 보내기 위한 마크업을 할 때가 있습니다. 그때 사용하는 속성이 target="_blank"인데, 이 속성을 사용할 때 같이 사용해야되는 속성이 있습니다. noopener, noreferrer 그리고 nofollow 입니다. noopener는 무엇인가? target = "_blank"값을 사용하면 재밌는 증상이 나타납니다. 아래 이미지를 한번 볼까요? 네이버 웹사이트로 이동 target = "_blank" 속성값을 noopener 속성을 사용하지 않고 사용한다면 연결중인 페이지는 연결 페이지에 부분적으로 액세스 할 수 있습니다. window.opener 객체가 존재하는 모습을 확인할 수 있습니다. 해당 부분은 연결 페이지에서 이전 페이지를 제어할 수 있는 권한이 있다는..

개발/유틸리티

온라인 코드 에디터를 활용해서 소스코드를 공유하는 방법 - CodeSandbox

블로그를 돌아다니다 보면 온라인 코드 에디터를 활용해서 소스코드를 공유하는 모습을 종종 보신 적이 있을 것입니다. 사람들에게 정말 많이 알려진 JSFiddle, CodePen이 있지만, 오늘 제가 소개해드릴 온라인 코드 에디터는 위에 두 서비스는 아니고 제가 요즘 애용하고 있는 서비스인 CodeSandbox입니다! CodeSandbox에 대해서 간단히 알아보고 사용법까지 알아보겠습니다. 코드샌드박스(CodeSandbox) ? CodeSandbox는 빠른 웹 개발을 위한 프로토타이핑 툴입니다. 웹 개발에서 사용되는 정말 다양한 기술 스택들을 제공하고 있습니다. 프론트엔드 사이드에서 굉장히 많이 사용되고 있는 React, Vue도 CodeSandbox에서 간단하게 구동 가능합니다. 설정에 대한 번거로움 단 ..

개발/Bootstrap

부트스트랩 5(Bootstrap 5) 알파버전(Alpha) 출시! 남들보다 빠르게 공부해보자!

🎉 Bootstrap 5 Alpha 드디어 부트스트랩 5 알파버전이 나왔습니다. 제가 학부시절에 부트스트랩 관련 글을 썼던게 엊그제 같은데 벌써 부트스트랩 5 알파가 나오다니.. 정말 세월이 빠른 것 같습니다. [Bootstrap] 부트스트랩의 그리드 시스템을 쉽게 사용하는 방법 (bootstrap - grid system) 부트스트랩 (Bootstrap) 부트스트랩은 트위터의 웹 디자이너와 개발자가 만든 오픈형 UI 플러그인이라고 할 수 있습니다. 전 세계의 웹제작자들에게 편리성을 주고자 만들어졌으며 보다 편리하고 � webruden.tistory.com 무려 16년도에 쓴 글이네요...; 사실 그동안 프론트엔드 개발자로서 회사생활을 하면서 부트스트랩은 사용하지 않고 몇 번씩 앤트디자인을 사용했던 기억..

개발/유틸리티

맥북에서 화면 녹화한 후 바로 GIF로 다운받는 방법

맥북에서 화면을 녹화할 수 있는 방법은 굉장히 많습니다. 가장 간단한 방법으로는 맥북 자체 기능을 활용하면 됩니다. 맥북에서 shift-command-5 키를 사용하는 방법이 있고 또 다른 방법으로는 QuickTime Player를 사용하여 화면을 녹화할 수도 있습니다. 해당 방법은 맥북 공식 홈페이지에서 굉장히 상세히 설명하고 있으니 참고하시면 됩니다. 해당 기능도 굉장히 강력하고 좋지만, 제가 원했던 기능은 화면을 녹화한 후 동영상으로 export 받는 게 아닌 GIF 형식으로 바로 받는 것이었습니다. 그래서 여러 유틸리티 프로그램을 찾는 와중에 괜찮은 맥북 화면 녹화 어플이 있어서 소개하도록 하겠습니다. (심지어 저는 유료로 구매까지 마쳤습니다. 제 돈주고 삿으니 걱정 마시...) Gifox 제가 ..

개발/Vue

Vue watch에 lodash debounce 적용하는 방법

Vue에서 watch에 lodash debounce를 사용하는 방법은 매우 간단합니다. watch로 감지할 데이터 프로퍼티로 값을 지정하는 함수를 debounce로 감싸면 해결됩니다. 예시

개발/Framer

Framer와 Framer X의 차이점 (Differences between Framer and Framer X)

Framer X? Framer Web은 Framer X의 후속 버전이 아니라 브라우저에서 편하게 사용할 수 있는 또 다른 브라우저 기반 웹 애플리케이션입니다. macOS 데스크탑 애플리케이션인 Framer X는 Framer Web과 같이 공존하고 있으며 Pro 또는 Enterprise 요금제에서 사용할 수 있습니다. 📣 Framer X에서 Framer로 이름만 변경되었을 뿐 모든 부분은 기존과 동일합니다. Framer Web and Framer Desktop App 그러므로 기존 Framer X는 Framer로 이름이 바뀌었고, 이제 브라우저 기반 웹 애플리케이션 Framer Web과 데스크탑 애플리케이션 Framer App (기존 Framer X)으로 구성되어 있다고 보시면 됩니다. Framer 데스크..

개발/Vue

[Vue] vue.js Mixin을 활용해서 재사용성을 늘리자! (Understanding Mixins in Vue JS)

소프트웨어 개발 원칙에는 여러 가지가 있는데 그중 하나 DRY(Do not Repeat Yourself) 원칙이 있습니다. "같은 동작을 하는 코드를 반복적으로 작성하지 마라" 라는 뜻을 가지고 있는데 Vue에서는 중복 코드를 제거하기 위해 여러 재사용 테크닉이 존재합니다. 믹스인, 사용자 지정 디렉티브, 플러그인, 필터가 그 기술에 속해있죠. 이번 포스팅에서는 믹스인을 활용해서 기능을 재사용하여 중복 코드를 제거해보도록 하겠습니다. ✍️ Mixin(믹스인) 이란? Mixin은 기능을 따로 정의해두고 필요할 때 마다 해당 믹스인 파일을 Vue 컴포넌트에 결합해서 사용하는 방법을 말합니다. 일반적으로 Vue 컴포넌트에 기능을 추가하기 위해 필요할 때마다 재사용할 수 있습니다. SASS라는 CSS 전처리기를..

개발/기타

소스코드를 깔끔하게 이미지로 추출하는 방법 (Create images of your source code)

🖼️ 소스코드를 깔끔하게 이미지로 추출하는 방법 웹사이트를 돌아다니다 보면 아래와 같이 소스코드를 깔끔하게 이미지화시켜서 보여주는 글들을 본 적이 있을 겁니다. 바로 Carbon이라는 사이트에서 소스코드를 이미지화시켜서 export를 해서 생성한 것입니다. Carbon Carbon is the easiest way to create and share beautiful images of your source code. carbon.now.sh 해당 사이트로 들어가면 아래 화면을 확인할 수 있습니다. ✍️ 사용방법 좌측부터 원하는 에디터 테마, 사용하는 언어 그리고 마지막으로 Export에는 파일 이름과 사이즈 그리고 다운로드 형식을 설정할 수 있는 영역이 존재합니다. 저는 Dracula 테마를 선호하고 V..

개발/Vue

vue.js 사용자 지정 디렉티브를 활용해서 코드를 깔끔하게 작성하는 방법 (vue custom directive)

🤚 들어가기 전에 Vue에는 기본적으로 내장된 디렉티브가 존재합니다. v-model과 v-show가 대표적인 예시죠. 하지만 이외에도 사용자가 직접 디렉티브를 만들고 등록할 수도 있습니다. 디렉티브를 잘 만들어 놓으면 굉장히 유용하게 재사용할 수 있습니다. 💻 디렉티브 등록 방법 사용자 지정 디렉티브를 등록하는 방법에는 2가지 방법이 있습니다. 전역으로 등록하는 방법과 로컬 컴포넌트에 등록하는 방법입니다. 전역 선언 Vue 인스턴스 선언하기 전에 Vue.directive 전역 등록을 시켜줍니다. 지역 선언 로컬 컴포넌트에 directives로 등록하는 방법입니다. 아래와 같이 지역적으로 directives를 등록하면 됩니다. 💻 훅 함수 디렉티브에는 아래와 같은 다양한 훅 함수를 제공합니다. bind 디..

개발/유틸리티

vscode(Visual Studio Code) 초간단 설치 및 사용방법 - Mac, Linux, Windows

개발을 하기 위해서는 에디터를 선택하는 것은 필수사항입니다. 저도 여러 에디터(Sublime Text 3, Atom 그리고 지금 vscode)를 개발하면서 사용해봤고, 현재는 VSCode로 정착하게 되었습니다. 그 이유는 무료임에도 불구하고 굉장히 강력한 기능들을 탑재하고 있고, 꾸준히 업데이트가 이뤄지고(제가 생각하기에 가장 중요한 부분) 마지막으로 이 에디터를 관리하고 있는 곳은 무려 마이크로소프트라는 점입니다. 굉장히 메리트가 있죠. (문득 든 생각이 Github가 Atom 에디터를 개발했는데 Github는 마이크로소프트가 인수했으니까 Atom도 마이크로소프트꺼라고 봐야되겠네요....?) 어떻게 관리하는지 궁금하시면 아래 마이크로소프트의 VSCode 깃허브 저장소에서 구경하시면 될 것 같습니다. m..

개발/Javascript

[Nodejs] Nodejs에서 손쉽게 폴더 생성하는 방법

Nodejs에서는 폴더가 있는지 체크하고 폴더가 존재하지 않을 경우 폴더를 생성하는 로직을 굉장히 쉽게 작성할 수 있습니다. fs.existsSync(dir) - 폴더가 존재하는지 체크하는 메서드 fs.mkdirSync(dir) - 폴더를 생성하는 메서드 dir은 폴더 경로입니다. ex) /dist const fs = require('fs'); const makeFolder = (dir) => { if (!fs.existsSync(dir)) { fs.mkdirSync(dir); } } makeFolder('/dist');