짧은코딩

심볼형 자바스크립트는 객체 프로퍼티 키로 문자형과 심볼형만 허용한다. -심볼(symbol) 심볼은 유일한 식별자를 만들고 싶을 때 사용한다. Symbol()을 사용하면 심볼값을 만들 수 있다. // 심볼 id에는 "id"라는 설명이 붙습니다. let id = Symbol("id"); 심볼 이름은 디버깅 시 아주 유용하다. 심볼은 유일성이 보장되는 자료형이라 설명이 같은 심볼이 여러 개라도 각 심볼값은 다르다. let id1 = Symbol("id"); let id2 = Symbol("id"); alert(id1 == id2); // false 따라서 같은 설명이라도 비교하면 false가 나온다. 심볼은 문자형으로 자동 형 변환되지 않는다. let id = Symbol("id"); alert(id); //..

이진 트리 -모든 노드의 차수를 2 이하로 제한하여 전체 트리 차수가 2 이하 -이진 트리의 모든 노드는 왼쪽 자식 노드와 오른쪽 자식 노드만 가짐(공백 노드도 자식으로 취급) -0

옵셔널 체이닝 옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 접근 가능하다. -옵셔널 체이닝이 필요한 이유 let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined 이런 경우에 에러가 발생한다. 과거에 옵셔널 체이닝이 없을 땐 && 연산자를 사용했다. let user = {}; // 주소 정보가 없는 사용자 alert( user && user.address && user.address.street ); // undefined, 에러가 발생하지 않습니다. 이렇게 AND 연산자를 사용하면 코드가 아주 ..

new 연산자와 생성자 함수 -생성자 함수 생성자 함수와 일반 함수의 기술적인 차이는 없다. 하지만 두 관례가 있다. 함수의 첫 글자는 대문자 반드시 'new' 연산자를 붙여 실행 function User(name) { // this = {}; (빈 객체가 암시적으로 만들어짐) // 새로운 프로퍼티를 this에 추가함 this.name = name; this.isAdmin = false; // return this; (this가 암시적으로 반환됨) } let user = new User("보라"); alert(user.name); // 보라 alert(user.isAdmin); // false 위 코드에 있는 주석은 new User가 실행되면 무슨 일이 일어나는지를 써 놓은 것이다. this 객체가 암시..

메서드와 this -메서드 만들기 let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요!"); }; user.sayHi(); // 안녕하세요! 함수 표현식으로 함수를 만들어 객체에 할당할 수 있다. let user = { // ... }; // 함수 선언 function sayHi() { alert("안녕하세요!"); }; // 선언된 함수를 메서드로 등록 user.sayHi = sayHi; user.sayHi(); // 안녕하세요! 이미 선언된 함수로도 객체에 할당 가능 -메서드 단축 // 아래 두 객체는 동일하게 동작합니다. user = { sayHi: function() { alert("Hello"); } }; //..

반응형 페이지 창이 작아지면 메뉴를 아래로 내려야한다. CSS @media screen and (max-width: 768px) { } 우선 반응형을 만들어야해서 미디어쿼리를 사용한다. -로고 .navbar { flex-direction: column; align-items: flex-start; padding: 8px 24p; } navbar의 중심축을 column으로 바꿔준다. 그리고 로고는 왼쪽으로 하고 싶어서 반대축인 flex-start를 flex-start로 바꿔준다. 화면에 여유를 주기 위해서 패딩을 넣는다. -메뉴 .navbar__menu { flex-direction: column; align-items: center; width: 100%; } 마찬가지로 중심축을 column으로 바꾼다...

https://www.youtube.com/watch?v=X91jsJyZofw&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=14 유튜브 드림 코딩님의 영상으로 공부했다. 이런 헤더를 만드는 영상이다. 레이아웃 구조를 먼저 파악하기 너비가 넓은 왼쪽과 좁은 오른쪽 메뉴가 있다. -왼쪽 메뉴 이렇게 3개의 박스로 이루어졌다는 것을 파악할 수 있어야한다. 그리고 이것을 보고 flex박스를 생각해야한다. -오른쪽 메뉴 미디어쿼리를 이용하면 된다. 박스는 총 3개로 이루어져있다. 그리고 felx 박스의 정렬은 column으로 하면된다. HTML 1. 커다란 nav 박스를 1개 만들고 그 안에 3개의 박스를 만든다. -로고 참고 사이트 https://fontawesome.com..

const title = document.querySelector("h2"); title.style.color = "white"; function BackColorChange() { let width = window.innerWidth; if (width = 700 && width

DFS DFS: 깊이 우선 탐색이라고도 하며 그래프에서 깊은 부분을 우선적으로 탐색하는 알고리즘 -인접 행렬 연결이 되어 있지 않은 노드끼리는 무한의 비용이라고 작성한다. 실제 코드에서는 논리적으로 정답이 될 수없는 999999999, 987654321 등의 값으로 초기화하는 경우가 많다. INF = 999999999 # 무한의 비용 선언 # 2차원 리스트를 이용해 인접 행렬 표현 graph = [ [0, 7, 5], [7, 0, INF], [5, INF, 0] ] print(graph) -인접 리스트 방식 모든 노드에 연결된 노드에 대한 정보를 차례대로 연결하여 저장한다. # 행(Row)이 3개인 2차원 리스트로 인접 리스트 표현 graph = [[] for _ in range(3)] # 노드 0에 연..

DFS와 BFS를 구현하려면 재귀 함수도 이해해야 한다. -재귀 함수의 종료 조건 재귀 함수를 사용할 때는 재귀 함수가 언제 끝날지 종료 조건을 꼭 명시해야 한다. 컴퓨터 내부에서 재귀 함수의 수행은 스택을 사용한다. 함수를 계속 호출했을 때 마지막에 호풀한 함수가 먼저 수행을 끝내야 그 앞의 함수 호출이 종료되기 때문이다. 연속해서 호풀되는 함수는 메인 메모리의 스택에 적재된다. 그래서 재귀 함수는 스택과 같다는 말이 틀린 말이 아니다. # 반복적으로 구현한 n! def factorial_iterative(n): result = 1 # 1부터 n까지의 수를 차례대로 곱하기 for i in range(1, n + 1): result *= i return result # 재귀적으로 구현한 n! def fa..