HOME
RISC / CISC 아키텍처 차이점
RISC / CISC 아키텍처 차이점
2024.05.01애플은 2020년 x86 아키텍처에서 ARM으로 전환했다. M1 맥북부터 ARM 아키텍처를 사용한다. 인터넷, 신문에서 수없이 들었던 말이다. 하지만 정작 왜 ARM 프로세서를 사용한 맥북이 더 빠른지, 왜 데스크톱 기기는 인텔/AMD을 사용하고 모바일 기기는 ARM을 사용하는지 등은 몰랐다. 그래서 오늘은 인텔과 ARM 아키텍처의 차이점에 대해서 알아본다(요즘은 노트북, 서버, 슈퍼 컴퓨터에서도 ARM을 사용한다). 어셈블리 언어💡 어셈블리 언어는 기계어의 한 단계 위 언어다. 특정 프로세서에 바인딩된 기본 명령 집합으로 예약어가 매우 적다. 어셈블리 언어 코드는 컴퓨터가 처리하기 전에 기계어(0과 1)로 변환해야 한다. 이 변환은 어셈블러를 통해 이뤄진다. 기계어와 어셈블리어 모두 Low Level..
자바스크립트 RORO 디자인 패턴 / 스택 트레이스 / 에러 전파
자바스크립트 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 Router v6 바뀐점 톺아보기
React Router v6 바뀐점 톺아보기
2024.04.30React Router가 v6으로 업데이트 되면서 꽤 많은 부분이 바뀌었다. 공식 문서에선 상세한 마이그레이션 가이드도 제공하고 있다. v6을 사용하려면 React 16.8 버전 이상 사용해야 한다. v6은 이전 버전 대비 번들 사이즈도 70% 이상 줄었다고 한다(패키지 업데이트만으로 번들 크기 최적화가 가능하다는 뜻). Switch → Routes 컴포넌트가 라는 이름으로 변경됐다. 바뀐 이름이 더 직관적인 것 같다. 만 단독으로 사용할 수도 없게 됐다. 를 사용하려면 항상 로 감싸줘야 한다.// v5 // v6 exact 옵션 삭제v6부터 경로가 정확히 일치하도록 매칭 규칙이 바꼈다. 더이상 exact 옵션을 명시하지 않아도 된다. 모든 라우트는 기본적으로 exact 옵션이 붙는다고 보면 된다...
프로그래머스 비밀지도 문제 풀이
프로그래머스 비밀지도 문제 풀이
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..
정규식으로 검색어 하이라이트 / 문자열 링크 걸기(Linkify)
정규식으로 검색어 하이라이트 / 문자열 링크 걸기(Linkify)
2024.04.30검색창에 입력한 키워드와 일치하는 단어를 하이라이트(강조) 하기 위해 split, join 등을 사용할 수 있지만 코드가 다소 복잡해진다. 정규식을 사용하면 깔끔하게 구현할 수 있다. 하이라이터 함수 정의 ▼const getHighlightedText = (text, query) => { const re = new RegExp(`(${query})`, 'gi'); if (query !== '' && text.match(re)) { const parts = text.split(re); return ( {parts.map((part) => part.toLowerCase() === query.toLowerCase() ? ( {part} ..
Lodash _.memoize 소스 코드 톺아보기
Lodash _.memoize 소스 코드 톺아보기
2024.04.30_.memoize 소스코드Lodash 라이브러리의 Memoize 메서드를 사용하면 이전에 진행했던 연산 결과를 재사용할 수 있다. 실시간 검색창을 구현할 때 입력한 키워드에 대한 API 호출을 시도하는데, 이미 검색했던 키워드는 결과를 캐싱해놓고 재사용하면 API 중복 호출을 방지할 수 있다. 이때 Lodash의 Memoize를 활용할 수 있다(물론 키워드에 대한 결과값이 자주 변한다면 캐싱 기능을 사용할 필요 없다) 실시간 검색창에 활용한 Memoizeimport _ from 'lodash';export const requestQuotes = _.memoize(async (title) => { const res = await fetch( `https://animechan.vercel.app/ap..
React 리액트로 실시간 검색창 구현하기
React 리액트로 실시간 검색창 구현하기
2024.04.30글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 Debounce는 이벤트가 연속적으로 발생해도 항상 마지막 이벤트만 처리하는 것을 말하며, Memoize는 이전 연산 결과를 재사용하는 것을 말한다. Debounce와 Memoize를 활용해 불필요한 API 요청을 방지할 수 있다. Animichan은 일본 애니메이션에 등장한 인용문(Quotes)을 제공하는 OpenAPI다. title 매개변수에 애니메이션 제목을 쿼리스트링 보내서 요청하면, 해당 애니메이션의 인용문 세트를 받아올 수 있다. 이 API를 이용해 간단한 검색 어플리케이션을 구현할 수 있다. // Request'https://animechan.vercel.app/api/quotes/anime?title=naruto'..
폼 필드(input) 색상 변경하기 — accent-color
폼 필드(input) 색상 변경하기 — accent-color
2024.04.29폼 필드(input) 스타일은 디바이스, OS, 브라우저에 따라 달라지므로 원하는 스타일을 지정하기 힘들다. 하지만 accent-color CSS 속성을 이용하면 폼 필드의 강조 색상을 손쉽게 변경할 수 있다. accent-color 속성은 input 태그의 checkbox radio range 타입에 적용할 수 있다. CSS 셀렉터에 input만 명시했다면 checkbox radio range 타입에 모두 적용된다.input { }input[type="radio"] { }input[type="checkbox"] { }input[type="range"] { } accent-color 속성은 Chrome, Firefox 최신 버전에서 지원한다. 아쉽게도 사파리에선 지원하지 않는다. 예시HTML ▼ ..
자바스크립트 프록시 Proxy 객체 / Reflect
자바스크립트 프록시 Proxy 객체 / Reflect
2024.04.29글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 Vue.js에서 Reactive로 반응성을 주입한 데이터를 콘솔로 찍어보면 아래처럼 Proxy `{ ... }` 형태로 출력한다. Proxy를 사용해서 입력한 데이터(상태)를 한 번 감싼 것이다. 이렇게 Proxy를 이용하면 객체 프로퍼티의 읽기 / 쓰기 같은 작업을 중간에 가로채서 원하는 작업을 수행하도록 할 수 있다. 사용 방법const proxy = new Proxy(target, handler); target : Proxy로 감쌀 원본 객체. 함수를 포함한 모든 객체 가능handler : get이나 set 같은 동작을 가로채는 메서드(트랩; trap)이 담긴 객체. 객체를 proxy로 감싼 후, handler에 상응하는 ..
자바스크립트 객체 프로퍼티 설명자 / 플래그 / 옵서버 패턴
자바스크립트 객체 프로퍼티 설명자 / 플래그 / 옵서버 패턴
2024.04.29글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 프로퍼티 플래그객체는 값(value) 외에도 플래그(flag)라는 특별상 속성이 있다. 플래그는 아래 3가지 종류가 있다. 일반적으로 객체를 선언하면(객체 리터럴 혹은 Object 생성자 함수 사용) 프로퍼티의 플래그는 `true`를 기본값으로 가진다. 프로퍼티 값 수정프로퍼티 삭제반복문 나열플래그 수정`writable: false`❌✅✅✅`enumerable: false`✅✅❌✅`configurable: false`✅❌✅❌ writable (수정)`true` : 프로퍼티 값 수정 가능`false` : 프로퍼티 값 수정 불가 (프로퍼티 삭제는 가능)enumerable (열거)`true` : 반복문으로 나열 가능`false` : 반..
자바스크립트 디바운스 Debounce, 스로틀 Throttle 구현하기
자바스크립트 디바운스 Debounce, 스로틀 Throttle 구현하기
2024.04.29디바운스는 input 이벤트에(리액트에선 onChange), 스로틀은 scroll 이벤트에 자주 사용된다. 디바운스는 아무리 많은 이벤트가 발생해도 마지막 이벤트만 실행하는 반면, 스로틀은 적어도 `n` 밀리초 마다 정기적으로 기능 실행을 보장하는 점이 가장 큰 차이점. 참고로 Lodash 라이브러리에 디바운스와 스로틀 메서드가 포함되어 있다._.debounce(func, wait, [options])_.throttle(func, wait, [options]) 디바운스 | Debounce이벤트가 연속적으로 발생해도 항상 마지막 이벤트만 처리이벤트를 그룹화하여 특정 시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술 디바운스 예시 코드 ▼function debounce(callback, ms) { ..