분류 전체보기181

• 

  NPM과 NPX의 차이점에 대해 알아보자 서론 오늘은 비슷하지만 다른 역할을 하는 NPM과 NPX의 차이점에 관해서 알아보도록 하겠습니다. 본론 NPM이란 NPM이란 node.js 환경에서 사용되는 패키지 관리자입니다. 패키지 매니저(Package manager)는 패키지를 다루는 작업을 편리하고 안전하게 수행하기 위해 사용되는 툴이며, 라이브러리가 코드의 작성을 위해 사용되는 코드의 묶음이라면 패키지는 코드의 배포를 위해 사용되는 코드의 묶음입니다. 또한 많은 패키지들은 다른 패키지들이 설치되어야만 제대로 동작하는데, 기존 패키지를 제대로 동작시키기 위해 필요한 다른 패키지들을 dependency(의존성)라고 한다. 따라서 패키지를 사용하고자 할 때, 의존성을 갖는 다른 패키지들을 전부 설치해 줄 필요가 있다. 다만, 이는 패키지가 늘어갈 때.. 기타 2022. 4. 16.

• 

  [Hooks] 모달 띄웠을 때 스크롤을 막는 방법 오늘은 모달이 떠있는 상태에서 스크롤이 안되도록 처리해보겠습니다. 방법은 아주 간단합니다! 모달을 띄울 때, body의 style로 overflow hidden을 주면 됩니다. 반대로, 모달을 닫을 땐 overflow 속성을 지워주면 되겠죠? import { useCallback } from 'react'; export function useBodyScrollLock() { const lockScroll = useCallback(() => { document.body.style.overflow = 'hidden'; }, []); const openScroll = useCallback(() => { document.body.style.removeProperty('over.. Framework/React & RN 2022. 4. 15.

• 

  [React] 리스트에 key 값을 잘못 입력하면 어떻게 될까? 서론 리액트에선 리스트 컴포넌트에 key 값을 입력하도록 권장합니다. 오늘은 그 까닭과 올바른 key 값을 입력하지 않으면 어떤 문제가 발생할 수 있는지 함께 살펴보도록 하겠습니다. 본론 키 값을 입력해주는 것은 왜 중요할까? 질문에 답을 하기에 앞서서, 리스트 형태의 리액트 컴포넌트에 key 값을 입력해주는 것은 왜 중요할까요? 목록의 데이터 간 값 비교를 사용자가 입력한 key 값을 바탕으로 하기 때문입니다. 올바르지 못한 key 값을 입력하면 어떤 에러가 발생될까? 흔히 하는 실수가 Array의 map 메서드의 index를 key 값으로 제공하는 것입니다. 허나, 이는 배열의 원소가 삭제/추가되어 배열의 순서가 변동되는 경우에는 적합하지 않습니다. 아래의 예제처럼 말이죠. 실제 동작은 해당 링크를 .. Framework/React & RN 2022. 4. 14.

• 

  [HTML] Input readonly와 disabled의 차이점은 무엇인가? 서론 정말 오랜만에 HTML 포스팅을 올리는데요, 오늘은 기본 html Input의 속성 중 비슷한듯(?), 다른 두 속성에 관해 비교해보겠습니다. 본론 아마 많은 분들이 disabled와 readOnly를 사용자가 Input에 값을 입력하지 못하도록 처리하기 위해 사용하실 것입니다. 두 요소 모두, 해당 역할을 수행할 수 있습니다. 그러나 차이점은 폼에 해당 Input value 값이 포함되느냐 마느냐의 여부입니다. 아래 예제를 살펴봅시다. See the Pen form readonly vs disabled by joonfluence (@joonfluence) on CodePen. 차이점이 보이시나요? disabled된 Input의 value는 폼 값에 포함되지 않습니다. 따라서 사용자의 입력은 막고 .. Web/HTML 2022. 4. 13.

• 

  [Javascript] Array.prototype.forEach vs Array.prototype.Map 서론 오늘은 배열을 순회하는 내장 메서드인 forEach와 Map의 차이점을 알아보도록 하겠습니다. 본론 forEach 먼저 forEach에 대해서 살펴보겠습니다. const arr = [1, 2, 3, 4, 5]; arr.forEach((i) => console.log(i+1)); console.log(arr); 배열을 순회하며, 각 원소에 1을 더하는 간단한 함수를 forEach 메서드의 콜백함수로 등록해줍니다. 아래와 같이 출력되는 것을 볼 수 있습니다. 2 3 4 5 6 [1, 2, 3, 4, 5] forEach 메서드를 사용하면 원본 배열에 영향을 주지 않으며, 반환 값도 없습니다. map 이번엔 map 메서드를 살펴보겠습니다. 동일한 예제를 사용하여 비교해보겠습니다. const arr2 = [.. Language/JS(Node.js) 2022. 4. 3.

• 

  [Expo 44] 최신 Expo 환경에서 복수 이미지 업로드하는 방법 서론 대상독자 React Native Expo 개발 시, 이미지 업로드를 구현하고 싶은 개발자 학습목표 최신 Expo 환경(Expo 44)에서 복수 이미지 업로드를 구현하는 방법에 대해서 알아보겠습니다. expo-image-picker에선 하나의 이미지만 선택할 수 있으므로, 한 번에 여러 이미지들을 업로드 할 수 있도록 프로그램을 작성하겠습니다. 본론 먼저 필요한 패키지들을 설치합니다. 라이브러리 설치하기 expo install expo-image-picker expo-media-library expo-image-picker와 expo-media-library 라이브러리를 설치해줍니다. expo 모듈 같은 경우에는 expo 버젼에 따라 패키지 사용방법이 상이하므로, expo cli로 설치해주는 것이 중.. Framework/React & RN 2022. 4. 2.

• 

  React Native/Typescript 환경에서 react-navigation을 활용하여 라우팅하는방법 서론 대상독자 타입스크립트로 RN 개발 시, react-navigation을 활용하여 라우팅하고 싶은 개발자 학습목표 @react-navigation에는 bottom-tabs, stack(native-stack), 드로어(drawer) 이렇게 총 3가지 종류의 네비게이터가 존재합니다. 오늘은 react-navigation을 활용하여 바텀 탭과 스택 네비게이팅에 대해서 알아보도록 하겠습니다. 기본적으로 리액트의 네비게이팅을 위해 쓰이는 React Router와 유사한 구조인데요, 바로 살펴보겠습니다. 본론 모듈 설치하기 yarn add @react-navigation/bottom-tabs @react-navigation/native @react-navigation/native-stack @react-nav.. Framework/React & RN 2022. 4. 2.

• 

  [Expo 44] 최신 Expo 환경에서 구글 로그인 구현하는 방법 서론 대상독자 React Native Expo 개발 시, 구글 로그인을 구현하고 싶은 개발자 학습목표 최신 Expo 환경(Expo 44)에서 구글 로그인을 구현하는 방법에 대해서 알아보겠습니다. 본론 먼저 필요한 패키지들을 설치합니다. expo-auth-session 설치하기 expo install expo-auth-session expo-random expo-auth-session와 expo-random 라이브러리를 설치해줍니다. expo 모듈 같은 경우에는 expo 버젼에 따라 패키지 사용방법이 상이하므로, expo cli로 설치해주는 것이 중요합니다. 그럼 자동으로 expo에서 앱의 expo 버젼에 맞게 패키지를 설치해줍니다. 코드 작성하기 공식 문서에서 예제 코드를 불러와 사용하겠습니다. impo.. Framework/React & RN 2022. 4. 1.

• 

  React Native/Typescript 환경에서 Styled-component를 사용하는 방법 서론 대상독자 RN 개발 시, Styled-component를 사용하고 싶은 개발자 학습목표 오늘은 RN Expo와 타입스크립트 환경에서 Styled-component를 설정하는 방법에 대해서 알아보겠습니다. 본론 라이브러리 설치하기 yarn add styled-components; yarn add -D @types/styled-components @types/styled-components-react-native 리액트에서 사용할 때와 유일한 차이점은 @types/styled-components-react-native 패키지를 추가로 설치해준다는 점입니다. 실제로 사용해보기 테스트를 위해 버튼 컴포넌트를 스타일드 컴포넌트를 활용하여, 스타일링 해보도록 하겠습니다. 잘 적용되는 것을 보실 수 있을 겁니다.. Framework/React & RN 2022. 4. 1.

• 

  React Native 환경에서 svg 파일 불러오는 방법 서론 대상독자 RN 개발 시, svg 파일을 사용하고 싶은 개발자 학습목표 오늘은 RN Expo 환경에서 svg 파일을 불러오는 방법에 대해서 알아보겠습니다. 본론 react-native-svg와 react-native-svg-transformer 설치하기 yarn add react-native-svg react-native-svg-transformer react-native-svg와 react-native-svg-transformer란 라이브러리를 설치해줍니다. metro.config.js 수정하기 그런 뒤, metro.config.js 파일에서 아래와 같이 설정해줍니다. const { getDefaultConfig } = require("expo/metro-config"); module.exports.. Framework/React & RN 2022. 4. 1.

• 

  React Native/Typescript 환경에서 절대경로 설정하는 방법 서론 대상독자 RN 개발 시, 절대경로 사용하고 싶은 개발자 학습목표 오늘은 RN Expo와 타입스크립트 환경에서 절대 경로를 설정하는 방법에 대해서 알아보겠습니다. 본론 babel-plugin-module-resolver 설치하기 yarn add -D babel-plugin-module-resolver babel-plugn-module-resolver란 라이브러리를 설치해줍니다. babel.config.js 수정하기 그런 뒤, babel.config.js 파일에서 해당 값에 맞게 설정해줍니다. 이 때, baseUrl로 들어가는 경로에 절대경로로 설정해주고 싶은 값이 들어가도록 설정해주는 것이 중요합니다. module.exports = function () { return { presets: ["babe.. Language/Typescript 2022. 4. 1.

• 

  React Native/Typescript 환경에서 데코레이터 함수 사용하는 방법 서론 대상독자 타입스크립트 개발 시, 데코레이터 함수를 사용하고 싶은 개발자 학습목표 타입스크립트 환경에서 데코레이터 함수를 설정하는 방법에 대해서 알아보겠습니다. 본론 먼저 필요한 패키지들을 설치합니다. babel과 babel plugin 설치하기 yarn add -D @babel/core @babel/plugin-proposal-decorators @babel/plugin-proposal-decorators란 라이브러리를 설치해줍니다. babel.config.js 수정하기 그런 뒤, babel.config.js 파일에서 해당 값에 맞게 설정해줍니다. module.exports = function () { return { ..., plugins: [ ["@babel/plugin-proposal-deco.. Language/Typescript 2022. 4. 1.