2025/03 6

코드 작성시 초보가 실수하기 쉬운 것(주의할 부분)

1. 문자 입력 이스케이프 처리프로시저에서 json 문자열을 처리할 때 따옴표, 쌍따옴표, 백슬래시에 이스케이프 처리가 되어 있지 않으면 오류를 일으킨다.문자 입력하는 곳마다 해놓는 게 속 편할 듯//문자열에서 JSON 문자열 추출 및 이스케이프 처리(이스케이프 처리하는 함수를 따로 작성했을 경우 사용)//따옴표 혹은 쌍따옴표로 감싸진 JSON 문자열을 찾아 match에 저장const match = textData.match(/'(\{.*\})'/) || textData.match(/"(\{.*\})"/);if (match) { const jsonStr = match[1]; const escapedJsonStr = jsonStr .replace(/\\/g, '\\\\') // 백..

2025.03.28

SVG 파일

1. 정의Scalable Vector Graphics확장 가능한 벡터 그래픽을 나타내는 XML 기반의 파일 형식이미지를 구성하는 도형과 경로를 정의함 → 확대/축소시 이미지 품질 유지 비교 개념: 레스터(jpg, png, gif)- 픽셀로 구성됨 2. 특징1) 크기 조절 가능성- 확대/축소시 이미지 해상도 유지2) 편집 용이성- 텍스트로 저장- 텍스트 편집기로 편집 가능3) 동적 디자인 변경 가능- CSS 적용4) 애니메이션 기능- 내장된 애니메이션 요소가 있음 3. 주요 사용처로고와 아이콘차트와 그래프지도 4. 코드 내에서 사용1) 직접 작성  2) 저장된 svg 파일 사용  스타일 조정//1img{ height: 100px; width: 100px;}//2&Smile;//3//4..

객체를 요소로 가지는 Array에서 Set 만들기

객체를 요소로 가지는 배열const exampleArray = [ { element_id: 1, name: "요소1" }, { element_id: 1, name: "요소1 중복" }, { element_id: 2, name: "요소2" }, { element_id: 3, name: "요소3" }]; element_id로 set 작성const exampleSet = new Set(exampleArray.map(element => element.element_id);  결과1. 중복 제거{1, 2, 3} 2. 검색 성능 향상array는 값을 찾을 때까지 처음부터 순차적으로 검색하지만, set은 해시 테이블을 사용하기 때문에 검색이 빠르다.1) array 검색(1) 1 확인 → 2 확인..

정리노트/메모 2025.03.11

[JavaScript] const의 값 변경(primitive/reference type)

const: 상수, 초기화시 선언된 값(value)를 변경하지 못함 ❗const로 객체가 선언된 경우, 객체 내의 속성은 값과 다르다.→ 객체 내의 속성의 값은 변경 가능 const로 객체/배열이 선언된 경우1. 객체/배열의 참조 자체는 변경할 수 없음//불가능한 예시const person = {name: "철수"}person = {name: "영희"}const numbers = [1, 2, 3]numbers = [4, 5, 6] 2. 객체의 속성/배열의 요소는 변경 가능//가능한 예시const person = { name: "철수" }person.name = "영희"person.age = 20const numbers = [1, 2, 3]numbers[0] = 10numbers.push(4)

[JavaScript] 테이블 토글 버튼(트리 구조 테이블)

1. 개요- 테이블: api 통신을 통해 받아서 오는 데이터로 작성- 토글 버튼은 각 행에 설치하되, 컬럼 안에 들어있지 않고 absolute를 사용해 떠있게 함- 토글 버튼을 클릭한 경우의 동작  각 행의 데이터 중 sub_table_YN의 값이 Y: 해당 행 아래에 서브 테이블을 보여줌  sub_table_YN의 값이 N: 서브 테이블 데이터를 추가하는 모달 오픈  이 동작은 라디오 버튼이 체크된 후에 이루어져야 함 선택(라디오 버튼)컬럼1컬럼2컬럼3컬럼4 +   ⊙     +   ⊙     2. 코드//현재 활성화되어있는 토글 버튼을 관리하기 위한 변수let activeToggleButton = null;function updateTable(data){ //테이블과 티바디 초기화 cons..