좋은 사람들과 지식을 나누고 싶습니다

성능 저하 문제 후기를 작성 및 수정할 수 있는 Form 컴포넌트에서 성능이 저하되는 현상이 관찰되었다. 유저가 입력 필드에 글자를 빠르게 입력하면 버벅거리는 현상이 발생하면서 몇 초가 지난뒤에야 입력이 반영된다. 이에 Performance 탭을 통해 성능을 프로파일링해 보았다. 내가 수행한 상호작용은 ‘제목’ 입력창... Read More

지난 이야기 메인 페이지와 게시물 상세 페이지에서 사용하는 두 API의 성능이 다소 낮다는 문제가 있었고, 이로 인해 페이지의 전환이 매우 느리다는 문제가 발생하였다. 이에 SWR의 캐싱을 활용하여 느린 로딩 속도를 극복하고 페이지를 빠르게 전환할 수 있었다. 그러나 두 가지의 문제가 여전히 남아 있었다. 이번 글에서는 SWR의 ... Read More

문제 상황 나는 초록집사 프로젝트에서 ‘메인페이지’와 ‘게시물 상세 페이지’를 맡았다. 그런데 문제가 한 가지 있었다. 그것은, 이 두 페이지에서 사용하는 서버 API의 성능이 다소 느리다는 것이었다. 게시물 목록 조회 API 게시물 목록을 offset과 limit를 통해 부분적으로 조회할 수 있다. axios를 사용한 호출... Read More

오랜만에 초록집사 프로젝트의 리팩토링 글이다. 이전에 만들었던 댓글 UI에 SWR을 적용하였다. 그 이유는 서버와의 동기화를 높이기 위함이다. 댓글은 유저들의 대화가 실시간으로 발생할 수 있는 UI다. 그러므로, 데이터를 최신으로 업데이트하는 것이 특히나 중요하다. 만일 유저 1, 2가 댓글에서 대화를 나누려 한다고 해 보자.... Read More

정의 데이터를 함수로 연결하고 계산하는 것을 중시하는 프로그래밍 패러다임 특징 1. 순수함수 동일한 입력에는 항상 동일한 값을 반환해야 한다. 함수 내부에서 전달받은 인자의 값을 변경하거나, 외부의 값을 변경하는 Side Effect가 없어야 한다. // 비순수함수 let num = 10; function multiply(a) { return... Read More

버그 제보 팀원으로부터 SWR로 인해 버그가 발생했다는 제보가 들어왔다. useSWRInfinite를 사용해 무한스크롤을 구현하였는데, 특정 포스트에 좋아요를 누른 뒤, 잠시 다른 페이지로 이동했다가 다시 돌아오면, 조금 전에 누른 좋아요가 반영되지 않는다는 제보였다. 아래 영상을 참고해주시기 바란다. ... Read More

디바운스 훅 시리즈(?)의 두 번째 글이다! 전시회 검색 기능을 리팩토링하였다. 무엇을 바꿨을까? 기존에는 검색 버튼을 명시적으로 클릭해야만 검색이 가능했었다. 이것을, 글자를 입력하면 자동으로 검색이 되고, 결과가 나타나도록 리팩토링하였다. 글자를 입력할 때마다 검색이 발생하는 것은 아니다. 사용자의 입력이 끝나면 0.3... Read More

프로젝트를 리팩토링하던 중, 이벤트 핸들러의 과도한 호출을 방지하기 위해 Debounce를 사용할 필요를 느꼈다. 먼저 Debounce와 Throttle에 대해서 정리해 보자. Debounce와 Throttle은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화하여 과도한 이벤트 핸들러의 호출을 방지하는 기법이다. 디바... Read More

불변성 데이터, 특히 원본 데이터는 가능한 불변성을 보장하는 것이 중요하다. 데이터를 불변하게 다루지 않으면 데이터들간의 간섭으로 인해 예상치 못한 버그가 발생할 수 있기 때문이다. 특히, 객체는 동일한 객체라도 속성 값이 변경될 수 있기 때문에 가변적이다. 따라서 객체를 다룰 때에는 각별히 조심해서 다루어야만 한다. 아래의 간... Read More

