Git revert vs reset 깊이 이해하기: merge, -m 옵션, revert of revert까지이번 글에서는 git revert와 git reset의 차이부터 merge commit, -m 옵션, 그리고 revert of revert까지 정리해 보겠습니다.1. git revert vs git reset — 본질적인 차이🔹 git revertgit revert 특정 커밋의 변경사항을 반대 방향으로 적용하는 새로운 커밋을 생성기존 히스토리는 유지협업 환경에서 안전즉,기록을 남기면서 되돌리는 방식🔹 git resetgit reset [옵션] 브랜치 포인터를 특정 커밋으로 이동시킴그 이후 커밋들은 히스토리에서 사라질 수 있음이미 push 된 브랜치에서는 위험즉,히스토리를 재작성하는 방식🔹 g..

[RN] 본인인증 기능 구현 (with 드림시큐리티) 랜턴은 여성들을 위한 안전 앱으로, 향후 커뮤니티 기능을 위한 여성 인증과 연령 제한이 필요했습니다. 이에 따라 14세 이상 여성 사용자임을 확인하는 휴대폰 본인인증 기능을 추가하게 되었습니다.인증 방식에 대한 비교나 선정 과정은 제가 팀에 합류하기 전에 이미 결정된 부분이라, 이번 글에서는 생략합니다. 구현에는 드림시큐리티의 휴대폰 본인인증 서비스를 사용했습니다. | Mobile-OK 본인확인서비스 휴대폰 본인확인 서비스드림시큐리티 휴대폰 본인확인 서비스 - 주민번호를 사용하지 않고 생년월일 휴대폰 인증만으로 웹사이트 개인정보에 민감한 이용자들을 위한 실명확인, 본인확인용 주민번호 대체 인증서비스www.mobile-ok.comMobile-OK 본인확..

