AS-IS 24년 신규 프로젝트 : Material UI 요구사항 향후 신규 개발 또는 개편될 사내 시스템 및 대외 시스템에 공통으로 적용할 UI 라이브러리 선정. 대용량 데이터(ex. AMS: 자산 관리 시스템)를 노출시켜야 할 경우가 있기 때문에 이에 적합한지 퍼포먼스 확인 필요. 24년 신규 프로젝트건에 대하여, 기존에 없던 테이블 Drag Sort 기능이 추가됨. 해당 UI 지원 가능 여부 확인 필요. React UI 라이브러리 비교 🔗 npm trends 디자인 템플릿 디자인 자유도 사용 편의성 Bootstrap △ △ △ Tailwind △ ○ △ Material UI ○ ○ △ Ant Design ○ △ ○ ❗️ Bootstrap, tailwindCSS는 CSS 프레임워크로, 컴포넌트를 직접..

리액트는 index.html에서 "root"라는 id를 가진 div에 App.js를 렌더링 시켜 사용자에게 보여줄 화면을 정의한다. 즉, 모든 리액트 컴포넌트/페이지가 root라는 컨테이너 안에 담기게 된다. 그런데 서비스를 만들다보면 modal, dialog, overlay 등 메인 컨테이너가 아닌 별도의 컨테이너에 내용을 담아야 하는 경우가 생긴다. 이 때 z-index만으로 화면을 구성해도 되지만, z-index에 대한 정의가 제대로 되지 않을 경우 원하는 결과가 나오지 않을 수 있다. 그래서 사용하는 것이 리액트의 Portal이다. Portals Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다. 1. Portal을 사용하지 않고..