세션이란 세션은 쿠키에 기반함. 단, 유저의 정보 파일을 서버에서 관리. 서버에서는 클라이언트를 구분하기 위해 세션 ID를 부여함. 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증 상태 유지. (접속 시간 제한 가능) 사용자에 대한 정보를 서버에 두기 때문에 쿠키보다 보안이 ... Read More

쿠키와 세션1: 쿠키 쿠키와 세션에 대해 공부한 내용을 정리한 글입니다. 먼저 쿠키에 대해서 정리합니다. HTTP의 특성 쿠키와 세션을 이해하려면 먼저 HTTP의 특성을 알아야 한다. HTTP: 인터넷상에서 데이터를 주고 받기 위해 서버/클라이언트 모델을 따르는 통신규약 비연결성(Connection... Read More

프로젝트에 SWR을 도입할 것을 건의하면서 작성했던 글이다. 결과적으로 팀원들은 SWR의 도입을 수긍해주었으며, 현재 프로젝트에 적용하고 있는 상황이다. 블로그에도 공유한다. SWR이란? Vercel에서 만든 데이터 fetching을 위한 리액트 훅 Axios를 완전히 대체하는 기술은 아니다. 데이터 fetch, 즉... Read More

서론 유저의 로그인 상태나 권한(일반 유저, 관리자 등)에 따라 접근 가능한 페이지가 다르다. Public Route는 로그인 여부와 관계없이 모든 유저에게 허용되는 페이지라고 할 수 있다. 반대로, Private Route는 로그인한 사용자에게만 허용되는 페이지다. 비로그인 사용자가 Private Route로 접근하는 경우, 로그... Read More

서론 데브코스 5개월의 여정을 끝맺을 대망의 최종 프로젝트… 팀원들과 함께 아이디어를 논의하던 것이 엊그제였던 것 같은데 벌써 한 달이라는 시간이 지나가고 모든 것이 마무리되었다. 프로젝트를 하면서 무척이나 힘들었지만, 동시에 개발, 협업, 프로젝트 관리 등 많은 것을 배울 수 있던 귀중한 시간이었다. 팀 소개 & 나... Read More

후기 작성 시, 사용자가 여러 사진 파일을 업로드할 수 있도록 구현하였다. Antd의 Upload 컴포넌트를 사용하였다. 그렇기에 마크업은 전혀 어렵지 않았다. 반면에, 예상 외로 까다로웠던 것은 ‘타입’이었다. 위 이미지와 같이 파일을 업로드하면, 각 파일은 UploadFile 이라는 Antd 고유의 타입으로 정의된다. 아... Read More

서론 내가 맡은 페이지 중 하나는 후기 작성 및 수정 페이지이다. multipart/form-data를 다루는 것이 익숙하지 않아서 조금 헤매었던 부분이다. 특히 여러 개의 이미지 파일을 업로드하고, 그 이미지 파일을 수정(삭제 또는 추가)하는 부분이 조금 까다로웠다. 하지만 그만큼 새로운 많은 지식을 배울 수 있던 소중한... Read More

Manuel Matuzovic의 Writing HTML with Accessibility in Mind를 읽고 정리한 글입니다. 웹 접근성이란? 장애인이나 고령자들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항이다. 시각, 이동... Read More

이번 최종 프로젝트에서는 Next.js를 통해 SSR을 일부 도입할 예정이다. SSR을 왜 도입하려고 하는가? SEO 최적화, 빠른 초기 로딩 속도 등의 이점이 있기 때문이다. 특히, CSR만으로 구현했던 중간 프로젝트에서는 SEO를 잘 고려하지 못했는데 이 점이 아쉽다. 아무리 열심히 사이트를 만들었어도... Read More

key는 왜 필요할까? React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인한다. 개발자는 key를 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 말아야 할지 표시해 줄 수 있다. <ul> <li key="2015">Duke</li> <li key="... Read More

문제: 환경 변수 사용 불가 “북레스트” 프로젝트를 배포하던 중 문제가 발생했다. 프로젝트에서는 카카오 API를 사용하고 있는데, 발급받은 API key를 숨겨야 했다. 만일 이것이 리액트 환경이라면 루트 폴더에 .env를 만들어 환경변수를 만들면 된다. 그러나 문제는, “북레스트”는 리액트 환경이 아니라는 것이었다... Read More

이슈 현재 우리의 앱은 로그인을 해야만 이용할 수 있다. 그러나 이 방식은 서비스 측면에서 좋지 않다고 생각한다. 앱의 서비스와 콘텐츠가 어떤 것이 있는지 보여주지도 않고, 로그인과 회원가입을 먼저 요구하는 것은 이상하지 않은가? 앱을 처음 방문한 사용자의 대부분은 그냥 떠나버릴 것이라고 생각한다. 그래서 비로그인 사용... Read More

19일간의 팀 프로젝트가 끝났다. 이것은 나의 첫 팀 프로젝트였고, 처음이었던 만큼 많이 낯설고 어려웠지만 그래도 무사히 프로젝트를 완성할 수 있어서 뿌듯했던 시간이었다. 팀 소개 & 나의 역할 우리는 총 4명으로 구성된 팀이었다. 돌이켜 보면 개발 외에도 각자 잘하는 것이 있는, “밸런스가 좋은” 팀이었던 것 같다. 디... Read More

이슈 내가 구현한 무한스크롤에서 문제점이 한 가지 발생했다. 그것은 바로, 유저가 다른 페이지를 탐색하다가 뒤로가기를 누르면 원래의 위치로 되돌아 올 수 없다는 것이다. 이는 사용성에 좋지 않다. 사실, 이것은 무한 스크롤이 가지고 있는 본질적인 문제점이다. 기본적으로 React-Router는 페이지 이... Read More

이슈 아래는 내가 만들고 있는 피드 목록 페이지다. 첫 마운트 시에 5개의 게시물을 불러온 뒤, 사용자가 스크롤을 내려 마지막 게시물에 도달하면 새롭게 5개의 게시물을 불러오는 방식으로 무한 스크롤을 구현하고 있었다. 그러던 중 난감한 버그를 만났다. 마지막 포스트에 도달하면 서버 요청이 한 번이 아니라 여러 번 발... Read More

이슈 댓글 추가 기능을 구현하면서 다음과 같은 버그를 만났다. 분명히 textarea에 Enter를 작성하여 댓글을 등록하였다. 그런데… 실제로는 Enter, 즉 개행이 반영되지 않는 버그이다. 개행이 올바르게 반영되지 않고 하나의 공백으로 처리된다. 왜 그럴까? 문제 해결 해결안: CSS의 white-sp... Read More

컴포넌트 스타일링 방법 스타일시트 Inline style CSS in JS Imotion 라이브러리 설치 프래그마 지시문 컴파일러에게 해당 파일을 어떻게 처리할지를 알리는 것. useMemo 최적화를 위해 필요한 훅 (함수의 ... Read More

리액트의 특징 Reactive Programming React는 상태를 관찰하고 변화가 발생할 경우 연관된 곳에서 연산을 수행한다. View만을 관리하는 라이브러리 컴포넌트 재사용이 가능한 독립적인 객체. HTML, Sty... Read More

검색 API & 무한 스크롤 이번 포스팅에서는 카카오 API를 활용하여 책 검색 기능을 구현하고, 무한 스크롤 기능을 추가해보겠다. 결과물을 미리 살펴보면 다음과 같다. 1. 내부 페이지 구현 먼저 필요한 것은 내부 페이지인 HomeSearchPageView... Read More

자바스크립트의 addEventListener 메서드를 사용할 때 주의할 점이 한 가지 있다. 바로 이벤트 핸들러의 ‘누적 등록’이라는 것이다. addEventListener는 동일한 HTML 요소에서 발생한 동일한 이벤트에 대해 하나 이상의 이벤트 핸들러를 누적하여 등록할 수 있... Read More

View & Controller 이번 포스팅에서는 View 및 Controller에 대해 구체적으로 설명하겠다. 1. View의 공통 메서드 먼저 View의 공통 메서드를 정의한 View.js에 대해 살펴보자. View.js는 하나의 객체로 정의되며, 그 안에 4개의 메서드를 포함... Read More

프로젝트 셋업 & 라우팅 1. 폴더 구조 이번 포스팅부터 본격적으로 개발을 진행해보겠다. 우선 폴더 구조는 아래와 같다. 중요한 것은 index.html과 src 폴더이다. index.html 루트 폴더에 위치한다. SPA이므로 단 하나의 html이 존재한다... Read More

1. 바닐라 JS와 SPA 바닐라 JS로 SPA를 구현하는 프로젝트를 진행해보려고 한다. 이번 포스팅을 시작으로 개발 진행 상황을 기록하는 글을 꾸준히 올릴 계획이다. SPA 개발에 관심이 있는 독자인 당신에게, 이 글이 조금이나마 도움이 되기를 바란다. 먼저 SPA에 관하여 간략히 얘기해 보도록 하자. 1) SPA ... Read More

history API 브라우저에서 페이지 로딩을 하면 세션 히스토리를 갖는다. 세션 히스토리는 페이지를 이동할 때마다 쌓인다. 페이지 뒤로 가기, 앞으로 가기 등이 가능하다. pushState, replaceState로 화면의 이동 없이 url을 변경할 수 있다. pushState:... Read More

1. fetch Response 객체를 얻은 후에는 응답을 json으로 바꾸거나 text로 바꾸는 등의 처리가 필요하다. Blob은 이미지를 처리하는데 사용할 수 있다. fetch는 HTTP error가 발생하더라도 reject되지 않는다. 네트워크 에러나 요청이 완료되지 못한 경우에만 reject된다. ... Read More

선언형 프로그래밍 1. 명령형 프로그래밍 컴퓨터가 수행할 명령들을 순서대로 써 놓은 것이다. 어떻게 구현하는가를 디테일하게 기술 2. 선언형 프로그래밍 HTML, SQL 등 어떻게 보다는 "무엇"에 초점이 있다. 목표를 명시하고 알고리즘을 명시하지 않는다. 선언형으로 작성하는 ... Read More

“김영한” 님의 인프런 강의 “모든 개발자를 위한 HTTP 웹 기본 지식”을 듣고 정리한 글입니다. 캐시 1. 캐시 기본 동작 캐시 미적용 데이터가 변경되지 않아도 데이터를 계속 다운받아야 한다. 느린 브라우저 로딩, 나쁜 사용자 경험 캐시 적용 ... Read More

자바스크립트 주요 문법 this 메서드 내부의 this는 ‘메서드를 호출한 객체’를 가리킨다. 이때 다음과 같은 중첩 객체에 주의할 필요가 있다. const grandparent = { whoAmI: function () { console.log(this); }, parent... Read More

“김영한” 님의 인프런 강의 “모든 개발자를 위한 HTTP 웹 기본 지식”을 듣고 정리한 글입니다. HTTP 헤더1 - 일반 헤더 1. 개요 HTTP 전송에 필요한 모든 부가정보 (매우 많음) 표현 표현 = 표현 메타데이터(헤더) + 표현 데이터 표현은 요청이나 응답에서 ... Read More

“김영한” 님의 인프런 강의 “모든 개발자를 위한 HTTP 웹 기본 지식”을 듣고 정리한 글입니다. 네트워크 상태 코드 1. 1xx Informational, 요청이 수신되어 처리 중 거의 사용되지 않음 2. 2xx Successful, 요청 정상 처리 200: OK, 요청 성공 201: ... Read More

구글이나 네이버 등에서 ‘단어를 자동으로 완성하는 검색 폼’을 보았을 것이다. 아래 이미지처럼 말이다. 본 포스팅에서는 바닐라 자바스크립트를 사용하여 이를 구현해보겠다. 1. 트라이(Trie) 우선 필요한 것은 트라이(Trie)라는 자료구조다. 트라이는 탐색 트리의 일종으로, 문자열을 저... Read More

자료구조 기초 1. 기본 “자료구조와 알고리즘이 반드시 필요한 순간이 온다.” 선형 구조: 한 원소 뒤에 하나의 원소 비선형 구조: 원소 간 다대다 관계 2. 배열 탐색 O(1), 삽입 O(n), 삭제 O(n) 삽입과 삭제가 빈번하다면 배열을 사용하지 않는 것이 좋다. 자바스크립트의 ... Read More

1. 자바스크립트 - 모듈 코드를 모듈화해서 작성하는 것을 말한다. 모듈화하지 않으면 전역 스코프에 코드들이 모이며, 이름 충돌이 발생할 우려가 있다. 규모가 큰 프로젝트일수록 모듈화를 해야 한다. 모듈을 사용하면 이름 충돌을 방지할 수 있다. 코드를 각각 분리하므로 가독성이 높아진다.... Read More

해쉬뱅(HashBang) 정의 URL의 중간에 있는 #!을 해쉬뱅이라고 한다. 배경 싱글 페이지 웹애플리케이션 구현에 사용되며, ajax의 한계를 극복하기 위해 도입된 과도기적 기술이다. (뒤로 가기 버튼 불가, 검색 문제 등) ... Read More

“김영한” 님의 인프런 강의 “모든 개발자를 위한 HTTP 웹 기본 지식”을 듣고 정리한 글입니다. HTTP 주요 메서드 1. GET 리소스 조회. 서버에 전달하고 싶은 데이터는 query 파라미터를 통해서 전달. 메시지 body를 사용해서 데이터를 전달할 수 있으나, 권장하지 않는다. 지원하지 않는 서... Read More

맵드 타입 타입스크립트 공식 문서에서 맵드 타입(Mapped Type) 글을 읽어보던 중, 재미있는 예제를 발견해서 글을 써본다. 참고로, 맵드 타입이란 기존에 정의되어 있는 타입을 새로운 타입으로 변환해 주는 문법이다. 마치 자바스크립트의 map() 메서드를 타입에 적용한 것과 유사하다. 다음은 맵... Read More

스코프는 식별자(변수 이름, 함수 이름, 클래스 이름 등)의 유효 범위를 의미한다. 다른 코드가 해당 식별자를 참조할 수 있는 범위를 뜻한다. 스코프는 크게 전역 스코프와 지역 스코프로 구분되며, 자신이 선언된 위치에 의해 스코프가 결정된다는 특성이 있다. 함수 레벨 스코프 그렇다면 함수 레벨 스코프는 무엇일까? 이는 함수... Read More

배경 프론트엔드를 본격적으로 공부한지 벌써 4개월이 지났다. 그 동안 책과 인터넷 강의를 통해서 꾸준히 공부해왔지만, 슬슬 독학의 한계가 느껴지던 참이었다. 내가 느낀 독학의 단점을 간단히 정리하면 다음과 같다. 학습 관리는 혼자서 자칫 나태해질 염려가 있다. 내가 올바른 방향으로 학습을 하고 ... Read More

Promise 객체는 5가지의 정적 메서드를 가지고 있다. 1. Promise.resolve & Promise.reject Promise.resolve와 Promise.reject는 전달받은 값을 래핑하여 Promise를 생성한다. Promise.resolve는 전달받은 값을 r... Read More

얕은 복사 vs 깊은 복사 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)는 과연 무엇일까? 다음과 같이 객체 안에 중첩된 객체(Nested object)가 있다고 해 보자. const obj1 = { obj2 : { a: 1 }}; 이 때 얕은 복사는 한 단계까지만 복사하는 것을 ... Read More

4. @import 기능에 따라 코드를 파일로 분리하는 것은 재사용 및 유지보수에 유리하다. CSS 파일도 예외는 아니다. Sass는 @import를 통해 여러 CSS 파일을 import 할 수 있다. 기존의 CSS @import보다 편리하다. @import "style1.scss"; // 확장자는 생략할 수 있다. @im... Read More

자주 사용되는 UI 중 하나는 슬라이드 배너이다. 대부분의 사이트에서 아래와 같이 수평으로 움직이는 슬라이드 배너를 봤을 것이다. 슬라이드가 자동으로 전환되기도 하고, 탭을 누르면 바뀌기도 한다. 한편, 수평이 아닌 ‘수직’으로 움직이는 슬라이드 배너 또한 가끔은 볼 수 있다. 아래와 ... Read More

React Router에서 화면을 전환할 때는 a 태그가 아니라 Link를 사용해야만 한다. 헌데 어째서 그럴까? Link는 무엇을 하는 녀석이고, a 태그를 사용해서는 안 되는 이유는 무엇일까? Link를 쓰세요…그런데 왜? 먼저 Link의 특성은 다음과 같다. Link는 Reack-R... Read More

요즘 개인 프로젝트를 하면서 절실히 느끼는 것인데, 프로젝트를 진행할수록 CSS 코드가 알아보기 힘들 정도로 난잡해진다. 전체 코드의 길이는 너무 길고, 중복되는 코드가 난무하며, 수정 시 고쳐야할 부분이 한 두 군데가 아니다. 뭔가 잘못되고 있다는 불안감이 마음을 짓누른다. “어떻게 하면 CSS를 더 효과적으로 작성하고 관리할 수 ... Read More

자바스크립트를 공부할수록 유용하고 편리한 내장 메서드들이 많다는 것을 느낀다. 그 중에서 localeCompare라는 상당히 재미있는(?) 녀석이 있는데, 이번 글에서는 이 녀석에 관한 이야기를 해보고 싶다. 또한, 이 localeCompare을 기존의 sort 메서드에 활용하는 방안을 서술해 보겠다. l... Read More

CSS의 클래스 네임을 작성하는 일은 상당히 까다로운 일이다. 아무렇게나 작성해도 구동에는 무리가 없지만, 그렇게 되면 코드의 구조를 이해하기 어렵고 유지보수가 힘들어진다. 따라서 “최대한 의미있고 구조를 쉽게 파악할 수 있는 클래스 이름”을 작성하는 일이 중요한 것이다. 이 문제로 고민을 하던 중... Read More

문제 설명 프로그래머스의 ‘소수 찾기’ 문제를 풀어보았다. 문제는 다음과 같다. 1부터 숫자 n 사이에 있는 소수의 개수를 반환하는 함수를 만들어 보세요. 소수는 1과 자기 자신으로만 나누어지는 수를 의미합니다. n은 2이상 1000000이하의 자연수입니다. 처음엔 매우 쉬운 문제라고 생각했었다. 소수를 찾는 방법은 잘 알고 ... Read More

개요 웹 프로젝트의 입문이라고 할 수 있는 ‘쇼핑리스트 앱’ 프로젝트를 완성하였다. 기간은 하루 정도 걸렸던 것 같다. 아직은 프로젝트 경험이 부족해서 조금 헤메었지만 어렵지는 않았다. 그 동안 공부해왔던 DOM, 이벤트, 스크롤 제어 등의 기술을 적용해볼 수 있던 좋은 경험이었다. 결과물 1. 초기 화면 사용자가 데이터를 입력하기 전... Read More

이번 글에서는 순열(Permutation) 알고리즘에 대해 정리해본다. 순열 Permutation 표현: nPr 의미: 서로 다른 n개 중에서 r개를 뽑을 때, 순서를 고려하여 뽑는 경우의 수. 중복을 포함하지 않는다. (중복을 포함하는 것은 ‘중복 순열’) 순열 알고리즘 순... Read More

고등학생 때 공부했던 ‘조합’과 ‘순열’… 이를 컴퓨터 알고리즘으로 어떻게 표현할 수 있을까? 우선 ‘조합’에 대해서 이야기해보자. 조합 Combination 표현: nCr 의미: 서로 다른 n개 중에서 r개를 뽑을 때, 순서와 상관없이 뽑는 경우의 수. 중복을 포함하지 않는다. (중... Read More

상속(Inheritance)이란 상위 요소의 속성을 하위 요소가 물려받는 것을 뜻한다. 상속이 되는 속성이 있고, 상속이 되지 않는 속성이 있다. 이를 정리하면 다음과 같다. 상속 Yes font, color, line-height, text-align, vi... Read More

클래스를 유연하게 만들기 클래스를 하나의 목적만을 수행하는, 너무 딱딱한 형태로 만들면 다양한 상황에 활용하기가 어려워진다. 사용자(프로그래머)가 원하는 기능을 추가하여 재사용이 가능하도록 클래스를 유연하게 만드는 것이 필요하다. 예컨대 사용자가 정의한 함수를 ‘콜백 함수’로 클래스에 전달하게 ... Read More

img 태그에 관하여 알아야 할 것들을 정리해보았다. src 특성은 필수이며, 포함하고자 하는 이미지의 경로를 지정한다. 내부 리소스 이미지: 프로젝트 안에 있는 이미지의 경로를 참조 외부 리소스 이미지: 외부 경로에 있는 이미지의 경로를 참조 alt 특성은 이미... Read More

CSS의 중앙 정렬 방법이 자주 헷갈린다. 그래서 유형에 따라 필요한 속성들을 싹 정리해보았다. 자신을 중앙으로 보내는 경우 1. position: absolute 수평/수직 중앙: left(50%), top(50%), translate(-50%, -50%) 수평 중앙: left(50%), t... Read More

자바스크립트 JSON에 관한 개념과 메서드를 정리해 보았다. Ajax와 XML 1. Ajax Asynchronous JavaScript and XML. 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 ... Read More

Ajax를 공부하다가 페이로드(payload)란 용어를 보게 되어 정리해본다. 의미 페이로드는 사용에 있어서 전송되는 데이터를 의미한다. 특히 전송의 근본적인 목적이 되는 데이터로서, 그 데이터와 함께 전송되는 헤더와 메타데이터와 같은 데이터는 제외한다. 예를 들어, 누군가에게 손편지를 써 보낸다고 생각해보자. ... Read More

웹 개발 공부를 하다가 URI란 용어를 알게 되어 찾아보았다. 익히 자주 사용하는 URL과는 어떤 차이가 있을까? 결론부터 말하면 URI는 URL의 상위 집합이다. URI는 리소스의 식별자(identifier)이고, URL은 리소스의 위치(locator)를 가리킨다. 1. URI URI는 통합 자원 식별자... Read More

DOM을 변경하는 것은 높은 비용이 드는 작업이므로 횟수를 줄이는 것이 유리하다. 그러므로 여러 요소를 DOM에 추가할 때는 Document Fragment 노드를 사용하는 것이 좋다. Document Fragment 노드 Document Fragment 노드는 별도의 서브 DOM을 구성하여 ... Read More

Element의 크기를 구하는 방법은 4가지가 있다. 각 속성 및 메서드의 차이를 정리해보았다. 1. offsetWidth/Height 일반적으로 Element의 전체 크기를 구할 때 사용한다. 아래 그림과 같이 콘텐츠, 패딩, 보더, 스크롤바의 크기를 포함한다. 2. clientWidth/Hei... Read More

자바스크립트에서 정규표현식에 ‘변수’를 사용하려면, ‘생성자 함수’로 RegExp 객체를 생성해야 한다. 정규표현식을 생성하는 방법에는 ‘리터럴 표기법’과 ‘생성자 함수’ 방식이 있다. 1. 리터럴 표기법 new RegExp(/ab+c/, ‘i’) 매개변수를 두 빗금으로 감싼다. 표현식이 평가될 때 컴파일된다. 표현식이 ‘... Read More

무방향 그래프에서 간선 (a, b)와 (b, a)는 사실상 동일하다. 이러한 중복 없이 간선을 추출하는 함수를 작성해보자. 자바스크립트 코드 먼저, 무방향그래프를 인접 리스트를 사용하여 구현해보자. // 무방향 그래프 구현 (인접 리스트 사용) // 생성자 함수 function UndirectedGraph() { this.edges = {}; // ... Read More

Floyd의 최단 경로 알고리즘은 그래프의 모든 정점 간의 최단 경로를 한 번에 찾아준다. 알고리즘 자체는 매우 간단하다. 2차원 배열 A를 이용하여 3중 반복을 하는 구성이다. // Floyd의 최단 경로 알고리즘 의사 코드 Floyd(G): for k <- 0 to n - 1 for i <- 0 to n - 1 for j <- ... Read More

정적 메서드 클래스의 정적(static) 메서드는 인스턴스를 생성하지 않아도 호출할 수 있는 메서드를 말한다. 메서드에 static을 붙이면 정적 메서드가 된다. class Person { constructor(name) { this.name = name; } // 정적 메서드 static sayHi() {... Read More

그래프의 깊이우선탐색(DFS)를 활용하여 미로찾기 문제를 풀어보자. 미로는 다음과 같다. 1. 그래프로 표현하기 먼저 해야할 것은 미로를 그래프로 표현하는 작업이다. // DFS를 활용한 미로찾기 문제 // 무방향 그래프 생성 function Graph() { this.edges = {}; // 간선을 저장하는 객체 } // 정점 삽입 함수 Graph.protot... Read More

자바스크립트에서 sort 함수로 숫자 배열을 정렬할 때는 비교 함수 compare를 인자로 전달해야 한다. (객체 배열도 마찬가지. 이건 key에 따라 결과가 달라진다) (문자열 배열은 인자를 전달하지 않아도 된다) 어쨌든, 비교 함수 compare의 반환값에 따라 정렬 방식이 다른데 1. 반환값이 0보다 큰 경우: 오름차순 2. 반... Read More

SQL 문자열 함수(심화)를 정리하였다. 1. INITCAP() : 첫 문자만 대문자로 치환 예) INITCAP(‘SMITH’) => ‘Smith’ 2. LENGTHB() : 글자의 바이트 수를 리턴 예) LENGTHB(‘SMITH’) => 5 LENGTHB(‘철수’) => ... Read More

for…in은 ‘객체’를 순환하고, for…of는 ‘배열’을 순환한다. 1. for…in은 객체를 순환한다. 객체의 키 값이 순환된다. const object = { a: 1, b: 2, c: 3 }; for (const key in object) { if (Object.hasOwnProperty.call(object, key)) { co... Read More

오프셋 오프셋(offset)은 일반적으로 동일 오브젝트 안에서 오브젝트 처음부터 주어진 요소나 지점까지의 변위차를 나타내는 정수형이다. 예를 들어, 문자 A의 배열이 abcdef를 포함한다면 ‘c’ 문자는 A 시작점에서 2의 오프셋을 지닌다고 할 수 있다. 어셈블리어와 같은 저급 프로그래밍 언어에서 ... Read More

1. 삽입 함수 구현 레드블랙트리의 삽입 알고리즘을 구현해보면 다음과 같다. 아래의 코드에서 BLACK은 1, RED는 0으로 정의되었다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42... Read More

배열 array[l…r]의 중앙값을 반환하는 함수를 간단히 구현하였다. 작성한 코드 선택 정렬 알고리즘을 바탕으로 하였다. 단, 정렬이 목적이 아니라 중앙값을 찾는 것이 목적이므로 정렬은 중앙값의 인덱스까지만 수행하면 된다. // 배열 생성 const array = []; for (let i = 0; i < 10; i++) { // 10개의 난수 생성 array[i] ... Read More

1. 배경 이진탐색트리는 최악의 경우, 즉 트리의 균형이 한쪽으로 치우칠 경우 O(n)의 시간복잡도를 갖는다. 이러한 단점을 보완하기 위해 제안된 자가균형(self-balancing) 트리 디자인으로 레드블랙트리, AVL 트리가 있다. 이번 글에서는 레드블랙트리 알고리즘에 대해 정리해본다. 2. 기본 원리... Read More

Markdown 기본 문법을 정리하였다. 출처는 http://markdowntutorial.com이다. 이 게시물도 Markdown 언어로 작성하고 있는데, 앞으로 자주 쓰게 될 것 같다. 1. italic: _ 예: _italic_ 2. bold: ** 예: **bold** 3. He... Read More