likemath1997

리액트에서 memo 사용 시 비교 방법에 대해 궁금해서 공부해봤다객체 간 얇은 비교javascript의 Object.is 로 비교 ('=="과 '==='이 아님)2024.04.03 - [TIL/javascript] - Javascript 동등 비교 Javascript 동등 비교React 동등 비교를 공부하며 Javascript 동등 비교에 대해 다시 정리했다 자바스크립트 동등 비교 원시타입(primitive type)과 객체타입(object/reference type)이 존재 원시타입 boolean, null, undefined, number, string,likemath1997.tistory.comObject.is는 ES6의 기능이기 때문에 react에서는 이를 구현한 폴리필(polyfill)을 함께 ..

[자바스크립트 Deep Dive] 책의 49장 ES6+/ES.NEXT 개발 환경 구축을 통해 Babel와 Webpack, Polyfill을 공부해보자.Babel필요성크롭, 사파리, 파이어폭스, 엣지 같은 에버그린 브라우저(별도의 재설치 없이 업데이트가 가능한 브라우저)의 ES6 지원률은 98%로 거의 대부분 지원IE의 경우 ES6 지원률을 11% 정도로 최신 문법의 경우 IE에서 실행되지 않아 ES5 수순으로 트랜스 파일링이 필요함설명ES6+/ES.NEXT로 구현된 최신 사양의 소스코드를 IE 같은 구형 브라우저에서도 동작하는 ES5 사양의 소스코드로 변환(트랜스파일링)해주는 트랜스파일러설치npm을 이용해 설치# 프로젝트 폴더 생성$ mkdir esnext-project && cd esnext-proje..

Flexbox는 모던 웹을 구현하기 위해 기존 layout보다 더 세련된 방식의 니즈에 나온 CSS3의 새로운 layout 방식, 정렬에 강점이 있음 사용방법 스타일에 display: flex 추가 부모요소가 inline 요소인 경우 flex 대신 inline-flex 추가 장점 한줄의 코드로 수평정렬이 가능 flexbox 구성 main axis(주축)에 맞춰 flex-item들이 정렬되고, cross axis를 수직 축이라고 한다. flex container 속성 flex-direction : 주축의 방향을 설정 row : 좌에서 우로 수평 배치 row-reverse : 우에서 좌로 수평 배치(row 반대) column : 위에서 아래로 수직 배치 column-reverse : 아래에서 위로 수직 배치..

렌더링 과정브라우저는 HTML, CSS, 자바스크립트, 이미지 등 렌더링에 필요한 리소르를 서버에 요청해 응답을 받는다.브라우저의 렌더링 엔진은 서버로부터 받은 HTML과 CSS를 파싱해 DOM과 CSSOM을 생성하고 이들을 결합해 렌더 트리를 생성한다.브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱해 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환해 실행한다. 이때, 자바스크립트는 DOM API를 이용해 DOM과 CSSOM를 변경할 수 있다. 이렇게 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합된다.렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 HTML 요소를 페인팅한다.요청과 응답이제 세부 과정을 살펴보자.기..

최근 노마드 코더의 vanilla javascript 강의를 들으며 페이지를 만들던 중, api key를 쓰는 부분에서 '이게 git에 올라가면 아무나 내 api key를 쓰지 않을까?'란 생각이 들어 방법을 찾아보았다.항상 제일 간단한 방법을 선호하기 때문에 해결책은 간단했는데, api key를 관리하는 파일을 만들고 그 파일을 .gitignore 파일에 추가해 git에 올리지 않는 방법이다.이렇게 사용하면 api_key를 한번에 관리할 수 있고, 매번 필요한 파일마다 수동으로 수정해야하는 수고도 덜 수 있다.  https://velog.io/@ohwowo_o/javascript-API-key-%EC%88%A8%EA%B8%B0%EA%B8%B0 [javascript] API key 숨기기🚨 자신의 ap..

일단 모든 순열을 구해서 다음 순열을 찾으려면 순열에만 10000!(팩토리얼)을 쓰기 때문에 시간초과가 난다. 그래서 다른 방법을 써봤다. 기본적으로 a, b 두 스택을 이용했다. 스택을 나누는 대신 인덱스를 정해서 탐색해도 되지만, 직관적으로 이해가 잘돼서 스택을 이용했다. 이 방법을 이용하면 a, b 나누면서 N, b를 다시 탐색하면서 N으로 O(N)의 복잡도를 가진다고 생각한다. 기본 로직은 정답 코드에 적어놨다. 정답 코드 import sys n = int(sys.stdin.readline()) a = list(map(int, sys.stdin.readline().split())) b = [] # 12345 => a = [1, 2, 3, 4, 5], b = [] => b.append(a.pop()..

메모리의 종류와 할당 방식 데이터 영역(전역변수, static 변수) 프로그램 실행 시 로딩 힙(Heap) 영역(프로그래머 할당) 런타임에 크기 결정 스택(Stack) 영역(지역변수, 매개변수) 컴파일 타임에 크기 결정 함수 블록을 나가면 os에서 자동으로 해제시킴 메모리가 중요한 이유 메모리는 무한하지 않다. 즉 관리가 필요하다 사용자에 의한 관리가 필요함 프로그램이 종료되면, 할당된 모든 메모리가 날라감(정확히는 OS에 반환) 서비스 중인 유저의 데이터가 날아가게 되므로 데이터의 복구가 어려움 메모리에 값을 읽고 쓰는 행위는 반드시 동시에 일어나선 안된다(데이터 무결성) 메모리의 저장 매체 파일 : 메모리의 데이터를 프로그램에서 직접 하드 디스크에 기록 데이터베이스 : 메모리의 데이터를 DBMS등의 ..

모 회사를 지원하면서 과제 전형으로 알고리즘과 페이지 구현, 그리고 밑의 과제를 받았다. 이 과제를 제일 열심히 했었는데, 그 이유는 이 과제에 있던 한 문장 때문이었다.'현재 지원자 중 정답자가 없는 문제입니다'이 문장을 보고 '아 이건 꼭 풀어야겠다'고 생각해서 열심히 풀었던거 같다.javascript를 배우면서 jquery는 안 배웠는데 이렇게라도 jquery 공부를 해본게 추후에 도움이 되면 좋겠다.// 여기에 정답을 작성해주세요class Selector {  // 생성자에서 인자에 해당하는 요소들을 배열로 element에 저장합니다.  constructor(args) {    this.element = document.querySelectorAll(args);  }  // 메서드 체이닝이 가능하..