Hello World!!

용도 별 env 파일 생성 .env # 모든 상황에서 사용될 환경 변수 .env.local # 모든 상황에서 사용되나, 로컬 개발 환경에서만 사용될(Git에 의해 무시될) 환경 변수 .env.[mode] # 특정 모드에서만 사용될 환경 변수 .env.[mode].local # 특정 모드에서만 사용되나, 로컬 개발 환경에서만 사용될(Git에 의해 무시될) 환경 변수 환경변수 생성 vite 환경에서 사용할 변수는 앞에 VITE_ 를 붙인다. VITE_TEXT_A=aaa 사용 javascript impo... Read More

excel 파일을 blob 형태로 다운로드 받아야 하는데, 할 줄 몰라서 헤맴… blob 데이터 다운로드 시 header 에 response type 을 blob 으로 지정해 요청한다. export function post<T>(url: string, data: T, isResponseTypeBlob?: boolean) { const config: AxiosRequestConfig = { baseURL: API_ROOT, }; if (isResponseTypeBlob) { config.responseType = 'blob'; } return axios.post(url, data, config); ... Read More

APP UI에 SVG 아이콘을 css의 background-image 로 썻는데 꽤 편리하고 괜찮은 것 같아서 남겨둔다. SVG 코드를 URL-encoder for SVG 페이지의 Insert SVG: 부분에 입력하면 아래 Ready for CSS: 부분에 인코딩되어 출력된다. SVG 아이콘은 그때그때 검색해서 flaticon 등의 사이트에서 찾아서 사용한다. SVG 이미지를 css에서 다루면서 가장 유용했던 부분은 체크박스 커스텀이었다. button이나 textarea, 특히 타입이 여러개로 나뉘는 Input 은 컴포넌트화 해서 사용하는 편인데, 체크박스나 라디오 타입은 커스터마이징 하기 번거로운 편이... Read More

매번 검색하기 번거로워서 남겨두는 글. README 파일 작성하면서 사용한 라이브러리/프레임워크를 뱃지 형태의 이미지로 나열했는데, shields.io 에서 제공하는 url 로 원하는 뱃지를 만들어 사용할 수 있다. <img src="https://img.shields.io/badge/{표시텍스트}-{컬러코드}?style=flat-square&logo={로고}&logoColor=white"/> {} 표시 한 부분만 수정해서 사용한다. {컬러코드} : HexCode 형태의 컬러코드 {로고} : 표시할 라이브러리 이름 {표시텍스트} : 뱃지에 표시할 텍스트 (라이브러... Read More

인프런 강의 그림으로 쉽게 배우는 자료구조와 알고리즘 (기본편) 수강내용 정리 시간복잡도 특정 알고리즘이 어떤 문제를 해결하는 데 걸리는 시간을 표현하는 방법이다. 반복문은 코드 성능에 많은 영향을 준다. 반복문이 여러 번 반복될수록 실행시간이 길어진다. 따라서 특정 알고리즘의 성능을 평가할 때 해당 알고리즘의 반복문을 보고 성능을 평가한다. Big-Ω (빅 오메가) 알고리즘의 최선의 시간 복잡도를 나타낸다. 즉, 알고리즘의 수행 시간이 가장 짧은 경우를 표기한다. Big-O (빅 오) 알고리즘의 최악의 시간복잡도를 나타낸다. 즉, 알고리즘의 수행 시간이 가장 오래 걸리는 경우를 표기... Read More

인프런 강의 모든 개발자를 위한 HTTP 웹 기본 지식 수강내용 정리 캐시 아래와 같이 요청하면 응답 결과를 캐시에 저장한다. 응답 시 서버에서 max-age 로 유효 시간(초)을 지정한다. 예) cache-control: max-age=60 지정한 시간 내 동일한 파일을 재요청한다면 네트워크를 사용하지 않고 캐시에 저장된 데이터를 사용한다. 캐시 덕분에 일정 시간동안 네트워크를 사용하지 않아도 된다. 만약 캐시가 없으면 데이터가 변경되지 않아도 매번 데이터를 다운로드 받아야 하기 때문에 브라우저 로딩 속도가 느려져 사용자 경험 또한 느릴 것이다. 한번 다운로드 받은 파일의 캐시 만료 ... Read More

인프런 강의 모든 개발자를 위한 HTTP 웹 기본 지식 수강내용 정리 HTTP 헤더 구조 field-name : field-value – field-name : 대소문자 구분 없음 – field-value : 대소문자 구분 있음 용도 HTTP 전송에 필요한 모든 부가 정보를 포함한다. – 예) body 내용의 타입, 크기, 압축, 인증, 요청 클라이언트, 서버 정보, 캐시 관리 정보 등 – 표준 헤더 : https://en.wikipedia.org/wiki/List_of_HTTP_header_fields 필요 시 임의의 헤더 추가가 가능하다. ... Read More

vite config 설정 vite.config.js 파일 내 base 값을 설정한다. base 값을 추가하고 레포지토리 이름을 적는다. 경로 설정이기 때문에 앞뒤로 / 를 꼭 붙인다. export default defineConfig({ plugins: [react()], base: '/레포지토리이름/' }) deploy.sh 생성 프로젝트 root 폴더에 deploy.sh 파일을 생성해서 아래의 내용으로 저장한다. #!/usr/bin/env sh set -e yarn run build # npm 또는 yarn cd dist echo > .nojekyll git init git... Read More

인프런 강의 모든 개발자를 위한 HTTP 웹 기본 지식 수강내용 정리 HTTP 상태코드 클라이언트가 요청을 보내면 보낸 요청의 처리 상태를 서버의 응답 메세지에서 코드형식으로 알려준다. 클라이언트가 인식할 수 없는 상태코드를 반환받는다면 가장 앞자리의 코드로 해석해서 처리한다. 1XX informational 으로 요청이 수신되어 처리중을 의미한다. 거의 사용이 되지 않는다. 2XX successful 으로 요청이 정상으로 처리되었음을 의미한다. 200 OK 정상처리완료 주로 GET 요청이 정상적으로 처리되어 데이터를 응답해줄때 사용한다. 201 Cre... Read More

인프런 강의 모든 개발자를 위한 HTTP 웹 기본 지식 수강내용 정리 HTTP 메서드 API 의 URI 를 설계할때는 리소스만 식별하도록 하고 리소스를 대상으로 하는 행위는 메서드로 구분한다. 메서드는 클라이언트가 서버에 요청할때 기대하는 행동을 의미한다. HTTP 메소드 RFC 요청에 Body가 있음 응답에 Body가 있음 안전 멱등(Idempotent) 캐시 가능 GET RFC 7231 아니요 예 예 예 ... Read More