JiYoung Dev 🖥

Props Drilling 지우기 Props Drilling 지우기Guidelines for easily modifiable frontend codefrontend-fundamentals.com  구독중인 유튜버가 하나의 영상을 새롭게 올렸는데, 토스에서 작성한 Frontend Fundemental을 소개하는 영상이었다. Frontend Fundemental은 Toss 개발자가 작성한 좋은 프론트엔드 코드의 기준을 자신들의 기준에 맞춰 작성한 문서이다. 프론트엔드 개발을 하면서 다양한 소스를 보지 못해 어떤 코드가 좋은 코드인지 모르겠다는 생각을 했는데 이 문서를 정독하여 좋은 코드란 무엇인지 읽어보고 현재 나의 코드는 어떤지 돌아보고 나만의 좋은 코드를 작성하기 위해 생각을 정리해보는 시간을 가지고자 ..

2025년 새해 새로운 목표로 프로젝트를 진행하기로 했다. 디스코드 클론코딩인데 기능 구현을 하려다 보니 WebSocket과 WebRTC에 대해서 필수로 알고 있어야 해서 내 나름대로 머리에 잘 들어오는 순서대로 정리해 보았다.  아래 내용에서 구현하거나 자료를 찾다가 틀린 부분이나 추가할 내용이 있으면 계속해서 추가할 예정이다. 웹의 통신 방식에는 여러 가지가 있다.대표적으로 HTTP, Websocket, Polling, gRPC, SSE, GraphQL 등이 있는데, 각각의 방식마다 특징이 있어 웹 애플리케이션의 특성에 따라 알맞은 것을 선택하여 사용한다.HTTP는 웹 통신의 기본 프로토콜로 요청-응답 방식 기반으로 한 대표적인 통신 프로토콜이다.WebSocket은 실시간 양방향 통신을 지원하는 프로..

이번에 30초 마다 API를 호출하는 코드를 구현하면서 setInterval 함수를 사용하였다. 사용법은 알고 있었는데 setInterval이 어떤 건지 찾아보다가 비동기와 관련된 개념들이 나와서 정리를 하게 되었다. 따라서 오늘은 비동기 개념에 등장하는 Call Stack, Callback Queue, Event Loop에 대해 알아보았다.  본론에 들어가기 전에 브라우저에서 HTML 내부 Javascript로 작성된 코드가 실행되는 과정에 대해 잠시 정리해보자. 🔎 Javascript 실행원리웹 브라우저는 아래와 같은 구조로 구성된다. 사용자 인터페이스: 검색창, 뒤로가기/앞으로가기 버튼, 새로고침 등 브라우저 프로그램 자체 GUI브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어렌더..

부트캠프에서 React를 처음 접했을 때 CRA(react-create-app)을 통해 앱을 구성하고 실행하였다. 회사에 입사한 후 프론트엔드 개발을 맡게 되면서 프로젝트를 구성하게 되었는데, CRA의 경우 내장 라이브러리가 많아서 규모가 커지면 성능 문제가 발생할 수 있다는 글을 보게 되었다. 따라서 이번 프로젝트에서는 CRA가 아닌 직접 Webpack을 적용하였는데(CRA가 자동으로 Webpack을 적용), 그 과정에서 Webpack이 무엇인지, 어떤 역할을 하는지, 각 설정에 대해 알아보고자 한다. 🔎 Webpack이란 Webpack은 모던 Javascript 애플리케이션을 위한 정적 모듈 번들러이다.Javascript를 위한 모듈 번들러가 Webpack만 있는 것은 아니다. 하지만 이번 포스팅에..

회사 홈페이지의 서버를 이관해야 하는 일이 생겼다. 어려운 작업이 아니라 몇 시간 잡고 tomcat 서버를 통으로 복사하고, Mysql에서 MariaDB로 DB 이관 작업을 진행했다. 작업들을 진행한 후 해당 URL로 접속했을 때에는 정상적으로 동작했는데, 시간이 흐른 뒤 접속하니 아래와 같은 에러가 발생했다.   2024-11-21 17:36:19,302 ERROR [egovframework.com.cmm.EgovComOthersExcepHndlr] egovframework.let.cop.bbs.service.impl.EgovBBSManageServiceImpl.selectBoardArticles org.springframework.transaction.CannotCreateTransactionExce..

