매번 익숙한 position: absolute;만 사용하다가 가끔 fixed를 사용할일이 생기면 생각없이 사용하는것 같아서 마음에 걸렸다. 다시 개념정리를 정리해보자! 📌 position position은 요소의 위치를 정해줄 수 있는 속성이다. static을 제외한 나머지 type들은 사용시 z-index 레벨이 생성된다. 📌 position : static position의 default type. 태그 순서대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. 📌 position : relative static과 동일한 위치로 보이지만 z-index가 생성되어 floating된 상태. top, left, right, bottom 옵션을 주면 위치가 변화하지만, 다른 요소에 영향을 주지 않는다. (원래 있던 ..
처음 들었던 자바스크립트 기초 강의에서는 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로 불러와서 사용 현재 시, 분, 초를 상수로 정의 모두 두자리..
Github pages를 사용해 프로젝트를 링크로 볼 수 있게 전달해달라는 챌린지 덕분에 pages란 기능을 처음 알게되었다. 궁금한게 연결되서 정보를 찾고 또 찾다가 하루가 다 가버렸다. 오늘의 시행착오를 정리하고, 언젠가 pages로 깃헙 블로그를 만들기 위해 기록해본다. 처음엔 깃헙 계정 당 페이지를 하나만 만들 수 있는 줄 알고, 생각없이 계정을 하나 더 만든다음 로컬의 프로젝트 파일을 마구 옮겨놓고 푸쉬 하려고 했다. 근데 한 컴퓨터에서 여러 깃헙 계정을 사용하려면 SSH키를 생성해서 계정을 전환하고 어쩌고.. 심지어 그냥 로그아웃하고 다른 계정으로 로그인 하는 개념의 작업도 실패. 오전내내 머리 싸매다가 멈췄다. 그러다 문득 Github pages 공식문서를 다시 읽어보고, 프로젝트가 있는 r..
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..
난 그냥 평소처럼 가볍게 강의를 보면서 git commit message를 수정하고 있었을 뿐이고.. 근데 쌤 강의 화면과는 다른 에러메세지가 떠서 당황했다.. git rebase --interactive 커밋아이디 만 입력하면 된댓는데.... 왜 나는 수정하고싶은 커밋에 reword를 입력하고 :wq 하면 에러가 떴을까.. https://qquokka.github.io/2021/05/09/Found-a-swap-file-%EC%98%A4%EB%A5%98.html vi editor 오류라는데.. 그게모야.. 난 그런거 쓴적없어.....아닌척 모르는척하다가 차근차근 메세지 읽으면서 어찌 해결해보려 했으나 대차게 실패하고 시간에 쫒겨 출근. 그냥 이부분은 건너 뛰어볼까 생각하다가 묘한 오기가 생겨서 될 때까..
CSS에서 말줄임 처리를 하는 두 가지 방법. 아래 코드는 mixin으로 만들어서 사용한 예시. 상황에 맞게 사용할 것. 📌 한 줄로 보이는 텍스트를 말줄임표 처리할때는 [ truncate ] @mixin truncate() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 📌 여러 줄로 보이는 텍스트를 말줄임표 처리할때는 [ line-clamp ] @mixin line-clamp($line) { display: -webkit-box; -webkit-line-clamp: $line; -webkit-box-orient: vertical; overflow: hidden; } 자꾸 쓰다보면 익숙해질테니 불안해하지말고 기록하자!🔥
- Total
- Today
- Yesterday
- VSCode
- JS
- JQuery
- promise
- 리액트
- 삼항조건연산자중복사용
- Synchronous
- JSX
- javascript
- 조건부삼항연산자
- Asynchronous
- 다중조건삼항연산자
- Callback
- callsignature
- DOM
- class
- 타입스크립트
- ES6
- CSS
- 구조분해할당
- destructuring
- Ternary
- typescript
- 개념정리
- notworking
- scrollEvent
- 생각정리
- Til
- Prototype
- Prettier
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |