JavaScript34

• 

  [JavaScript] 클린 코드 요약 1️⃣ 변수(Variables) - 의미있고 발음하기 쉬운 변수 이름을 사용 - 동일한 유형의 변수에 동일한 어휘를 사용 - 검색가능한 이름을 사용 - 의도를 나타내는 변수들을 사용 2️⃣ 함수(Functions) - 함수 인자는 2개 이하가 이상적 (대부분 1개면 충분) - 1개의 함수, 1개의 행동 ⭐️ - 함수명은 함수가 무엇을 하는지 알 수 있어야 함 - 함수는 단일 행동을 추상화 - 중복된 코드를 작성하지 말 것 - Object.assign을 사용해 기본 객체를 만들 것 - 매개변수로 플래그를 사용하지 말 것 - 사이드 이펙트를 피할 것 (변수, 함수 역할 분리) - 전역함수 말 것 (prototype 연결 -> class 상속) - 명령형 -> 함수형 프로그래밍 - 조건문은 캡슐화 - 부정조.. Javascript/Basic 2023. 12. 2.

• 

  [React / Router] React Router V6 Guide (Basic) - 부제 : v6 변경점 *참고로 아래 목록은 모두 Function이다. { } 로 불러오는 것 보면 알 수 있다. 0. Router는 props로 꽤 많은 기능을 포함하고 있는 것을 알 수 있다. Router 컴포넌트는 기본적으로 리액트의 context provider 기능을 포함시키고 있다. 그래서 routing 정보를 대부분의 자식 요소와 공유하게 된다. declare function Router( props: RouterProps ): React.ReactElement | null; interface RouterProps { basename?: string; children?: React.ReactNode; location: Partial | string; navigationType?: NavigationType; nav.. React & Library/Router 2022. 12. 5.

• 

  [React / TypeScript] styled-components와 함께 사용하는 TypeScript에 대한 고찰 (feat.react) 0. 설치간 오류 JS로 만들어진 패키지, TS type이 정의된 패키지를 모두 설치해야 TS에서 인식할 수 있다. 어찌보면.. 당연. 패키지의 타입을 정의해서 가져다 줘야 해석을 하던가 말던가 하지.. 보통 이런 것들은 @types/~패키지명 으로 정의되어 있음. @types/~* 라고 정의되어 있는 경우, 모두 type 정의한 옵션 패키지 구나 정도로 생각하면 된다. 만약 @types/~패키지명을 설치 안하면 다음과 같이 display된다. Module not found: Error: Can't resolve 'styled-components' 패키지명은 예시 tip. 만약 본인이 패키지를 설치했는데 type이 없는 패키지일 경우, @types/설치한 패키지명 으로 install을 해보면 꽤 유명한 .. React & TypeScript/React 2022. 11. 28.

• 

  [JavaScript] ES6 알아야 할 기능 노션으로 정리해두었다. 이런 저런 자료 찾아보면서 나도 자세히 이해하느라 3일 정도 소요되었던 것 같다. 이미 알고 있던 기능도 있고, 트렌드의 변화도 함께 알아야 했던 것들도 있었다. JS는 정말 급변하고 있다... 7.ES6 업그레이드 기능 + promise await async 등 ES6 업그레이드 기능 seeik.notion.site Javascript/Basic 2022. 6. 15.

• 

  [코딩테스트/배열] Two Sum by LeetCode 문제 Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target. You may assume that each input would have exactly one solution, and you may not use the same element twice. You can return the answer in any order. 정수 숫자와 정수 대상의 배열이 주어지면 두 숫자의 인덱스를 반환하여 대상에 더합니다. 각 입력에 정확히 하나의 솔루션이 있다고 가정하고 동일한 요소를 두 번 사용할 수 없습니다. 답변은 어떤 순서로든 반환할 수 있습니다. .. Javascript/Basic 2022. 3. 12.

• 

  [javascript/basic] import / export 구문과 코딩 스타일 짧은 정리 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com import 하는 방식이 너무 여러가지여서, 솔직히 좀 헷갈릴 때가 많았다. App Component export from 이후에 있는 R004_LifecycleEx 부분은 R004_LifecycleEx Component 에서 export한 식별자를 적은 것이다. R004_LifecycleEx.js 라는 파일명과는 무관하다. 사실 파일명을 써도 무관하다. 왜냐하면, 파일명을 써도 파일내부에서 export한 모듈을 인식.. Javascript/Basic 2022. 1. 6.

• 

  [코딩테스트/해시] 위장 by Programmers 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 문제 설명 스파이들은 매일 다른 옷을 조합하여 입어 자신을 위장합니다. 예를 들어 스파이가 가진 옷이 아래와 같고 오늘 스파이가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야 합니다. 종류 / 이름 얼굴 동그란 안경, 검정 선글라스 상의 파란색 티셔츠 하의 청바지 겉옷 긴 코트 스파이가 가진 의상들이 담긴 2차원 배열 clothes가.. Javascript 2021. 11. 12.

• 

  [코딩테스트/정렬] H-index by Programmers 문제 설명 H-Index는 과학자의 생산성과 영향력을 나타내는 지표입니다. 어느 과학자의 H-Index를 나타내는 값인 h를 구하려고 합니다. 위키백과1에 따르면, H-Index는 다음과 같이 구합니다. 어떤 과학자가 발표한 논문 n편 중, h번 이상 인용된 논문이 h편 이상이고 나머지 논문이 h번 이하 인용되었다면 h의 최댓값이 이 과학자의 H-Index입니다. 어떤 과학자가 발표한 논문의 인용 횟수를 담은 배열 citations가 매개변수로 주어질 때, 이 과학자의 H-Index를 return 하도록 solution 함수를 작성해주세요. 제한사항 과학자가 발표한 논문의 수는 1편 이상 1,000편 이하입니다. 논문별 인용 횟수는 0회 이상 10,000회 이하입니다. 입출력 예 citations / r.. Javascript 2021. 11. 4.

• 

  [코딩테스트/정렬] 가장 큰 수 by Programmers 문제 설명 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다. 0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치하여 만들 수 있는 가장 큰 수를 문자열로 바꾸어 return 하도록 solution 함수를 작성해주세요. 제한 사항 numbers의 길이는 1 이상 100,000 이하입니다. numbers의 원소는 0 이상 1,000 이하입니다. 정답이 너무 클 수 있으니 문자열로 바꾸어 return 합니다. 입출력 예 numbers / return [6, 10.. Javascript 2021. 11. 3.

• 

  [코딩테스트] 주로 사용하는 원리 정리 테스트 케이스는 통과했는데, 채점에서 실패할 경우... 제한 사항을 꼼꼼히 읽어볼 것. (테스트 케이스에는 없었을 수도 있다) Array 1. array의 범위를 추출해야할 때 Filter를 사용한다. const array = [0,1,2,3,4,5]; const newArray = array .filter((value, fIndex) => fIndex >= 2 - 1 && fIndex a - b); // 오름차순, 내림차순은 b-a // return [1,2,3] ...to be countinue Javascript 2021. 10. 28.

• [코딩테스트/해시] 완주하지 못한 선수 by Programmers 보호되어 있는 글 입니다. 2021. 10. 26.

• 

  [코딩테스트/완전탐색] 모의고사 by Programmers 문제 설명 수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다. 1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ... 2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, ... 3번 수포자가 찍는 방식: 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, ... 1번 문제부터 마지막 문제까지의 정답이 순서대로 들은 배열 answers가 주어졌을 때, 가장 많은 문제를 맞힌 사람이 누구인지 배열에 담아 return 하도록 solution 함수를 작.. Javascript 2021. 10. 26.