코딩 공부 기록

1. white-space: normal(css로 특별히 지정해주지 않았을 때)1) 특징연속된 띄어쓰기, 들여쓰기가 무시됨줄바꿈이 자동으로 일어나며 줄바꿈 문자 무시됨(\n) 2. white-space: nowrap1) 특징자동 줄바꿈이 되지 않음그 외의 특징은 normal과 동일2) 다른 속성과 조합overflow: hidden; - 부모 요소 밖으로 빠져나가는 텍스트를 숨김text-overflow: ellipsis; - 말줄임표를 보여줌overflow: auto; 가로 스크롤바 3. white-space: pre1) 특징html의 요소와 동일: 연속된 띄어쓰기, 들여쓰기, 줄바꿈 그대로 보여줌자동 줄바꿈 x 4. white-space: pre-wrap1) 특징pre + wrap → 연속 띄어쓰기 등..

예시 객체const book = { author: '양귀자', name: '모순', publisher: '쓰다'} 1. 점 접근법(dot notation)console.log(book.author);console.log(book.name);console.log(book.publisher);정적 접근을 하게 된다. 2. 대괄호 접근법function getBookValue(key){ return book[key];}

왼쪽에 있는 대상이 존재하지 않을 경우 undefined로 인한 오류를 발생시키는 것이 아니라 판단을 종료한다.//user가 존재하지 않으면 오류를 발생시키지 않고 거기서 연산을 종료한다.//value1을 찾으려고 하지 않는다.foundValue = user?.value1

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..

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)

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

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array Array - JavaScript | MDN다른 프로그래밍 언어의 배열과 마찬가지로, Array 객체는 여러 항목의 컬렉션을 단일 변수 이름 아래 저장할 수 있고, 일반적인 배열 연산을 수행하기 위한 멤버가 있습니다.developer.mozilla.org *조건을 만족함 = 판별 함수의 값이 true some()반환: boolean배열의 요소 중 하나라도 조건을 만족하면 true //배열const array = [1, 2, 3, 4, 5];//판별 함수const even = (element) => element % 2 === 0;console.log(ar..

1. dataset테이블의 각 행에 추가 정보를 저장함보이지 않는 컬럼을 만들어서 정보를 넣어놓을 필요가 없다... 데이터 저장 방법let table = document.querySelector('#exampleTable');let tbody = table.querySelector('tbody');let row = tbody.insertRow();row.dataset.examData = '1'; 타입 주의: dataset 속성은 항상 문자열로 저장됨  +date 타입 input에 값을 자동으로 채우기 위해서는 YYYY-MM-DD형식이어야 함    2. form.attribute값 초기화const form = document.getElementById('exampleForm');form.setAttribu..

1. response.text()fetch(url) .then(response => response.text()) .then(text => { console.log(text); });- 서버 응답을 문자열로 받음- JSON, HTML 상관없이 모든 응답을 문자열로 처리- Promise 반환 2. response.json()fetch(url) .then(response => response.json()) .then(data => { console.log(data); });- json으로 온 서버 응답을 자바스크립트 객체로 파싱- 내부적으로 JSON.parse() 실행- 응답이 JSON 형식이 아닐 경우 에러 발생- Promise 반환  + JSON...

ajax 통신을 하는 경우- 서버에 데이터를 요청하면 promise가 생성되고- 데이터가 도착하면 promise가 resolve 된다.여기서 .then을 사용하지 않으면 데이터가 도착하기 전에(promise가 resolve 되기 전에) 코드를 실행하게 되고, 그러면 코드가 의도한 대로 동작하지 않는다.따라서 ajax 통신을 담당하고 받아온 값을 리턴하는 fetchData() 함수가 있다고 가정했을 때, fetchData()는 다음과 같이 사용해야 한다.fetchData() .then(data =>{ doSomething(data); });혹은fetchData() .then(function(data) { doSomeThing(data); }) .catch..