EUNBI'S PORTFOLIO
HOME
ABOUT
PROJECTS
DATA
My knowledge, My Data
Vision AI + groq
AI Vision 이미지에서 텍스트 추출: 사진, 스캔 문서, 스크린샷에서 텍스트 인식 다국어 지원: 한글, 영어, 중국어 등 다양한 언어 텍스트 인식 실시간 처리: 카메라 입력을 통한 실시간 텍스트 추출 레이아웃 분석: 텍스트 위치, 방향, 구조 정보 함께 제공 <...
Published on
June 27, 2025
Zustand & React Query
Zustand & React Query 서로 다른 목적의 상태 관리: 클라이언트 상태 vs 서버 상태 관리 보완적 관계: 함께 사용하여 완전한 상태 관리 솔루션 구축 개발자 경험: 간단한 API와 직관적인 사용법 성능 최적화: 각각의 영역에서 최적화된 렌더링과...
Published on
May 02, 2025
Feature Sliced Design
FSD (Feature-Sliced Design) 계층화된 구조: App, Pages, Widgets, Features, Entities, Shared 6개 레이어 기능 중심 설계: 비즈니스 로직을 기능 단위로 분리하여 관리 확장성: 대규모 팀과 복잡한 애플리케이션에 최적화된 구조 <st...
Published on
April 25, 2025
Skeleton UI
Skeleton UI 콘텐츠 로딩 중 표시되는 플레이스홀더 UI 인지된 성능 향상: 실제 로딩 시간은 동일하지만 더 빠르게 느껴짐 레이아웃 시프트 방지: 콘텐츠 로드 시 화면 깜빡임과 레이아웃 변화 최소화 사용자 기대감 관리: 로딩될 콘텐츠의 구조를 미리 보여줌 ...
Published on
March 09, 2025
Cypress
Cypress E2E Testing 브라우저에서 실행되는 E2E 테스트 프레임워크 실시간 테스트 실행: 브라우저에서 테스트 과정을 실시간으로 확인 자동 대기: 요소가 나타날 때까지 자동으로 대기하여 안정적인 테스트 시간 여행 디버깅: 각 단계별 DOM 스냅샷으로 디버깅...
Published on
February 08, 2025
ReactNative
React Native Expo 크로스 플랫폼 모바일 앱 개발 프레임워크 Expo SDK: 네이티브 기능에 쉽게 접근할 수 있는 통합 개발 환경 Over-the-Air Updates: 앱스토어 재배포 없이 실시간 업데이트 Managed Workflow: 복잡한 네이티브 설...
Published on
January 11, 2025
Storybook
Storybook UI 컴포넌트를 독립적으로 개발하고 테스트할 수 있는 도구 컴포넌트 주도 개발: 애플리케이션과 분리된 환경에서 컴포넌트 개발 시각적 테스팅: 다양한 상태와 props로 컴포넌트 동작 확인 문서화 자동화: 컴포넌트 사용법과 API를 자동으로 문서화 <...
Published on
August 08, 2024
React
React 사용자 인터페이스 구축을 위한 컴포넌트 기반 JavaScript 라이브러리 선언적 UI: 각 상태에 대한 뷰를 설계하면 데이터 변경 시 적절한 컴포넌트만 효율적으로 업데이트 컴포넌트 기반: 캡슐화된 컴포넌트로 복잡한 UI를 구성 Learn Once, Write Anywhere: 기존...
Published on
July 28, 2024
Vite
Vite plugIn Rollup 플러그인 호환: 기존 Rollup 플러그인을 그대로 사용 가능 개발/빌드 분리: 개발 서버와 프로덕션 빌드에서 다른 동작 가능 Hook 시스템: Rollup hooks + Vite 전용 hooks로 세밀한 제어 HMR 통합: 플러그인에서 직접 HMR...
Published on
June 09, 2024
Google Analytics
왜 프론트엔드 개발자가 GA를 알아야 할까? 데이터 기반 의사결정: 사용자 행동 패턴 분석으로 UX 개선 성능 최적화: 페이지 로딩 속도, 이탈률 등 핵심 지표 모니터링 비즈니스 임팩트: 개발 기능의 실제 사용률과 효과 측정<h3 id="google-tag-manager-설...
Published on
April 02, 2023
Vue3 Migration
Vue 2 -> Vue 3 마이그레이션Vue 3의 주요 변화점성능 개선 더 작은 번들 크기: 트리 쉐이킹(사용하지 않는 코드 제거)으로 약 41% 크기 감소 더 빠른 렌더링: Proxy 기반 반응성 시스템으로 성능 향상 ...
Published on
March 15, 2023
SSR & CSR
Pre-onBoarding challenge→ Git-HubSSR 서버로부터 모든 데이터가 HTML에 렌더링된 화면으로 브라우저에 전달 초기 구동 속도가 빠름 JavaScript 로직이...
Published on
February 01, 2023
Vue.js
Do it - Vue.js 입문 ToDoList 적용!→ Git-HubVue.js 웹화면개발에 최적화된 쉽고 유연한 SPA 프레임워크 점진적 채택: 필요에 따라 라우팅, 상태 관리 등을 추가하...
Published on
January 28, 2023
JUnit_Test
최근 알게된 단위 테스트의 중요성! JUnit을 공부해봅시다!토비의 스프링에서 배우는 JUnit (배경지식 참고)→ Spring<h3 ...
Published on
September 08, 2021
토비의 스프링 3.1 - (3)
Vol.1 스프링의 이해와 원리3장. 템플릿3.2) 변하는 것과 변하지 않는 것JDBC try/catch/finally 코드의 문제점 메소드 반복 중첩, 코드 수정의 불편함과 close 요소 누락 가능성 커넥션풀 과부하분리와 재사용을 위한 디자인...
Published on
September 07, 2021
토비의 스프링 3.1 - (2)
Vol.1 스프링의 이해와 원리2장. 테스트2.1) UserDaoTest 문제점 수동 확인 작업의 번거로움 - 테스트 자동화 과정마다 체크, 수동적 검증 필요 실행 작업의 번거로움 - main()메소드 DAO, Service, Controller, view 등의 레이어 기능을 다 만든후에야 테스트 가능 <br /...
Published on
September 07, 2021
토비의 스프링 3.1 - (1)
Vol.1 스프링의 이해와 원리1장. 오브젝트와 의존관계1.5) 스프링 IoC 용어Bean 스프링이 IoC방식으로 관리하는 오브젝트. 애플리케이션 중에서 스프링이 직접 생성과 제어를 담당하는 오브젝트Bean...
Published on
September 06, 2021
Canvas Board
MyProject 설계1 - 스프링부트를 선택한 이유(장점) 스프링 특징인 DI, IOC -> 어노테이션으로 객체 인스턴스화, 단순화(결합도 down) 객체지향(OOP) -> 관점지향(AOP) : 비즈니스로직 개입없이 관점(Aspect) 추가 및 호출 활용 Setting of Transaction, datasource,.. -> 자동설정(AutoConfiguration),...
Published on
September 04, 2021
Oracle vs MySQL
Oracle- OS : Windows, Linux, Solaris, AIX, .. - 구현언어: C, C++ - 개발사 : Oracle - 비용 : 유료 - 장점 : 안정성 - ApI : JDBC, ODBC, Oracle call, OCI, ADO.NET </pre...
Published on
September 02, 2021
Lombok
Lombok : 어노테이션 기반, 코드 자동완성 Library@Annotaions @Getter, @Setter : 클래스 위(전체적용)/ 변수 위(해당변수만적용) @NoArgsConstructor: 변수 사용하지 않는 기본 생성자 자동완성 @RequiredArgsConstructor : 특정변수만 사용하는 생성자 자동완성(@NonNull...
Published on
September 02, 2021
JPA
ORM Object-Relational Mapping 객체가 테이블이 되도록 매핑 시켜주는 프레임워크 프로그램의 복잡도를 줄이고 자바 객체와 쿼리를 분리 트랜잭션 처리나 DB 작업들을 편리하게 처리JPA Java Persistence API (자바 ORM 기술에 대한 API 표준 명세) ORM을 사용하기 위해 모아둔 인터페이...
Published on
September 02, 2021
RESTful API
REST 아키텍처의 제약조건을 준수하는 APIAPI (Application Programming Interface) 애플리케이션 소프트웨어를 구축하고 통합하는 프로토콜 정의 사용자의 컨텐츠 호출, 생산자의 컨텐츠 응답 시스템에서 전달 지원 클라이언트(사용자)와 얻고자 하는 리소스 사이의 조정자 역할</li...
Published on
September 02, 2021
Node.js
확장성 네트워크 앱 개발에 사용되는 소프트웨어 플랫폼개념 Chrome V8 JavaScript 엔진으로 빌드된 프로그램 노드를 통해 다양한 자바스크립트를 서버에서도 실행 가능 자바스크립트 엔진으로 동작, 자바스크립트 런타임(특정 언어 환경) 스크립트 언어가 아닌 프로그램 환경의 개념 웹서버와 같이 확장성 있는 네트워크 ...
Published on
September 02, 2021
SockJS 메신저 그룹웨어
Websocket - SockJS 선택 이유 웹소켓은 양방향 소통을 위한 프로토콜로, 적은 데이터를 빠르게 통신. ex. 코인, 주식 홈페이지 하지만 호환,표준규격 등의 접근성 단점, 이에 대한 솔루션 : Socket.io & SockJS Socket.io : node.js기반 자체서버를 만들어 실시간 통신이 브라우저 제약x. javascript 개발. SockJS : Sp...
Published on
August 31, 2021
Full_Calendar
Project - 그룹웨어 일정관리#개발 디자인 (구상하기) 같은 부서끼리만 부서일정 공유하기 (DB JOIN) 개인일정은 로그인유저 개인것만 보여지기 (DB 서브쿼리 또는 UNION) 장기간 프로젝트(1달 이상) 일정은 보여지는 범위 조건 설정 (기존 제한 체크) 부서 일정 수정,삭제는 등록자만 또는 부장 직급만 권한 부여(ID 보여지게 ...
Published on
August 30, 2021
Spring_@Annotaion
My Notion Link→ Spring@RequestParam- 1개의 HTTP 파라미터를...
Published on
August 13, 2021
Spring_setting
spring 설치 - STS / eclipse-marketplace maven, apache tomcat, jQuery, ojdbc6, taglibs(compat,impl,jstlel,spec) : setting check 인코딩 - preferences encoding UTF-8, spelling UTF-8; *tip) java 자동완성 툴 : preference - editor...
Published on
August 08, 2021
Board
#SpringBoard_Controller.javapackage com.kh.sharethevision.board.controller;<...
Published on
August 07, 2021
Spring_Error
Error :# javax.servlet.ServletException: java.lang.NoClassDefFoundError: javax/servlet/ServletInputStream → Pr...
Published on
August 03, 2021
SQL_Error
https://www.techonthenet.com/oracle/errors/index.phpError :# ORA-04091: table name is mutating, trigger/function ...
Published on
August 02, 2021
MARKDOWN
1. 마크다운 언어의 목적1.1. 마크다운의 개념Markdown은 텍스트 기반의 마크업언어로 2004년 존그루버에 의해 만들어졌으며 쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능하다.특수기호와 문자를 이용한 매우 간단한 구조의 문법을 사용하여 웹에서도 보다 빠르게 컨텐츠를 작성하고 보다 직관적으로 인식할 수 있다.깃헙의 저장소Repository에 관한 정보를 기록하는 README.md는 깃헙을 사용하는 사람이라면 누구...
Published on
August 01, 2021