Sweet But Psycho

📌Array.prototype.map() : 배열 내의 모든 요소 각각에 대해서 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. const array1 = [1, 4, 9, 16]; //pass a function a map const map1 = array1.map(x=>x*2); //map 함수 안에 배열 원소에 2를 곱하고 출력하는 함수를 실행하고 이를 새로운 배열의 형태로 만든다. console.log(map1); //하면 expected output : [2, 8, 18, 32]; 아래 코드는 다음과 같이 분석할 수 있다. {list.map((value, index) => { {value}; })} 배열 list의 원소에 대한 value와 index를 인자로 받아서 li 태그를 형성하..

onChange 함수를 다음과 같이 정의하고 const onChange = (e) => { setNumber(e.target.value); }; input 태그 안에 value와 onChange를 다음과 같이 정의한다. input 창에 'ㅇ'이라는 글자를 입력했을 때 onChange 함수가 실행되면서 이벤트 객체를 반환한다. 반환된 이벤트가 onChange 함수에서 실행될 때 받은 인자 e의 객체 구조와 e.target의 구조와 e.target.value의 구조를 보면 아래와 같다. ✔ e의 객체 구조 console.log(e); //output is SyntheticBaseEvent { _reactName: "onChange", _targetInst: null, type: "change", native..

자바스크립트를 왜 배우는지 다시 생각해보자 내가 듣는 교육과정에 프론트엔드, 백엔드 과정이 둘 다 포함되어있다. 이것을 아울러 풀스택이라고 하는 것 같은데 자바스크립트는 프론트엔드 개발 언어에 적합하다. ✔ 현업에서는 프로젝트 개발 순서가 1. 개발 의뢰 by 클라이언트 2. 기획안 작성 (클라이언트의 요구에 맞게) 3. UI 시안 (기획안을 토대로 디자이너가 UI 디자인) 4. 프론트엔드 (HTML, JavaScript, JQuery) //사용자의 눈에 보이는 부분까지 개발 5. 백엔드 (ASP, PHP, JSP) //보통 사용자의 눈에 보이지 않는 부분 개발 회원가입이 대표적 ✔ 자바스크립트의 표준화 ECMA 262 1버전인 ES1부터 기능이 추가되어 ES6까지 생겼다. 보편적인 것은 ES5이고 ES..

애니메이션을 나타내기 위해서는 여러가지 선택지가 있다. css transition, animation keyframes, js 등으로 할 수 있는데 그 중에서 가장 자연스러우면서 부드러운 애니메이션을 구현하는 것은 keyframes이다. 인 것 같다. 예를 들어 슬라이더를 구현할 때 똑같이 opacity 값을 바꿔가면서 fade-in, fade-out 효과를 준다고 하면 js는 딱 있다가 없다 느낌이고 transition은 느낌이라도 살린 느낌이라면 keyframes는 부드럽게 샤랄라한 느낌이다. 결론 : jquery로 keyframes를 제어하는 것이 가장 유용하고 필요한 기술인 것 같다. keyframes의 value 값까지 js에서 속성 추가하고 제어할 수 있으면 참 좋겠지만 퍼센트 케이스만 제어할..

오늘 하루를 다 투자했음에도 결과가 좋지 않아서 집중도 잘 안되고 파비콘 만들기로 힐링을 했다... 크기 16*16 으로 png to ico 사이트에서 ico 파일로 바꾸고 를 넣어주면 아래처럼 귀엽게 뜬다. 내일은 달린다....후