<Hello Hosung😎/>

1. 프로젝트 목표이번 포스팅에서는 Expo + React Native를 이용해 앱 프로젝트를 완전히 초기화하고,필요 없는 파일 제거 + 폴더 구조와 주요 파일 역할을 이해하는 것을 목표로 합니다.스플래시 화면은 제외하고, 초보자가 폴더/파일 역할을 이해할 수 있도록 정리합니다. 1️⃣ 환경 준비1-1. Node.js 설치 확인node -vnpm -v 권장 Node.js 버전: LTS (예: v20.x)만약 오류가 나면 nvm 사용하여 설치:nvm install --ltsnvm use --lts 1-2. Expo CLI 설치 확인최근 Expo는 npx create-expo-app 사용을 권장합니다.npx create-expo-app --version 기존에 expo-cli 설치되어 있어도 이제 npx 사..

1. 리액트 성능 최적화가 중요한 이유리액트로 만든 웹 애플리케이션이 크고 복잡해질수록 렌더링 성능이 중요해집니다. 페이지가 느리게 로딩되거나 불필요한 컴포넌트가 계속 리렌더링되는 경우, 사용자 경험(UX)이 크게 저하될 수 있습니다. 성능 최적화는 이러한 문제를 해결하고 애플리케이션의 반응 속도를 높여줍니다.2. 불필요한 렌더링 방지리액트는 상태(state)나 속성(props)이 변경될 때마다 컴포넌트를 리렌더링합니다. 하지만 모든 리렌더링이 필요한 것은 아닙니다. 불필요한 리렌더링을 방지하는 몇 가지 방법을 살펴보겠습니다.React.memo: 함수형 컴포넌트에서 props가 변경되지 않으면 리렌더링을 막을 수 있습니다.const MyComponent = React.memo(({ data }) => {..

리액트 라우터는 리액트로 만든 웹 애플리케이션에서 페이지 간 이동을 쉽게 해주는 도구입니다. 일반적으로 웹 애플리케이션은 페이지를 이동할 때마다 새로고침이 되는데, 리액트 라우터를 사용하면 페이지가 새로고침 없이도 URL만 바꾸면서 다양한 페이지를 보여줄 수 있습니다.이 글에서는 리액트 라우터를 쉽게 설치하고 사용하는 방법을 단계별로 소개할게요.1. 리액트 라우터 설치하기먼저 리액트 라우터를 프로젝트에 설치해야 해요. 아래 명령어로 설치할 수 있습니다.npm install react-router-dom설치가 완료되면, 라우터를 사용할 파일에서 아래와 같이 불러옵니다.import { BrowserRouter, Route, Switch } from 'react-router-dom';2. 기본 라우팅 사용하기..

리액트는 2013년에 처음 등장한 이후로 지속적으로 진화해왔고, 그 중 하나가 바로 리액트 훅(React Hooks) 입니다. 훅은 2018년에 리액트 16.8 버전에서 도입되었으며, 함수형 컴포넌트에서 상태와 라이프사이클 기능을 사용할 수 있게 해주는 기능입니다. 그 이전까지는 클래스형 컴포넌트에서만 상태 관리나 라이프사이클 메서드를 사용할 수 있었는데, 훅을 통해 함수형 컴포넌트에서도 이를 처리할 수 있게 되었습니다.훅이란 무엇인가?리액트 훅은 함수형 컴포넌트에서 상태 관리, 부수 효과(side effect) 관리, 컨텍스트 사용 등 여러 기능을 가능하게 하는 함수입니다. 훅을 사용하면 컴포넌트가 더 간결하고 읽기 쉽게 작성되며, 재사용성도 증가합니다.훅의 주요 특징함수형 컴포넌트에서만 사용할 수 있..

1. 리액트 소개리액트는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리입니다.컴포넌트 기반으로 UI를 구성하며, 상태 관리와 데이터 흐름을 효율적으로 처리합니다. 2. JSX (JavaScript XML)JSX는 자바스크립트 코드 안에서 HTML과 비슷한 구문을 사용할 수 있게 해주는 문법입니다.const element = Hello, world!; * JSX는 React.createElement로 변환됩니다.    3. 컴포넌트 (Component)리액트에서 UI는 컴포넌트로 나누어 관리됩니다.컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉩니다.  함수형 컴포넌트function Welcome(props) { return Hello, {props.name};} 클래스형 컴포넌트class..

구글 로그인을 구현하기 위해, OAuth 2.0 프로토콜을 사용하여 Google API와 연동합니다. 아래는 Node.js + Express 기반의 간단한 Google 로그인 구현 예제입니다.사전 준비Google Cloud Console에서 프로젝트 생성Google Cloud Console에 접속.새 프로젝트를 생성하거나 기존 프로젝트를 선택.OAuth 동의 화면 설정:사용자 유형 선택(외부/내부).필수 정보 입력(애플리케이션 이름, 이메일 등).OAuth 2.0 클라이언트 ID 생성:애플리케이션 유형: 웹 애플리케이션 선택.승인된 리디렉션 URI 추가: 예) http://localhost:3000/auth/google/callback클라이언트 ID와 클라이언트 비밀 키(Client Secret)를 복사..

OAuth2 로그인은 OAuth 2.0 인증 프로토콜을 사용하여 사용자가 외부 서비스(예: Google, Facebook, GitHub 등)를 통해 애플리케이션에 로그인할 수 있도록 하는 기능입니다. 이를 통해 사용자는 새 계정을 생성하지 않고도 기존의 외부 계정을 사용하여 앱이나 웹사이트에 접근할 수 있습니다. OAuth2 로그인의 주요 개념권한 부여(Authorization)사용자가 특정 애플리케이션이 자신의 정보를 접근하거나 사용할 수 있도록 허가합니다.액세스 토큰(Access Token)외부 서비스가 발급하는 임시 키로, 애플리케이션이 사용자의 데이터에 접근할 수 있는 권한을 나타냅니다.리다이렉션(Redirection)사용자는 OAuth 인증 서버로 리다이렉트되어 로그인 절차를 수행하고, 완료 후..

회원가입 시 사용자로부터 수집한 아이디와 비밀번호 같은 정보를 데이터베이스에 저장하게 됩니다. 하지만 이때 주의할 점은 비밀번호와 같은 민감한 정보를 암호화하지 않고 평문 그대로 저장할 경우입니다. 만약 데이터베이스가 유출되면, 악의적인 사용자가 평문 비밀번호를 통해 손쉽게 로그인하거나 다양한 공격을 시도할 수 있기 때문입니다. 따라서 보안을 강화하기 위해 비밀번호는 암호화(해싱) 과정을 거쳐 저장해야 합니다. 해싱을 통해 비밀번호를 암호화하면, 데이터베이스 유출 시에도 비밀번호 원문이 아닌 해시값이 노출되므로 보안을 유지할 수 있습니다.  오늘 포스팅은 bcrypt 라이브러를 활용한 민감한 정보를 암호화하여, 관리하는 방법을 알아보도록 합시다.   1) Node.js 프로젝트에 bcrypt라는 라이브러..

