본문 바로가기

분류 전체보기

(30)
[React] useMemo 사용법 및 예제, 변수 재사용 - react hook 안녕하세요. 오늘은 useMemo를 활용하여 렌더링 시 변수를 재 사용함으로써 app의 성능을 향상 시킬 수 있는 방법을 알아보도록 하겠습니다. 먼저 예제 코드를 통해 문제 발생을 시켜보겠습니다. index.js import styles from '@/styles/Home.module.css' import React, { useEffect, useRef, useState } from 'react' import HorizontalScroll from '../components/HorizontalScroll/HorizontalScroll' export default function Home() { const [input, setInput] = useState(0) const onInputChange= (e)..
[elastic search] 한글 형태소 분석기(analyzer)설정 및 확인 안녕하세요 오늘은 elastic search에서 한글 형태소 분석기 설정 방법과 설정 확인 방법에 대해서 써보도록 하겠습니다. 한글은 다른 언어보다 복합어, 합성어등이 많아서 형태가 매우 복잡한 언어중에 하나입니다. 그래서 elastic search에 한글 문서를 활용할 경우 한국어 형태소 분석기 및 형태소 사전은 필수입니다. 한글 형태소 분석기에는 아리랑이나 seunjeon, Open Korean Text 등이 있지만 오늘은 elastic search에서 공식적으로 지원하는 Nori(노리)에 대해서 알아보고 Nori 설정과 확인 방법을 알아보도록 하겠습니다. 1. Nori란? Nori는 Elasticsearch에서 6.6 버전부터 공식적으로 개발, 지원하기 시작한 한글 형태소 분석기입니다. 기존의 Se..
css 문자열 개행(\n) 및 공백(\t) 처리와 ellipsis(...) 오늘은 실무에서 정말 많이 사용되는 문자열 개행 및 공백 처리에 대해서 알아보겠습니다. 문자열을 공백이나 개행 있는 그대로 입력하는 경우도 있고 외부 컨텐츠를 가져오는 경우 공백이나 개행이 \n이나 \t 등으로 들어가 있는 경우가 있습니다. 이렇게 입력받은 문자열을 어떻게 client에 출력할지 결정할 수 있게 해주는게 css의 'white-space' 속성 입니다. 먼저 설명을 진행 한 후 가장 하단에 실행 예시를 보여드리겠습니다. 바쁘신 분은 마지막을 바로 보셔도 됩니다. 1. whtie-space의 속성 종류 nowrap : 문자열에 있는 개행을 처리하지 않고 연속되는 공백은 한번만 처리 합니다. 또한 영역을 초과할 경우에도 텍스트가 영역을 넘어서 한줄로 출력됩니다. nomal : nomal은 no..
[에러]run android kotlin 관련 에러 오늘은 기존에 배포해 놓았던 프로젝트를 오랜만에 보수하기위해 빌드를 하던 도중 만난 에러와 해결방법에 대해서 설명해 보도록 하겠습니다. 1. 에러 로그 Execution failed for task ':app:checkDebugDuplicateClasses'. A failure occurred while executing com.android.build.gradle.internal.tasks.CheckDuplicatesRunnable Duplicate class kotlin.collections.jdk8.CollectionsJDK8Kt found in modules jetified-kotlin-stdlib-1.8.0 (org.jetbrains.kotlin:kotlin-stdlib:1.8.0) and je..
[React] 웹에서 가로 터치 스크롤 만들기-컴포넌트 만들기(2/2) 이전글 : https://challeee.tistory.com/14 [React] 웹에서 가로 터치 스크롤 만들기(1/2) React 웹 환경에서 세로 스크롤은 스크롤바 말고도 마우스 휠로 화면을 스크롤 할 수 있어서 불편함이 없지만 가로 스크롤의 경우 스크롤바로 스크롤 하는게 편하지는 않습니다. 그래서 모바일 challeee.tistory.com 이전 글에서 모바일 환경처럼 터치 드래그로 스크롤 할 수 있는 기능을 구현하였습니다. 가로 스크롤은 아주 흔하게 사용되는 기능 중 하나이기때문에 우리는 이 기능을 컴포넌트로 만들어서 여러 페이지에서 사용할 수 있게 만들겁니다. 추가로 드래그 시 클릭이벤트가 발생 되는 문제를 해결하겠습니다. 1. HorizontalScroll 컴포넌트 생성 먼저 프로젝트에 컴포..
elsatic search QueryDSL 정리 이번 포스트는 elastic search 를 활용하여 api 검색할때 사용되는 query를 정리해보겠습니다. 해당 쿼리를 api body 부분에 넣어서 사용 할 수 있습니다. 1. match_all 이 query는 해당 index의 모든 데이터를 가져 옵니다. { "query": { "match_all": {} } } 2. match match는 특정 필드에 입력한 검색값이 포함된 데이터를 검색합니다. 띄어쓰기로 구분되는 term중 하나라도 겹치는 데이터를 출력합니다. 아래의 경우 title필드에 "엘라스틱"이나 "서치"가 포함된 데이터를 출력합니다. { "query":{ "match":{ "title":"엘라스틱 서치" } } } 3. term 특정 필드에 검색값과 정확히 일치하는 데이터를 검색합니다 ..
[React] 웹에서 가로 터치 스크롤 만들기(1/2) React 웹 환경에서 세로 스크롤은 스크롤바 말고도 마우스 휠로 화면을 스크롤 할 수 있어서 불편함이 없지만 가로 스크롤의 경우 스크롤바로 스크롤 하는게 편하지는 않습니다. 그래서 모바일 환경에서 처럼 마우스 클릭 후 드레그로 좌우 스크롤이 가능 하도록 구현 해 보도록 하겠습니다. 1. 기본 화면 구성 먼저 스크롤 기능을 적용할 페이지를 만들어 보도록 하겠습니다. index.js import styles from '@/styles/Home.module.css' import React, { useEffect} from 'react' export default function Home() { const list = ["1번","2번","3번","4번","5번","6번","7번","8번","9번","10번"..
Next.js 시작하기 이번 포스트는 React 프레임워크인 Next.js를 설치하고 실행하는 방법에 대해 포스팅 하겠습니다. 기본 빌드와함께 간단한 프로젝트 구조도 함께 훑어보기로 하겠습니다. 1. next.js 개요 nextjs는 react의 특징중의 하나인 CSR(Client Side Rendering)의 문제점인 최초 로딩시간 문제와 SEO 문제를 해결하기위해 SSR(Server Side Rendering)을 해주는 프레임워크 입니다. 2. node.js 설치 먼저 개발에 가장 필수요소인 node를 설치해 줍니다. node의 설치 방법은 따로 포스팅 해놓았기 때문에 참고하여 주시기 바랍니다. https://challeee.tistory.com/6 nvm 으로 window, Mac 노드 버전 관리하기 nvm은 node 버..
macOS Ventura (13) 업데이트 후 에러 모음(feat. React Native) 4월 이후로 Apple은 iOS SDK 16.1 이후 버전, Xcode는 14.1 버전 이상인 경우에만 appstore connect에 app을 배포 할 수 있게 정책을 변경했습니다. xcode 14.1 버전은 macOS 12.5 Monterey 이상에서만 호환이 가능 하기 때문에 이 기회에 macOS 13 Ventura 업데이트를 진행하였습니다. 그리고 어김없이 기존 개발 환경과 호환되지 않아 에러를 발생시키는 경우가 생겼습니다. 오늘은 macOS 13 Ventura 업데이트 이후 만난 에러들과 해결방법을 정리해보겠습니다. pod 에러 Could not build the precompiled application for the device. Error (Xcode): File not found /App..
react-native 시작하기 React Native는 Javascript를 기반으로 하여 Android 및 iOS 어플리케이션을 개발 할 수 있게 해주는 프레임 워크 입니다. 이름에서 알 수 있듯이 React와 유사한 컴포넌트를 기반으로한 구조를 가지고 있습니다. 지금 부터 이러한 react-native의 기본 시작 방법을 순서대로 설명해 보겠습니다. 일단 기본적인 개발환경에 필수인 node 및 android studio, xcode의 설치방법은 생략하고 넘어가겠습니다. node의 설치 및 버전 관리방법은 다른 글에서 참고해 주시면 감사하겠습니다. https://challeee.tistory.com/6 nvm 으로 window, Mac 노드 버전 관리하기 nvm은 node 버전을 편하게 관리할 수 있도록 도와주는 툴입니다. n이라는..