자바스크립트

개발관련/자바스크립트 팁

[React] Hoc와 render 속성 값 비교

Hoc vs Render 속성 값 컴포넌트에 공통적으로 사용되는 로직을 재사용 가능하도록 구현하는 방법에는 Hoc 와 Prop render 를 사용하는 2가지 방법이 있다. 1. 컴포넌트 내부 일부에서 적용하는 경우 HOC 현재 컴포넌트의 전체에 적용 //HOC //로그인시에만 렌더링하는 HOC const WithIsLogin = WrappedComponent => class WithIsLogin extends Component { state = { isLogin : false } checkIsLogin = ()=> { /***/ } componentDidMount(){ this.setState({ isLogin : this.checkIsLogin() }) } render(){ if(this.state...

개발관련/자바스크립트 팁

자바스크립트로 색상값 명도 채도 변경 하기 how to change color's bright with javascript

업무상 자바스크립트로 특정 색을 선택하면 비슷한 채도나 명도의 색을 자동으로 지정해주는 기능이 필요했다 예를 들면 블로그 테마 메인 컬러를 선택하면 더 밝은 컬러 더 어두운 컬러를 자동으로 지정해준다. tinycolor2 tinycolor2 Fast Color Parsing and Manipulation www.npmjs.com GitHub - bgrins/TinyColor: Fast, small color manipulation and conversion for JavaScript GitHub - bgrins/TinyColor: Fast, small color manipulation and conversion for JavaScript Fast, small color manipulation and co..

개발관련/자바스크립트 팁

실무에서 값을 할당 할때 많이 사용하는 자바스크립트 연산자

or 연산자 ( || ) const detaultValue = param || "value"param 변수에 falsy 값 ("" , null, undefined) 등 값이 들어올 경우 기본값을 주기 위해 사용한다. 널 병합 연산자 ( ?? ) const foo = null ?? 'default string'; console.log(foo); // expected output: "default string" const baz = 0 ?? 42; console.log(baz); // expected output: 0바로 위의 or 연산자의 경우 0,"" 가 모두 falsy 값이기 때문에 null,undefined 와 0,"" 를 구분할수 없다. 이를 구분 해주기 위한 연산자 이다. and 연..

개발관련

[프로그래머스] 소수 구하기 (JavaScript)

문제 출처 문제 요약 1부터 입력받은 숫자 n 사이에 있는 소수의 개수를 반환하는 함수, solution을 만들어 보세요. 소수는 1과 자기 자신으로만 나누어 지는 수를 의미합니다.(1은 소수가 아닙니다.) 문제 풀이 1번째 function solution(n) { let count = 0; for (let i = 2; i

개발관련/자바스크립트 팁

[JavaScript] String Code 관련

charCodeAt UTF - 16 값을 반환한다. const str = 'ABCD'; str.charCodeAt(0)//65 str.charCodeAt(1)//66 str.charCodeAt(2)//67 str.charCodeAt(3)//68 str.charCodeAt(4)//NaN str.charCodeAt(index) 반환값 주어진 인덱스 대한 문자에 대한 UTF-16 코드를 나타내는 숫자 범위 밖으로 넘어갔을 경우 [NaN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN) codePointAt 해당하는 Unicode 값을 반환한다. const str = 'ABCD'; str.codePointAt(0..

개발관련/매일 코딩 테스트 챌린지

[프로그래머스] 시저 암호 (JavaScript)

문제 출처 코딩테스트 연습 - 시저 암호 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 AB는 1만큼 밀면 BC가 되고, 3만큼 밀면 DE가 됩니다. z는 1만큼 밀면 a가 programmers.co.kr 문제 요약 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 AB는 1만큼 밀면 BC가 되고, 3만큼 밀면 DE가 됩니다. z는 1만큼 밀면 a가 됩니다. 문자열 s와 거리 n을 입력받아 s를 n만큼 민 암호문을 만드는 함수, solution을 완성해 보세요. 문제 풀이 function solution(s, n) { return s.split("").map((c..

개발관련/자바스크립트 팁

자바스크립트 정렬 팁

매번 정렬 할때 마다 헷갈려서 외우기 편하게 정리 해봅니다. 오름 차순 갈수록 커짐 1 → 2 → 3 → 4 a → b → c → d ㄱ → ㄴ → ㄷ 내림 차순 갈수록 작아짐 4 → 3 → 2 → 1 d → c → b → a ㄷ → ㄴ → ㄱ Array.sort() 기본 문자열 정렬 기준 유니코드 오름 차순 const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(array1); // expected output: Array [1, 100000, 21, 30, 4] 함수식 Array.sort((a, b) { if (a 가 먼저 나온다) { // 0 보다 작은 수 return -1; } if (b 가 먼저 나온다) { // 0 보다 큰수 ret..

개발관련/매일 코딩 테스트 챌린지

[프로그래머스] 문자열 내림차순으로 배치하기

문자열 내림차순으로 배치하기 출처 문제 요약 문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요.s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로 간주합니다. 문제 풀이 1번째 const solution = (s) => { if (s.length === 1) return s; return s .split("") .sort((a, b) => { if (a === a.toUpperCase() && b != b.toUpperCase()) return 1; if (b === b.toUpperCase() && a != a.toUpperCase()) return -1; return a.localeCompare(b) }) .j..

개발자 Dane
'자바스크립트' 태그의 글 목록