Javascript
1.JavaScript 기초 문법 #1
코드에 선언된 변수 및 함수를 유효한 범위의 코드 상단으로 끌어 올림var의 변수/함수의 선언만 위로 올려지고, 할당은 올려지지 않음let/const 변수 선언과 함수 표현식에서는 호이스팅 발생X①과 ②의 출력은 undefined, john으로 같음③에서는 let을 사
2.VScode 단축키(윈도우)
현재 창 닫기 Ctrl + w닫은 창 다시 열기 Ctrl + Shift + t사이드바 토글 Ctrl + b사이드바-탐색기 Ctrl + Shift + e사이드바-전체 검색 Ctrl + Shift + f에디터 확대/축소 Ctrl + +/-들여쓰기 Tab 혹은 Ctrl +
3.옵셔널 체이닝 연산자
좌항의 피연산자가 null 또는 undefined이면 undefined 반환그렇지 않으면 우항의 프로퍼티 참조&& 논리연산자와 다르게 좌항 피연산자가 Falsy 값이라도 null 또는 undefined가 아니면 우항의 프로퍼티 참조옵셔널 체이닝 연산자가 도입되기 전에는
4.null 병합 연산자
좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자 반환그렇지 않으면 좌항의 피연산자 반환변수에 기본값을 설정할 때 유용null 병합 연산자가 도입되기 이전에는 논리연산자 ||를 사용한 단축 평가를 통해 변수에 기본값 설정
5.Json Issue
Todo-list를 구현하는 강의를 듣던 중에 npm install -g json-server로 Json sever를 설치하고json-server --watch db.json을 터미널에 실행시켰는데 강사님과 실행 결과가 달라 당황하였다.todos가 잘 실행되는 것을 볼
6.DOM #1
DOM이란? > - Document Object Model의 약자로 문서 객체 모델이라는 의미 HTML, XML 문서의 계층적 구조와 정보를 표현, 제어할 수 있는 API 프로퍼티와 메서드를 제공하는 트리 자료구조 노드란? ※ 노드 : HTML 문서 트리의 구성
7.배열
Array.isArray(value) : 배열 타입 확인 방법 let num = 123.456; let str = "Here I am"; let fruits = ["apple", "orange", "melon"]; console.log(
8.DOM 관련 개념
DOM에 대해 스터디를 진행하면서 스터디원들의 정리한 내용을 보고 새로 알게된 내용이 있다. 파싱 => HTML 등의 큰 자료에서 내가 원하는 자료만 가공하고 추출해서 불러오는 것
9.DOM#2 이벤트
click 이벤트 왜 여기에서 버튼을 눌렀을 때 HI는 실행되지 않고 Good night만 실행되는 것일까?? => 마지막 작성된 것을 실행시킨다. => 이처럼 동일한 이벤트에 서로 다른 콜백 함수를 지정할 수 없다는 것을 알 수 있다. > 그렇다면 과연?? 어떻게
10.<input> name속성
아니 왜... value값이 실행이 안되는거지..문제는 HTML 코드를 잘 보면 된다.<input>태그에 name 속성은 name = "value" 이렇게 구성되어 있다.그래서 JS로 usernameInput.value 등의 value 값을 실행시키려면 꼭 nam
11.tweet 구현
여기서 LILI라는 요소는 html코드에 미리 넣어둔 요소이고나머지 두개는 input창에 직접 입력해서 추가한 요소들이다.여기서 li를 클릭하면 제거되도록 설정해놓았다.하지만 결과는??미리 만들어둔 LILI만 제거되고 나머지 두 요소는 클릭해도 아무런 동작을 하지 않았
12.Ajax
서버란? 서버 : 유저가 데이터를 요구하면 데이터를 보내주는 프로그램 > 데이터 요구 방법 데이터의 정확한 URL을 알아야함. (서버 만든 사람이 알고있음) URL로 GET 요청을 해야함. ※ GET 요청 방법 브라우저 주소창에 URL 입력 버튼으로 요청 (버튼 누르
13.회사 내 트윗 구현
<HTML><div>를 추가해줘서 그 안에 추가할 내용들을 JSON으로 작업한다.<JavaScript>DOM트리가 완성되면 getTweet 함수를 실행시킨다. fetch를 사용해 프로미스를 반환시키고, .then으로 json파일을 실행시키고, 그 안에
14.마우스 활용 인터랙티브
마우스를 따라다니며 빨간 박스가 자연스럽게 따라오는 것을 구현해보았다.그리고 실시간으로 계속 반복되게 하는 함수를 만들어준다.빨간 박스가 커서를 따라올 수 있도록 (즉, 박스가 커서가 되도록)브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전
15.window.onload 왜 써야할까??
결론부터 말하면 에러 발생을 줄인다.가독성을 더 좋게 한다.이제 상세하게 알아보자!!!위와 같이 작성하면 document.getElementByTagName( 'h1' ); 가 html에서 id가 h1이란 태그가 생성되기도 전에 실행되는 문제가 일어난다.그래서 우리는
16.mouse event 구현
참고 URL: https://velog.io/@dldlswognqh/마우스-활용-인터랙티브=> circle이 부드럽게 크고 작아지게 transition: ease-in-out을 줌.=> 네, 아니요에 mouseover되면 작아지고 mouseout되면 다시 커
17.자바스크립트 북마크 구현
북마크 링크
18.PIP 구현
html은 정말 간단하다.단순하게 PIP를 위한 video태그를 하나 만들어주고 버튼을 하나 만들어준다.CSS도 역시 어려울 만한 것이 없다.그래도 첫번째 줄부터 차례차례 알아보자.자신이 원하는 폰트의 url을 import해주어 글자의 폰트를 바꾸어준다.나는 CSS에서
19.Dark Mode / Light Mode 구현
※ 자세한 코드는 github 참고https://github.com/llinjae/Light-Dark-Mode.git※ dark mode 전환에 관련된 코드만 작성Light Mode에서 쓰이는 색상 설정Dark Mode에서 쓰이는 색상 설정즉, 같은 변수를 사
20.swiper 구현
위와 같이 class에 swiper, swiper-slide 등을 설정swiper에 대한 CSS는 !important 속성을 추가해주는 것이 좋음.아니면 제대로 작동하지 않을 수 있다.active로 현재 active된 영역의 swiper 점은 잘 알아볼 수 있도록 wi
21.Emailjs 사용
이렇게 쓰고 SEND를 누르면 지정해둔 내 메일로 보내져야한다.바로 보내진 것을 볼 수 있다.https://www.emailjs.com/에 접속해 회원가입하고 메일을 받을 이메일 주소를 설정한다.Email Templates 탭에 들어가 Playground를 클
22.반응형 사이드바 구현
사이드바는 toggle을 이용해 없앴다가 생기게 했다가 조절을 할 수 있었다.그런데 가끔 생각하면,, 사이드바가 다 사라지는 것이 아닌 아이콘 부분만 남기게 하는게 더 보기도 편해보이고 사용하기도 편리해보인다. 메뉴바를 이용하기 위해 메뉴 아이콘을 다시 눌러서 세부메뉴
23.좌우이동 구현
평소에는 웹페이지를 구현해보는 연습도 하고 그랬기에 세로스크롤이 전부였다. 그래서 이번에는 좌우스크롤도 해보고 싶어 생각해본게 웹페이지가 아닌 계속 이어지는 이미지에 자동차가 달려나가는 모습을 구현해보고 싶었다.자동차가 이미지 안에서 움직이게 하려고 자동차가 위아래로
24.swiper 동적 생성
https://velog.io/@dldlswognqh/swiper-구현위 링크에 보면 현재 보고 있는 즉 active되어 있는 bullet은 길어지게 된다.그런데 길어지는 거 말고 active된 bullet과 다른 bullet들의 크기가 달랐으면 뭔가 더 괜찮
25.textContent vs innerText
textContent랑 innerText는 똑같이 표현되는 것 같은데 왜 두개가 나뉘어져있을까???한번 music player로 확인을 해보자!!개발자 창에서 performance > rendering > paint flashing을 켜면 실시간으로 리플로우되는 것을
26.music player 구현
먼저 실행되지 않는 것을 디폴트로 해서 false로 해놓는다.addEventListener로 click하면 이벤트가 실행되도록 하고,실행 중일 때는 class를 변경하며 중지 아이콘이 보여질 수 있게 한다.또한 HTML에 있던 title 속성을 Pause로 바꿔준다.중
27.music player key이벤트 추가
참고 링크 https://velog.io/@dldlswognqh/music-player-구현버튼이나 몇초씩 왔다갔다 하는 것을 항상 눌러주기는 너무 귀찮아서 key이벤트가 있으면 좋다고 생각했다.그래서 구현을 해보았다.keydown 이벤트를 사용하였고 스페이스
28.변수 다루기 (클린코드)
이유 어디서나 접근이 가능스코프 분리의 위험성=> 해결 방법전역 변수 사용 X지역 변수 사용 Owindow, global 조작 Xconst, let 사용IIFE, Module, Closure 등 스코프를 나누는 방법에 대해 고민이유 명령형으로 가득한 로직어디서 어떻게