탭 메뉴에서 반복문을 만들면서 배운 필터링 문법. 역시나 배운걸 검색하니 훨씬 방대한 내용이 나오는데 일단 내가 지금 사용해봤던 것들부터 정리하고, 차차 경험이 닿는대로 내용 추가 예정. 👀 .first() .last() $('.tab-button').first().addClass('active'); 첫번째 tab-button 요소를 선택해 클래스 추가 $('.tab-button').last().addClass('active'); 마지막 tab-button 요소를 선택해 클래스 추가 👀 .eq() $('.tab-button').eq(0).addClass('active'); 0번째 tab-button 요소를 선택해 클래스 추가 $('.tab-button').eq(-1).addClass('active'); ..
탭 UI를 만들다가 자연스럽게 나온 반복문 개념. 코드가 잘 작동해도 명확하지 않은 부분이 있으면 아는게 아니므로, 생활코딩 반복문 파트를 다시 공부하며 정리했다. 이 코드에서 내 의문은 이거였다. 반복문의 조건에 의해 i 에 들어가는 숫자가 바뀌면서 내부의 코드가 반복 실행되는 것은 알겠는데.. 그럼 어떻게 그 중 클릭하는 버튼의 번호에 해당하는 코드만 실행되는거지? 👀 아.. 모르는걸 정리해서 적다보니 알겠다. 버튼이 3개인 경우, 원래는 .eq(0) .eq(1) .eq(2)를 넣어 여러 묶음의 코드를 만들어놓아야 했으나, 위의 코드로 정리하면 여러 묶음의 코드를 만들어 놓은 것과 똑같이 코드가 생성되니 클릭 이벤트가 발생했을때 실행될 수 있는거구나.ㅎ.. 의식의 흐름대로 쓰는 포스트.. 일단 정리는..
처음 들었던 자바스크립트 기초 강의에서는 const와 let을 사용하고, var는 의도를 알 수 없으므로 사용하지 말라고 배웠다. 근데 어떤 강의에서는 var를 많이 사용한다고도 하길래 구글링한 내용을 글로 정리해보았다. 정리하고보니 hoisting과 scope개념까지 알아야 하는 이유가 있었다. 📌 변수를 선언하기 변수(variable)는 하나의 값을 저장하기 위해 확보하는 공간이며, 그 공간을 식별하기 위해 이름을 붙이는 것이다. 변수에 이름을 붙여 알림 : 선언(declaration) 변수에 어떤 값을 저장 : 할당(assignment) 저장된 값을 읽어옴 : 참조(reference) 변수의 선언은 const let var 를 통해 할 수 있으며, ES6에서 const 와 let이 추가되었다. 📌 ..
function을 사용할때, 끝에 ()를 붙이는 것은 실행한다는 의미이다. button1.addEventListener('click', handleClick('a')); button2.addEventListener('click', handleClick('b')); 위 코드를 만들어 놓고 화면이 계속 button2 가 클릭된 화면으로 유지되고 있었던 이유. function을 실행하는 ()를 붙였기 때문에. 하지만 나는 function에 argument를 넣어서 활용하고 싶었다. 그럴때는 이벤트가 발생하는 순간을 기다렸다가 function을 사용할 수 있도록 익명함수를 사용해야한다. button1.addEventListener('click', function(){handleClick('a')}); butto..
https://nomadcoders.co/javascript-for-beginners/lobby 크롬 브라우저의 어플리케이션인 Momentum을 만들어보면서 바닐라 자바스크립트를 배웠다. 무료 강의인데 업데이트까지 해주시는 대혜자 니꼬쌤 덕분에 기초 공부가 즐거웠다😘 강의를 듣고나면 코드를 캡쳐해서 코드가 돌아가는 순서를 다시 그려보며 복습했는데, 강의 들은지 보름정도 지난 지금 왠지 꽤 까먹은 것 같다. 다시 복습 기록을 남겨보며 마무리해야지. (적다보니 넘나 의식의 흐름대로의 기록이네...) 🕰 실시간 시계 시계 들어갈 div를 선택 (데이터 불러와 innerText 예정) 현재 시간을 나타내는 function 생성 Date를 object로 불러와서 사용 현재 시, 분, 초를 상수로 정의 모두 두자리..
10월 17일 노마드코더 사이트에서 자바스크립트 공부를 시작했다. 호기롭게 예습할 여유 없이 바닐라JS강의와 챌린지를 함께 진행하려했으나 실패. 챌린지는 일단 포기하고, 내 페이스대로 강의를 다 들었다. 11월 15일 지금은 또 다른 강의를 듣는 중인데, 바닐라JS 수업의 챌린지 기간이 다시 돌아와서 등록했다. 매일 나오는 퀴즈도 풀고 기록도 하면서 들었던 강의 내용을 복습해보면 좋을 것 같다. 👀 Why Javascript 자바스크립트는 프론트엔드가 사용할 수 있는 유일한 프로그래밍 언어다.(HTML/CSS는 프로그래밍 언어가 아니다) 자바스크립트는 모든 브라우저에 내장되어있어 설치할 필요가 없다. 그래서 파워풀하다. 브라우저는 HTML/CSS/Javascrip만 이해할 수 있다. 자바스크립트는 10일..
퀴즈를 풀다가 생긴 의문점을 남겨본다. 과제 유출을 하지말라는 당부가 계셔서 어디서 나온 퀴즈인지는 비밀. (혹시나 그래도 문제가 된다면 알려주세요..) 👀 왜 안되지 창 사이즈에 반응해 배경 컬러가 변하는 코드를 짰다. 스스로 생각해서 코드를 짜는게 익숙하지 않아서 사고의 과정 그대로 코드를 작성하고, 하나하나 수정해 나가는 식으로 해보는 중이다. const background = document.querySelector("body"); const windowWidth = window.innerWidth; function colorChange() { if (windowWidth > 1200) { background.classList.add("red"); } else if (windowWidth < 60..
프로젝트를 새로 시작할 때마다 나를 가장 혼란스럽게 하는 환경 셋팅. 이번 강의는 셋팅부터 기록하며 복습을 해볼까 한다. Debugger Debugger for Chrome이라는 VScode Extension 설치 : 아직 뭐에 쓰는건지 잘 모르겠음. 공부하며 업데이트 예정. Nodejs https://nodejs.org 에서 LTS 버전 설치. : 이전 강의 들으면서 이미 설치해놨었는데, mac os 업데이트하면서 이것저것 삭제된 것이 많아서 다시 설치했다. 일단 node -v를 입력해보면 설치여부, 버전을 알수 있다. Parcel 웹팩 등 좋은 번들러들이 있지만, 셋팅이 가장 쉬운 번들러를 통해 Javascript와 Typescript 학습에 더 집중하기 위한 목적으로 선택. https://ko.pa..
- Total
- Today
- Yesterday
- 개념정리
- JSX
- 삼항조건연산자중복사용
- callsignature
- DOM
- typescript
- scrollEvent
- VSCode
- destructuring
- Prototype
- 다중조건삼항연산자
- notworking
- 타입스크립트
- Til
- 리액트
- Asynchronous
- Ternary
- 구조분해할당
- Callback
- class
- 조건부삼항연산자
- JS
- CSS
- Synchronous
- 생각정리
- JQuery
- promise
- Prettier
- javascript
- ES6
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |