여러가지 이유로 한동안 코딩을 놓고 있었다. 어쨌든 틈틈이 이전에 만든 것에 목표한 기능을 추가하는데 성공했고 그러면서 배운 개념들을 복습할겸 대략 정리해 본다. 1. 값이 자동으로 계산되는 인풋 만들기 옵션A 와 옵션B 퍼센트 수치를 입력하는 인풋에, 한쪽만 입력해도 나머지가 자동 계산되도록 하는 기능을 추가했다. const inputPercent = document.querySelectorAll('.input.number'); function calculatePercent() { const max = 100; if(this.value > max) { alert('It must be a number less than 100'); this.value = 0; } if(this == inputPercent..
새로운 프로젝트의 메인 화면 디자인이 드디어 마무리 되었다. (아마도) 그 중 한 부분에 애니메이션을 추가하고 싶었는데, 피그마로 프로토타입을 구현하는 것 보다 직접 코드를 짜보면 좋겠다는 생각에 처음으로 업무용 코드를 만들었고 생각보다 더 많은 것을 배우는 중이다. 화면 자체를 만드는 일은 생각보다 오래걸리지 않았다. SCSS 수업을 다시 듣고 기억을 떠올려서 활용한다면 훨~씬 좋겠지만 일단 급하니까 쌩 CSS로 잡았다. 문제는 여러개의 버튼 중 내가 클릭한 요소에 맞는 이벤트를 넣어줄 수 있는가였다. 화면에 있는 8개의 버튼은 각각 왼쪽 버튼인지, 오른쪽 버튼인지 어느 li 태그에 속한 버튼인지 해당 버튼이 가지고 있는 percent가 몇인지 를 구분할 수 있어야했다. 1. 일단 동작이 되도록 만들어..
코딩애플 자바스크립트 강의 막바지 듣는 중, 애플 갬성으로 스크롤 애니메이션 만드는 강의가 있었다. 쌤이 주신 예제 자료는 이것 (지금은 사이트 레이아웃이 바뀌어서.. 강의 자료를 가져왔..) 👀 opacity 가변값 구하기 현재 창의 scrollTop 값을 콘솔에 찍어보고, 애니메이션의 시작점과 끝점의 스크롤값을 찾는다. 그러면 이런 그래프를 그릴 수 있었다. 저 그래프의 기울기값을 구하면 opacity의 가변값을 구할 수 있다며 중학생때 배웠다는 함수를 알려주셨는데 머리가 하얗게 되었다 ㅎㅎ 수학은 잊고 살아도 너무 잊고 살았다.. 이런것도 못알아 듣겠는 나를 자책하면서 혹시 다른 코드로 해결할 수는 없나 구글링 해봤는데, 라이브러리만 잔뜩.. 그래서 주변인을 괴롭혀 중등 수학강의를 들었고 가까스로 ..
function을 사용할때, 끝에 ()를 붙이는 것은 실행한다는 의미이다. button1.addEventListener('click', handleClick('a')); button2.addEventListener('click', handleClick('b')); 위 코드를 만들어 놓고 화면이 계속 button2 가 클릭된 화면으로 유지되고 있었던 이유. function을 실행하는 ()를 붙였기 때문에. 하지만 나는 function에 argument를 넣어서 활용하고 싶었다. 그럴때는 이벤트가 발생하는 순간을 기다렸다가 function을 사용할 수 있도록 익명함수를 사용해야한다. button1.addEventListener('click', function(){handleClick('a')}); butto..
Github pages를 사용해 프로젝트를 링크로 볼 수 있게 전달해달라는 챌린지 덕분에 pages란 기능을 처음 알게되었다. 궁금한게 연결되서 정보를 찾고 또 찾다가 하루가 다 가버렸다. 오늘의 시행착오를 정리하고, 언젠가 pages로 깃헙 블로그를 만들기 위해 기록해본다. 처음엔 깃헙 계정 당 페이지를 하나만 만들 수 있는 줄 알고, 생각없이 계정을 하나 더 만든다음 로컬의 프로젝트 파일을 마구 옮겨놓고 푸쉬 하려고 했다. 근데 한 컴퓨터에서 여러 깃헙 계정을 사용하려면 SSH키를 생성해서 계정을 전환하고 어쩌고.. 심지어 그냥 로그아웃하고 다른 계정으로 로그인 하는 개념의 작업도 실패. 오전내내 머리 싸매다가 멈췄다. 그러다 문득 Github pages 공식문서를 다시 읽어보고, 프로젝트가 있는 r..
퀴즈를 풀다가 생긴 의문점을 남겨본다. 과제 유출을 하지말라는 당부가 계셔서 어디서 나온 퀴즈인지는 비밀. (혹시나 그래도 문제가 된다면 알려주세요..) 👀 왜 안되지 창 사이즈에 반응해 배경 컬러가 변하는 코드를 짰다. 스스로 생각해서 코드를 짜는게 익숙하지 않아서 사고의 과정 그대로 코드를 작성하고, 하나하나 수정해 나가는 식으로 해보는 중이다. 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..
본격적으로 UXUI 업무를 하면서 자연스레 프론트엔드에 관심이 생겼다. 그리고 다양한 글과 영상을 보면서, 아 저기가 내가 있어야 할 곳이었나 하는 생각까지 들었다.😂 하고싶은데 어디서부터 시작해야할지 몰라 닥치는대로 보기 시작한게 2021년 1월. 생활코딩 강의를 듣다가 좀 더 실무에 가까운 공부를 하고싶어서 비교적 접근이 쉬웠던 디자인 학원 & 디자인 유튜브에서 HTML/CSS 강의들을 들었고, 이후에 개발 관련 유튜브, 특히 커리어 전환에 대한 영상들을 보다가 김버그님을 알게되었다. (그 때 커리어 전환에 관심을 가진건 그냥 '그럴수도 있을까..' 정도의 생각이었다.) 세상 쿨한 목소리의 스따일있는 영상이 넘나 매력적이었다. 강의도 하시는거 같길래 찾아내서 바로 등록! 4월에 시작해서 천천-히 따라..
- Total
- Today
- Yesterday
- destructuring
- 생각정리
- javascript
- Til
- JQuery
- scrollEvent
- VSCode
- JSX
- Prototype
- ES6
- 다중조건삼항연산자
- CSS
- 구조분해할당
- JS
- 리액트
- notworking
- Asynchronous
- callsignature
- typescript
- Callback
- 타입스크립트
- Ternary
- promise
- 조건부삼항연산자
- Synchronous
- 삼항조건연산자중복사용
- DOM
- Prettier
- 개념정리
- class
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |