분류 전체보기

TIL - 2022.02.18 금요일

오늘 배운 것 1. 브라우저 저장소 브라우저 저장소에는 총 세 가지 종류가 있다. Cookie, LocalStorage, SessionStorage 종류 Cookie LocalStorage SessionStorage 비고 브라우저를 종료해도 데이터가 유지된다. 단, 만료 기한까지만 저장됨. 브라우저를 종료해도 데이터가 유지된다. 새로고침해도 데이터가 유지되지만, 브라우저를 종료하면 데이터가 사라진다. localStorage.getItem("key") // localStorage sessionStorage.getItem("key") // sessionStorage document.cookie // Cookie 세가지 저장소 모두 브라우저에 저장된 정보를 위와 같은 코드로 쉽게 읽어올 수 있다. 따라서 보안..

TIL - 2022.02.17 목요일

오늘 배운 것 1. 구조분해할당 (= 비구조화할당 / Destructure) 구조분해할당이란 객체나 배열을 단어 그대로 '분해'해서 사용할 수 있는 문법이다. ES6에 추가되었다. 간단한 예시를 통해 객체와 배열 두 가지 케이스의 구조분해할당을 살펴보자. 객체의 경우 const child = { name: "철수", age: 13, school: "다람쥐 초등학교" } // case1 const name = child.name const age = child.age const school = shild.school child라는 객체에서 원하는 값만 뽑아오고 싶을 때, child.name과 같은 문법으로도 해당 값을 뽑아올 수 있다. 하지만 이렇게 되면 객체에서 받아오고자 하는 데이터의 양이 많아질수록 ..

[HTML] HTML/CSS 관련 북마크

HTML / List & Table https://poiemaweb.com/html5-tag-list-table HTML5 Tag - List & Table | PoiemaWeb 목록(List)와 표(Table) 형식 표현을 위한 태그 순서없는 목록 (Unordered List) 순서있는 목록 (Ordered List) 중첩 목록 테이블 poiemaweb.com CSS / flex 연습 https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com CSS / Grid Layout https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout CSS 그..

TIL - 2022.02.16 수요일

오늘 배운 것 1. Apollo-Client의 여러가지 쿼리 방식 Apollo-Client의 useQuery는 페이지가 렌더링 될 때 data라는 고정된 형태로 데이터를 fetch해온다. 실행함수에 담아서 내가 원하는 시점에 Mutation을 요청할 수 있는 useMutation보다 훨씬 유연성이 떨어진다고 볼 수 있다. 이러한 점을 보완하기 위해 Apollo Client에서도 다양한 쿼리 방식을 지원하는데, 오늘은 그 중 두 가지를 배웠다. useQuery useLazyQuery useApolloClient 컴포넌트 열리면 바로 실행 원하는 시점에 실행 원하는 시점에 실행 useQuery를 내가 원하는 만큼 지연시키는 방식이다. (원하는 시점에 useQuery를 실행하는 것과 동일) 내가 원하는 시점에..

[VSCode] 프로젝트 작업자들에 동일한 vscode 설정을 강제하는 방법

VSCode 설정 강제 프로젝트 폴더 최상단에 .vscode라는 이름을 가진 폴더를 신규 생성한다. .vscode 안에 settings.json 파일을 만들어 넣는다. seetings.json 안에 VSCode 설정을 입력하면 해당 설정이 저장시마다 적용된다. 단, Visual Studio Code에서 그 폴더를 열었을 때에만 해당하는 설정으로, 다른 에디터 프로그램을 사용할 경우에는 적용되지 않는다.

[React] setState - prevState (prev 인자)

prevState setState를 이용해서 isOpen이라는 state값을 true/false로 바꾸는 함수를 구현해보자. // isOpen이라는 state를 true/false로 스위칭한다. const [ isOpen, setIsOpen ] = useState(false); const onClickButton = () => { if (isOpen === false) { setIsOpen(true) } else if (isOpen === true) { setIsOpen(false) } } setState의 prev라는 인자를 이용하면 이 코드를 더 간단하게 줄일 수 있다. const [ isOpen, setIsOpen ] = useState(false); const onClickButton = () =..

TIL - 2022.02.15 화요일

오늘 배운 것 1. Next.js의 렌더링 원리 (pre-rendering과 hydration) 로그인 권한분기를 실습하기 위해 브라우저를 새로고침해도 accessToken이 유지되도록 만들어야 했다. refreshToken은 바로 익히기 조금 어렵다고 해서, 브라우저의 localStorage에 accessToken을 임시방편으로 저장해두기로 결정. 그런데 막상 localStorage에 accessToken을 setItem 하려 하니 다음과 같은 에러가 발생했다. if (localStorage.getItem("accessToken")){ setAccessToken(localStorage.getItem("accessToken") || "") } Next.js의 diffing과 hydration때문에 발생하..

TIL - 2022.02.14 월요일

오늘 배운 것 1. 정규표현식 정규표현식을 배웠다. 이 부분은 별도의 메모가 필요할 것 같아서 따로 포스팅했다. https://guuumi.tistory.com/102 [Javascript] 정규표현식 기초 - 정규표현식 패턴 정규표현식이란? 정규표현식이란 특정 패턴의 문자열을 찾기 위한 표현 방식으로, 잘 이용하면 Javascript를 이용한 검증 과정을 보다 간단하게 만들 수 있다. 가장 간단하게 접근할 수 있는 test 메 guuumi.tistory.com 2. 글로벌 스테이트 / 로그인 인증(Authentication) 및 인가(Authorization) 로그인 인증 과정이 어떤 방식으로 발전해왔는지와 그러한 과정을 거쳐 정리된 현대적 로그인 인증 방법에 대해 배웠다. (샤딩을 이용하는 방식 / ..

[Algorithm] 유클리드 호제법

유클리드 호제법이란? 2개의 자연수의 최대공약수를 구할 수 있는 공식으로 명시적으로 기술된 가장 오래된 알고리즘이다. 호제법(互除法)이란 서로(互) 상대방 수를 나누어(除)서 결국 원하는 수를 얻어낸다는 의미이다. 정리 두 수 a, b가 있다고 가정해보자. (a > b) 큰 수(a)를 작은 수(b)로 나눴을 때 나머지 값이 0이 되면, 나눴던 수 중 작은 수(b)가 최대공약수가 된다. 0이 되지 않는다면 작은 수(b)가 큰 수가 되고, 나머지 값(c)이 작은 수가 된다. 작은 수(b)에 나머지 값(c)을 나누는 식으로 나머지가 0이 될 때까지 반복한다. 나머지가 0이 되면, 나누었던 두 수 중 작은 수가 최대공약수가 된다. Javascript 예시 문법 function solution(n, m) { le..

[Javascript] Array.reverse() - 배열 순서 반전

reverse() reverse() 메서드는 배열의 순서를 반전한 값을 반환한다. a.reverse() 사용 예시 const a = [1, 2, 3]; console.log(a); // [1, 2, 3] a.reverse(); console.log(a); // [3, 2, 1] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse Array.prototype.reverse() - JavaScript | MDN reverse() 메서드는 배열의 순서를 반전합니다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됩니다. developer.mozilla.org