본문 바로가기

분류 전체보기

 (64)
[JAVA] Java 적응기 그동안 Node.js로만 개발을 해보았기 때문에 최근들어서는 Java를 이용해 백엔드를 구성해보는 시도를 하고있다.아무래도 처음 접해보는 언어이고 프레임워크이기 때문에 '클라이언트의 요청을 처리해 반환한다'는 사실 외에 큰 차이가 있었고 이 부분에 적응하기 쉽지 않았다. 일단 가장 처음으로 겪은 차이점은, 어노테이션을 사용한 매핑 방식이었다.Node에서는 라우팅과 미들웨어로 요청을 처리하는데, Java에서는 전혀 다른 방식이다.app.get, app.post와 같이 라우트 메서드를 통해 처리하는 방식과 달리,@GetMapping, @PostMapping 과 같은 어노테이션이 메서드를 정의하거나 어떤 역할을 하는지를 명시함으로 처리할 수 있다. 간단한 방식에 적잖이 놀라웠는데, 특히나 데이터베이스 작업을 ..
[JS] Fuse.js 지난 포스트에서 손글씨를 텍스트로 추출하는 과정을 보였다.최대한 높은 정확도로 손글씨를 텍스트화 하였지만, 여전히 남은 오차를 줄일 방법이 필요했다.다른 라이브러리나 api 혹은 전처리나 후처리 등이 많이 있겠지만, 일단 서비스의 환경에 포인트를 맞추기로 하였다. 다행히도 해당 서비스에는 이미 작성된 유저 리스트가 존재한다.그 말은 즉, 유사한 텍스트로만 추출해도 비교를 통해 유추해낼 수 있다는 뜻이다.덕분에 어려운 길로 가지 않고 간단히 처리해볼 수 있었다. 흔히 검색 등에 사용되는 fuzzy-search 라이브러리인 Fuse.js를 여기에 적용해 볼 것이다.fuzzy-search란 간단히 말하면 입력받은 문자(패턴)과 유사한 문자열을 검색하는 '유사 검색'기술이다. 일단 설치부터 한다.npm i fu..
[Node.js] Google Vision Api OCR / 텍스트 추출하기 / Tesseract? 이번에 남는 시간동안 새로운 웹앱을 만들어보았다.이용자의 출결 관리 및 분류 서비스인데,근무하면서 출결 인원 확인과 분류를 매번 하는 것이 귀찮아 고안해본 웹앱이다.FE: https://github.com/ChangwooJ/AttendanceList_FEBE: https://github.com/ChangwooJ/AttendanceList_BE 간단히 설명하면 출석부에 손글씨로 적혀있는 결석자의 이름을 사진으로 입력받으면 OCR을 이용해 인식하고 텍스트화 시켜, 당일 출석자를 추려내 분류해주는 것을 주로 하는 서비스이다. 말처럼 다른 기능은 별다른 것이 없어서 손글씨를 인식하도록 하는 것이 포인트다. 텍스트를 인식할 수 있게 해주는 방법에는 현실적으로 2가지 방법 정도가 존재했는데,오픈소스 라이브러리와 a..
[React] React Router 페이지 접근 권한 페이지마다 인증이 필요한 경우, 권한이 필요한 경우 등의 구분이 필요하다. 이를 쉽게 해결해주기 위한 방법이 리액트에서 라우팅을 해줄때 페이지별로 접근 권한을 설정해주는 방법이다. 이 방법을 쉽게 요약하면,권한이 필요한 페이지를 요청하면 →  Context등을 이용하여 로그인 인증 정보를 전달받는다 → 전달받은 데이터가 조건에 부합하면 하위 페이지를 랜더링 해준다.의 순으로 진행된다. 일단 평범한 라우터 구성 파일의 일부이다.import React from 'react';import { BrowserRouter, Routes, Route } from 'react-router-dom';import Login from '.pages/Login';import Home from '.pages/Home';impo..
[React] useContext useContext는 상위 컴포넌트에서 어떠한 데이터를 하위 컴포넌트로 전달하기 위해서 전역 변수 등의 데이터로 사용할 수 있도록 해주는 훅이다.Redux와 유사한 기능을 하는데, 차이점은 상태 관리의 복잡도에 있다.Redux는 복잡하고 거대한 상태를 관리하는데에 용이한 반면, useContext, 즉 Context API는 간단한 데이터(로그인 인증 등)를 상태로 관리한다.  간단히 사용법을 알아보자면,import React, { createContext, useState, useEffect } from 'react';// Context 생성const AuthContext = createContext();const AuthProvider = ({ children }) => { const [isAuth..
[DB] 트랜잭션 (Transaction) 트랜잭션이란 데이터베이스(DB)에 상태 변화를 주는 작업의 단위를 의미한다. 예시를 들어 설명하면,카드 결제를 할 때, 결제 요청에 의해 구매자의 카드 사용 금액이 증가하고 판매자의 판매 금액이 증가하는 데이터를 모두 처리하는 과정을 모두 포함하여 하나의 작업 단위로 인식한다는 것이다.즉, 하나의 명령문만이 아니라 관련된 명령문 전체를 하나의 단위로 한다.  ACID (Atomicity, Consistency, Isolation, Durability)트랜잭션에는 ACID 4가지의 특징이 존재한다. Atiomicity(원자성)트랜잭션, 카드 결제로 인한 사용 금액 증가와 판매 금액 증가는 전체적으로 성공/실패 해야한다. 둘 중 한가지만 성공하는 경우는 발생해서는 안되기 때문에, 중간에 문제가 발생하면 이전..
[Node.js] Multer Multermulter는 express에서 파일 업로드를 위한 미들웨어이다. 다중 파일 업로드가 가능하며 일반 텍스트와 파일 데이터 두 가지를 동시에 처리하는 것도 가능하다.  설치.npm i multer 이미지 파일을 저장하는 예시로 보이겠다. 서버 측 코드 파일에서 index.js 파일 등에 한번에 해버려도 좋지만, 가독성을 위해 분리해두었다. const multer = require('multer');const path = require('path');const uploadPath = path.join(__dirname, '업로드할 폴더 위치');const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, up..
[JS] Promise Promisepromise는 자바스크립트에서 이전 코드의 처리가 완료되기 전에 다음 코드를 실행하는 '비동기 처리'를 위한 객체이다. 이 비동기 처리의 특성에 의한 문제 중 하나가 이전 코드의 작업의 결과가 준비되지 않아 다음 코드 실행 시에 발생하는 에러이다.이를 해결하기 위한 단순한 방법은 콜백 헬이 발생하는 방법인데, 간단히 소개하자면db.query(query, param, (err, result) => { if (err) //에러 처리 db.query(query2, result.data, (err, result2) => { if (err) //에러 처리 db.query(query3, result2.data, (err, result3) => { if (e..
[JS] 옵셔널 체이닝: "?." 웹을 만들다 보면, 특히 데이터를 다룰때 흔히 볼 수 있는 " TypeError: "로 시작하는 에러가 있다.이 에러는 많은 경우에서 어떤 데이터를 가져올 때 그 값이 ' undefined '이거나 ' null '인 경우에 발생한다. 물론 데이터가 없으면 표현되어서는 안되는 것도 있지만, 종종 데이터가 존재하지 않으면 존재하지 않는 대로 랜더링은 지속해야하는 경우가 있다.그럴때 사용하는 문법이 옵셔널 체이닝, ' ?. ' 이다. const users = [{ name: "홍길동", age: 20 }, { name: "김철수", age: 26 }];const userPh = users[0].ph; //TypeError: Cannot read property 'ph' of undefinedconst use..
[React] filter의 무한루프와 useMemo 데이터를 걸러내어 원하는 데이터로 변환시키기 위해 흔히 사용하는 메서드인 filter() 는const filteredArr = arr.filter(word => word.length === 3);이런식으로 사용한다. 단순히 이렇게만 사용한다면 아무런 문제가 되지 않지만, filter의 결과값이 상태나 props로 사용된다면 문제가 발생한다. 예를들면,const filteredArr = arr.filter(word => word.length === 3);useEffect(() => { ...}, [filteredArr]); 이런식으로 filteredArr이 의존성 배열로 존재하고, useEffect 내부의 내용이 상태를 변화시키는 내용일 경우에 무한루프가 발생한다. 일반적인 useEffect와 그 내부의 ..

티스토리툴바