함수형 컴포넌트의 구조와 동작 방식(feat. 클로저) React의 함수형 컴포넌트는 클로저 개념과 깊은 관련이 있습니다. 이 글에서는 클로저가 무엇인지 알아보고, 함수형 컴포넌트에서 클로저가 어떻게 활용되는지 살펴보겠습니다.클로저클로저는 함수와 함수가 선언된 어휘적 환경(Lexical Scope)의 조합이다."선언된 어휘적 환경"이라는 것은, 변수가 코드 내부 어디에서 선언됐는지를 말하는 것호출되는 방식에 따라 동적으로 결정되는 this와 다르게, 코드가 작성된 순간에 정적으로 결정된다.함수가 정의된 시점의 렉시컬 스코프(변수 환경)를 기억하고, 그 범위 안의 변수들에 접근할 수 있는 함수를 의미function add() { const a = 10; //a 변수의 유효 범위는 add 전체 funct..

화살표 함수와 일반 함수의 차이(feat. Prototype) JavaScript에서 함수를 정의하는 방법과 각 방식의 차이점에 대해 알아보겠습니다.함수함수란 어떤 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드 블록이다.- 코드를 재사용하는 것이 목적이다.- 코드 재사용이라는 일반적 기능 이외에 객체 생성, 객체의 행위 정의(메소드), 정보 은닉, 클로저, 모듈화 등의 기능을 수행할 수 있다.//함수의 기본적인 형태function sum(a, b) {  return a + b;}sum(10, 24); //34리액트에서 컴포넌트를 만드는 함수도 이러한 형태를 따른다.function Component(props) {  return {props.hello}}Component라고 하..

Next.js 14에서 router.replace()와 router.push()가 동작하지 않을 때 해결 방법 1. 문제 상황Next.js 14를 사용해 로그인 기능을 구현하던 중, 로그인 완료 후 router.replace("/")를 사용해 메인 페이지로 이동하려 했습니다. 하지만 URL은 변경되었음에도 화면이 갱신되지 않는 문제가 발생했습니다.이 상황에서 router.refresh()를 사용하니 정상적으로 페이지가 갱신되었습니다. 왜 이런 문제가 발생한건지 정리해보겠습니다.2. App Router의 작동 방식Next.js 14부터 App Router는 서버 중심 데이터 관리를 강조합니다. 이는 클라이언트 네비게이션(router.push나 router.replace)이 서버 데이터(fetch된 세션 정..

왜 리액트인가? 리액트는 어떤 환경에서 등장했으며, 왜 많은 개발자들에게 선호하고 사용하는지에 대해 정리해보겠습니다.모던 리액트 딥다이브를 참고하여 내용을 확장하고, 보완하여 작성한 글입니다.리액트의 특징 1: 명시적인 상태 관리리액트는 단방향 바인딩만 지원합니다. 리액트의 상태 변화는 '단방향'으로, 그리고 '명시적'으로 이루어지기 때문에 상태가 변화했다면 그 상태 변화를 명시적으로 일으키는 함수만 찾으면 됩니다.function App() { const [text, setText] = React.useState(""); return ( setText(e.target.value)} // 이벤트를 통해 명시적으로 상태를 변경 /> {text} {/* 모델 데이터가 뷰..

React Native 앱 성능 최적화 앱 개발 과정에서 적용했던 다양한 성능 최적화 방법에 대해 정리해 보겠습니다. 이는 앱의 성능을 극대화하고, 사용자 경험을 향상시키기 위해 필요한 요소들입니다. 1. useQuery, useInfiniteQuery 사용React Query의 useQuery와 useInfiniteQuery를 사용해 비동기 데이터 관리를 최적화했습니다. 이 두 훅을 통해 API 호출 시 발생할 수 있는 중복을 줄이고, 데이터를 효율적으로 캐싱하여 상태 관리를 개선할 수 있었습니다.특히 queryKey를 사용하여 각 쿼리를 고유하게 식별함으로써 캐싱 효율성을 높였습니다. 이를 통해 이미 요청된 데이터는 빠르게 로드되어 사용자 대기 시간을 최소화할 수 있었습니다. 무한 스크롤을 지원하는 ..

Expo 주요 개념 정리 🗝️ Key concepts of ExpoExpo app:Expo app는 Expo tools를 사용하여 개발된 리액트 네이티브 앱을 의미합니다. 여기서 'Expo tools'는 Expo SDK, Expo Go, Expo CLI 등을 포함하여 앱 개발, 테스트, 배포 과정에서 제공하는 다양한 도구와 라이브러리를 지칭합니다.Expo 앱과 기본 React Native 앱의 개발 프로세스 차이Expo app과 Expo 도구를 사용하지 않는 리액트 네이티브 앱은 개발 프로세스가 다릅니다. Expo는 다양한 도구와 서비스를 제공하며, 이들은 독립적으로 사용할 수 있습니다. Expo가 제공하는 기능 중 일부는 React Native의 기본 도구에는 없거나 직접 설정이 필요한 것들이 많습..

Prisma ORM: 기본 개념과 동작 원리 Prisma ORM이란?Prisma는 JavaScript와 TypeScript 애플리케이션에서 데이터베이스와 상호작용을 쉽게 할 수 있게 해주는 오픈소스 ORM(Object-Relational Mapping)입니다. ORM은 데이터베이스의 테이블 구조와 프로그래밍 언어의 객체를 연결하여, 개발자가 데이터베이스 조작을 객체 지향적인 코드로 구현할 수 있게 합니다.Prisma의 주요 장점은 타입 안전성과 자동화된 쿼리 빌더입니다. 이를 통해 SQL 쿼리를 직접 작성하지 않고도 데이터베이스 작업을 수행할 수 있으며, 컴파일 단계에서 타입 오류를 잡아낼 수 있어 코드의 안정성을 높입니다.Prisma ORM의 구성 요소다음과 같은 구성 요소로 이루어져 있습니다.Pris..

Next.js(app router)에서 Redux Toolkit 사용하기 Next.js는 React에서 널리 사용되는 서버 측 렌더링 프레임워크로, Redux를 올바르게 사용하기 위해서는 몇 가지 고려해야 할 점들이 있습니다. 아래와 같은 내용인데요. 하나씩 살펴보겠습니다.요청별 안전한 Redux 스토어 생성: Next.js 서버는 동시에 여러 요청을 처리할 수 있습니다. 따라서 각 요청마다 Redux 스토어를 생성해야 하며, 요청 간에 스토어를 공유해서는 안됩니다.SSR 친화적인 스토어 초기화: Next.js 애플리케이션은 서버에서 먼저 렌더링 되고, 이후 클라이언트에서 다시 렌더링됩니다. 클라이언트와 서버에서 동일한 페이지 내용을 렌더링하지 않으면 'hydration error'가 발생할 수 있습니다..

Redux Overview and Concepts Redux란?Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다. 컴포넌트 각각에서 상태가 수정될 경우에는 언제, 어디서 버그가 발생한 건지 추적하기 어렵습니다. 물론 앱의 규모가 작다면 어렵지 않겠지만요. Redux는 흩어져 있는 상태 관리 로직을 중앙화하여 디버깅과 테스트가 쉬워지게 합니다. 이것이 Redux를 사용하는 이유입니다. Redux는 애플리케이션의 여러 부분에 걸쳐 필요한 "전역" 상태를 관리하는 데 도움이 됩니다. Redux에서 제공하는 패턴과 도구를 사용하면 애플리케이션의 상태가 언제, 어디서, 왜, 어떻게 업데이트되는지, 그리고 이러한 변경이 발생할 때 애플리케이션 로직이 어떻게 작동하는지 쉽게 파악할 수 있습니다. R..

React Native에 대해 알아보기 Learn once, write anywhere.리액트 네이티브의 슬로건은 "한 번 배우면 어디서든 쓸 수 있다(Learn once, write anywhere)"입니다. 이 말이 의미하는 바가 무엇인지, 그리고 실제로 리액트 네이티브를 어디에서 어떻게 활용할 수 있는지 알아보겠습니다.React Native리액트 네이티브는 리액트의 강점을 네이티브 개발로 확장하여, 리액트를 아는 개발자들이 쉽게 네이티브 앱을 만들 수 있게 도와줍니다. 또한, 네이티브 개발자들은 React Native를 통해 공통 기능을 한 번만 작성함으로써 다양한 네이티브 플랫폼 간의 기능을 일관되게 유지할 수 있습니다.리액트 네이티브는 자바스크립트로 작성되며, 네이티브 코드로 변환되어 렌더링 됩..

Canvas로 그림 그리기 기능 구현: 이슈와 해결 과정 Canvas를 활용해서 그림 그리는 기능을 구현해 보았습니다. 이 과정에서 발생했던 이슈들을 정리해보고자 합니다. 📍 Canvas란 무엇인가?Canvas는 HTML5의 일부로 도입된 강력한 그래픽 인터페이스입니다. HTML 문서에 태그를 사용하여 그래픽 영역을 만들 수 있으며, 이 영역에서 JavaScript를 사용해 동적으로 그림을 그리거나 애니메이션을 생성할 수 있습니다. Canvas는 래스터 그래픽을 다루기 위한 도구로, 픽셀 단위로 그래픽을 조작하는 데 매우 유용합니다.래스터 그래픽래스터 그래픽은 픽셀, 즉 작은 점들의 집합으로 이루어진 이미지 형식을 말합니다. 각 픽셀은 고유한 색상 정보를 가지고 있으며, 이 픽셀들이 모여 전체 이미지..

브랜치와 Git Merge 방법 이번에는 브랜치와 Git Merge에 대해 살펴보겠습니다. 주로 git merge 명령어를 사용해온 경험을 바탕으로, 다양한 병합 방법과 각 방식의 차이점을 비교해보겠습니다. Git에서 브랜치 관리는 협업과 버전 관리를 효율적으로 진행하는 데 매우 중요합니다. 그럼 다양한 병합 방법과 그 특징을 살펴보겠습니다. 🔍 브랜치란?git merge 방법에 대해 알기 위해서는 먼저 브랜치와 커밋 히스토리에 대한 이해가 필요합니다. Git 브랜치 - 브랜치란 무엇인가를 참고해서 정리해 보겠습니다.✅ 브랜치는 원래 코드와 상관없이 독립적으로 개발을 진행하기 위한 것입니다. 원래 코드와 동일하지만, 분리되어 있기 때문에 부담 없이 작업할 수 있습니다. 🔍 Git이 데이터를 다루는 ..

Next.js Routing(app router) ✅ Next.js란? Next.js의 공식문서를 참고해 작성했습니다. Next.js는 풀스택 웹 애플리케이션을 위한 리액트 프레임워크입니다. 리액트는 UI 개발을 위한 라이브러리인데요. 리액트 컴포넌트로 UI를 구축하고, Next.js를 사용해 추가 기능과 최적화를 수행합니다. 어떤 기능이 있고, 어떤 방식으로 최적화를 한다는 것인지에 대해서도 좀 더 자세히 알아보겠습니다. Next.js는 리액트를 사용하기 위해 필요한 도구들을 추상화하고 자동으로 설정합니다. 이는 개발자가 설정(configuration)에 시간을 소비하는 대신 애플리케이션 구축에 더 집중할 수 있게 해 줍니다. 1인 개발자이든 큰 규모의 팀에 소속된 개발자이든 상관없이, Next.js는..

SQL로 시작하는 데이터 분석 첫걸음 강의 학습 후기 이 글은 패스트캠퍼스에서 해당 강의를 수강한 후 작성한 것입니다. 최근 패스트캠퍼스를 통해 두 개의 국비 지원 온라인 과정을 수강했습니다. 이 중 하나는 데이터 분석의 필수 도구인 SQL을 배우는 과정이었고, 다른 하나는 딥러닝의 기본 개념과 응용에 대해 다루는 과정이었습니다. 특히, 5주간의 SQL 강의 수강을 마치며 얻은 경험을 나누고자 합니다. 학습 방식강의가 실습 위주로 구성되어 있었기 때문에, 강의를 일시 정지하고 실습 문제를 해결한 후 답을 확인하는 방식으로 학습을 진행했습니다. 그러다 보니 강의 시청 시간이 더 길게 나온 것 같은데요. 실무밀착형 문제로 쿼리를 직접 작성해 보고, 실제 사용자들의 데이터를 분석하기 위한 기준과 방법에 대해 ..

UTC 시간대, date_format() 결과값이 다른 이유 💡 개요 다음은 2020년 7월의 구매 유저 수를 구하기 위해 작성한 쿼리입니다. 그러나 위의 두 쿼리는 의도와는 다르게 결과값이 서로 달랐는데요. 원인 파악을 위해 아래와 같은 쿼리문을 작성해보았습니다. 🔍 원인 분석 자세히 확인해 보니 2020년 7월 31일 15시부터는 2020년 8월로 포맷팅 되고 있었습니다. 이렇듯 잘못 포맷팅 되는 행들이 있어서 7월에 해당됨에도 불구하고 결과값에서는 제외된 행들이 있었던 겁니다. 그렇다면 왜 2020년 7월 31일 15시부터는 2020년 8월로 포맷팅 되는지 알아보았습니다. 이를 이해하기 위해서는 먼저 다음 사항에 대해 알아야 했습니다. ✅ 시간대(time zone) : 지구상에서 사용되는 서로 다른..

A+B, 입출력 문제(JavaScript) 문제 풀이 //fs 모듈을 이용해 파일 전체를 한 줄씩 읽어와 문자열로 저장 let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().split('\n'); //["1", "2"] let line = input[0].split(' '); let a = parseInt(line[0]); //1 let b = parseInt(line[1]); //2 console.log(a+b); ✅ 일반적으로 코딩테스트에서는 표준 출력으로 console.log() 사용 //템플릿 리터럴, 백틱 문자 사용 result = 10; console.log(`정답은 ${result}입니다.`); ✅ 입력 데이..

합집합, 교집합, 차집합(MySQL) 합집합 🔍 [쿼리 A] UNION/UNION ALL [쿼리 B] 💡쿼리 두 개의 결괏값을 합치는 것과 같다. JOIN 할 때 쓰이는 ON절은 사용하지 않는다. 💡 쿼리 두 개의 결괏값을 합치는 것이므로, 각각의 결과 값의 개수(컬럼의 수)는 같아야 한다. ✅ UNION은 두 쿼리 결과의 중복을 제거한 후 합집합을 반환 ✅ UNION ALL 은 두 쿼리 결과의 중복을 포함한 합집합을 반환 ✅ ORDER BY는 전체 쿼리의 가장 마지막에 작성 가능하고, [쿼리 A]에서 가져온 컬럼으로만 가능하다. //UNION 예제 SELECT name FROM Animals UNION SELECT name FROM Pets; //UNION ALL 예제 SELECT name FROM A..

GROUP BY와 HAVING 그리고 그룹 함수 이번 시간에는 GROUP BY절과 HAVING절 그리고 그룹 함수에 대해서 알아보겠습니다. 각각 언제 어떻게 사용하는지 다뤄보려고 합니다. * 패스트캠퍼스 'SQL 데이터 분석 첫걸음' 강의의 내용을 바탕으로 작성하였습니다. GROUP BY 🔍 컬럼에서 동일한 값을 가지는 로우를 그룹화하는 키워드 ➡️ GROUP BY [컬럼 이름] 형식으로 사용 ➡️ GROUP BY가 쓰인 쿼리의 SELECT 절에는 GROUP BY 대상 컬럼과 그룹 함수만 사용 가능 ➡️ 여러 컬럼으로 그룹화도 가능, 키워드 뒤에 [컬럼 이름]을 복수 개 입력하면 됨 ➡️ 컬럼 번호로도 그룹화 가능(컬럼 번호는 SELECT 절의 컬럼 이름의 순서를 의미) HAVING🔍 가져올 데이터 그룹..