Docker로 리액트 프로그램을 실행하다가 실행하는 과정에서 번거로움이 있어서 개발 서버에서 node를 설치하여 사용하게 되었다. 터미널 접속 후 export로 환경 변수를 설정한 뒤 노드를 실행했을 때는 실행이 정상적으로 되었는데, 로그아웃 후 다시 터미널에 접속하니 환경변수 설정이 풀려 노드가 정상적으로 실행되지 않았다. 이번 기회를 통해서 리눅스 환경변수 설정에 대해 좀 더 자세히 공부하게 되었고, 아래 내용을 정리해 보았다. 환경변수환경변수(PATH)란, 프로그램을 찾는 기본 경로를 말한다. 만약 윈도우인 내 컴퓨터에서 자바 프로그램을 실행하려고 java -jar와 같은 명령어를 윈도우 CMD 창에 입력한다. 하지만 환경 변수 설정 없이 java 프로그램을 실행하려고 하면 ‘java’은(는) 내부..

JDBC(Java Database Connectivity)JDBC는 관계형 데이터베이스에 저장된 데이터에 접근, 조작할 수 있게 하는 자바 API이다. 자바 응용 프로그램이 다양한 DBMS에 대해 일관된 API로 데이터베이스 연결, 검색, 수정, 관리 등을 할 수 있게 한다. 따라서 자바로 개발시에는 DBMS 종류에 관계없이 JDBC API만을 이용하면 된다. 일반적으로 DBMS를 제공하는 회사에서 JDBC 드라이버를 제공하며 자바 응용프로그램에서는 JDBC 드라이버를 JDBC 매니저를 통해 로드하여 사용한다.  따라서 사용하는 DBMS가 바껴도 이에 따른 JDBC 드라이버만 로드하면 되므로 자바 프로그램에는 DBMS 변경에 따른 프로그램 수정이 필요 없다.JDBC 드라이브 매니저 : 자바 API에서 지..

운영중인 솔루션에서 문제가 발생해 원인을 파악하려는데, 에러를 제외한 debug나 info 로그가 하나도 찍히지 않아 원인을 파악할 수 없는 일이 발생하였다. 그래서 이번에 로그 찍는 소스를 추가해 패치를 하게 되었는데 어떻게 로그를 찍어야 운영할 때 상태를 잘 모니터링 할 수 있을지 고민하게 되었고, 이번 글을 작성하게 되었다.📖 로그(Log)의 목적로그는 시스템이나 애플리케이션에서 발생하는 모든 이벤트의 기록으로, 개발자와 운영 팀이 시스템의 성능을 분석하고 문제를 해결하는 데 중요한 정보를 제공한다.서비스 동작 상태 파악장애 파악 및 알림로그 분석을 통한 서비스 지표의 확인, 트랜잭션, 성능 파악하지만 대규모 시스템에서는 매일 수십 GB에 달하는 로그 데이터가 생성될 수 있어 이를 효율적으로 관리..

어제 작성했던 Nginx에서 Reverse Proxy 설정 후 Spring Server에서 Cors 에러가 발생하여 Spring Security Cors 설정에 외부망 주소를 추가해 해결하였다고 하였다. 해당 글에서는 작성하지 않았지만 Node.js Express 서버에서도 Cors 에러가 발생하였는데 Cors 설정과 함께 app.listen("0.0.0.0")을 추가함으로써 문제를 해결할 수 있었다.  위의 과정을 진행하면서 Cors를 설정하는 것과 app.listen("0.0.0.0")을 설정하는 것이 어떤 차이가 있는지 알아보았다. 🔎 Cors 설정의 역할Cors(Cross-Origin Resource Sharing)는 웹 브라우저 발생하는 보안 정책으로 클라이언트의 출처(Origin)에 따라 서..

🔎 문제https://www.acmicpc.net/problem/17298문제 설명크기가 N인 수열 A = A1, A2, ..., AN이 있다. 수열의 각 원소 Ai에 대해서 오큰수 NGE(i)를 구하려고 한다. Ai의 오큰수는 오른쪽에 있으면서 Ai보다 큰 수 중에서 가장 왼쪽에 있는 수를 의미한다. 그러한 수가 없는 경우에 오큰수는 -1이다.예를 들어, A = [3, 5, 2, 7]인 경우 NGE(1) = 5, NGE(2) = 7, NGE(3) = 7, NGE(4) = -1이다. A = [9, 5, 4, 8]인 경우에는 NGE(1) = -1, NGE(2) = 8, NGE(3) = 8, NGE(4) = -1이다.입력첫째 줄에 수열 A의 크기 N (1 ≤ N ≤ 1,000,000)이 주어진다. 둘째 줄..