My Boundary As Much As I Experienced

이미 한 번 변수 호이스팅에 대해 다뤄본 적이 있지만 자바스크립트 스터디에서 심화적으로 다뤄보기로 했다. 1. 변수 호이스팅이란? 자바스크립트에서 호이스팅(Hoisting)은 변수 선언과 함수 선언을 코드의 맨 위로 끌어올려지는 현상을 일컫는다. 그래서 개발자가 어느 라인 위치에 코드를 선언해도, 실행 되기전 코드가 최상단으로 끌어올려지고 실행되게 된다. 2. var 변수 호이스팅의 특성 var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작한다. 즉, 변수 호이스팅에 의해 var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있다. 단 할당문 이전에 변수를 참조하면 언제나 undefined를 반환한다. 3. 호이스팅의 원인 (실행 컨텍스트) ..

이벤트위임이란? 버블링 캡처링을 통한 이벤트 전파를 통해 상위 요소에서 이벤트 핸들링을 하는 것을 말한다. event.target을 통해 어떤 위치에서 이벤트가 일어났는지 특정할 수 있다. 예시 1 Bagua Chart: Direction, Element, Color, Meaning Northwest Metal Silver Elders ... ... ...2 more lines of this kind... ...2 more lines of this kind... table이 있고 tr, td들이 들어있는 테이블 구조가 있다고 하자. 여기서 원하는 cell(td)을 클릭하면 색상이 바뀌도록 바꾸고 싶다고 하자. 이때 td들에 일일이 다 이벤트 리스너를 부여하는 방식은 매우 코드가 많아지고 반복적인 요소가 ..

과제 목표: 직원들의 프로필과 사진을 관리할 수 있는 사진 관리자 서비스 만들기. “AWS S3 / Firebase 같은 서비스”를 이용하여 사진을 관리할 수 있는 페이지를 구현하세요. 프로필 페이지를 개발하세요.스크롤이 가능한 형태의 리스팅 페이지를 개발하세요. 전체 페이지 데스크탑-모바일 반응형 페이지를 개발하세요.사진을 등록, 수정, 삭제가 가능해야 합니다. 유저 플로우를 제작하여 리드미에 추가하세요. CSS애니메이션 구현상대수치 사용(rem, em) JavaScriptDOM event 조작 결과물 주소: https://profilebase-bm0729.firebaseapp.com/ 깃허브 주소에서 기능 설명 자세히 보기 ProfileBase, 직원 사진 관리 백오피스 (KDT0_JeongBeomH..

가상 클래스 선택자 :checked 를 사용하여 체크된 체크박스들만 모두 선택할 수 있다. 선택자로 선택된 node를 찾아 조작할 수 있다. const checked = document.querySelector("input[type='checkbox']:checked") 또한, 프로퍼티 속성을 다루듯이 사용할수도 있다. 아래 예제는 내가 전체 체크박스를 눌렀을 때, 다른 체크박스들을 모두 선택되게 하거나, 모두 해제하게 하는 로직을 구현한 방법이다. input type="checkbox"인 노드는 .checked 식으로 프로퍼티 속성을 다루듯이 사용할 수 있다. const primeCheckbox = document.querySelector("input[type='checkbox']") // 맨 첫번째 ..

some 리턴 값이 하나라도 true라면 true값 반환. (빈 배열에서 사용하면 false값 반환) const array = [1, 2, 3, 4, 5]; // checks whether an element is even const even = (element) => element % 2 === 0; console.log(array.some(even)); // expected output: true every 모든 인자들이 콜백함수 테스트를 통과하면 true를 반환. 콜백함수를 하나라도 통과하지 못할 시 false 반환. every함수와 부정연산자(!)를 사용하여 콜백을 짜면 하나라도 참일 시 false를 반환하는 로직을 짤 수 있다. (빈 배열에서 사용하면 true값 반환) const isBelowT..

