IT 개발자가 되기위한 여정

컴퓨터 공부를 시작함에 앞서 계획 및 개발에 대한 내용을 풀어나갈 생각입니다.

IT 학습 45

[React + Native] 한글 입력 및 키보드 (천지인 키보드) 문제

문제 발생Native (웹앱) 환경에서 빌드중인 웹의 입력기에서 일부 조건 혹은 일부 키보드 형태에 따라 몇가지 문제가 발생했다.가장 처음의 문제는 천지인 키보드에서 발생했다.  문제 1. 자수 제한을 단순하게 걸었더니 천지인 키보드 사용시 문제가장 심플한 예시로 예를 들어 천지인 키보드로 송을 입력하게 된다면ㅅ ㆍ =>  소 로 일시적으로 글자수가 한자 더 늘어나게 된다. 이 때 예를 들어 8자 (maxLength나 slice를 통한 강제 조작)을 하게 되는 경우 ㅅ에서 소로 넘어가지 않는 문제가 발생했다.기존 코드는 다음과 같이 입력을 처리하는 방식이였다.const changeValue = (e) => { const sliceValue = e.target.value.slice(0, maxLeng..

Docker를 통한 문서 배포 자동화

개요 이 가이드는 Docker를 사용하여 Node.js 애플리케이션과 Nginx 서버를 구성하고, 효율적으로 배포하기 위한 전반적인 프로세스를 다룹니다. 특히 SVN에서 코드를 체크아웃하고, 문서를 생성하며, live-server를 이용한 로컬 개발 환경 설정에 초점을 맞춥니다. 또한, Docker Compose를 활용하여 여러 컨테이너를 관리하는 방법에 대해서도 설명합니다. 샘플 파일 배포 Github https://github.com/zerosial/Docker_svn_Nginx GitHub - zerosial/Docker_svn_Nginx Contribute to zerosial/Docker_svn_Nginx development by creating an account on GitHub. gith..

리액트 쿼리와 주스텐드 그리고 우아콘

작년 우아콘과 더불어 회사 내 사내 발표시 사용했던 ppt가 있어서 공유합니다. 진작 공유하고 싶었지만.. 사용한 코드나 예시 스크린샷이 아직 공개된 앱이 아니라서 참고 참았다가 첫 발표에 사용한 PPT를 이제야 공유합니다 https://gamma.app/public/React-query-Zustand-0yejbuupd15mi5t 일부 열화된 (직접찍느라) 사진들이 있지만.. 첫 발표라 설랬던 내용을 공유하고 싶습니다.

React W Hooks 톺아보기

시작하기에 앞서 이 포스트를 통해 커스텀 훅의 사용 예시와 더불어 실제 프로젝트의 적용 코드 및 사용 주의사항 등을 공유할 예정입니다. 먼저 Hooks 란? 리액트(React)의 훅(Hooks)은 함수형 컴포넌트에서 상태 관리, 라이프 사이클 이벤트 처리, 그리고 React의 다른 기능들을 사용할 수 있게 해주는 기능들입니다. 훅을 사용하면 클래스 기반 컴포넌트에서만 가능했던 여러 기능들을 함수형 컴포넌트 에서도 쉽게 사용할 수 있습니다. 우리가 자주 쓰는 useEffect , useState를 포함해 정의된 Hooks를 통해 React의 생명주기를 다룰 수 있습니다. Hooks의 종류 Built-in React Hooks – React [Built-in React Hooks – React The lib..

정규 표현식 에서의 특수 문자 이스케이프 (feat: 및줄)

개요 정규 표현식은 문자열 검색 및 치환 등의 작업에 사용되는 강력한 도구입니다. 그러나 정규 표현식 내에서는 특정 특수 문자들이 특별한 의미를 가지고 있습니다. 예를 들어: . : 어떤 문자와도 일치합니다. * : 앞의 문자나 그룹이 0번 이상 반복됩니다. + : 앞의 문자나 그룹이 1번 이상 반복됩니다. 그러므로, 이러한 특수 문자들을 문자 그대로 검색하려면 이스케이프 처리가 필요합니다. escapeRegExp 함수 이스케이프 처리는 특수 문자 앞에 역슬래시(\)를 붙여주는 것을 말합니다. /** * 정규 표현식에서 사용되는 특수 문자를 이스케이프합니다. * @param {string} string - 이스케이프 할 문자열. * @returns {string} 이스케이프된 문자열을 반환합니다. */ ..

React에서 스크롤 기반 헤더 최적화 하기

React에서 스크롤 기반 헤더 최적화하기 스크롤 기반의 동작은 웹 애플리케이션에서 흔히 볼 수 있는 패턴입니다. 이런 패턴은 사용자 경험(UX)을 크게 향상시켜주지만, 잘못 구현될 경우 성능에 문제를 가져올 수 있습니다. 이 글에서는 React Hook을 사용하여 스크롤에 따라 헤더 내용을 바꾸는 작업의 최적화 과정을 함께 살펴보겠습니다. 초기 구현: 이전 코드 우리가 개선 전에 사용하던 코드는 아래와 같습니다: import { useEffect } from "react"; import { Store } from "Helper"; import { CommonHeaderTypePageActions } from "Action"; const useProminentHeader = (ref, title) => ..

Redux란? (리덕스)

1. SPA에서 Redux의 개념 단일 페이지 응용 프로그램(Single Page Application, SPA)에서 Redux는 상태 관리 라이브러리로써 사용됩니다. SPA는 전통적인 웹사이트와 달리 페이지 이동 없이 동적으로 내용을 업데이트하며, 이로 인해 상태 관리가 복잡해질 수 있습니다. Redux는 중앙 집중화된 상태 저장소를 통해 SPA의 상태를 예측 가능하게 관리하고 변경을 추적하는데 도움을 줍니다. 2. React에서 Redux를 사용하는 방법 React에서 Redux를 사용하기 위해서는 몇 가지 단계를 거쳐야 합니다. Redux 설치하기: npm install redux react-redu 액션(Action) 정의하기: 액션은 상태 변경을 설명하는 객체로, 액션 타입과 필요한 데이터를 가..

JEST란?

JEST Jest는 JavaScript 애플리케이션을 위한 테스트 프레임워크입니다. 주로 React 프로젝트에서 컴포넌트 및 함수의 유닛 테스트와 통합 테스트를 작성하는 데 사용됩니다. Jest는 간편한 구문과 기능을 제공하여 테스트 작성을 쉽고 효율적으로 할 수 있도록 도와줍니다. Jest의 특징: 간결한 문법과 쉬운 설정으로 테스트 작성을 용이하게 함. 테스트 실행을 위한 별도의 설정 없이 기본적인 설정 제공. 테스트 코드에서 Mocking 및 Spy 기능을 내장하여 외부 의존성 테스트 가능. 병렬 실행과 자체적인 결과 리포팅 기능 제공. Jest 사용법 예시: 설치: 프로젝트 디렉토리에서 Jest를 설치합니다. bashCopy code npm install --save-dev jest 테스트 작성:..

React에서 자주 사용되는 통신(비동기) 라이브러리

React Query: React Query는 API 호출, 데이터 캐싱, 상태 관리, 리렌더링 최적화 등을 제공하는 라이브러리입니다. 쿼리와 뮤테이션을 사용하여 비동기 작업을 관리하며, 데이터를 효율적으로 가져오고 관리하는데 도움을 줍니다. Axios: Axios는 HTTP 클라이언트 라이브러리로, 서버와의 HTTP 요청을 보내고 응답을 받는데 사용됩니다. Promise 기반으로 작성되어 있어 간편하게 비동기 요청을 처리할 수 있습니다. Redux-Saga: Redux-Saga는 Redux와 함께 사용되는 미들웨어 라이브러리로, 사이드 이펙트 관리를 위해 사용됩니다. 주로 복잡한 비동기 흐름을 관리하고 제어하는 데 사용되며, 제너레이터 함수를 이용하여 비동기 로직을 작성합니다. Redux-Thunk: ..

LocalStorage와 SessionStorage

웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해줍니다. 이 둘을 사용하면 페이지를 새로 고침하고(sessionStorage의 경우) 심지어 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아있습니다. 그런데 "쿠키를 사용하면 브라우저에 데이터를 저장할 수 있는데, 왜 또 다른 객체를 사용해 데이터를 저장하는 걸까요?"라는 의문이 들 수 있습니다. 쿠키 이외에도 다른 방식을 사용하는 이유는 다음과 같습니다. 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않습니다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있습니다. 대부분의 브라우저가..