개발

문제 상황 최근 큐텐이라는 일본 오픈마켓에 상품 업로드 중 입니다. 무브 상품 등록할 때 새로 등록하지 않고 이전에 같은 카테고리나 같은 브랜드 상품을 복사해서 등록하는데요. 그런데 등록할 때마다 옵션 이미지를 하나씩 지워야하는 게 너무 번거롭더라고요. 그래서 이미지를 일괄 지우는 기능을 개발했습니다! 해결방법 외부 프로그램을 만들까 고민을 했는데, 일단 1. 기능이 간단하고 2. 접근성을 높이기 위해서 '북마크릿'이라는 크롬 브라우저의 작은 어플리케이션 기능을 이용했습니다. 위처럼 북마크 부분에 등록하고 사용하면 되는데요. 옵션 이미지 창이 떴을 때 삭제 버튼을 인식해서 한 번에 클릭하도록 만들었습니다. 위는 매크로 사용결과입니다. 하나씩 우측 상단 버튼 누를 필요 없이 한 번에 이미지가 지워집니다! ..

해당 포스팅은 자바스크립트 클로저에 대해서 다룹니다. JS를 주언어로 다루는 개발자라면 ‘클로저’라는 단어를 몇 번이고 들어봅니다. 설명을 찾아보면 그 당시에는 이해가 되지만, 만약 다른 사람에게 설명한다고 하면 입이 떨어지지 않는 그 애매한 개념에 대해서 오늘 정리해보려고 합니다. 스코프 클로저를 이해하려면 일단 스코프부터 알아야합니다. 스코프는 식별자가 유효한 범위, 실행 컨텍스트의 렉시컬 환경을 뜻합니다. 이렇게 말하니 뭔지 모르겠죠? 지금 당장 “여름 좋아세요?” 라는 물음을 듣는다면 어떤 대답을 할 것 같나요? “아니요, 저는 겨울이 좋아요.” “네, 저는 여름이 좋아요.” 같은 답을 하겠죠. 여기서 ‘여름’은 당연하게도 해가 쨍쨍해서 밖에 나가면 땀이 주륵주륵 흐르는 계절을 뜻합니다. 근데 ‘..

해당 포스팅은 유클리드 호제법 알고리즘을 이용해서 자바스크립트 js코드로 최대 공약수를 구하는 알고리즘을 구현합니다. 최대공약수란? 일단 최대공약수란 무엇일까요? 초등학생때 배워서 아마 대충은 알고 있겠지만 다시 한 번 정리해봅시다! 8의 약수 : 1, 2, 4, 8 10의 약수 : 1, 2, 5, 10 8과 10의 공약수 : 1,2 8과 10의 최대공약수: 2 약수란 어떤 수를 나누어 떨어지게 하는 수입니다. 8의 약수는 1,2,4,8이고 10의 약수는 1,2,5,10입니다. 공약수는 두 수의 공통된 약수입니다. 8과 10의 공약수는 1, 2가됩니다. 그리고 최대공약수는 이 공약수 중에 가장 큰 갑입니다. 8과 10의 최대 공약수는 2가 됩니다. 우리가 초등학생때 배운 최대공약수를 구하는 방법은 두 가..

해당 포스팅은 React Webpack 환경에서 최적화하는 방법에 대해 다룹니다. Tree Shaking, 난독화, production 빌드에 대한 이야기가 나옵니다. 💡 요약 필요한 파일만 import하기 "sideEffect" 옵션 사용하기 "production" 모드로 build하기 CSS 최적화하기 devtool:false 트리 쉐이킹이란? 웹 최적화를 위해 사용하지 않는 코드(Dead code)를 제거하는 방법입니다. webpack과 같은 모듈 번들러에서 해당 기능을 제공합니다. 이 과정을 통해 파일을 최소 크기로 번들링하여 웹 어플리케이션 최적화할 수 있습다. 영어의 뜻을 그대로 해석하자면 나무 흔들기. 죽은 나뭇잎을 떨어뜨리기 위해 나무를 흔드는 것처럼 자바스크립트에서 죽은 코드를 제거하는 ..

해당 포스팅은 git push -u 옵션 option에 대해 다룹니다. git push는 로컬 git에 저장한 commit을 github와 같은 원격 저장소에 올리는 커맨드입니다. git을 사용하다 보면 종종 로컬과 원격 저장소의 차이에 의해서 오류가 생깁니다. 이때 push -u 옵션이 유용하게 쓰입니다. 해당 포스팅에서는 push의 -u 옵션에 대해 설명할 예정입니다. 들어가며 github에 레지스토리를 생성하면 해당 커맨드 라인이 뜨는 걸 볼 수 있습니다. 여기서 확인할 내용은 마지막 git push 커맨드입니다. git push -u origin main 해당 명령어는 git push로 origin이라는 리모트 레포지토리에 main 브런치에 push 한다는 의미입니다. 그럼 여기에 존재하는 -u ..

