본문 바로가기

분류 전체보기346

JavaScript - scrollIntoView() 이란 화면 바깥으로 삐져나가 스크롤해야만 볼수있는 메뉴 탭이 있다. 살짝 화면을 삐져나간 메뉴를 클릭하면, 메뉴탭은 삐져나간 그자리 그대로 있고, 내용만 바뀐다. 뭔가 이상하지 않은가? 보통은 메뉴을 누르면 자동으로 스르륵 화면 중간쯤 알아서 스크롤되는 동작에 익숙하지 않은가? 그 기능을 위해 javaScript 내장메서드인 scrollIntoView() 를 알아보자 JavaScript - scrollIntoView() 이란 이 메소드는 scrollIntoView()가 호출된 엘레멘트를 유저가 볼수있는 부분으로 상위 컨테이너를 스크롤 한다 The Element interface's scrollIntoView() method scrolls the element's ancestor containers such t.. 2022. 11. 8.
React(87) 여러 버튼 중 하나 클릭시 색상변경하기 여러 버튼이 있을 때, 하나만 클릭하면 색상이 변하게 만들어보자 워낙 비슷한 요구사항들이 많기 때문에 그동안 비슷한 포스팅도 여럿 올린 것 같다. 하지만 과신과 방심은 금물이다 예전포스팅보다 조금 더 리팩토링된 코드로 다시한번 복습해보자 :) React(87) 여러 버튼 중 하나 클릭시 색상변경하기 새발컴퍼니 회원모집 모달창이 있다. 세가지 회원 타입이 있는데 하나를 선택해서 클릭하면 색상이 변경된다고 해보자 과거의 새발자가 작성했던 방식은 타입과 타이틀이 분리되어 HTML 태그에서 합쳐서 보여주는 방식이였다. 지금의 새발자는 객체형식으로 따로 노는 { 타입과 타이틀 } 을 묶어보았다. const items = [ { type: 'general', title: '일반 회원 가입하기', }, { type:.. 2022. 11. 7.
JavaScript - 객체에서 undefined 값만 골라 제거하기 오늘은 객체의 값을 동적으로 넣어주고 있었다. 동적으로 넣다보니 값이 없을 때는 undefined 가 되었다. api의 body 에 쓸때없는 property 를 보내주고 싶지 않아 여러 방법을 고민하다가 undifned 값인 properties 만 쏙쏙 골라 제거시키는 함수를 스택오버플로우에서 참고해서 정리해보았다 JavaScript - 객체에서 undefined 값을 제거하기 여기에 쓸때없는 값이 들어간 객체가 있다. 보기만 해도 지저분해서 참을수 없다. 객체 값이 undefined 인 것만 골라서 멀리 쫓아버리자 const obj = { a: undefined; b: undfined; c: '유일한 값', d: [] e: { e1: undefined, e2: undfined, }, } undefine.. 2022. 11. 4.
JavaScript - 최소공배수 구하기 최소공배수를 구하기 위해 대표적인 두가지 방법이 있다. 쉽게 구하기위해서는 최대공약수를 먼저 구해야 한다. 먼저, 최대공약수를 구해보자. 아래 포스팅 참고 ↓ ↓ ↓ JavaScript - 최대공약수 구하기 (유클리드 호제법) 예전에 수학시간에 최대공약수 / 최소공배수 구하는 것은 누워서 껌먹기 였다. 학원에서 가르쳐준 대로 계산하면 답이 나왔기 때문이다. 당연히 연필들고 공책에 푸는 소인수분해의 관점에서 devbirdfeet.tistory.com JavaScript - 최소공배수 구하기 여기서는 최대공약수를 먼저 구했다고 가정하겠다. - 최소공배수 두 수의 공통된 배수 중에서 가장 작은 수 5의 배수 5, 10, 15, 20, 25, 30, 35, 40 ... 6의 배수 6, 12, 18, 24, 30.. 2022. 11. 3.
JavaScript - 최대공약수 구하기 (유클리드 호제법) 예전에 수학시간에 최대공약수 / 최소공배수 구하는 것은 누워서 껌먹기 였다. 학원에서 가르쳐준 대로 계산하면 답이 나왔기 때문이다. 당연히 연필들고 공책에 푸는 소인수분해의 관점에서 접근하면 머리로 이해하기는 쉬운일이지만 혹시모를 거대한 수를 다룰 가능성이 있는 IT인의 관점에서는 알고리즘을 사용하여 푸는 편이 효율적이다. 그리하여 유클리드 호제법이라는 알고리즘과 최대공약수를 구하는 법을 알고자 한다. JavaScript - 최대공약수 구하기 (유클리드 호제법) - 최대공약수 두 수의 공통된 약수 중에서 가장 큰 수 4의 약수 1, 2, 4 16의 약수 1, 2, 4, 8, 16 → 4와 16의 최대공약수는 4이다 - 유클리드 호제법 유클리드(Euclid)에 의해 기원전 300년경에 발견된 가장 오래된 .. 2022. 11. 1.
React(86) 필터기능 구현하기, 셀렉트 박스 사용하기 상품 판매를 위해서 필터기능은 소중하다. 유저에게 편리한 경험을 제공해줄 수 있기 때문이다. 아래에서 구현하는 필터기능은 순전히 프론트 위주이다. 선택한 필터에서 값을 추출하는 단계까지만 구현한 코드이다. API의 메소드와 쿼리는 각각마다 다르기 때문에 api를 사용하기 직전까지만 응용가능한 정도로 정리해보았다. 자, 그럼 시작해보자 결과화면 미리보기 React(86) 필터기능 구현하기, 셀렉트 박스 사용하기 CategoryFilter.tsx 일단 준비물로 타입선언부터 해주자 interface Category { name: string; state: string; } 필요한 변수를 준비물로 선언해주자. // 요 카테고리 아이템들 속에는 { 이름과 상태 } 값들이 들어있다 const category = [.. 2022. 10. 31.
JavaScript - 객체 안 배열에 반복문 사용하기 요즘 객체를 가공하는 일이 부쩍 늘었다. 처음 공부를 시작하던 때, 데이터 가공이 내 맘대로 안되서 답답해하던 기억이 떠올랐다. 그때에 비하면 감사하게도 잘 가고 있다고 생각한다. 하지만 아직 가야할 길이 멀고 공부할 것은 많다! 자 객체를 다루러 가보자! JavaScript - 객체 안 배열에 반복문 사용하기 아래와 같은 형식의 객체를 만났다. ( 객체 안에 배열들이 늘어져있는 ... ) 당신의 미션은 이 배열들을 동적으로 출력하는 것이다. (자, 당황하지 말자.) 일단 객체를 반복해서 하나하나의 키 값(배열) 을 알아내고, 배열을 돌려서 하나하나 아이템들을 뽑아내보자. const obj = { a: ['apple', 'alarm', 'air'], b: ['bear', 'bee'], c: ['car',.. 2022. 10. 23.
JavaScript - 약수 구하기 약수는 어떤수를 나누면 나머지 없이 딱 떨어지는 수이다. 예를 들어 4 / 2 = 2 ... 0 이므로 2는 4의 약수이다. 4 / 3 = 1 ... 1 이므로 3은 4의 약수가 아니다. javaScript 에서 약수인지 확인하기 위해서는, number % index === 0 의 조건에 부합해야 한다. (나머지가 0 이여야 하는 약수이기 때문이다.) 아래의 약수의 갯수를 구하는 함수이다. function getDivisorCount (num){ let count = 0; // 갯수 구할 값 초기화 for(let j=0; j < num + 1; j++){ // num 숫자만큼 반복문을 돌려주자 if(num % j === 0) { console.log(j); // 이 j index 가 num 의 약수가 된.. 2022. 10. 22.
JavaScript - 두 배열 비교해서 특정 값 찾기(splice, filter, includes) all 는 [ 0 - 9 까지의 숫자배열 ] 이고, part는 그 중 [ 몇몇 숫자만 들어있는 배열 ] 이다. 원래는 all 의 모든 숫자들을 가지고 있어야 되는데, 몇몇 녀석들이 도망가서 part 만 남았다. 도망간 녀석들이 (차집합) 누군지 찾고자 한다. 즉, 두배열을 비교해서 특정값을 찾아보려고 한다. 나는 두가지 풀이방식으로 풀어보았다. 아래에 필요한 배열들을 보자. [ 5랑 9 ] 가 집나갔으니 얘네만으로 이루어진 배열을 구할 것이다. // 0 - 9 까지의 숫자중 5, 9 가 없다. // [5,9] let all = [1,2,3,4,5,6,7,8,9,0]; let part = [1,2,3,4,6,7,8,0]; 1. 2중 포문과 splice를 이용한다. 2중 포문으로 검사한 뒤, all 값과 =.. 2022. 10. 18.
반응형

티스토리툴바