ksw_devlog

변수 -> 변수를 지정하면 일일히 내용을 바꿀 필요 없음 variable -> var constant -> const '=' -> 대입 연산자 div, span -> 무색무취의 태그 div -> 화면전체를 씀 -> 줄바꿈이 됨 span -> 줄바꿈 X ...... -------------------------------- id -> 식별 , class -> 그룹핑 class 선택자가 더 포괄적 -> 광범위한 효과를 줌 id 선택자 -> 예외적으로 효과를 줌 -> id명 중복X 우선순위 : id > class > tag (javascript select tag by css selector) document.querySelector('body').style.backgroundColor = 'black' =>..

데이터타입의 종류 기본형 / 참조형 - 복제의 방식 1. 기본형 : 값이 담긴 주소값을 바로 복제 2. 참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제 데이터 타입을 이해하기 위해 필요한 배경지식 메모리, 데이터 -비트 -메모리 -바이트 -java, c와 다른 javascript의 메모리 관리 방식(feat. 정수형) 식별자,변수 변수 = 데이터 식별자 = 변수명 변수 선언과 데이터 할당 할당 예시 /** 풀어 쓴 변수 할당 방식 */ var testValue; testValue = 'test value!'; /** 붙여 쓴 변수 할당 방식 */ var testValue2 = 'second test value!'; 값을 바로 변수에 대입하지 않는 이유(=무조건 새로 만드는 이유) ..

DOM(문서객체모델) DOM은 html 단위 하나하나를 객체로 생각하는 모델입니다. 예를 들면, 'div'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있겠죠? 이런 구조를 트리 구조라고 합니다. 네, 맞습니다! DOM이 트리구조란 소리입니다. dom 트리 // 현재 dom 트리를 볼 수 있어요. document // dom 트리 중, body의 내용을 확인합니다. document.body // dom 트리 중, head의 내용을 확인합니다. document.head document와 body, head는 부모 - 자식 관계예요. body랑 head는 무슨 사이냐고요? 형제 관계입니다. (sibling이라고도 하죠!) 자식 요소에 접근하기 childNodes document.bod..

프로필 페이지에서 MBTI를 입력하는 칸을 만들었다. 제 MBTI는 OOOO입니다 변경 프로필에 대한 설명 변경 변경 버튼을 클릭하면 startMBTIChange 함수가 적용된다 --> window.startMBTIChange = async function() { $("#edit-user-mbti-button-container").empty() $("#edit-user-mbti-button-container").append( ` 완료 ` ) } id가 "#edit-user-mbti-button-container" 에 해당하는 내용을 empty로 비워주고 변경할 내용을 추가하고 onMBTIChanged() 함수가 적용된다. window.onMBTIChanged = async function() { cons..

댓글에 프로필 사진과 사용자 이름을 추가하는 기능을 구현하였다. const post_HTML = ` ${docSnap.data()["title"]} ${docSnap.data()["content"]} ` const post_Btn = ` 글 수정 글 삭제 ` Promise.all([ getUserDisplayName(postCreatedBy), getUserPhotoURL(postCreatedBy) ]).then(function(response) { const [userName, profileURL] = response document.getElementById("post-creator-profile").src = profileURL; document.getElementById("post-creator-..

[Java script] Document.getElementById() : Document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용합니다. Element - Web API | MDN **Element**는 Document 안의 모든 객체가 상속하는 제일 범용적인 기반 클래스로 공통 메서드와 속성만 가지고 있으며, 특정 요소를 더 상세하게 표현하는 클래스가 Element를 상속합니다. 예를 들어 HT developer.mozilla.org 구문 document.getElementById(id); document -> 웹문서 " ...

[GIT] 혼자 Git 프로젝트 작업을 할 때는 pull -> 로컬 repo commit -> push 순서로 하면 좋아요. 원격 repo 와 로컬 repo 에서 같은 파일을 수정하면 Git 이 같은 파일을 수정했는데 내가 어떤 파일을 최종으로 할까? 라고 확인 메시지를 줍니다. (정확한 내용은 곧 배울꺼에요!) 이런 것을 바로 **충돌(conflict)**이라고 표현해요. 충돌을 피하기 위해서는 아래 순서를 따라주는 게 편해요. 같은 파일을 동시에 수정해버리면 충돌이 나니까 두 repo 의 상태를 똑같이 맞춰준 후에 변경작업을 해주는 거에요. 원격 repo 와 로컬 repo 의 상태를 똑같이 맞춰주기, 즉 로컬 repo 에 원격 repo 작업내역 가져오기 (pull) 로컬 repo 의 작업 내용을 저장..

클래스란? 클래스는 분류. 집합. 같은 속성과 기능을 가진 객체를 총칭하는 개념입니다 객체는 세상에 존재하는 유일무이한 사물입니다 즉, 예를 들면 클래스가 사람이라면, 객체는 유재석이 될수도 있고, 박명수가 될 수도 있습니다. 클래스가 동물이라면, 객체는 강아지가 될수도 있고, 고양이가 될 수도 있습니다. 이처럼, 클래스를 이용하면 같은 속성과 기능을 가진 객체들을 묶어서 정의할 수 있습니다! 아래처럼요! class Person: pass # 여기서 pass 는 안에 아무런 내용이 없다는 의미입니다! person_1 = Person() print(person_1) # person_2 = Person() print(person_2) # ---------------------------------------..