본문 바로가기

JavaScript34

[JavaScript] 클린 코드 요약 1️⃣ 변수(Variables) - 의미있고 발음하기 쉬운 변수 이름을 사용 - 동일한 유형의 변수에 동일한 어휘를 사용 - 검색가능한 이름을 사용 - 의도를 나타내는 변수들을 사용 2️⃣ 함수(Functions) - 함수 인자는 2개 이하가 이상적 (대부분 1개면 충분) - 1개의 함수, 1개의 행동 ⭐️ - 함수명은 함수가 무엇을 하는지 알 수 있어야 함 - 함수는 단일 행동을 추상화 - 중복된 코드를 작성하지 말 것 - Object.assign을 사용해 기본 객체를 만들 것 - 매개변수로 플래그를 사용하지 말 것 - 사이드 이펙트를 피할 것 (변수, 함수 역할 분리) - 전역함수 말 것 (prototype 연결 -> class 상속) - 명령형 -> 함수형 프로그래밍 - 조건문은 캡슐화 - 부정조.. 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.. 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을 해보면 꽤 유명한 .. 2022. 11. 28.
[JavaScript] ES6 알아야 할 기능 노션으로 정리해두었다. 이런 저런 자료 찾아보면서 나도 자세히 이해하느라 3일 정도 소요되었던 것 같다. 이미 알고 있던 기능도 있고, 트렌드의 변화도 함께 알아야 했던 것들도 있었다. JS는 정말 급변하고 있다... 7.ES6 업그레이드 기능 + promise await async 등 ES6 업그레이드 기능 seeik.notion.site 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. 정수 숫자와 정수 대상의 배열이 주어지면 두 숫자의 인덱스를 반환하여 대상에 더합니다. 각 입력에 정확히 하나의 솔루션이 있다고 가정하고 동일한 요소를 두 번 사용할 수 없습니다. 답변은 어떤 순서로든 반환할 수 있습니다. .. 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한 모듈을 인식.. 2022. 1. 6.