써니스크립트 글쓰기

OAuth (Open Authorization)란?보안 위임 엑세스 개방형 표준.사용자가 비밀번호를 제공하지 않고도 로그인 할 수 있도록,웹사이트나 애플리케이션이 다른 웹사이트에 있는 자신의 정보에 대해 접근할 수 있는 권한을 부여할때 사용되는 표준. 구글, 카카오, 네이버 등의 소셜로그인도 이 OAuth 2.0 프로토콜의 설계 원칙을 따라 설계되어 있다.OAuth2.0 인증방식에 4가지 종류가 있지만 인가 코드 승인 방식(Authorization Code Grant)이 가장 기본으로 쓰이고 있다. 프로젝트에서 카카오 로그인을 사용했기 때문에 카카오 로그인 과정을 정리해보았다. https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#reques..

리액트는 state의 초기값을 컴포넌트 마운트 단계에서 첫 렌더링때에만 한번 저장하고 다음 렌더링에는 무시한다.이후 리렌더링에서는 이 초기값을 무시하고 React가 내부적으로 관리하고 있는 최신 state 값을 사용한다. 그래서 특정 값을 반환하는 함수로 초기값을 설정해도 리렌더링때는 그 함수의 값이 반영되지 않는다.하지만 값이 무시될 뿐 함수의 호출은 매번 이루어지기 때문에 무의미한 계산 수행이 이루어지는 결과를 초래한다. function createInitialTodos() { const initialTodos = []; for (let i = 0; i 그래서 초기화함수 또는 게으른초기화(Lazy Initialization)의 형태로 초기값을 전달하는 방법이 있다.함수 실행 결과를 반환하는게 아..

vue 프로젝트를 생성하는데 갑자기 명령어가 이전과 묘하게 다르다는 생각이 들었다.공식문서에도 두가지 버전이 있고 vue강의에서 나오는 명령어도 다르고 예전에 내가 봤던 강의를 되찾아봐도 또 다른 명령어로프로젝트를 생성하고 있었다. 전에 vue 공부를 처음 시작할때는 webpack이 사용되었던 것 같은데요즘 생성하는 프로젝트에는 vite를 사용한 프로젝트가 생성되길래 명령어의 차이인가 해서 이번 기회에 프로젝트 생성 명령어 차이를 알아봤다. 우선 현재 기준 공식문서에는 npm create vue, npm init vue 로 프로젝트를 설치하라고 안내되어있다.  npm 공식문서를 보면 init 명령어의 별칭(alias)이 create, innit 이라고 나와있어 같은 명령어임을 명시하고 있다.또한 npx ..

웹브라우저는 HTML, CSS, Javascript를 해석해서 화면에 그려준다. (HTML, CSS는 브라우저의 렌더링 엔진으로, Javascript는 브라우저의 자바스크립트 엔진(ex.V8)을 사용해서 처리한다) 이때 브라우저가 자바스크립트를 읽어오는 방식때문에 비동기처리라는 특이점이 생겼다. 자바스크립트는 원래 싱글스레드 언어이다 자바스크립트 코드를 해석하고 실행하는 자바스크립트 엔진은 하나의 힙(Memory Heap)과 하나의 스택(Call Stack)을 가지고 있다. 이 요소들로 자바스크립트 코드를 어떻게 실행하는가? 1) 콜스택에 코드가 쌓인다(메모리힙에는 변수,함수 등이 저장되면서 메모리 할당이 이루어진다) 2) 스택구조 쌓인 코드들이 순차적으로 실행되기 때문에 하나의 코드가 처리된 후에 다음..

