HOME
[React] 리액트 이미지 미리보기(업로드) 구현 / File API
[React] 리액트 이미지 미리보기(업로드) 구현 / File API
2024.05.02file 타입의 태그와 File API를 이용해 컴퓨터에 저장된 이미지를 업로드할 수 있다. 이미지 태그 자체를 “파일선택” 버튼으로 기능하도록 할 수 있고, 라벨의 스타일을 수정하는 방식으로 “파일 선택”(파일 필드) 스타일을 변경할 수도 있다. 기본 구조업로드한 이미지는 컴포넌트 내부 상태(image)로 관리하고, 업로드 하기 전엔 기본 프로필 사진(fallbackUrl)을 표시하도록 한다. 태그의 type을 file로 명시하면 “파일 선택” 버튼이 표시된다. accept 속성엔 허용할 파일 유형을 .확장자 형태로 입력한다. 확장자는 대소문자를 구분하지 않는다. 여러 값을 입력할 땐 콤마 , 로 구분한다. 특정 타입(MIME 유형)의 모든 확장자를 허용하고 싶으면 타입/* 을 입력한다. 허용하지..
[TS] 타입스크립트 - 느낌표 연산자
[TS] 타입스크립트 - 느낌표 연산자
2024.05.02자바스크립트에서 NOT ! 연산자는 false를 의미한다. 반면 타입스크립트에선 이 느낌표 ! 연산자가 변수 뒤에 올 수 있다. if문 등을 사용하지 않고 항상 유효한 값이 있다고 단언 할 때 사용한다. Non-null assertion operator (느낌표)💡 ESLint 규칙에선 느낌표 연산자를 사용하면 null-checking mode의 혜택을 받지 못하기 때문에 권장하지 않는다. 대신 foo.bar && foo.bar... AND 연산자 혹은 옵셔널 체이닝 사용을 권장한다. 느낌표 연산자를 꼭 사용해야 한다면 항상 유효한 값을 보장하는 변수에만 사용한다. 변수 내부 값에 접근할 때 TS 컴파일러는 항상 null undefined 인지 체크한다. 이때 if 문으로 타입 단언을(변수에 원하는 타..
[Algorithm] 자바스크립트 쌍(pairs)을 포함하는 배열에서 유니크 넘버 찾기
[Algorithm] 자바스크립트 쌍(pairs)을 포함하는 배열에서 유니크 넘버 찾기
2024.05.02아래 배열에서 단 한번만 나열되는 유니크 숫자는 17이다. 1과 3은 쌍을 이루고 있기 때문에 두번씩 나열되고 있다. 이런 배열에서 유니크 넘버(17)만 찾아내려면 어떻게 해야할까?[1, 3, 17, 3, 1] Naive Solution — O(n*n)2중 for문을 사용한 예시. 모든 숫자를 한번씩 돌아가면서 검사해야 되기 때문에 O(n*n)의 시간복잡도를 갖는다. 배열 길이가 5라면 정답을 찾을 때까지 최대 25번의 순회가 이뤄질 수도 있다.function singleNumber(nums) { for (let i = 0; i Linear Solution — O(n)💡 O(n)은 알고리즘 실행 시간이 선형이 되는 것을 뜻한다. 선형 시간(Linear time; 线性时间)이란 배열 길이(n)와 비례..
[Git] git revert, git reset 차이점 및 HEAD 분리
[Git] git revert, git reset 차이점 및 HEAD 분리
2024.05.01TL;DRreset : 현재 브랜치를 지정한 커밋으로 이동. 그 이후의 커밋 히스토리는 삭제revert : 커밋 변경사항을 취소하는 새로운 커밋 생성. 기존 커밋 히스토리는 유지 HEAD 배경지식Git Branch 학습/연습하기 좋은 사이트 ▼ Learn Git BranchingAn interactive Git visualization tool to educate and challenge!learngitbranching.js.org HEAD는 현재 브랜치 작업 트리의 가장 최근 커밋을 가리킨다(현재 작업중인 커밋).HEAD를 브랜치 대신 커밋에 붙이는 것을 HEAD 분리라고 부른다.^(캐럿) 연산자는 상대참조 기능으로, 한 단계 위(부모) 커밋으로 이동할 때 사용한다.git checkout bugFix^..
[HTML/CSS] 줄바꿈 제어 속성 word-break / word-wrap(overflow-wrap)
[HTML/CSS] 줄바꿈 제어 속성 word-break / word-wrap(overflow-wrap)
2024.05.01TL;DR박스 영역을 벗어나거나, 불필요한 공백이 생기는 등 대부분의 줄바꿈 문제는 아래 두 속성으로 해결할 수 있다.word-break: break-all; /* 음절(글자)를 기준으로 줄바꿈 */word-wrap: break-word; /* 영역을 넘친 단어 분리(줄바꿈) */ word-break💡 줄바꿈할 중단점의 기준을 바꿀 수 있는 속성 word-break 속성은 글자를 어떻게 분리해서 줄바꿈할지 결정하는 속성이다. CJK는 음절(글자), non-CJK는 공백과 - 하이픈이 기본 중단점이다. word-break 속성으로 줄바꿈할 중단점의 기준을 바꿀 수 있다. 아래는 언어별 속성 값에 따라 달라지는 중단점을 정리한 표 — WIT 블로그 참고 normal (기본값)break-allkeep-a..
[DevTools] direnv로 폴더마다 다른 node 버전 적용하기 / 전역 gitignore
[DevTools] direnv로 폴더마다 다른 node 버전 적용하기 / 전역 gitignore
2024.05.01프로젝트마다 사용하는 Node 버전이 다르다면 nvm을 이용해서 버전을 변경할 수 있다. 하지만 매번 수동으로 노드 버전을 바꿔주는 것은 번거로운 일이다. direnv를 활용하면 프로젝트 폴더를 바꿀 때마다 노드 버전이 자동으로 바뀌도록 설정할 수 있다. direnv는 폴더별로 환경을 관리해주는 도구다. 설치❶ direnv 설치brew install direnv # homebrew로 direnv 설치 ❷ direnv hook 설정(폴더 이동시 해당 폴더의 .envrc 파일 자동 실행). oh-my-zsh를 사용한다면 `.zshrc` 파일 `plugins` 배열에 `direnv`를 추가하면 자동으로 설정된다.# ~/.zshrcplugins=(... direnv) oh-my-zsh를 사용하지 않는다면 아래 ..
[HTML/CSS] 알아두면 유용한 CSS 최신 기능 6가지
[HTML/CSS] 알아두면 유용한 CSS 최신 기능 6가지
2024.05.01@supports@supports를 이용해 브라우저가 특정 CSS 속성을 지원할때와, 지원하지 않을 때의 스타일을 각각 지정할 수 있다. @supports (속성명: 값) {...} 형태로 사용한다. 지원하지 않을 땐 not 연산자를 추가한다./* 브라우저가 display: grid를 지원하면 적용 */@supports (display: grid) { div { display: grid; }}/* 브라우저가 display: grid를 지원하지 않으면 float 적용 */@supports not (display: grid) { div { float: right; }} CSS 스타일 속성뿐만 아니라 CSS 선택자(셀렉터)를 지원하는지도 판별할 수 있다./* 브라우저가 > 자식 셀렉터를 지..
[CS] RISC / CISC 아키텍처 차이점
[CS] RISC / CISC 아키텍처 차이점
2024.05.01애플은 2020년 x86 아키텍처에서 ARM으로 전환했다. M1 맥북부터 ARM 아키텍처를 사용한다. 인터넷, 신문에서 수없이 들었던 말이다. 하지만 정작 왜 ARM 프로세서를 사용한 맥북이 더 빠른지, 왜 데스크톱 기기는 인텔/AMD을 사용하고 모바일 기기는 ARM을 사용하는지 등은 몰랐다. 그래서 오늘은 인텔과 ARM 아키텍처의 차이점에 대해서 알아본다(요즘은 노트북, 서버, 슈퍼 컴퓨터에서도 ARM을 사용한다). 어셈블리 언어💡 어셈블리 언어는 기계어의 한 단계 위 언어다. 특정 프로세서에 바인딩된 기본 명령 집합으로 예약어가 매우 적다. 어셈블리 언어 코드는 컴퓨터가 처리하기 전에 기계어(0과 1)로 변환해야 한다. 이 변환은 어셈블러를 통해 이뤄진다. 기계어와 어셈블리어 모두 Low Level..
[JS] 자바스크립트 RORO 디자인 패턴 / 스택 트레이스 / 에러 전파
[JS] 자바스크립트 RORO 디자인 패턴 / 스택 트레이스 / 에러 전파
2024.05.01TL;DRRORO 패턴은 Receive an Object, Return and Object의 약자다. 함수의 파라미터와 리턴값 모두 객체인걸 말한다. ES6부터 지원하는 구조분해할당 덕분에 자바스크립트에서도 RORO 패턴을 사용할 수 있다. 파라미터 정의 방식(RORO 패턴)만 살짝 바꿨지만 가독성은 매우 좋아진다. RORO 패턴의 장점은 아래와 같다. 이름이 지정된 파라미터 (Named parameters)명시적인 파라미터 기본값 (Cleaner default parameters)더 많은 정보 반환 (Richer return values)함수 합성 용이 (Easy function composition) 이름이 지정된 파라미터파라미터에 {} 중괄호만 추가해주면 간단하게 RORO 패턴을 적용할 수 있다. ..
[React] 리액트 라우터 React Router v6 바뀐점 톺아보기
[React] 리액트 라우터 React Router v6 바뀐점 톺아보기
2024.04.30React Router가 v6으로 업데이트 되면서 꽤 많은 부분이 바뀌었다. 공식 문서에선 상세한 마이그레이션 가이드도 제공하고 있다. v6을 사용하려면 React 16.8 버전 이상 사용해야 한다. v6은 이전 버전 대비 번들 사이즈도 70% 이상 줄었다고 한다(패키지 업데이트만으로 번들 크기 최적화가 가능하다는 뜻). Switch → Routes 컴포넌트가 라는 이름으로 변경됐다. 바뀐 이름이 더 직관적인 것 같다. 만 단독으로 사용할 수도 없게 됐다. 를 사용하려면 항상 로 감싸줘야 한다.// v5 // v6 exact 옵션 삭제v6부터 경로가 정확히 일치하도록 매칭 규칙이 바꼈다. 더이상 exact 옵션을 명시하지 않아도 된다. 모든 라우트는 기본적으로 exact 옵션이 붙는다고 보면 된다...
[Algorithm] 프로그래머스 비밀지도 문제 풀이
[Algorithm] 프로그래머스 비밀지도 문제 풀이
2024.04.30글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 2018년 카카오 블라인드 테스트 1차 비밀지도 문제(문제 번호 17681). 파라미터는 arr1 arr2 n 이렇게 3개를 받으며, n은 한 변의 길이를 나타낸다(배열 각 요소를 이진수로 변환한 후의 length). ❶ 2개의 배열을 받아[9, 20, 28, 18, 11]; // arr1[30, 1, 21, 17, 28]; // arr2 ❷ 배열의 각 요소를 2진수로 변환한 뒤 (10진수 → 2진수 변환은 노트 참고)['01001', '10100', '11100', '10010', '01011']; // arr1['11110', '00001', '10101', '10001', '11100']; // arr2 ❸ 0 → ' ' 공..
[AWS] EC2 디스크 공간 늘리기 / 여유 공간 확보하기
[AWS] EC2 디스크 공간 늘리기 / 여유 공간 확보하기
2024.04.30EC2 터미널에서 패키지를 업데이트 하려고 하니 에러가 발생한다. VSCode를 이용해 원격으로 EC2에 접속할 때도 원인을 모를 에러가 발생한다. 디스크 용량이 부족해서 나오는 에러다.no space left on device df -h 명령어로 xvda1 디바이스 볼륨 공간을 확인해보니 사용량이 99%다. 용량 추가가 필요하다. 프리티어 요금제에 기본적으로 주어지는 용량은 8GB지만, 메모리 스왑 등을 하고나면 턱없이 부족하다. 다행히 프리티어는 30GB까지 무료로 사용할 수 있다.df -h Filesystem Size Used Avail Use% Mounted onudev 462M 0 462M 0% /de..