기록하는 노트

ant.design/ Ant Design - The world's second most popular React UI framework ant.design 버튼, 아이콘 등 다양한 컴포넌트를 지원하여 쉽게 디자인을 할 수 있는 사이트 html, css 등을 사용하여 제작하는 수고를 덜 수 있다. 설치 터미널에서 npm install antd Antd 설정 git-hub github.com/ant-design/ant-design ant-design/ant-design 🌈 A UI Design Language and React UI library. Contribute to ant-design/ant-design development by creating an account on GitHub. github.c..

카운터 만들기 html 0 +1 -1 javascript const number = document.getElementById("number"); const increase = document.getElementById("increase"); const decrease = document.getElementById("decrease"); increase.onclick = () => { const current = parseInt(number.innerText, 10); number.innerText = current + 1; }; decrease.onclick = () => { const current = parseInt(number.innerText, 10); number.innerText = curr..

삼각형 출력하기 - pattern 1 * ** *** **** ***** for (var i = 0; i < 5; i++) { var string = ""; for (var j = 0; j

숫자 배열이 주어졌을 때 10보다 큰 숫자의 갯수를 반환하는 함수를 만드세요. function countBiggerThanTen (numbers) { } const count = countBiggerThanTen([1, 2, 3, 5, 10, 20, 30 ,40 ,50, 60]); console.log(count); // 5 정답 let count = 0; numbers.forEach(n => { if (n > 10) { count++; } }); return count; return numbers.filter(n => n > 10).length; return numbers.reduce((acc, current) => { if (current > 10) { return acc + 1; } else { r..

forEach 각 원소들에 대하여 반복적으로 호출 const numbers = ['a', 'b', 'c', 'd', 'e']; numbers.forEach(number => { console.log(number); }); a b c d e map 모든 원소를 다른 형태로 변환해야 할 때 const array = [1, 2, 3, 4, 5, 6, 7,8]; const square = n => n * n; const squared = array.map(square); console.log(squared); (8) [1, 4, 9, 16, 25, 36, 49, 64] indexOf 특정 값이 어디에 있는지 알아낼 때 const alphabets = ['a', 'b', 'c', 'd'] const index =..

퀴즈 아래의 숫자로 이루어진 배열에서 3보다 큰 숫자들로 이루어진 새로운 배열을 만들어 반환해라 function biggerThanThree(numbers) { } const numbers = [1, 2, 3, 4, 5, 6, 7]; console.log(biggerThanThree(numbers)); *힌트: 빈배열, push 정답 function biggerThanThree(numbers) { let array = []; for (let i = 0; i 3 ) { array.push(numbers[i]); } } return array; } const numbers = [1, 2, 3, 4, 5, 6, 7]; console.lo..

React node 환경에서는 npm에서 외부에 있는 코드들(모듈들)을 다운받을 수 있다. package.json에는 프로젝트와 관련된 설정들이 들어간다. npm install을 통해서 다른 라이브러리들을 설치할 수 있고 package.json에 추가가 되고 node_modules에 해당 모듈이 추가 된다. npm start라는 명령어는 package.json에 자바스크립트 명령어를 실행시키는 것이다. 스크립트 명령어를 추가하여 사용하게 된다. public 폴더에서 index.html 파일의 코드들을 리액트 프로젝트에서 보게된다. public폴더는 주로 이미지를 추가할 때 사용하게 된다. src 폴더에서 코딩을 하게되고 주로 js나 css를 이용해서 코딩하게 된다. 이러한 작업들을 통해서 public 폴..

네트워트 통신이 잘 되는지 제대로 서버가 일을하는지 테스트할 수 있도록 도와주는 postman 가상의 서버를 만들어서 테스트가 가능하다. www.postman.com/downloads/ Download Postman | Try Postman for Free Try Postman for free! Join 13 million developers who rely on Postman, the collaboration platform for API development. Create better APIs—faster. www.postman.com 다운로드하여 설치 메인화면에서 가입 mock server 만들기 포스트맨 창에서 new를 클릭 Mock Server 클릭 Request URL 입력 후 Next Moc..

콜백함수는 함수의 매개변수로 함수를 넘겨준 것으로 나중에 호출되는 함수 아래의 예제로 function callbackFunc(morning){ console.log(morning); } undefined callbackFunc 함수에 morning을 매개변수로 넣어주고 function hi(callback){ var text = "good morning"; callback(text); } undefined hi 함수에 callback을 매개변수로 넣어준 또다른 함수를 만든다. hi(callbackFunc); good morning hi 함수에 callbackFunc를 인자로 넣어주고 호출을 한다. 그러면 hi 함수가 실행되고 callback(text) -> callbackFunc(text)가 되면서 ca..

flexboxfroggy.com/ Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com css flex연습을 게임으로 쉽게 익힐 수 있는 사이트이다. 한단계씩 정복하여 마무리까지 도달하면 어느새 flex에 대해서 감을 잡을 수 있다.