태그는 입력된 데이터를 서버에 전송해 주는 역할을 한다. 을 통해 사용자로부터 입력받은 값들은 submit이벤트가 발생되면 정의된 방식(method)으로 목적지(action)에 전송된다. 주로 로그인, 회원가입, 게시판 작성 등을 만들때 사용된다. 태그 속성 폼 태그는 입력양식 전체를 묶어주는 태그이다. 전체적인 폼데이터에 대한 속성을 지정할 수 있다. action ="" 데이터를 보낼 서버 페이지 주소, 유효한 url이여야 form이 동작한다. method ="get | post" 데이터 전송 방식 - get (기본값): URL에 폼데이터를 추가하여 전달. 256~4096 byte까지만 전송 가능(보통 쿼리 문자열(query string)에 포함되기 때문) 브라우저에 의해 캐시되어 저장. (보안상 취약..

만날 때마다 까먹어서 찾아보는 특정요소 개수 구하기!! arr = ['b', 'a', 'n', 'a', 'n', 'a', 'a', 'p', 'p', 'l', 'e'] 에서 'a' 가 몇개 있는지 구하기 1. reduce() arr.reduce((acc,cur) => acc + (cur==='a'), 0) // 4 각 요소를 순회하는 현재 cur이 'a'이면 true(1), 'a'가 아니면 false(0) 이므로, 같은 요소를 찾을 때마다 누적값인 acc에 1이 더해진다. 두번째 인자 초기값 0 필수! 2. filter() arr.filter(ele => ele==='a') // ['a', 'a', 'a', 'a'] arr.filter(ele => ele==='a').length // 4 각 요소를 순회하..

* yarn berry3 으로 React + typscript 프로젝트 세팅하기 -> https://sunnyscript.tistory.com/183 (공통) ESLint와 prettier는 개발시에만 필요하므로 devDependencies으로 추가한다. yarn add -D 또는 --dev --- npm install -D 또는 --save-dev 1. ESLint 모듈설치 1) Typescript eslint 추가 (CRA로 설치 시, 기본적으로 eslint는 추가되어있다.) yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser --- npm install -D eslint @typescript-eslint/esli..

이메일 검사 1. @앞에 영어 대소문자가 필수로 들어가야함 2. @앞에 대소문자+숫자 또는 대소문자+특수문자(-_.) 또는 대소문자+숫자+특수문자(-_.) 가능함 (순서상관X) 3. @뒤에는 영어 소문자가 필수로 들어가야함 4. @뒤에는 소문자+ 숫자 또는 소문자+특수문자(-_.) 소문자+숫자+특수문자(-_.) 가능함 (순서상관X) 5. 마지막은 .com으로 끝나야함 - 특수문자 앞에는 \ 붙여줘야 함 - * : 0개~여러개 (있거나 없거나) / + : 1개~여러개 (무조건 한번은 존재) / ? : 0개 또는 1개 (반복 불가) -> 방법1) (?:[0-9\-\_\.]*[A-Za-z]+[0-9\-\_\.]*)+@(?:[0-9\-\_\.]*[a-z]+[0-9\-\_\.]*)+(?:\.com)$ * : 0개..

npm? yarn? npm과 yarn모두 node환경에서 자바스크립트 패키지를 관리해주는 도구이다. yarn은 기존 npm의 단점이였던 속도, 안정성, 보안성 등을 보완하여 facebook에서 출시했다. 의존성파일을 순차적으로 설치하던 npm과 달리 yarn은 병렬적 설치를 진행해서 설치와 빌드 속도를 높였고 yarn.lock 을 통해 의존성트리를 고정시켰다. 현재는 npm도 몇차례의 업데이트를 통해 이러한 단점들을 보완한 상태이다. 하지만 yarn도 업데이트를 하며 이전보다 더 개선된 기능들이 추가되었다. pnp 전략을 도입하면서 node_modules 없이 의존성 관리를 zip파일로 할 수 있게 되었고, 의존성을 버전관리에도 포함시킬 수 있게 되면서 저장소를 복제 해온 뒤에 의존성을 설치할 필요가 없..

그동안 알고는 있었으나 생소해서 사용하지 못한 Map 자료형을 활용해서 문제를 풀게 되었다. 이번 기회에 Map에 요소를 추가하고 지우고 다양한 형태로 변환해서 사용할 수 있게 됐다. Section5_6번: 학급 회장(해쉬) function solution5_6(N: number, str:string):string { const voteArr = str.split("") let map = new Map(); voteArr.forEach(char => { if(!map.has(char)) map.set(char, 1); else map.set(char, map.get(char) + 1); }) return [...map.entries()].reduce((a,b)=> a[1]>b[1] ? a : b)[0];..