Code Snippet(코드 스니펫) Snippet은 작은 조각이라는 뜻이다. Code Snippet은 "코드 조각", 즉 재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 의미한다. 코드를 재사용할 수 있게 해줌으로써 반복 타이핑을 회피할 수 있게 도와준다. 나는 기존에 React 컴포넌트로 페이지를 한 개 생성할 때 마다 이렇게 일일이 작성을 했다. 하나의 프로젝트를 수행한다고 했을 때 생성해야할 페이지 수를 생각해보면 정말 비효율적인 방법이다. Code Snippet을 활용하면 이런 간단한 템플릿 코드들을 좀 더 효율적으로 작성할 수 있다. VSCode Extension 탭에서 react snippets으로 검색한다. 나는 @popular 필터를 걸어서 가장 상위에 있는 것으로 골랐다. [I..

JavaScript의 논리 연산자 중 NOT 연산자인 느낌표(!)는 부정(Negation)을 의미하며 피연산자의 논리 값을 반전시킨다. 즉, 입력값을 boolean으로 변환하여 값이 true면 false로, false면 true로 리턴한다. 느낌표 두 개(!!)는 이중 부정(부정의 부정)으로 긍정이 된다. 테스트 문자열 ("str")// true('str') !("str")// false !!("str")// true ("")// false('') !("")// true !!("")// false boolean true// true !true// false !!true// true false// false !false// true !!false// false NaN NaN// false(NaN) !NaN..

2023.09.25 입사한지 벌써 3개월이 되어서 중간 수습 평가를 진행했다. 이런저런 개인적인 일들이 쌓여서 힘든 시간이었는데, 다행히 잘 버텨냈다. 4분기 내에 여러 마리 토끼를 잡으려는 중이라 아마 연말까지는 계속 바쁠 것 같다! 그래도 해야지 어쩌겠어; 앞으로의 나 화이팅 업무 관련 업무에 바로 투입된 것 치고는 금방 파악해서 잘 마무리지었다. 현업 팀의 요구사항을 파악하고 시스템 개발을 마무리 지었다. {JSTL + Vanilla JavaScript}를 사용해서 원하는 페이지를 개발할 수 있다. 이 회사에서 개발팀의 역할이 무엇인지 파악했다. 개발팀에서 내부적으로 다루고 있는 시스템이 무엇이 있는지 알고있다. 또한 각 시스템의 담당자가 누구인지 알고있다. (맡았던 시스템에 한정되지만) 함께 하는..

🔗 공식 문서 : https://www.conventionalcommits.org/ko/v1.0.0/ conventional commits 작성을 위한 commit message 구조와 구성요소는 아래와 같다. 구조 [적용 범위(선택 사항)]: [본문(선택 사항)] [꼬리말(선택 사항)] 구성요소 [머리말(Commit Message Header)] (): build: 시스템 또는 외부 종속성에 영향을 미치는 변경사항 (npm, gulp, yarn 레벨) ci: ci 구성파일 및 스크립트 변경 chore: 패키지 매니저 설정할 경우, 코드 수정 없이 설정을 변경 docs: documentation 변경 feat: 새로운 기능 fix: 버그 수정 perf: 성능 개선 refactor: 버그를 수정하거나 기능..

slice slice(indexStart) slice(indexStart, indexEnd) substr (Deprecated) substr(start) substr(start, length) 첫번째 매개변수인 start는 탐색 구간의 시작점을 의미한다. start가 음수일 경우, 문자열의 뒤에서부터 가져온다. 두번째 매개변수인 length는 가져올 길이 값이며, 생략 가능하다. length를 생략할 경우, start에서부터 문자열 마지막까지를 가져온다. length 값이 음수일 경우 빈 값을 반환한다. (가져올 길이 값이 마이너스이므로 빈 값을 리턴) ℹ️ Note: substr() is not part of the main ECMAScript specification — it's defined in ..

2023.08.09 책상 위 친구를 하나 더 데려왔다. 성주가 추천해준 메타몽 무드등이다. 원래 있던 친구들과도 잘 어울린다. 2023.08.17 현재 사내 시설 예약 시스템을 개발하고 있다. spring boot + jsp (+ jQuery...)로 된 모노레포 구조의 레거시 환경에서 나와 혜민님이 각각 FE/BE 포지션을 나누어 개발을 진행중이다. 처음에는 이전에 경험했던 FE/BE가 RESTful API로 완전히 분리된 환경처럼, 혜민님이 컨트롤러까지 작업해주시고 필요한 부분은 Backend API로 만들어주시면 내가 비동기 통신으로 호출해서 쓰면 될거라고 막연하게 생각했다. 다행히 마크업 작업을 할 때는 퍼블리싱 레포가 별개로 나누어져있어서 스무스하게 진행되었다. 그런데 실제 서비스 산출물이 들어..

카카오페이에서 새로 배운 내용 기록. 밤(bam.chae)께서 목돈계산기/투자계산기 QA를 진행해주셨는데 슬라이더를 빠르게 이동시킬 경우 슬라이더가 멈춰버리는 현상이 이슈로 등록되었다. 슬라이더를 통해 금액값을 입력받고, 해당 값을 쿼리스트링으로 관리하도록 했는데 이 부분에서 따로 최적화를 하지 않아서 슬라이더를 빠르게 이동시킬 경우 지나친 Set 함수 호출로 인해 멈추는 것으로 확인되었다. UI팀 레츠(lets.go)께서 쓰로틀링이나 디바운싱을 적용하면 될 것 같다고 아이디어를 주셔서 해당 개념에 대해 먼저 알아보았다. 운영에는 수정 후 배포했다. 디바운싱(Debounce) 연속으로 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것 바운싱 현상(bouncing) : 전자 회로 스위..

white-space 사전적 의미로 white space는 '여백'을 뜻함. html에서는 공백의 의미 태그 작성시 생기는 공백 줄바꿈 (line break) 들여쓰기 (tab) 공백 (space) html 작성시 공백을 아무리 많이 입력해도 1개만 표현됨. 하나 이상의 공백을 표현하기 위해서는 를 사용해야함. 또는 태그를 사용하면 공백이나 줄바꿈을 있는 그대로 표시 white-space 속성 값 normal (default) 공백을 여러개 넣어도 1개만 표시. 글이 길어지면 텍스트가 자동 줄바꿈 됨(wrap) nowrap 공백을 여러개 넣어도 1개만 표시. 글이 길어도 줄바꿈 되지 않고 같은 줄에 계속 표시 pre 공백을 코드에 있는 그대로 표시. 태그처럼 행동함. 코드에 줄바꿈이 없다면 줄바꿈 되지 ..