Jaddong's Lab

소스트리로 여러 프로젝트는 열 때마다 새로운 창이 떠서 왔다 갔다 하기 불편할 할 때가 있다. 한 창에 여러 프로젝트는 탭으로 스위치할 수 있도록 하는 방법이 있다. 시스템 환경설정 -> 일반 -> 문서를 열 때 탭에서 열기 "항상" 으로 변경 설정을 완료하면 아래와 같이 탭으로 쉽게 프로젝트를 바꿔가며 할 수 있다.

빅오 표기법 시간복잡도 : 컴퓨터가 계산하는 횟수 공간복잡도 : 변수가 차지하는 공간 빅오표기법을 활용한 여러 알고리즘을 공부해야하는 이유 -> 목적 : 결과만 같으면 되는가? 아니, 같은 문제에 대해 1시간이 걸릴수도 있고 30분이 걸릴 수도 있다. 이 점에 집중한다. 빅오를 이해하면 비효율적인 코드를 찾는 데 도움이 된다. 좋은 코드는 빨라야하고, 메모리 사용이 적어야하고, 읽기 좋아야한다. 1. 속도는 (시간복잡성) -> 기기 사양에 따라 다를 수있다. 같은 머신이어도 다른 시간이 걸릴 수 있다. 코드 시간만 측정하는 건 좋지 않다. -> 컴퓨터가 해야하는 연산의 갯수가 중요하다? 2n 이든 5n+2든 정확한 숫자와는 사실 상관이 없다. 전체적인 추세가 중요하다. 2. 메모리 사용은? (공간복잡성)..

폰트 확장자 opentype : IE6-IE8 woff2 : woff보다 더 나은 압축 (IE를 제외한 모든 브라우저에서 사용) woff : W3C 권장 사항 (IE 에서 가능) ttf/otf: 모두에서 가장 일반적인 글꼴 형식 폰트 적용 방법 cdn보단 local에서 폰트 파일을 사용하는 것이 렌더 속도를 빠르다. ✔ 초기화 css 파일에 적용 @font-face { font-family: 'SpoqaHanSansNeo'; font-style: normal; font-weight: 300; src: url("../src/fonts/SpoqaHanSansNeo-Light.woff2") format('woff2'), url("../src/fonts/SpoqaHanSansNeo-Light.woff") for..

1. The imports statements : React Import Structure(RIS) import를 사용하여 파일과 모듈을 가져올 수 있습니다 . 대부분의 경우, 특히 대규모 프로젝트로 작업할 때 더 나은 가독성과 리팩토링을 위해 절대 가져오기 를 설정하고 사용하는 것이 좋습니다. 방법 참고링크 : https://bgradecoding.tistory.com/14 Bad example // Note: A not-so-good example for unorganized & relative imports import React from 'react'; import Alert from '@material-ui/lab/Alert'; import GoogleMap from '../../../compo..

갑자기 재택을 하게 되어서 회사 노트북은 아닌 개인 노트북으로 작업을 하게되었다. git 계정 변경하고 노드 버전 nvm 설치하고 오전을 거의 셋팅하는데 시간을 쓴 듯 싶었다. 그런데 clone을 잘하고 나서도 vscode에 빨간줄이 쫘아악나는 걸 볼 수 있었다. 오류는 아니고 typescript버전에 따른 문제였다. F1을 눌러 typescript 입력 TypeScript : Select TypeScript Version...을 클릭한다. 보면 Use VS Code's Version 이 선택되어 있음을 알 수 있다. 요걸 아래에 있는 Use Workspace Version 을 클릭하여 바꿔준다. node_modules 맞춘다는 뜻이다. 그러면 빨간줄이 모두 없어진다! .vscode파일 내에 있는 .se..

React에서 제공하는 Hook들 보통 많이 쓰이는 useEffect, useCallback 같은 것들은 이미 리액트에서 재공해주는 훅이고, 커스컴 훅은 말그대로 use{블라블라} 형태로 내가 만들고 싶은 훅을 만드는 것이다. 그냥 보통 쇼핑몰 사이트만 생각했을 때, 회원가입, 로그인, 문의사항 폼이 있다고 생각해보자. 각 폼에만 해도 아이디, 이메일, 비밀번호, 내용 등의 input들이 있을 것이고 각각을 구성할 수 도 있지만, 리액트의 기본인 컴포넌트로 재사용성을 높힌 것 처럼 커스텀훅을 사용하여 공통적인 것들은 따로 분리하고 가능한 재사용할 수 있도록 하여 로직을 최소화할 수 있다는 장점이 있다. 내가 커스텀훅을 써본 적이 없다고 생각을 했는데, 생각보니 전에서 썼던 react-hook-form 이..

그냥 얼마전에 링크드인 둘러보다가 알게 된 :is 선택자! CSS4에 추가된 사항으로 코드를 상당 부분 줄일 수 있고 가독성에도 큰 효과를 보지 않을까 싶다....! 와웅,,,, CSS는 무궁무진 계속 성장중! 물론 익스플로어에서는 안된다ㅋ 밑에 codesandbox를 간단히 확인해볼 수 있게 만들었다 :) CSS4 에 추가된 내용이고 아래에 자세한 설명은 볼 수 있다. :where 선택자도 비슷한데, 우선순위에 있어서 차이가 있는 것 같다. https://www.w3.org/TR/selectors-4/#matches-pseudo Selectors Level 4 www.w3.org

비동기 키워드 알아보기 아래 코드는 정상적으로 Hello를 출력한다. hello 함수 앞에 async를 붙이면 어떤 결과가 나올까? function hello() { return "Hello" }; hello(); // 결과 : Hello 간단히 브라우저 콘솔창에서 실행해보면 아래와 같은 결과를 볼 수 있다. 고로 async 기능의 특징 중 하나로 async 키워드를 사용하면 Promise 객체가 반환된다는 걸 알 수 있다. 그럼 이렇게 되는 경우, 첫번째 코드처럼 "Hello"를 찍히게 하려면 어떻게 해야할까 async function hello() { return "Hello" }; hello(); 아래와 같이 Promise의 결과를 then을 통해 가져올 수 있다. async function hel..

데이터의 기본적인 처리기능인 CRUD(Create, Read, Update, Delete)기준으로 만들어봤다! 정답은 없고, 그냥 개인적으로 고민될 때 참고하면 좋을 것 같아서 작성했다. 1. 보여주기 - 읽기 showName() displayName() renderName() paintName() readName() 2. 입력하기 - 생성 createName() registerName() addName() 3. 수정하기 - 갱신 updateName() modifyName() changeName() editName() 4. 삭제하기 - 삭제 deleteName() removeName() destroyName() 5. 단순 확인용 findName() checkName() isName()

var는 함수 레벨 스코프(Function-level scope) 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다. let과 const는 블록 레벨 스코프(Block-level scope) 모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다. 1. var 아래와 같이 블록 내에 선언해도 foo는 전역변수여서 값이 재할당된다. var foo = 123; // 전역 변수 console.log(foo)..