개발자R의 삶

2022년 12월 ~2023년 1월 - L○전자 PDM 프로젝트 빗○ N○○ 프로젝트 종료 후 두 달간 임시로 투입된 프로젝트였다. 해당 프로젝트에서 리액트를 잘 안 써본 사람들이 리액트를 배우면서 프로젝트를 하다보니 어려움이 많아 프론트엔드 지원을 나갔다. 전형적인 SI 프로젝트여서 협력사 분들도 많았고, 나잇대가 굉장히 높았다. 처음부터 리액트를 많이 써본 사람이 프로젝트 구성을 잡은 게 아니라 구조 자체가 굉장히 복잡했다. (폴더구조는 아마도 인터넷강의나 책에 나오는 폴더구조를 그대로 사용한듯 했다.) useMemo, useCallback을 부적절하게 남발하여 의도대로 코드가 동작하지 않은 부분이 많았다. 개발 할 때 가장 어려웠던 점은 파일명과 함수명이 아주 평범한 이름으로 통일되어있고, 폴더로만..

날짜 포맷 select date_format(now(), '%Y-%m-%d'); select select date_format(now(), '%Y.%m.%d %H:%i:%s') %Y 년도 - Year(4자리 표기) %y 년도 (뒤에 2자리 표기) %M 월 - 월 이름(January ~ December) %m 월 - 월 숫자(00 ~ 12) %d 일(00 ~ 31) %H 시간 24시간(00 ~ 23) %h 시간 12시간(00 ~ 12) %i 분 (00 ~ 59) %s 초 (00 ~ 59) 형변환하기 BINARY[(N)] CHAR[(N)] DATE DATETIME DECIMAL[(M[,D])] SIGNED [INTEGER] TIME UNSIGNED [INTEGER] SELECT CAST(PROD_CODE A..

GET @GetMapping("/user/{user_no}/history/list") public List getUseData(@PathVariable("user_no") String user_no, @RequestParam("history_type") String htype, @RequestParam("start_date") String startDate, @RequestParam("end_date") String endDate) { List result = userHistoryService.getUserHistory(user_no, htype, startDate, endDate); return result; } @RequestMapping(value = "/user/{user_no}/history/l..

query param은 url에 그냥 넣어주면 되고, request param은 { params : { ....} } 형태로 넣어주면 된다. axios .get(`http://localhost:8080/api/v1/user/${USER_NO}/history`, { params: { history_type: value, start_date : .... .... }, }) .then((response) => { setHistoryList(response.data); }); request param이 없는 경우 아래처럼 하면 된다. axios .get(`http://localhost:8080/api/v1/user/${USER_NO}/history`) .then((response) => { setHistoryL..

mui 라이브러리를 사용하지 않고 처음부터 끝까지 AutoComplete 를 구현했다. 생각보다 신경쓸게 많았다. 제일 빡셌던건 방향키로 목록을 탐색할 때 스크롤을 자연스럽게 움직이게 하는 것이었다. 처음엔 자바스크립트 기본 함수인 scrollIntoView() 를 사용해볼까 했는데 내가 생각하는거랑 전혀 다르게 움직여서 그것까지 직접 구현했다. (그래서 코드가 좀 더러움;) AutoComplete.tsx import { useState, useRef, useEffect } from "react"; import { getLocalStorageValue } from "./utils/localstorage.util"; import styles from "./AutoComplete.module.css"; im..

Webpack Module Federation https://webpack.kr/concepts/module-federation/ - Type: Run-time - webpack 5 에서 제공 장점 가장 유명한 프레임워크인 Webpack 5로 빌드함. 라이브러리 중복을 막아주어서 번들 사이즈를 줄여줌 평범한 npm을 사용하는 것 처럼 보여서 개발자들에게 이질감 같은게 느껴지지 않음 단점 런타임에서 컴포넌트들이 다이나믹하게 통합되는게 리스크가 있음 타입스크립트 지원을 받으려면 추가적으로 뭘 해줘야함 Single-SPA https://single-spa.js.org/ - Type: Run-time Piral https://piral.io/ - Type: Run-time - senior 없어도 개발할 수 있을..

예를 들어 Container가 있고, 그 안에 Cart service, Products service들이 있다고 해보자. 1. Build-Time Integration 빌드타임 통합 (컴파일타임 통합) : 컨테이너가 브라우저에 로드되기 전에 다른 프론트서비스들의 코드에 접근할 수 있다. 예) Cart 를 npm package로 배포함 (어딘가에 저장되어있음) → Container 팀이 Cart 패키지를 dependency로 설치함 → Container 팀이 앱을 빌드함 → 번들 결과물은 모든 코드를 포함함 장점 : 셋업이 쉽고, 이해하기 쉬움 단점 : Cart 가 업데이트 될 때마다 Container는 재 배포 해야함. Container와 Cart가 넘 결합되어있음 2. Run-Time Integrati..

https://fabrity.com/blog/software-engineering/micro-frontends-pros-and-cons/ Micro frontends: pros and cons - Fabrity Software House Micro frontends can be an alternative to the frontend monolith architecture, especially for more complex projects. Read on to find out more. fabrity.com 글의 번역 글입니다. 웹앱이나 SPA 앱을 만들 때 정말 작은 프로젝트가 아니라면 통상 여러 개발자들이 하나의 나눌 수 없는 코드를 가지고 일을 한다. 왜냐하면 많은 프론트엔드 프레임워크들이 모놀리틱 ..

SRP : 단일 책임 원칙 (Single Responsibility Principle) 하나의 class는 하나의 책임을 가져야한다. but.. 책임이란? 책임이 어떤건 크고 어떤건 작다. 적절한 책임의 크기를 정하는 것이 중요하다. 따라서 변경이 생겼을 때 파급효과가 적으면 단일 책임 원칙을 잘 따른 것. OCP : 개방 - 폐쇄 원칙 (Open Closed Principle) 소프트웨어 요소는 확장에는 열려있으나, 변경에는 닫혀있어야한다. -> 다형성을 잘 활용 인터페이스를 구현하는 새로운 클래스를 새로 만들어서 확장은 되지만, 인터페이스를 활용하는 클라이언트쪽은 변경이 없음. 스프링에서 OCI? 컨테이너가 해결해줌 LSP : 리스코프 치환 원칙 (Liskov Substitution Principle..

출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort 일반적인 소팅 array.sort(); 나만의 기준으로 소팅하기 let items = [ { name: 'Edward', value: 21 }, { name: 'Sharpe', value: 37 }, { name: 'And', value: 45 }, { name: 'The', value: -12 }, { name: 'Magnetic', value: 13 }, { name: 'Zeros', value: 37 } ]; // value 기준으로 정렬 items.sort(function (a, b) { if (a.value > b.value) {..