버블링Bubbling이란? 특정 요소를 선택했을 때, 그 요소 뿐만이 아니라 상위 요소들의 이벤트 리스너도 작동하는 것을 말한다. 이동하기 //JS const divEl = document.querySelector("div") const pEl = document.querySelector("p") const aEl = document.querySelector("a") divEl.addEventListener("click", ()=> console.log("div")) pEl.addEventListener("click", ()=> console.log("p")) aEl.addEventListener("click", ()=> console.log("a")) //클릭 시 //a //p //div 한 요소에 이..

https://www.acmicpc.net/problem/10799 문제 유형: 스택 문제 요약: '()'되어 있는 곳이 레이저로 자르는 곳. 그 이외의 괄호는 한 판때기의 시작점 혹은 끝점을 나타낸다. 레이저로 자른 판때기는 총 몇 개가 나오는가? 입출력 예 (입력 / 출력): 총 몇 개인지를 출력값으로 내보낸다. 문제 풀이 전략: 판때기의 시작점인 '('은 판이 현재 열마나 깔려있나를 보여주는 갯수이다. 판때기의 끝점인 ')'은 깔려있는 칸이 하나 줄어든다는 뜻이다. 그리고 잘리고 남은 나머지 조각 1개가 발생한다는 뜻이다. 레이저를 뜻하는 '()'은 현재까지 판때기가 얼마나 깔려있는지를 카운팅하라는 뜻으로 볼 수 있다. 이 문제는 stack을 이용해 풀 수 있다. '('을 계속 카운팅하다가 '()'..

https://www.acmicpc.net/problem/3986 문제 유형: stack 문제 요약: 평석이는 단어 위로 아치형 곡선을 그어 같은 글자끼리(A는 A끼리, B는 B끼리) 쌍을 짓기로 하였다. 만약 선끼리 교차하지 않으면서 각 글자를 정확히 한 개의 다른 위치에 있는 같은 글자와 짝 지을수 있다면, 그 단어는 '좋은 단어'이다. 평석이가 '좋은 단어' 개수를 세는 것을 도와주자. 입출력 예 (입력 / 출력): 좋은 단어와 나쁜 단어 설명: 나쁜 단어는 A끼리, B끼리 연결 시켰을 때, 서로 교차하는 단어를 뜻한다. 좋은 단어는 겹치지 않는 단어이다. 이렇게 보면 회문을 찾으라는 문제처럼 생각할 수 있는데 이런 경우는 회문이 아니어도 중첩되지 않는다. 문제 풀이 및 전략: 예시로 보아 단지 A..

GSAP이란? GSAP은 자바스크립트 애니메이션 라이브러리이다. CSS로도 transition이나 애니메이션을 만들 수 있고, JS로도 어느정도 동적인 웹사이트를 만들 수 있지만, GSAP을 이용하면 훨씬 더 쉽게 애니메이션을 만들 수 있다. 반복적이거나 yoyo효과같은 것도 만들 수 있다. 기본적인 사용법 (조작할 수 있는 속성) 더보기 위치 및 크기: x: 요소의 가로 축 위치를 이동합니다. y: 요소의 세로 축 위치를 이동합니다. left: 요소의 왼쪽 위치를 이동합니다. top: 요소의 위쪽 위치를 이동합니다. right: 요소의 오른쪽 위치를 이동합니다. bottom: 요소의 아래쪽 위치를 이동합니다. width: 요소의 너비를 조절합니다. height: 요소의 높이를 조절합니다. scale: ..

공통점 .append()와 .appendChild() 모두 대상 객체에 자식 노드를 추가하는 메소드이다. .append() append메소드를 사용하면 노드 객체(Node Object)나 DOMstring을 사용할 수 있다. 1. 바로 텍스트를 추가할 수 있다. 2. 여러 개를 한꺼번에 추가할 수 있다. .appendChild() 1. 텍스트를 추가하려면 createTextNode를 만들어서 첨부해야 된다. 2. 한 번에 하나의 요소만 추가 가능하다. 결론 여러모로 append를 쓰는게 낫겠다. appendchild를 여러번 쓸걸 한 번에 처리할 수 있을거같다.