Front-End Dev.
-
[CodeKata] 프로그래머스 : 3.16(화), JadenCase 문자열 & N개의 최소공배수카테고리 없음 2021. 3. 16. 10:15
🥋 Ooooth!! (Level 2) : JadenCase 문자열 만들기 🧮 풀이 function solution(s) { return s.split(" ") .map(e => e === '' ? e : e[0].toUpperCase() + e.slice(1).toLowerCase()) .join(" ") } 먼저, s(문자열)을 split을 통해 배열로 만들어준다. 이 배열의 각 요소를 map() 처리하는데, 빈 문자열('') 처리를 위해 위처럼 삼항연산자 형태로 적용했다. 빈 문자열이 아니라면, e의 첫 글자는 toUpperCase(), 나머지는 toLowerCase() 처리로 각각 대/소문자로 만든다. 마지막으로, 이를 다시 공백(" ")으로 join() 해서 문자열로 반환한다. 🥋 Ooooth!!..
-
[React.js] SyntheticEvent(합성 이벤트)Front-End(Web)/React - 프레임워크(React, Next) 2021. 3. 15. 06:44
프로젝트를 진행하며 마우스 이벤트를 정리한다는게... 이벤트 공부로 판이 커져버렸다 😀😀 React 공식문서는 지원 이벤트를 "합성 이벤트" 개념과 함께 소개했고, 합성 이벤트를 공부하던 차에 이벤트 핸들링과 연계는 필연적이었기 때문이다. 이번 포스팅은, e(합성 이벤트)에 대해 자세히 공부하고, React가 지원하는 이벤트 종류를 한번 훑어보고자 한다! * 포스팅 : React 이벤트 핸들링(abangpa1ace.tistory.com/128) 📒 합성 이벤트(SyntheticEvent) 란? SyntheticEvent는 객체로 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 Wrapper 객체이다. 대부분의 인터페이스는 브라우저 고유 이벤트와 같다. * 소프트웨어에서 래핑(Wrapping) 이란, 기..
-
[React.js] Event Handling(이벤트 처리)Front-End(Web)/React - 프레임워크(React, Next) 2021. 3. 15. 06:25
React에서 컴포넌트를 만들면서, 다양한 이벤트와 연계해야되는 경우가 많이 발생한다. (클릭, input change 등) 특히, 이번 3차 프로젝트를 하면서, Navbar 메뉴들의 마우스 오버가 바뀔때마다 표현되는 서브메뉴가 달라지도록 만들어야했고, 여기에 하강 애니메이션까지 추가되야했다. 이를 구현하기 위해, React의 mouse 이벤트 종류와 차이점을 제대로 공부하는 기회가 되었고, 이벤트에 관한 포스팅 필요성을 느꼈다. 📒 이벤트 처리하기 React 요소의 이벤트 핸들링은 DOM에 대한 이벤트 핸들링과 매우 유사하다. 하지만, 아래와 같은 차이점은 있다. 이벤트 명을 소문자가 아닌 cammelCase로 작성한다. onclick(x) => onClick(o) 이벤트 핸들러를 문자열이 아닌 함수로..
-
[CodeKata] 프로그래머스 : 3.13(토), 피보나치 수 & 행렬의 곱셈Algorithm 2021. 3. 13. 13:37
🥋 Ooooth!! (Level 2) 🧮 풀이 function solution(n) { let pre = 0; let cur = 1; let last = 0; for (let i = 2 ; i Array.from({ length: ansY }, y => 0))) for (let x = 0 ; x < ansX ; x++) { for (let y = 0 ; y < ansY ; y++) { for (let l = 0 ; l < ansLen ; l++) { answer[x][y] += arr1[x][l] * arr2[l][y] } } } return answer; } 중학교땐가... 배웠던 행렬의 곱셈의 기억을 더듬어보았다 ㅎㅎㅎㅎ 🤔 (4x2) * (2x4) 행렬의 곱셈을 예로 들면, 앞의 열과 뒤의 행의 길..
-
[CodeKata] 프로그래머스 : 3.12(금), 수식 최대화카테고리 없음 2021. 3. 12. 17:53
🥋 Ooooth!! (Level 2) 카카오답게 문제가 길지만 요점은 수식의 우선순위를 변경하면서 최대값을 구해야한다는 것이다. 우선순위도 기본 사칙연산과 달리 동등할 필요가 없다. 즉, + / - / * 세 연산자의 1,2,3 순위를 돌린 최대 6가지 케이스를 비교하면 된다. 🧮 풀이 function combination(arr, num) { let result = []; if(num == 1) return arr.map(e => [e]); arr.forEach((e,i,array) => { let rest = [...array.slice(0,i), ...array.slice(i+1)]; let combinations = combination(rest,num-1); let combiArr = combi..
-
[Javascript] 객체의 복사 (깊은 복사, 얕은 복사)Front-End(Web)/Javascript 2021. 3. 12. 17:43
🤔 서론 알고리즘을 풀거나, 웹페이지에서 배열상태를 최신화할때 경험했던 일이다. "나는 사본을 수정했는데, 왜 원본도 같이 바뀌지???" 자바스크립트에서 배열이나 객체를 복사하는데 다양한 방법이 있으며, 이들은 조금씩 다른 원리를 가지고 있던 것이다! 📒 복사 복사는 원본가 모두 같은 내용으로 사본을 만드는 작업이다. 원본과 사본이 각각 존재하며, 이들의 관계에 따라 복사종류를 구분할 수 있다. - 얕은 복사 사본을 만들어내지 않고 원본을 참조하도록 소위 "복사한 척" 을 하는 것이다. 1. 참조 할당 const arr1 = [1,2]; const arr2 = arr1; arr2[0] = 3; console.log(arr1[0], arr2[0]);// 3 3 가장 기본적인 형태이다. arr2 변수에 ar..
-
[CodeKata] 프로그래머스 : 3.11(목), 최대값과 최소값 & 최소값 만들기Algorithm 2021. 3. 11. 14:04
🥋 Ooooth!! (Level 2) 🧮 풀이 function solution(s) { const sortS = s.split(" ").map(e => Number(e)).sort(((a,b) => a-b)) return `${sortS[0]} ${sortS[sortS.length-1]}` } sortS는 s를 배열로 split() 한 뒤, 오름차순으로 정렬한 형태이다. 정렬을 위해, Number로 변환하는 과정이 필요하다. 최소값(0번 인덱스), 최대값(마지막 인덱스) 을 Templates Literal 문자열로 반환했다. 🥋 Ooooth!! (Level 2) 🧮 풀이 A, B 배열 요소들 곱의 누적합이 최소가 되려면, 모든 곱의 경우에서 최소값을 도출해야 한다고 생각했다. 가령, B에서 가장 큰 값인..
-
[React.js] Custom Hooks (Rules of Hooks)Front-End(Web)/React - 프레임워크(React, Next) 2021. 3. 11. 05:09
이전에, 미니 프로젝트나 다른 함수형 코드들을 참고하다보면, useOOOO 형태의 몰랐던 Hooks 들이 가끔 보일 때가 있다. 이는, React에서 제공하는 Hooks API가 아닌, 개발자가 임의로 만든 Custom Hook 이라는 사실을 알게 되었다. 이 Custom Hook 의 개념과 의의(주는 반복의 최소화), 각종 사례를 공부하고, 3차 프로젝트가 스프린트보다 빨리 끝나게 되어 일부 반복기능을 커스텀 훅으로 수정해보려고 한다! 📒 Custom Hooks 소개 - Custom Hooks 를 왜 사용하는가? React의 Hooks 개념은 16.8버전(2019년 초) 에서 새로 추가되었다. 함수형 컴포넌트가 클래스형을 대체하도록 많은 기능을 지원하기 위해 등장했으며 아래와 같은 장점들을 뽐내며 소위..