코딩 헬스장

✅ 현 회사에서 제가 처음 개발부터 유지보수 및 개정사항을 작업을 한 메뉴가 있습니다. 메뉴 초기 개발만해도 2달 정도가 걸린..😓 가장 애착을 가지고 있는 메뉴인데, 현 회사 특성상 매년마다 계산식이나 UI가 바뀜에 따라 점점 크기 자체가 커지고 있었습니다. (현재 4개년의 개정을 함에 따라 크기가 엄청 커졌습니다.) 그래서 운영버전 초기 렌더링이 오래 걸리는 현상이 생겼고 이를 방치하면 년도가 지날수록 더욱 느려질것이 분명하기에 개선해보고자 공부하고 글을 작성합니다. 🧐 문제 파악 문제 파악 전 알아야 개념 번들 (Bundle) : 묶는다라는 뜻 번들링 (Bundling) : 기능별로 모듈화한 js 파일들을 묶어주는 것, 서로 연관(의존성)있는 js 파일들을 하나의 번들 파일로 묶어주는 것 번들러 (..

✅ 들어가기 전 정규 표현식을 사용하는 메서드에 대해서 간단하게 정리하고 시작하겠습니다. 관련 메서드를 잘 모르신다면 한 번씩 읽어주시면 다음 내용 이해에 도움이 됩니다! RegExp.prototype (정규표현식).exec(문자열); 주어진 문자열에서 일치 탐색을 수행한 결과를 배열 혹은 null로 반환 (정규표현식).test(문자열) - str : 정규 표현식 일치를 수행할 문자열 주어진 문자열 중 정규 표현식이 일치하는 부분이 있으면 true, 없으면 false를 반환 String.prototype (문자열).match(정규표현식) 주어진 문자열이 정규식과 일치하면, 일치하는 전체 문자열을 첫 번째 요소로 포함하는 Array를 반환 (문자열).replace(정규표현식, 대체문자열) 정규표현식에 매칭..

1. 시맨틱 웹(Semantic Web) ✍ 1-1. 정의 시맨틱 웹이란 직역하면 의미론적인 웹 입니다. 간단히 하면, 의미를 가진 HTML 요소를 통한 작성 방법이라고 할 수있습니다. 웹에 존재하는 수많은 웹페이지들에 메타 데이터를 부여하고, 기존의 잡다한 데이터 집합이었던 웹 페이지를 의미와 관련성을 가지는 거대한 데이터베이스로 구축하고자 하는 발상입니다. 인터넷의 각종 리소스(웹 문서, 파일, 서비스 등)에 대한 정보와 자원 사이의 관계를 의미 정보(Semanteme)로 만들어 컴퓨터가 처리할 수 있는 은톨로지 형태로 표현하고, 이를 처리하도록 한 기술입니다. * 은톨로지 - 존재하는 사물과 사물간의 관계 및 여러 개념을 컴퓨터가 처리 할 수 있는 형태로 표현한 것 🧐 1-2. 목적과 사용 이유 ✅..

✅ JS 구조 분해 할당 문법이란 무엇일까요? 단어만 보면 상당히 복잡하고 난해한 개념 같습니다. 하지만 글을 읽으시는 독자분들은 모두 한 두 번씩 써보셨거나 자주 사용하시고 있을지도 모르는 문법입니다. 저 또한 정확하게 모르고 문법만 쓰고 있었기에 이번 기회에 심화 내용도 공부하여 정리해보고자 포스팅합니다 ! 1. 구조 분해 할당 문법 객체와 배열은 JS에서 가장 많이 쓰이는 자료구조입니다. 구조 분해 할당 문법이란 객체 또는 배열에서 각각 값이나 프로퍼티를 분해하여 손쉽게 별도의 변수에 담을 수 있도록 해주는 문법을 의미합니다. 개념에 대해 정리했으니, 이제 실 사용 예제를 정리해보겠습니다. * 배열 분해하기 /* - 1) 기본 사용 형태 기본 사용 형태로 n1, n2 변수에 배열 numArr에 매칭..

오늘 일을 하는데, 백엔드 개발자 두 분이 Endpoint와 관련해서 토론하는 대화를 들었습니다. A 개발자 : Endpoint는 URL 전체이다. B 개발자 : Endpoint는 URL 전체가 아닌 특정 resource path까지이다. URL 전체이면 URL과 차이점이 무엇이냐. 대화를 듣다보니.. 제가 대강 알고 있던 Endpoint는 URL의 resource path 까지였던 것 같은데 이것이 올바른 것인지 헷갈리기 시작했고, 프론트 엔드는 백엔드 API에서 가져온 데이터를 비즈니스 로직을 통해 사용자 인터페이스에 대한 작업을 하는 직무이기 때문에 평소 백엔드 구조나 개념을 찾아보기 때문에 Endpoint에 대해 공부하고 글을 작성하고자 합니다. ✅ 들어가기 전 포스팅했던 아래 글을 한번 읽어보시..