JavaScript
-
Javascript LRU Cache개발/nodejs 2023. 10. 11. 11:54
Javascript 언어에서는 메모리 애플리케이션 메모리 공간을 캐시처럼 사용할 수 있는 기능을 제공한다. Redis처럼 key - value 로 사용하면 되는 줄 알았는데 사용방법이 약간 다르다. 설명에 앞서 아래 코드의 결과 값을 예상해보자 import LRU from 'lru-cache'; const cache = new LRU({ max: 3 }); const props = new Set(); cache.set(1, props); props.add('1'); props.add('2'); const result1 = cache.get(1); console.log('Result 1:', result1); set 함수가 실행된 후 props 에 ‘1’, ‘2’가 들어갔으므로 결과값이 빈 집합으로 예상할..
-
Javascript 동치비교개발/삽질 기록 2022. 2. 11. 20:20
Javascript 에서는 다른 언어랑 다르게 비교 연산자로 '==' 뿐만 아니라 '===' 가 있어 다른 변수와 비교할 때마다 내가 짠 코드가 정확한 건지 아닌지 헷갈릴 때가 종종 있다. '==' 는 느슨한 비교 연산자고 '===' 는 엄격한 비교 연산자인데 사용할 때마다 결과가 달라 이번 포스트에서는 Javascript 비교 연산자를 깔끔히 정리해보려고 한다. string 비교 연산 변수와 상수형 문자열 사이의 비교는 '==' 든 '==='를 사용하든 상관 없다. 아래 코드를 보면 두개의 비교 연산 모두 true로 리턴하게 된다. const simple = "simple" const is = simple === 'simple' ? 'is' : 'is not' // true, is='is' const ..
-
nodejs + typescript 버전 heroku로 푸쉬하기개발/nodejs 2021. 10. 27. 21:46
nodejs를 typescript로 짜고 로컬에서 테스트 할 때는 아래 처럼 nodemon 명령어를 사용하면 된다. 그런데 heroku 서버 상에서는 이 명령어를 사용할 수 없다. nodemon --exec ts-node src/index.ts heroku 서버상에서도 typescript를 사용하기 위해선 typescript를 javascript로 변환하는 과정이 필요하다. package.json을 수정하면 heroku에 push 하는 과정에서 typescript를 javascript로 빌드하는 과정을 추가할 수 있다. 아래 코드에서 postinstall 속성이 npm run build로 되어 있는데 이 과정에서 heroku에 설치하면서 최종 명령어로 불리게 된다. build 속성을 tsc로 두면 타입 ..
-
useEffect개발/react 2020. 12. 21. 20:27
리액트의 useEffect 라이브러리는 컴포넌트나 state에 변화가 생길 때 호출되는 함수다. 두개의 인자를 받는데 첫째 인자는 변경시 호출할 콜백함수고 두번째 인자는 상태를 변경을 감지할 state를 설정한다. state를 별도로 설정하지 않으면 componentDidUpdate, componentDidMount랑 동일한 역할을 하게 된다. const NoteApp = () => { const [notes, setNotes] = useState([]) const [title, setTitle] = useState('') const [body, setBody] = useState('') useEffect(() => { console.log('load data') const notesData = JSON..
-
useState개발/react 2020. 12. 21. 20:14
useState는 react 에서 비교적 최근에 나온 state 관리 라이브러리다. 기존에는 컴포넌트 생성할 때 state로 두고 싶은 변수들을 하나의 오브젝트로 관리했다면 useState 라이브러리를 사용해서 변수 별로 나눠서 선언할 수 있다. const NoteApp = () => { const [notes, setNotes] = useState([]) const [title, setTitle] = useState('') const [body, setBody] = useState('') useState 인자로 object를 받는데 이 값은 state의 초기 값이다. 배열, 정수형 인자, 문자열 모두 가능하다. 리턴 값으로는 길이가 2인 배열을 내놓는데 첫번째는 state 변수 값이고 두번째 값은 st..
-
babel개발/react 2020. 12. 6. 14:12
babel은 JFX로 작성된 react javascript 파일을 브라우저에서 인식할 수 있도록 변경해주는 컴파일러다. 예시로 아래처럼 생긴 코드를 브라우저에 렌더링 하려고 하면 const appRoot = document.getElementById('app'); function renderApp() { // JSX - JavaScript XML var template = Hello react var appRoot = document.getElementById('app'); ReactDOM.render(template, appRoot); } renderApp() 요런 에러가뜬다. 이건 JFX로 작성된 형태를 브라우저에서 읽을 수 없기 때문이다. react에서 기본적으로 만들어주는 프로젝트를 사용하면 이런..
-
arrow function개발/react 2020. 12. 6. 13:59
요즘 트렌드 언어 답게 react에서 사용하는 javascript도 arrow function으로 함수를 줄일 수 있다. 자바에서 사용하는 람다나 swift의 closure 랑 비슷하게 이름없는 함수(anonymous) 를 사용해서 1회성의 함수를 따로 선언하지 않고 삽입해서 쓸 수 있는 기능이다. 이 함수들은 모양새는 다르지만 모두 똑같이 제곱값을 리턴하는 함수다. const square1 = function(x) { return x * x }; const square2 = (x) => { return x * x; }; const square3 = (x) => x * x; 객체 내에서 함수로 들어갈 때도 동일하게 줄일 수 있다. const user = { name: 'kwony', cities: ['p..