본문 바로가기

전체 글

 (98)
[Javascript] Cookie, Sessionstorage, Localstorage 내용 정리 및 사용법 1. Cookie, Sessionstorage, Localstorage 정리 Cookie Web Storage Sessionstorage Localstorage 특징 • 최대 4kb • 만료기한 있음 • Key, Value 형태 • 서버와 로컬에 정보 저장 • 클라이언트에 300개까지 저장 가능 • 하나의 도메인 당 20개의 값만 가능 • 각 클라이언트 고유 ID 부여 • 로컬에만 정보 저장 • 클라이언트에 대한 정보 저장 • 최대 5mb(브라우저마다 차이있음) • Key, Value 형태 • 세션 종료시 정보 삭제 = 데이터 영구적X • 데이터 영구적O 동작 1. 클라이언트 → 페이지 요청 2. 서버에서 쿠키 생성 3. http 헤더에 쿠키를 넣어 응답 4. 쿠키가 만료되지 않았다면 브라우저 종료 후에..
[React/Typescript] i18next로 다국어 지원/구현하기 1. 라이브러리 설치 yarn add i18next @types/i18next react-i18next @types/react-i18next 2. 폴더구조 참고 ./src ├── index.tsx ├── app.tsx └── assets └── lang ├── i18n.ts └── lang_packs ├── en.json └── ko.json 3. i18n.ts 작성 src/assets/lang/i18n.ts import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import langEn from './lang_packs/en.json'; import langKo from './lang_packs/ko.json'; con..
[Git] fatal: not a git repository (or any of the parent directories): .git 에러 해결 말 그대로 not a git repository (or any of the parent directories), 현재 프로젝트 폴더/혹은 부모 디렉토리가 Git에 연결되지 않아서 생기는 문제이다. Terminal에 아래의 내용을 적어 Git을 연결해주자. $ git init $ git remote add origin (Git주소)
[etc] SSR(Server Side Rendering) & CSR(Client Side Rendering) SSR/CSR을 말하기 전 프로그래밍에서 의미하는 렌더링이 무엇인지 알고 시작하자. 우선, 네이버 사전을 통해 알 수 있는 Render의 사전적 의미는 아래와 같다. 1. 프로그래밍에서 말하는 렌더링(Rendering) 의미 html, CSS, Javascript ... 등의 프로그래밍 언어를 각각의 브라우저의 렌더링 엔진을 통해 대화형 웹 사이트(사용자와 상호작용이 가능한 웹사이트)로 변환시켜주는 과정을 의미한다. 렌더링 엔진이란? 웹 페이지를 렌더링하기 위해 웹 브라우저에서 사용하는 소프트웨어. 프로젝트의 렌더링 속도 확인은 하단의 Light house를 통해 확인할 수 있다. Lighthouse Lighthouse chrome.google.com 그렇다면 서버 사이드 렌더링(Server Side R..
[etc] Vercel을 통해 프로젝트 배포하기 1. Github아이디로 Vercel 가입하기 2. Overview의 Add New... 클릭 → Project 클릭 3. Import Git Repository 화면에서 Add GitHub Org or Account 클릭 후 GitHub을 연결한다. 4. 로그인한 Github 아이디에 있는 프로젝트 중 올릴 것을 Import 한다. 5. You're almost done 화면에서 특별히 이상(build/npm&yarn install 등)이 없다면 Deploy 클릭 6. 프로젝트에 별 이상이 없다면 Deploy가 진행된다. 7. 업로드에 성공한다면 Congratulations! 화면이 뜬다. Go to Dashboard 버튼 클릭시 배포된 프로젝트의 Dashboard로 이동하는데, Vercel이 기본으로..
[etc] JSDoc를 사용하여 아름답게 주석 남기기 1. Typescript 대신 JSDoc을 사용하는 이유? Type을 정확히 잡아내기 위해선 Typescript를 쓰는 것이 좋지만, Typescript의 너무 엄격한 규정은 개발 초기 변경사항이 많을 때 등 불편한 경우가 많다. 또한, Typescript -> Javascript로의 변환이 너무 불편함 + 코드 양의 증가로 클린코드 작성이 어려운 것이 JSDoc을 추천하는 이유다. 2. JSDoc을 사용해야하는 이유 function example(num, str) { return num + str; } 일반적으로 Javascript 내에서 함수를 작성할 때 너무 관대한 Javascript이기에 인수/인자 값의 type이 무엇인지 알 수 없다. 이로인해 type으로 인한 문제 발생 위험이 증가하고, 이는..
[강남/논현/우동] 현우동 우동 평소에 따뜻하고 국물이 없는 볶음, 비빔면 류를 좋아하는데 오랜만에 가마버터 우동이 당겨서 찾다가 방문하게 된 현우동. 합리적인 가격에 훌륭한 음식을 제공하는 곳이 선정된다는 미쉐린 빕구르망에 선정된 가게로 믿음직하다. 현우동 – Seoul - 의 미쉐린 가이드 레스토랑 현우동 – 빕 구르망; 합리적 가격에 훌륭한 음식 미쉐린 가이드 서울 2022 - 레스토랑의 정보, 가격 및 음식의 스타일, 오픈 시간 등을 미쉐린 가이드 공식 웹사이트에서 찾아보세요. guide.michelin.com 평일 오후 7시 반쯤 방문하게 되었는데 앞에 두 팀 정도 대기 줄이 있었다. 차례가 다가오면 미리 주문을 받으신다. 가격은 변동가능성이 있지만, 대략적인 메뉴는 이렇다. 일행은 5번의 멘타이코 앙카케 타마고토지 우동을 주..
[React/Typescript] setInterval(); 대용으로 useInterval(); custom hook 사용하기 하단의 useInterval(); 데모 codeSandBox를 참고하여 프로젝트에 사용했다. useInterval Demo (Typescript) - CodeSandbox useInterval Demo (Typescript) by AWolf81 using react, react-dom, react-scripts codesandbox.io 1. useInterval.tsx 을 생성하여 하단의 내용을 넣고 hooks들을 보관할 곳에 저장. // useInterval.tsx import { useEffect, useRef } from "react"; interface IUseInterval { (callback: () => void, delay: number): void; } const useInterval:..

티스토리툴바