혼자 적어보는 노트

모바일로 로컬 환경을 확인해봐야 할 일이 있어서 알게된 ngrok https://ngrok.com/docs/getting-started 설치 brew install ngrok/ngrok/ngrok 기본 실행 방법은 로컬 개발 서버 띄우고 아래의 명령어를 입력하면 된다. ngrok http (port번호) 명령어 입력 후 터미널 창에 나타난 주소를 클릭하면 공유할 수 있는 링크로 연결된다. Invalid Host header Error 개인적으로 하는 프로젝트에서는 위의 기본 실행 명령어로 접속이 가능했지만 회사에서 테스트 할 때는 위 명령어로 진행이 되지 않아서 host-header를 지정해주는 명령어를 추가했다. http (port번호) --host-header="localhost:(port번호)" 이..

이전 프로젝트에서 JWT토큰을 사용한 방식으로 로그인을 구현했었는데 주는대로 사용만 했지 JWT토큰에 제대로 알고있지 못하다고 생각하여 cookie와 session과 함께 간단하게 정리해보기로 했다. Cookie 쿠키는 클라이언트가 웹사이트에 접속할 때 그 사이트가 사용하게 되는 일련의 작은 기록 파일과 같다. 쿠키는 서버가 클라이언트에 정보를 전달 할 때 저장하려는 정보를 응답 헤더에 저장하여 전달하고 key-value 형태의 문자열 형태로 저장하게 된다. 쿠키를 로그인에 사용하면 set-cookie로 반환받은 쿠키값(id,password)을 토대로 인증이 필요한 요청을 할 때마다 다시 쿠키와 함께 요청을 하여 사용자가 일일이 id/password를 입력해야하는 번거로움을 줄일 수 있었다. 하지만 이렇..

대충은 알고 있었으나 설명이 잘 안되는 것 같아서 OOP에 대해 따로 정리를 해보려고 한다. 객체지향 프로그래밍(Object Oriented Programming) 컴퓨터 프로그래밍의 패러다임중 하나로 프로그램을 객체 단위로 나누고 객체들간의 상호작용을 통해 로직을 구성하는 것이다. 객체 지향 프로그래밍이라는 패러다임이 등장하기 전에는 순서대로 처리하는 방식인 절차지향 프로그래밍 방식을 사용했다. 하지만 프로그램의 크기가 커졌을 때 코드가 복잡해지게되어 동작보다는 데이터를 중심으로 코딩을 하는 방식으로 발전했고 데이터와 처리 방식을 하나의 모듈로 관리를 하며 조립하는 개발 방식으로 확장이 되었다. 객체지향 프로그램의 원리는 객체의 관점에서 작은 문제를 해결할 수 있는 객체들을 만들고 이 객체들을 조합하여..

tab, 스페이스, 엔터 체크 & 제거 const reg = /\s/g; const str = "a b c" if(str.match(reg)){ alert("공백이 존재합니다."); } str.replace(reg, ""); // 모든 공백 제거 특수문자 체크 & 제거 const reg = /[^\w\sㄱ-힣]|[\_]/g; const str = "a b c" if(str.match(reg)){ alert("특수문자가 존재합니다."); } str.replace(reg, ""); // 특수문자 제거 // 제외할 특수문자 직접 지정 const reg2 = /[`~!@#$%^&*()_|+\-=?;:'",.\{\}\[\]\\\/]/gi; const str2 = "!@#!@$123"; if(str2.match(r..

✅ 오늘의 학습 📌 React (5) - 컴포넌트 이해하기 Avatar / Slider / Progress - 컴포넌트 연습하기 Divider / Skeleton / Input / Select Avatar 컴포넌트 컴포넌트명 연결하여 사용하기 Avatar.Group 과 같은 형태로 컴포넌트를 사용하려면 베이스가 되는 Avatar컴포넌트에 따로 등록을 해주면 된다. import AvatarGroup from "./AvatarGroup"; const Avatar = ({ }) => {}; Avatar.Group = AvatarGroup; export default Avatar; children 컴포넌트 가공 React.isValidElement와 cloneElement 활용하여 children을 가공하여 반..

ctrl + shift + p 단축키를 사용 후 Open keyboard shortcuts (JSON) 으로 들어간다. * Default 아님 아래와 같이 작성. [ { "key": "ctrl+n", "command": "explorer.newFile", "when": "explorerViewletFocus" }, { "key": "ctrl+f", "command": "explorer.newFolder", "when": "explorerViewletFocus" } ] * explorer에 focus가 되어있을 때만 해당 단축키가 활성화 된다.

Storybook이란 컴포넌트 단위의 개발을 도와주는 툴로서 하나의 컴포넌트가 어떻게 보여지고 어떻게 작동하는지 알 수 있게 해주는 도구 Storybook 공식문서 공식문서에 전부 나와있는 내용이기는 하지만 이번에 강의에서 잠깐 다루어 주셔서 정리를 해보았다. 설치 npx -p @storybook/cli sb init 설치를 완료하면 루트에 .storybook이라는 폴더가 생기고 src안에 stories라는 폴더가 생긴다. storybook: 설정 폴더 stories: 등록된 스토리들을 관리하는 폴더 실행 npm run storybook 명령어를 통해 storybook을 실행하면 브라우저가 나타나며 임시로 작성된 샘플 컴포넌트들이 표시된다. 컴포넌트 등록하기 1. 컴포넌트를 만들고 props를 통해 스타..

Babel 바벨(bable)은 최신의 자바스크립트 문법을 구형의 브라우저에도 동작할 수 있도록 ES5문법들으로 변환시키는 트랜스파일러이다. 이렇게 코드를 변환해줌으로써 개발자들이 실행 환경에 구애받지 않고 항상 최신 문법의 자바스크립트로 코딩을 할 수 있다. babel은 단독으로도 사용할 수 있지만 보통 webpack과 같은 빌드 시스템과 함께 사용된다. * 바벨은 ES5버전 이전 문법으로 변환하는 용도이며, 브라우저에 지원하지 않는 기능을 만들어 주는 것은 아니기 때문에 브라우저에 지원하지 않는 기능을 사용하려면 별도의 폴리필을 적용해야한다. 바벨 설치 바벨의 코어 패키지와 바벨을 터미널에서 동작시킬 수 있게 도와주는 babel cli을 설치한다. npm i -D @babel/core @babel/cl..