희락코딩

문제 수를 입력받아 각 자릿수를 모두 곱한 결과물들이 한 자리 수가 될때까지 반복적으로 곱한 후 최후의 한자리 수를 리턴하기. 입출력 예시 1 2 let output = lastDigit(958); console.log(output); // --> 0 cs 수도코드 및 코드작성 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function lastDigit(num) { // 숫자를 문자열 형태와 배열로 만들어준다. let strNum = num.toString().split('') // 한자리수를 리턴하기 위한 변수를 저장 // 배열길이가 1이하일떄까지 반복문을 돌린다 let count = 0 while(strNum.length > 1){ // 자리수가 한자리일때까지 strN..

문제 수를 입력받아 각 자릿수를 모두 더한 값을 리턴해야 합니다. ※ 음수를 입력 받은 경우, 첫번째 수는 음수로 계산하기 입출력 예시 1 2 3 4 5 let output = addDigts(3481); console.log(output); // --> 16 = 3 + 4 + 8 + 1 output = addDigts(-248); console.log(output); // --> 10 = -2 + 4 + 8 cs 수도코드 및 코드작성 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function addDigits(num) { let arrNum = num.toString().split('') // 숫자를 스트링으로 바꾸고 배열에 넣는 작업 let minusArrnum = a..

#useState 16.8이후부터 useState라는 함수를 사용하여 함수형 컴포넌트에서도 state를 사용할 수 있게 되었습니다. 이과정에서 Hooks이라는 것을 사용하는데 이번 블로깅은 useState와 onclick을 활용해서 카운터를 만들어 보겠습니다. 우선 이함수를 사용하기전에 배열의 비구조 할당에 대한 개념이 잡혀야 useState함수를 좀더 익숙하게 사용할 수 있습니다. 1 2 3 4 5 6 7 8 9 // 일반적일 배열 할당 const array = [1, 2]; const one = array[0]; const two = array[1]; // 배열 비구조화 할당 const array = [1, 2]; const [one, two] = array; cs 위 와같이 배열 비구조화 할당을 사..

#Props Props는 컴포넌트의 속성을 설정할 때 사용하고 어느 특정 값을 전달할때 사용합니다. props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정 할수 있습니다. props는 상위 컴포넌트에서 하위 컴포넌트로 전달하는 개념이며, 하위 컴포넌트에서 상위 컴포넌트에 값을 전달 할수 없습니다. ※ props는 상위 컴포넌트 → 하위 컴포넌트 ( ㅇ ) 하위 컴포넌트 → 상위 컴포넌트 ( x ) #props 기본 사용방법 예를 들어 App 컴포넌트에 Joycoding 컴포넌트를 사용 할 때 name 이라는 값을 전달해주고 싶다고 가정해보고 코드를 작성해 봅시다!! App.js 이때 Joycoding 컴포넌트에서 name의 값을 쓰려면 어떻게 쓰면 될까요 ? 아래 코드를 봅시다 Joycod..

# JSX JSX는 자바스크립트의 확장 문법입니다. 얼핏보면 HTML과 유사하게 생겼지만 실제로는 JavaScript입니다. 리엑트 컴포넌트 파일에서 XML형태로 코드를 작성하면 바벨이 번들링 되는 과정에서 일반 자카스크립트 형태의 코드로 변환 합니다. JSX의 장점 1. 보기 좋고 가독성이 좋다. 위에 바벨로 작성한 코드를 비교 해보면 누가봐도 JSX가 쉽고 가독성이 더 좋다는 것을 알 수 있습니다. 또한 HTML과 매우 유사해서 금방 익숙해집니다. 2. 높은 활용도 HTML 태그를 사용할 수 있을 뿐만 아니라 컴포넌트를 HTML 태그 쓰듯이 JSX 안에서 작성 할 수 있습니다. JSX가 자바스크립트로 제대로 변환이 되려면 지켜줘야 하는 몇가직 규칙이 있습니다! 예시를 통해 하나하나 알아봅시다!! #1..

자바스크립트를 공부 하다보면 콜백함수라는 말을 많이 들어보셨을 겁니다. 과연 이 콜백함수는 무엇일까요 ?? 이번 블로깅은 setTimout( ) 함수를 예를 들어 콜백함수가 어떻게 쓰이는지 알아보도록 하겠씁니당 콜백(callback) 함수 콜백함수는 함수의 인수로 사용되는 함수를 콜백 함수라고 합니다! 콜백 함수를 이해하기 좋은 예시가 setTimeout(함수, 시간) 이 있습니다. 간단하게 설명하자면 타이머라고 생각하면 됩니다. 깊게 알고 싶으면 참고 https://developer.mozilla.org/ko/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout WindowTimers.setTimeout() - Web API | MDN WindowTimers.setT..

고차함수 map , filter , reduce 원리 이해하기!!! 이번 블로깅은 고차함수에 많이 사용 하는 map, filter, reduce에 대해 알아보는 시간을 갖도록 하겠습니다.... map , filter, reduce는 꼭 알아야 나 중에 객체 데이터들을 효율적으로 다룰수 있어 확실하게 개념을 잡는 것이 중요하다고 생각합니다!!! 들어가기 앞서 map 과 filter에 대해 간단하게 공통점과 차이점을 설명하자면 공통점 새로운 배열을 만듭니다. 차이점 filter는 조건을 통해 배열안의 값을 삭제 합니다. 쉽게 말해 걸러냅니다. map은 원하는 데로 배열안의 값을 변경 합니다 # filter filter는 위에 설명을 했듯이 배열안에 원하는 값을 걸러 내고 나머지 값들은 삭제합니다. 예를 들어..

플렉스 (FLIX) html의 구도를 좀 더 수월하게 해결 해주는 친구!!! 바로 플렉스 입니다. 이친구의 기본 옵션은 정렬입니다.이번 블로깅은 플렉스가 어떤식으로 적용 되는지 이미지를 통해 정말 가볍게 알아보도록 하겠습니다. flex 플렉스는 부모요소 안에 있는 자식들을 수평으로 정렬시켜주는 속성입니다. 플렉스로 나뉜 Flex items 와 Flex Contanier에 다양한 CSS 속성을 부여 할 수 있습니다. Flex Contanier display, flex-flow , flex-direction, flex-wrap justify-content, align-content, align-items Flex items order, flex, flex-grow, flex-shrink, flex-basis..