Framework29

• 

  [RN] 자주 쓰이는 단축키, 사이트 모음 본론 환경설정 방법 Setting up the development environment · React Native - 링크 Xcode 빌드 캐시 삭제 Windows : Shift+Command+K Mac : Option+Shift+Command+K 완전 삭제 ~/Library/Developer/Xcode/DerivedData 문제 있는 프로젝트 삭제 Pods Dependency Error rm -rf node_modules && yarn install && cd ios && rm -rf Pods && pod install && cd .. React Dependency Error npm install --force npm install --legacy-peer-deps --force를 하면 package.. Framework/React & RN 2022. 8. 22.

• 

  [RN] IOS 네이티브 모듈 다루기 서론 오늘은 RN에서 IOS 네이티브 모듈과 직접 통신하는 방법에 관해서 알아보도록 하겠습니다. 본론 먼저, Xcode 상에서 새로운 Object-C 파일을 생성해줍시다. XCode 상, File -> New -> File로 접근할 수 있습니다. Object-C 모듈/메서드 내보내기 // RTCCalendarModule.h #import @interface RCTCalendarModule : NSObject @end 헤더파일에 RCTBridgeModule 모듈을 항상 불러와줍니다. 그래야, JS와 Object-C 간에 통신이 가능합니다. // RCTCalendarModule.m #import "RCTCalendarModule.h" #import @implementation RCTCalendarModule.. Framework/React & RN 2022. 6. 26.

• 

  [Spring] Spring Boot 환경에서 MySQL과 MyBatis를 설정하는 방법 서론 오늘은 Spring Boot 환경에서 MySQL과 MyBatis 설정을 하는 방법에 관해서 알아보도록 하겠습니다. 목차 MySQL 설치방법 Spring Boot에서 MySQL 설정하기 Spring Boot에서 MyBatis 설정하기 본론 MySQL 설치방법 Mac을 사용한다면, 간단하게 brew로 mysql을 설치해줍니다. brew install mysql 버젼도 확인해봅니다. mysql -V 서버도 실행해봅니다. mysql.server start 그리고 MySQL 초기 설정을 해줍니다. 비밀번호, 익명유저, root 접속 권한 등을 설정해줍니다. mysql_secure_installation 그런 뒤, 접속해줍니다. mysql -u root -p 다시 mysql 서버를 실행하고 설정을 켜줍니다. .. Framework/Spring 2022. 6. 4.

• 

  [Spring/SpringBoot] 스프링 DB 접근 기술 정리 서론 오늘은 Spring 개발환경에서 DB에 접근하는 다양한 방법에 관해 알아보도록 하겠습니다. 이 글은 김영한님의 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술을 보고 정리한 글임을 서두에 밝힙니다. 본론 테스트 데이터베이스 먼저, DB 접근 기술을 다루기에 앞서 테스트 DB 환경을 구축하도록 하겠습니다. 이번에 사용할 DB는 H2 데이터베이스입니다. H2 데이터베이스는 테스트용 DB로 사용하기 쉽기 때문에 자주 사용합니다. 환경설정 방법 해당 링크에 접속하여, OS에 맞게 다운로드를 해줍니다. 저는 Mac을 사용하므로, All Platforms를 선택하겠습니다. zip 파일을 열어, 압축을 해제하신 후 파일을 열어봅니다. 그러면 bin, build.bat, build.iml.. Framework/Spring 2022. 5. 29.

• 

  [Spring] Spring Boot MVC 패턴 익히기 서론 오늘은 Spring의 MVC 패턴에 대해 간단히 알아보고 직접 실습해보도록 하겠습니다. 이 글은 김영한님의 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술을 보고 정리한 글임을 서두에 밝힙니다. 본론 MVC의 역할 MVC는 각각 M(Model), V(View), C(Controller)에 약자입니다. 각각 역할이 구분되는데요, Model의 경우에는 데이터의 상태를 나타내는 역할을 합니다. View의 경우에는 화면을 구성하는 역할을 하며, Model의 data와 함께 HTML 파일을 브라우저에 전송합니다. Controller의 경우, View와 Model 간의 인터페이스 역할을 하며, 클라이언트의 요청 및 전송 데이터를 수신하고 적절한 결과물을 Model에 담아 View에 전.. Framework/Spring 2022. 5. 21.

• 

  [React] Creact React App을 분석해보자 서론 오늘은 리액트 환경설정을 자동화해주는 툴인 CRA에 관해서 알아보도록 하겠습니다. 본론 CRA란 CRA란 별다른 설정 없이 react 개발환경을 구축해주는 boilerplate 입니다. 이를 활용하면, 쉽게 환경설정을 할 수 있다는 장점이 있습니다. 구체적으로 CRA가 해주는 역할은 대표적으로 다음과 같습니다. public 디렉토리에 index.html과 logo, favicon 등의 static asset 및 기본적인 리액트 코드(index.js, app.js) 설정 webpack, babel, eslint, jest 등 리액트 개발에 필요한 각종 환경설정 react, react-dom, react-scripts 등 각종 라이브러리 설치 react-scripts를 사용하여 package.json에.. Framework/React & RN 2022. 4. 26.

• 

  [React] CRA 없이, 리액트 개발 환경을 설정해보자 서론 학습목표 오늘은 리액트 개발 환경셋팅을 자동으로 해주는 CRA 없이 리액트 개발환경을 설정할 수 있다. 웹팩, 바벨이 하는 역할을 알고 직접 관련된 설정을 해줄 수 있다. CRA가 해주는 역할에 대해서 바르게 안다. 본론 리액트로 처음 개발할 땐, CRA로 개발환경을 셋팅해주곤 합니다. CRA란 Create React App의 약자로 바벨, 웹팩, 린트 등 복잡한 개발환경을 쉽게 설정해줄 수 있도록 돕는 툴입니다. 사용법은 정말 쉽습니다. 그러나 문제는 개발자로써 더 환경설정을 커스터마이징하고 싶을 때, 하기 어렵다는 점입니다. 따라서 오늘은 CRA 없이 밑바닥부터 리액트 개발환경을 설정해보도록 하겠습니다. 참고로 2022년 4월 21일 기준으로 패키지 버젼을 맞춰 줬습니다. 프로젝트 셋팅하기 먼저.. Framework/React & RN 2022. 4. 21.

• 

  [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.

• 

  [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.