전체 글

URLSearchParams로 Url Query String 가져오기

바닐라 자바스크립트로 URL의 쿼리 스트링을 가져오는 방법을 알아보았다. React-Router-Dom이나 Next에서는 해당 기능에 대한 훅이 존재하지만, 바닐라 자바스크립트로도 간단히 이를 구현할 수 있다. 우선, window.location.search으로 URL에서 쿼리만 가져올 수 있다. console.log(window.location.search); // '?search=hihihi' 그리고 해당 String을 URLSearchParams의 인자로 전달하면, key-value의 형태로 값을 구조화할 수 있다. const searchParams = new URLSearchParams(window.location.search); for (const [key, value] of searchPara..

BFS(Breadth-First Search) 알고리즘 구현하기 (자바스크립트)

BFS는 최단 경로를 탐색하기 위해서 많이 사용되는 알고리즘으로, DFS와는 다르게 인접한 노드를 순서대로 방문하지만 각 인접 노드의 자식을 방문하는 건 나중에 이루어진다. 자바스크립트로 이를 구현해보면 다음과 같다. // 그래프의 인접 리스트 표현 const graph = { A: ['B', 'C'], B: ['A', 'D', 'E'], C: ['A', 'F'], D: ['B'], E: ['B', 'F'], F: ['C', 'E'] }; function bfs(graph, startNode) { const visited = new Set(); // 방문한 노드를 저장하는 Set const queue = [startNode]; // 탐색할 노드를 저장하는 큐 visited.add(startNode); /..

HTML 스킵 네비게이션이란?

네이버 웹 페이지의 HTML요소를 살펴보면, body 최상단데 id가 u_skip인 div 태그가 있다. 이 div 내부에 a태그 여러개가 삽입이 되어있는데, 각 태그는 서비스들의 바로가기가 연결되어 있다. 또한 특이사항으로, 이 a태그들은 보이지 않게 설정되어 있다. position: absolute; top: -30px; left: 0; 🌊 위와 같은 CSS 스타일이 적용되어 뷰포트에 보이지 않는다. 이런 구조는 어째서 존재하는 것일까? ChatGPT에 물어본 결과, 위와 같은 구조는 스킵 네비게이션 영역으로, 웹 접근성을 위해서 존재하는 바로가기 링크라고 한다. 스킵 네비게이션이 존재하는 이유는 다음과 같다. 스크린 리더 사용자들이 내용을 건너뛸 수 있게 바로가기 기능을 제공한다. 키보드를 사용하여..

Node Static Server 띄우는 방법들

정직인 서버를 띄우는 방법들에 대해서 알아보았다. SPA를 빌드 후 배포한다거나, 단순히 이미지나 html로 이루어진 웹페이지를 배포한다거나 할 때 복잡한 서버의 필요 없이 정적 서버를 띄워 웹 사이트에 접근하게 만들 수 있다. 이에 대한 여러가지 방법들에 대해서 알아보고, 기록하였다. serve, http-server와 같은 라이브러리 사용하기 CRA로 생성한 리액트 웹 어플리케이션의 빌드 명령어를 사용하면, 터미널에 친절하게 serve를 사용하여 정적 서버를 띄우는 방법을 알려준다. npm install -g serve serve -s build 위의 명령어로 serve를 설치하고, build 폴더 내부의 빌드된 리액트 어플리케이션을 정적 서버에 띄워준다. 이와 유사하게 http-server 라이브러..

React JSX의 List Rendering에서 key값 설정하기 (.map)

React에서 구조화된 객체를 여럿 가지는 배열을 통해서 List를 그리는 전형적인 패턴이 있다. const data = [{ title: "hi", content: "hello" }, ... { title: "bye", content: "sad" }] 해당 데이터를 React는 다음과 같이 그린다. function App() { return ( {data.map(el => ( {el.title} {el.content} ))} ) } React에 익숙하다면, 위의 코드에서 경고 메세지를 예상할 수 있을 것이다. 바로, key prop을 설정하라는 메세지이다. Warning: Each child in a list should have a unique “key” prop. 이 경고를 없애기 위해서 주로 사용..

MVVM과 MVI에 대해서

MVVM MVVM (Model-View-ViewModel) 아키텍처는 소프트웨어 개발에서 사용되는 아키텍처 패턴 중 하나다. MVVM은 사용자 인터페이스(UI)와 비즈니스 로직 간의 분리를 목표로 하며, 데이터 바인딩과 명령(Command) 패턴을 중심으로 구성된다. 🍉 MVVM 아키텍처의 세 가지 구성요소 Model 애플리케이션의 비즈니스 로직과 데이터를 담당한다. 데이터는 일반적으로 데이터베이스, 네트워크 요청, 로컬 파일 등에서 가져온 정보를 포함하고 있다. View 사용자 인터페이스(UI)를 표시하고 사용자의 입력을 처리한다. View는 데이터 바인딩을 통해 ViewModel과 상호작용하며, ViewModel에 의해 제공되는 데이터를 화면에 표시한다. 예를 들어, 액티비티, 프래그먼트, 커스텀..

syntactic sugar in Javascript (Class와 Async Await)

자바스크립트에서는 syntactic sugar라는 개념이 있는데, 이는 코드 작성을 더 간결하고 쉽게 만들어주는 문법적 편의 기능을 의미한다. 이를 잘 활용하면 쉽고 잘 읽히는 코드를 작성할 수 있다. Class class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`Hello, I'm ${this.name}.`); } } 프로토타입 생성자 함수 function Person(name, age) { this.name = name; this.age = age; } Person.prototype.sayHello = function() { console.log(`Hello, I'm ${..

Jetpack Compose 간단하게 알아보기 (Android에서 React 처럼 선언식으로 UI 작성하기)

Jetpack Compose는 기존의 XML로 작성하던 안드로이드 앱 UI 개발을 간소하고 빠르게 만들어주는 도구이다. Jetpack에 포함된 Compose는 선언적인 방식으로 UI를 구성하고, State의 변경에 따라서 자동으로 UI를 업데이트한다. Preview의 지원으로 개발 도중에 미리 화면을 확인할 수 있고, 핫 리로딩이 지원된다. 기존의 모든 코드와 호환되기에, 부분적으로 적용할 수도 있다. Andorid 플랫폼 API에 직접 접근하기에 성능적으로도 뛰어나다. class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) s..