본문 바로가기

전체 글

 (122)
JavaScript - 이벤트 핸들링 이벤트 핸들러 등록 방법 dom요소에 접근 후, onclick 프로퍼티를 준다. html태그에 onclick속성을 준다. addEventListener를 통해 이벤트를 등록한다. 1. dom요소에 접근 후, onclick 프로퍼티를 준다. const btn = document.querySelector('.login-btn'); btn.onclick = function(){ console.log("login"); } 이 경우, 기존 onclick프로퍼티에 있던 값을 덮어쓴다. 기존값을 그대로 두고 추가만 하는 방법은 3번이고, 아래와 같다.(가장 권장되는 방법임!) 3. addEventListener를 통해 이벤트를 등록한다. function login(){ console.log("login"); } bt..
JavaScript - 노드 선택 태그 선택하기 id로 태그 선택하기 document.getElementById('id'); 존재하지 않는 아이디는 undefined가 아니라 null 이다. class로 태그 선택하기 document.getElementsByClassName('className'); className을 가진 요소들이 유사배열(HTML Collection)에 담겨 출력된다. HTML Collection은 대괄호로 접근이 가능하고 for of문, length등 사용 가능하지만 배열의 메서드는 사용할 수 없다. 배열에 담긴 순서는 태그의 깊이와 상관없이 위에서 아래로 출력된다. 요소가 하나인 클래스명에 접근해도 HTML Collection으로 조회된다. 존재하지 않는 클래스명에 접근시 비어있는 배열이 조회된다.( null이 아..
JavaScript - 변수, 자료형 등 기본 문법 자바스크립트는 처음에는 웹개발용으로 사용되는 언어였으나 현재는 VR, AR, 블록체인, 모바일 등의 개발도 가능해졌다. 2015년 발생한 업데이트 이후 사람들이 좋아하게 되었다고 한다. 기본 문법 세미콜론 한 줄에 한 문장씩 입력하는 경우, 자바스크립트는 알아서 맨 뒷줄에 ';' 세미콜론을 찍어준다. 하지만 한 줄에 두 문장이 오게될 경우 세미콜론을 붙여서 문장을 구분해줘야한다. console.log('A') console.log('B') console.log('C')console.log('D') // 에러발생 주석 사용 목적 어떤 의도로 코드가 작성되었는지 설명할 때 구현한 코드가 어떤 동작을 하는지 기록할 때 한 줄 주석 // const a = 'A'; 여러 줄 주석 /* const num = 30;..
JavaScript - 브라우저의 동작 원리 브라우저의 기본 구조 1. 사용자 인터페이스 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분. 2. 브라우저 엔진 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어. 자료 저장소를 참조하며 로컬에 데이터를 읽기/쓰기 하면서 다양한 작업을 한다. 3. 렌더링 엔진 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함. 파이어폭스는 게코(Gecko)엔진을 사용하고, 사파리와 크롬은 웹킷(Webkit)엔진을 사용한다. 4. 통신 HTTP 요청과 같은 네트워크 호출에 사용됨. 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨. 5. UI 백엔드 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시..
JavaScript - 얕은 복사, 깊은 복사 객체 또는 배열을 복사하는 두 가지 방법의 차이점에 대한 설명. 두 방법은 복사된 결과의 구조와 원본 객체 간의 관계를 다르게 다룬다. 1. 얕은 복사 복사본의 속성이 원본객체와 같은 참조를 공유한다. 둘 중 한쪽을 변경할 경우 나머지도 똑같이 변경된다. 내부 객체나 배열은 참조로 복사된다. = 내부 객체나 배열은 실제 값이 아닌 메모리 주소로 복사된다. - 따라서 원본 객체와 복사본 객체는 내부 객체에 대한 동일한 참조를 공유한다. 속성이 모두 원시 값인 객체의 복사는 얕은 복사, 깊은복사 모두의 정의에 부합하다. 중첩된 객체의 값이 아닌 최상위 속성만 복사한다. - 따라서 복사본의 최상위 속성을 재할당해도 원본객체에 영향을 끼치지 않는다. - 복사본의 중첩 객체 속성을 재할당하면 원본 객체에 영향을 ..
JavaScript - ==, === 차이점 ==, === 둘 다 비교연산자이다. 1. == (동등 연산자) loose equality 연산자. 두 개의 피연산자가 동일한지 확인하며, boolean 결과를 반환한다. 비슷해보이면 같다고 판단한다. 데이터 유형을 엄격하게 검사하지 않고, 필요한 경우 자동으로 형 변환을 수행한다. ex) 1 == '1' // true 0 == false // true 상세 설명 1. 두 피연산자가 동일한 타입일 경우 다음과같이 비교한다. 객체 : 두 피연산자가 동일한 객체를 참조할때만 true. /* 객체타입 비교 예시 */ const object1 = { key: "value", }; const object2 = { key: "value", }; object1 == object2 // false object1 == ..
Git/GitHub Flow 브랜치 전략 1. Git Flow 전략 Vincent Driessen이 그의 블로그에 2010년 올린 "A successful Git branching model" 글의 브랜치 전략. Main 이 브랜치는 항상 제픔 릴리즈 버전을 나타낸다. 출시 가능한 프로덕션 코드를 모아두는 브랜치. 프로젝트 시작시 생성되며, 개발 프로세스 전반에 걸쳐 유지된다. 배포된 각 버전을 Tag를 이용해 표시해둔다. 모든 코드 변경사항은 이 브랜치로 머지되어 배포된다. Develop 개발중인 코드의 최신 버전을 포함하고 있다. 다음 버전 개발을 위한 코드를 모아두는 브랜치. 새로운 기능 추가나 버그 수정과 같은 모든 작업은 Develop 브랜치에서 시작하며 통합/테스트 후 Main브랜치로 머지된다. Feature 각 새로운 기능은 별도의..
Git - branch merge 방법 1. Merge Commit 가장 기본적인 브랜치 병합 방법. 각 브랜치의 변경사항이 과거의 커밋으로 보존되고, 새로운 커밋이 추가되어 최종 병합이 완료. 기본적으로 Fast-forward 또는 3-way merge 방식으로 병합된다. (맨 아래에서 설명) 장점 : 브랜치의 히스토리를 모두 유지하면서 변경사항 병합 가능. 프로젝트의 진행상황 이해/추적 쉬움. 커밋아이디가 바뀌는 경우가 없어 squash, rebase에 비해 사용이 쉽다. 단점 : 커밋히스토리가 복잡해질 수 있다. 팀이 커질수록 복잡성을 빠르게 증가한다. 사용 : 주로 안정적인 작업 플로우에서 사용하며, 빠른 병합이 가능한 경우에 유용하다. 2. Squash and Merge 각각의 커밋에서 발생한 모든 변경 사항을 병합 후 하나의 새로운..

티스토리툴바