hwlink

✅ 자동반사적 npx create-react-app 나는 리액트를 처음 시작했을 때 빠르게 배우기 위해서 자바스크립트 기초만 익힌 상태로 npx create-react-app를 터미널에 입력 후 공식문서와 강의 등을 보고 바로 설계를 시작하였다. (실제로 공식문서에서도 처음 리액트를 접한다면 설계구조에 대하여 5분이상 투자하지말라 하였다.) 하지만 이제는 혼자가 아닌 많은 팀원들과 작은 다양한 프로젝트를 진행해보면서 처음에 제대로된 설계 없이 진행해보니 나중엔 팀원끼리 서로 다른 설계구조로 작성하여 어떤식으로 유지 보수해야할지 감도 안잡히고 유지보수를 하게 된다면 많은 코스트가 발생하였다. 이러한 맥락에서 프로젝트 초기에 어떤 패턴으로 리액트를 설계할 것 인지에 대한 중요성이 커지게 되었고, 해당 글에서..

Coding/React 2022. 2. 20. 23:34

📌 호이스팅 JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. -MDN 호이스팅을 이해 하기 전에 먼저 변수의 유효범위(block scope) 에 대해서 알아야 합니다. 1. 변수 유효범위 프로그램에서 어떤 변수가 정의되어 있는 영역 자바스크립트 변수 유효범위는 변수를 어디에서 접근 할 수 있는지를 가리킵니다. 전역변수는 자바스크립트 코드 전체에 걸쳐 접근 가능하며, 어떤 함수 안에서 선언된 변수는 오직 해당 함수 몸체 안에서만 접근 가능합니다. 함..

Coding/JS 2022. 2. 20. 00:53

레포내에 특정 폴더만 클론 받을 상황. 레포구조 Project_Intiallize_Template //repo ㄴ test1 //폴더 ㄴ test2 //폴더 ㄴ cra-ts-redux //폴더 ㄴ src ㄴ pages ㄴ modules ㄴ public ㄴ .prettierrc ㄴ ... 목표: cra-ts-redux 만 클론받을것이다. 1. clone 할 로컬 저장소 폴더를 만들고 2. git init 해준다. 3. git init my-proj cd my-proj 4. sparse Checkout 이 가능하도록 설정한다. (. sparse checkout은 저장소에서 특정 디렉토리나 파일만 보이도록 체크아웃하는 기능) 5. git config core.sparseCheckout true 6. 저장소 r..

Git 2022. 2. 13. 19:44

I로마 숫자는 , V, X, L, C, D의 7가지 기호로 표시됩니다 Symbol Value I 1 V 5 X 10 L 50 C 100 D 500 M 1000 예를 들어, 로마 숫자로 쓰는데 둘만 더하면 됩니다 2. 는 로 작성됩니다 . 숫자 는 , 즉 로 기록됩니다 .II12XIIX + II27XXVIIXX + V + II 로마 숫자는 일반적으로 왼쪽에서 오른쪽으로 큰 것에서 작은 것 순으로 표기합니다. 그러나 4의 숫자는 가 아닙니다 IIII. 대신 숫자 4는 로 기록됩니다 IV. 1은 5보다 앞에 있기 때문에 빼서 4가 됩니다. 로 쓰여진 숫자 9에도 동일한 원칙이 적용됩니다 IX. 빼기가 사용되는 6가지 경우가 있습니다. IV(5)와 (10) 앞에 배치 X하여 4와 9를 만들 수 있습니다. XL(..

Coding/알고리즘 2022. 2. 6. 17:41

CRA, TypeScript 기준으로 작성된 글임을 참고해주길 바랍니다, 프로젝트가 커짐에 따라 상대경로로 프로젝트를 진행하게 되면 import 상대경로가 ../../../ 너무 더러워지고 많은 코스트가 발생하기 때문에 절대경로로 설정해주는 것이 이롭다. 해당 글에서는 Crago로 절대경로를 설정하였다. Crago? Craco는 Create React App Configuration Override의 약자로, Create-React-App 즉 CRA를 쉽게 설정하기 위해 만들어졌다. 1. Crago Module, Crago alias 설치 yarn add @craco/craco yarn add --dev craco-alias //or npm install @craco/craco --save npm ins..

Coding/TypeScript 2022. 2. 1. 23:48

npm 설치 시 npm ERR! code ERESOLVE 발생. 종속성 충돌이 발생했으니 아래방법대로 조치를 하라고 터미널 안내에 상세하게 나와있다. 뒤에 --legacy-peer-deps 붙여준다. npm intall {본인이 설치하는 패키지} --legacy-peer-deps

Coding/Error 2022. 2. 1. 20:31

문자열 배열 중에서 가장 긴 공통 접두사 문자열을 찾는 함수를 작성하십시오. 공통 접두사가 없으면 빈 문자열을 반환합니다 "". 접두사: 영어에서 접두사(prefix)는 단어 맨 앞에 결합되어 본래 의미와 다른 의미를 나타낼 수 있게 하는 접사(affix)다. ex: proceed, prospect, produce 여기서 접두사 pro '앞을 향해', '앞쪽으로' 를 뜻한다. Example 1: Input: strs = ["flower","flow","flight"] Output: "fl" Example 2: Input: strs = ["dog","racecar","car"] Output: "" Explanation: There is no common prefix among the input string..

Coding/알고리즘 2022. 1. 30. 02:15

editor에서 코드 작성 후 터미널 명령어를 칠 때마다 마우스로 이동하는게 너무 불필요하다고 생각하여 단축키를 생성했다. 적용하니 너무빠르고 흐름이 안끊긴다..! 1. VS Code켜준다. 2. cmd+shift+p 3. >preferences:open keyboard shortcut 입력 4. keybinding.json 으로 열기 하단내용 복붙 (여기에서는 에디터에서 터미널 커서이동 단축키 설정을 cmd+; 로 하였다. 기본 단축키와 겹치지 않게 취향에 맞게 하면 될 듯 하다.) // Place your key bindings in this file to override the defaults [ { "key": "cmd+;", "command": "terminal.focus", "when": "e..

마우스버리기 2022. 1. 23. 16:35