짧은코딩

메서드와 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..

자바스크립트는 눈에 보이지 않는 곳에서 메모리 관리를 한다. 더 이상 쓸모 없어진 변수, 함수, 객체 등을 어떻게 처리하는지 알아보겠다. 가비지 컬렉션 기준 도달 가능한 값: 쉽게 말해 어떻게든 접근하거나 사용할 수 있는 값 -태생부터 도달 가능한 값 이 값들은 명백한 이유 없이는 삭제되지 않는다. 1. 현재 함수의 지역 변수, 매개 변수 2. 중첩 함수의 체인에 있는 함수에서 사용되는 변수, 매개 변수 3. 전역 변수 4. 기타 등등 이런 값들은 루트라고 부른다. 자바스크립트 엔진 내에서 가비지 컬렉터가 끊임없이 동작한다. 가비지 컬렉터는 모든 객체를 모니터링하고 도달할 수 없는 객체는 삭제한다. -예시 // user엔 객체 참조 값이 저장됩니다. let user = { name: "John" }; u..

객체와 원시 타입의 근본적인 차이는 참조에 의해(by reference) 저장되고 복사된다는 것이다. 반면에 원시값(문자열, 숫자, 불린 값)은 값 그대로 저장, 할당된다. -객체의 동작방식 변수에 객체가 그대로 저장되지 않는다. 객체는 메모리 내 어디엔가 저장이되고 객체가 저장되어있는 메모리 주소인 객체에 대한 참조값이 저장된다. => 객체가 할당된 변수를 복사할 땐 객체의 참조 값이 복사되고 객체는 복사되지 않는다. let user = { name: 'John' }; let admin = user; admin.name = 'Pete'; // 'admin' 참조 값에 의해 변경됨 alert(user.name); // 'Pete'가 출력됨. 'user' 참조 값을 이용해 변경사항을 확인함 따라서 객체에 ..

객체 객체형은 다양한 데이터를 담을 수 있다. 키로 구분된 데이터 집합이나 복잡한 개체를 저장할 수 있다. -객체를 만든는 문법 let user = new Object(); // '객체 생성자' 문법 let user = {}; // '객체 리터럴' 문법 중괄호 {}를 이용해 객체를 선언하는 것을 객체 리터럴이라고 부른다. -리터럴과 프로퍼티 let user = { // 객체 name: "John", // 키: "name", 값: "John" age: 30 // 키: "age", 값: 30 }; 키:값으로 프로퍼티가 들어간다. delete user.age; delete 연산자로 프로퍼티를 삭제할 수 있다. let user = { name: "John", age: 30, "likes birds": true,..

자세한 첼린지 내용은 쓸 수 없어서 코드 설명만 쓰려고 했다. // import "./styles.css"; const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"]; // /* ✅ The text of the title should change when the mouse is on top of it. ✅ The text of the title should change when the mouse is leaves it. ✅ When the window is resized the title should change. ✅ On right click the title should also change. ✅ The colors of the t..