오늘은 Express 서버를 만들어 봅시다 😊만들기에 앞서 Express가 무엇인고 알아보면 공식 문서를 보면 아래와 같이 나와 있어요   중요한 부분은 바로 웹 애플리케이션 프레임워크 에요, 쉽게 말해 Java 계열에는 Spring, SpringBoot 등이 존재하듯 Node.js를 통해 웹 을 쉽게 만드는 프레임워크가 바로 Express 입니다.    아래와 같이 간단한 Express 서버를 만들어 보도록 합시다. 1. 프로젝트 디렉토리 생성 및 초기화먼저 Express 서버를 실행할 프로젝트 디렉토리를 만들고, 그 안에서 Node.js 프로젝트를 초기화합니다.mkdir express-servercd express-servernpm init -y # package.json 파일 자동 생성 2. E..

이번엔 Node.js 와 MySQL 의 데이터베이스 연동과 또한 mybatis-mapper 를 활용 하는 방법 또한 알아 보도록 해요😀 먼저 아래와 같이 도커 환경에 MySQL 컨테이너가 올라 갔다고 가정 해봅시다! (도커를 통해 MySQL DB 구축하는 방법은 아래에서 확인 가능해요) ↓ ↓ ↓ 2024.08.18 - [🐳 Docker] - [Docker] 도커로 MySQL DB📦 서버 만들어보기 그리고 아래와 같이 Node.js로 작성한 Express 서버가 있다고 가정해볼게요. Express는 Node.js를 위한 빠르고 간단한 웹 애플리케이션 프레임워크에요. 🧐 웹 애플리케이션을 쉽게 만들 수 있도록 도와주는 다양한 기능을 제공하며, 특히 REST API나 웹 서버를 구축할 때 많이 사용합니다. ..