Programming (64) 썸네일형 리스트형 [HTML] A(Anchor) 태그로 메일 보내기 구현하기 A 태그에는 다양한 속성들이 있지만, 주로 다른 페이지로 이동하기 위해 사용하는 href 속성을 통해 메일을 보내는 것이 가능하다. 하단의 표는 href 안에서 사용되는 매개변수들이다. mailto:메일주소 메일주소로 메일을 보낸다. cc:메일주소 참조 메일을 추가해서 보낸다. bcc:메일주소 숨은 참조 메일을 추가해서 보낸다. subject:제목 이메일의 제목 body:내용 이메일의 내용 ? 첫번째 매개변수 구분시 사용 &(&) 두번째 이상부터 매개변수 구분시 사용 1. mailto 사용하기 2. cc로 참조 추가하기 3. bcc로 숨은 참조 추가하기 4. subject로 제목이 있는 메일 보내기 5. body로 내용이 있는 메일 보내기 6. 여러가지를 동시에 사용하기 [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으로 인한 문제 발생 위험이 증가하고, 이는.. [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:.. 이전 1 2 3 4 5 6 ··· 8 다음
