이경욱

실행 컨텍스트 실행할 코드의 환경 정보를 모아놓은 객체 1. 배경지식 (1) 콜스택이란? Stack : Last in, first out (LIFO) Queue : First in, first out (FIFO) (2) 함수 정의방식 A. 함수 선언문 function a () { /* ... */ } a(); // 실행 ok B. 익명 함수 표현식 var b = function () { /* ... */ } b(); // 실행 ok C. 기명 함수 표현식 var c = function d () { /* ... */ } c(); // 실행 ok d(); // 에러! (3) 함수 vs 메서드 독립성을 기준으로 차이가 납니다. a. 함수명(); b. 객체.메서드명(); 구분 기준 : [] or . (4) AS..

1. 데이터 타입 (Data type)의 종류 // 1. 데이터 타입(Data type) // (1) 기본형 (Primitive type) // a. Number // b. String // c. Boolean // d. null // e. undefined // f. Symbol // (2) 참조형 (Reference type) // A. 객체 (Object) // a. Array // b. Function // c. Date // d. RegExp // e. Map, WeakMap // f. Set, WeakSet 기본형과 참조형을 나누는 기준? 1. 값의 저장방식 기본형 : 주소값을 복제 참조형 : 주소값 묶음의 주소값을 복제 2. 불변성 여부 기본형 : 불변성을 띔 참조형 : 불변성을 띄지 않음 ..

body { text-align: center; } .box { display: inline-block; width: 85%; /* 이 값으로 여백 크기 조절 */ } .wrap { display: grid; 그리드로 양쪽 마진값을 주는 방법도 있지만, 전체를 묶어서 폭을 조절할 수도 있다. 생각보다 방법은 너무 간단한데, 먼저 부모 요소에 text-align: center; 를 주고 자식에게 display: inline-block을 넣어주면 가운데 정렬이 된다. 이 상태에서 width값을 조절해주면 양 옆 여백값을 표현할 수 있다. 그리고 그 밑에 그리드를 쓰고싶은대로 쓰면 된다.

const wrap = document.getElementsByClassName('wrap')[0]; const container = document.getElementsByClassName('box'); let page = 0; const lastPage = container.length - 1; console.log(lastPage); window.addEventListener('wheel', (e) => { //e.preventDefault(); if (e.deltaY > 0) { page++; } else if (e.deltaY lastPage) { page = lastPage; } conso..

A. ES6 1. 구조분해할당 (1) 배열의 경우 let arr = ["value1", "value2"]; let [a, b] = arr; console.log(a, b); 값을 할당해줄 수 있다. (2) 객체인 경우 1번 예시 let {name, age} = { name: "abc", age: 30, }; console.log(name); console.log(age); 각 순서에 맞게 요소를 할당한다. 리스트가 초과되면 이후 데이터는 undefined로 표기된다. 2번 예시 let user = { name: "abc", age: 30, }; let {name: newName, age: newAge} = user; console.log(newName); console.log(newAge); name이라..

0. 기본 // : 주석 (메모 기능으로 사용) control + / : 선택 영역 전체 주석처리 터미널에서 node (파일명).js 로 실행 1. 변수의 5가지 주요 개념 변수 이름(myVar) : 저장된 값의 고유 이름 변수 값("Hello World") : 저장된 값 변수 선언(var, let, const) : 변수를 사용하기 위해 컴퓨터에 알리는 행위 변수 할당 : 변수에 값을 저장하는 행위 변수 참조 : 변수에 할당된 값을 읽어오는 것 var myVar = "Hello World" 변수 선언: var let const 똑같은 변수명으로 다시 선언 O X X 재할당 O O X 2. 데이터타입1 RUN 할 때 데이터 타입이 결정된다. 객체는 중괄호로 배열은 대괄호로 3. 형 변환 (1) + 연산자는..

Keep : 잘하고 있는 점. 계속 했으면 좋겠다 싶은 점. 모든 팀원이 동일한 기능구현을 경험해 본것점이 좋았습니다. 팀 프로젝트를 하면서 스스로 많이 성장한게 느껴졌다. 혼자 업무를 해내는 것이 편할수는 있겠지만 사람들과 함께 어울려 프로젝트 하나를 완성한다는 게 큰 자산이 될 것 같다. 각자 원하는 기술을 각각 다 해보는점이 잘했다고 생각함, 한기술에 여러방법이 쓰이는걸 공유해서 좋았음 질문이 있거나 문제가 있을 때 서로 도와주려는 자세가 좋았습니다. Problem : 뭔가 문제가 있다 싶은 점. 변화가 필요한 점. 개별작업은 잘 하였으나 전체적인 통일성이 부족하였던 것 같습니다. 모르는 게 있을 때 적극적으로 팀원과 소통을 못한게 아쉬웠다. 더 열심히 얘기해봐야겠다. 팀페이지의 기술을 더 넣어 공..

저번엔 그라데이션 배경을 만들어보았고 (https://makeit80.tistory.com/8) 이제 첫 페이지 제목을 디자인할 차례였다. 제목과 짧은 부제같은 설명을 적고나니 뭔가 심심했다. 그래서 페이지를 열었을 때 투명에서 불투명으로 변하는 애니메이션을 추가해 그라데이션 배경과 어울리게 만들어보았다. 나름 잘 어울리는듯,, /*텍스트 애니메이션*/ .gradient-box { opacity: 1; color: #ffffff; animation: animate 3s; font-size: 1.5vw; } @keyframes animate { 0% { opacity: 0; } 100% { opacity: 1; } } 이렇게 하고 창을 축소하니 글자가 겹쳐서 나왔다.. 찾아보니까 px 로 하면 고정값이어서..

웹 서칭을 하다 하고싶은걸 발견해서 연습해보았다. 코드는 이렇게 작성되었다. 먼저 그라데이션 /* 그라데이션 */ background: linear-gradient(90deg, #ff9900, #00d9ff); background-size: 400% 400%; /* 애니메이션 */ animation: gradientAnimation 10s ease infinite; text-align: center; line-height: 30px; /* 키 프레임 */ @keyframes gradientAnimation { /* 시작 */ 0% { background-position: 0% 50%; } /* 중간 */ 50% { background-position: 100% 50%; } /* 원위치 */ 100% { ..

SELECT * FROM users u WHERE user_id in ( SELECT user_id FROM orders o WHERE payment_method = 'kakaopay' ) Subquery 란? 쿼리문 안에 들어가는 명령을 말함 ()로 묶어서 사용하고, 줄바꿈을 해야 구분이 쉽다. SELECT, FROM, WHERE 등 어디나 들어가도 가능하다. WHERE 절 안에는 in을 사용해야 한다 SELECT pu.user_id , pu.point, a.avg_likes FROM point_users pu INNER JOIN ( SELECT user_id , ROUND(AVG(likes),1) as avg_likes FROM checkins c GROUP BY user_id ) a on pu.us..