해당 포스팅은 브라우저 렌더링 원리에 대해 다룹니다. 면접시 바로 말할 수 있는 답과 그외 자세한 내용이 적혀 있습니다. 브라우저 렌더링 과정은? 1. HTML 파싱 -> DOM 트리구축, CSS 파싱 -> CSSOM 트리 구축 2. DOM과 CSSOM을 조합하여 렌더 트리(Render Tree) 구축 3. 렌더 트리 배치 (Layout) 4. 렌더 트리 그리기 (Paint) 첫 번째 DOM 트리 구축을 위한 HTML 파싱, 두 번째는 렌더 트리 구축, 세 번째는 렌더 트리 배치, 네 번째는 렌더트리 그리기입니다. 일단 HTML 구문을 분석하여 브라우저가 이해하도록 바꿔주는 작업이 필요합니다. 이를 위해 HTML 파서가 사용되는데 이는 HTML 마크업을 DOM 트리로 변환합니다. 이때 중간에 태그를 만나..

해당 포스팅은 알고리즘 그래프에 대해 다룹니다. 그래프의 용어, 정렬, 행렬, 리스트, 점과 선에 대한 내용입니다. 그래프 소개 목표 그래프가 무엇인지 설명한다. 여러 종류의 그래프를 비교하고 사용 예시를 확인한다. 인접 리스트를 활용해서 그래프를 코딩한다. BFS와 DFS를 사용해 그래프를 순회한다. 빅오애 대해 다룬다. 그래프란? 그래프는 유한하고 변할 수 있는 꼭지점이나 노드나 점들의 집합으로 구성된 데이터 구조이다. 이 꼭지점들의 집합에 순서가 없는 경우에는 무방향 그래프, 순서가 있는 경우에는 유방향 그래프라고 합니다. 그래프는 노드나 노드들의 연결을 모은 것입니다 (Node + Connections) 그래프 이용 그래프 사용처 Social Network Location / Mapping Rou..

해당 포스팅은 HTTP 캐쉬가 도입된 목적과 헤더를 통해 캐쉬 동작을 제어하는 방법에 대해 다룹니다. 캐시가 도입된 이유 인터넷의 팽창 이후 http 전송 속도를 높이기 위해 도입했습니다. 사이트를 방문할 때마다 매번 같은 파일을 받는 건 비효율적입니다. 자주 사용하는 파일은 사용자 측 브라우저에 저장하고 재사용한다면 효율이 더 좋겠죠. 그래서 나온 기술이 바로 캐시입니다. 캐시의 장점은 네트워크를 사용하지 않으면 일단 지연이 발생하지 않고 비용도 감소한다는 점입니다. 반면에 단점도 존재합니다. 캐시를 사용하고 있다면, 우리 웹사이트가 개편이 됐더라도 사용자는 이전의 사이트를 보고 있을 수 있습니다. 최신 상태를 계속 유지하는 웹의 장점을 그대로 사용하기 위해서는 섬세한 조정이 필요합니다. 웹 사이트 일..

해시 테이블 소개 목표 해시 테이블에 대해 설명 해싱 알고리즘 정의 어떤 것이 좋은 해시 알고리즘을 만드는 지 해시 테이블에서 충돌이 일어나는 경우와 충돌이 무슨 의미인지 충돌을 해결하는 두 가지 방법 해시 테이블이란? 해시 테이블은 key-value 쌍을 이루어 저장한다. 배열과 비슷하나 테이블 키는 순서를 가지지 않는다. 배열과 달리 해시테이블은 값을 찾거나 추가하거나 제거하는데 매우 빠르다. 배워야 하는 이유? 거의 모든 언어는 해시 테이블 종류의 구조를 가진다. 그건 속도가 매우 빠르기 때문이다. 순서가 중요하다면 배열에 저장하면 되지만 대부분 데이터는 그럴 필요가 없다. 그런 경우 해시 맵이나 해시 테이블을 사용하면 된다. 해시 테이블에 대한 더 자세한 정보 해시테이블이 어떻게 작동하는 지 이해..

힙 (Heaps) 소개 힙은 트리의 일종입니다. 이 영상과 단원에서는 힙에 대해 배울 겁니다. 그렇지만 기본적으로 힙은 트리입니다. 힙도 종류가 많습니다. 우리가 집중해서 다룰 것은 이진 힙입니다. 목표 힙의 정의 최소 힙과 최대 힙 비교 둘 중 하나를 코딩해본다. 실생활에서 힙이 사용되는 예시와 힙을 사용해서 만들 수 있는 여러 데이터 구조 다루기 이진 힙이란 무엇인가? 이진 탐색트리와 매우 비슷하지만, 다른 규칙을 가지고 있다. 최대 이진 힙에서는 부모 노드가 항상 자식 노드보다 큰 값을 가진다. 최소 이진 힙에서는 부모 노드가 항상 자식보다 작은 값을 가진다. 최대 이진 힙 각각의 부모는 최대 두 개의 자식을 가진다. 최대 이진 힙에서는 부모 노드의 값이 언제나 더 큽니다. 최대 이진 힙에서는 부모..