들어가며

면접을 진행하면서 CS관련 질문들을 받게 되었다. 대체로 잘 대답을 했지만 자료구조와 데이터베이스의 용어를 혼용해서 설명하는 실수도 했고, 관계형 데이터베이스를 연결형이라고 말하는 실수도 있었다.

근본적으로 CS지식 특히 데이터베이스에 대한 지식이 부족했기에 발생한 문제여서 데이터베이스에 대해 정리해봐야겠다고 생각했다.

데이터베이스란?

데이터베이스를 한 마디로 정의하면 ‘데이터의 집합’이라고 할 수 있다.
데이터베이스는 중복된 데이터를 없애고, 자료를 구조화하여, 효율적인 처리를 할 수 있도록 관리된다.

데이터베이스의 특징

데이터베이스는 다음과 같은 특징을 가진다.

1. 사용자의 질의에 대하여 즉각적인 처리와 응답이 이루어진다.

2. 생성, 수정, 삭제를 통하여 항상 최신의 데이터를 유지한다.

3. 사용자들이 원하는 데이터를 동시에 공유할 수 있다.

4. 사용자가 원하는 데이터를 주소가 아닌 내용에 따라 참조 할 수 있다.

5. 응용프로그램과 데이터베이스는 독립되어 있으므로, 데이터의 논리적 구조와 응용프로그램은 별개로 동작된다.

DBMS(Database Management System)

이런 데이터베이스를 관리하고 운영하는 소프트웨어를 DBMS(Database Management System)라고 한다.

DBMS에는 관계형(Relational), 키-값형(KV store), 객체형(Object), 문서형(Document), 컬럼 패밀리형(Column Family) 등이 존재한다.

특히 관계형 DBMS가 가장 일반적으로 사용되며, 이때 사용되는 표준 언어를 SQL(Structured Query Language)이라 한다. 관계형 DBMS를 SQL, 비-관계형 데이터베이스는 NoSQL이라고 부르기도 한다.

간단하게 SQL방식과 NoSQL방식(대표적으로 문서형)에 대해 알아보자.

SQL 방식

SQL 방식은 데이터들을 엑셀과 비슷한 표에 정리해두는 방식이다.

SQL 방식은 NoSQL방식과달리 각각의 표 사이에 관계성을 부여 할 수 있다.
관계성을 부여할 수 있기 때문에 mapping해주는 툴로 ORM(Object Relation Mapping)을 사용한다.

이러한 SQL방식을 사용하는 데이터베이스에는 대표적으로 Oracle, MySQL, Postgres가 있다.

NoSQL 방식(문서형)

NoSQL 방식은 서류 봉투에 document를 모아두는 방식이다.

NoSQL에서는 서류 봉투를 컬렉션이라고 부르며, 통신을 도와주는 툴로는 ODM(Object Document Mapping)을 사용한다.

NoSQL 방식을 사용하는 데이터베이스에는 대표적으로 MongoDB와 FireBase가 있다.

마치며

정말 간단하게 데이터베이스에 대해 정리해보았다.
이 정도만 면접에서 대답했어도 좋았을텐데 너무 공부가 부족했던게 아닐까 싶다.
연차가 쌓일수록 더욱 CS지식이 중요해진다고들 하는데, 비전공자인 만큼 더 열심히 해야할 것 같다.

참고

• http://www.tcpschool.com/mysql/DB
• https://namu.wiki/w/%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4#s-5.1
• https://hongong.hanbit.co.kr/%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-databasedb-dbms-sql%EC%9D%98-%EA%B0%9C%EB%85%90/

참가 계기

프리온보딩 인턴십을 마친 후 열심히 구직활동을 하고있지만, 좋은 결과를 얻는게 쉬운일은 아닌 것 같다.
조금이라도 합격할 확률을 높이기 위해 기술면접 대비도 하고 알고리즘 공부도 하고 있지만 사실 서류가 합격되어야 이후 과정을 진행할 수 있으니 근본적으로 서류 합격률을 높일 방법을 찾고 있었다.

커리어코칭을 통해 이력서, 포트폴리오를 많이 수정해서 나름 괜찮다고 생각하는데도 서류 합격률이 낮은 이유는 신입 + 비전공자라는 의문점을 다 해결하지 못했기 때문이 아닐까?

더 많은 활동들을 통해 내가 얼마나 개발에 진심인지를 보여줘야 할 것 같다는 생각을 하고 어떤 활동들이 있을까 알아보던 중 원티드 배너에서 프론트엔드 챌린지를 발견했다. 2주라는 짧은 시간 동안 진행하는 프로그램이라 부담도 많지 않고, 컴포넌트 및 스토리북 이라는 챌린지의 주제 또한 도움이 많이 될 것 같아 챌린지에 참가하기로 결심했다.

지원 절차

챌린지는 합불이 아닌 누구나 참가할 수 있는 프로그램이라 지원 폼을 작성해 정말 간단하게 신청을 할 수 있었다.
또 사전 미션이 존재하기는 했지만 인턴십 프로그램과는 다르게 필수가 아니였다.

사전 미션은 Figma를 활용하여 버튼 디자인 시안을 제작하는 것이였는데 디자인 시안을 제작한다는 것이 어떤것인지 사실 잘 와닿지 않았다. 그래도 GitHub에서 다른 참가자분들이 제출한 미션 결과를 확인할 수 있었는데, 이를 참고하여 간단하게 디자인 시안을 만들어보고 컴포넌트에 대해서도 한번 생각해 볼 수 있었다.

마치며

2주동안 잘 참여해서 컴포넌트에 대한 이해도와 스토리북에 대해서도 잘 알아가고 싶다! 취준활동도 화이팅!

들어가며

Next.js를 사용해 프로젝트를 진행하면서 이미지를 위해 <img> 태그를 사용하던 중 다음과 같은 ESLint 오류가 발생했다.

Next/Image에서 제공하는 <Image />를 사용해 자동적으로 이미지를 최적화하라는 내용이었다.

처음 알게된 내용인만큼 Next/Image 컴포넌트의 기능과 또 실제로 프로젝트에 적용하면서 겪은 문제점들에 대해 정리해보고자 한다.

Next/Image를 활용한 이미지 최적화

Next/Image의 장점

Next/Image 컴포넌트를 사용하면 대표적으로 다음의 3가지 이점을 얻을 수 있다.

• Lazy loading
• 이미지 사이즈 최적화
• placeholder를 통한 스켈레톤 UI로 CLS 방지

Lazy loading

Lazy loading이란 이미지를 로드하는 시점을 지연시키는 기술을 말한다. 페이지를 읽어들이는 시점에 중요하지 않은 리소스를 추후에 로딩함으로써 빠른 콘텐츠의 제공이 가능해진다.

기존 img 태그를 사용하는 경우 loading=“lazy” 속성을 통해 브라우저의 도움을 받거나 혹은 개발자가 Intersection Observer API, Scroll 이벤트를 통해 스크린에 element가 보일 때를 캐치하여 이미지를 로드하도록 직접 구현해야 했다. 하지만 Next/Image의 경우 자동으로 lazy loading이 적용된다.

이미지 사이즈 최적화

여러 프로젝트를 경험하면서 이미지를 사용할때 중요하다고 느낀 점 중 하나는 이미지 사이즈의 최적화였다. 이를 위해 이미지의 포맷을 변경하고 이미지의 용량을 압축하는 등의 과정이 필요해 번거로웠다.

Next/Image는 디바이스 크기 별로 srcSet을 미리 지정해두고, 사용자의 디바이스에 맞는 이미지를 다운로드할 수 있게 지원함과 동시에 이미지를 webp와 같은 용량이 작은 포맷으로 변환해 제공함으로써 쉽게 이미지 사이즈를 최적화 할 수 있다.

Placeholder를 통한 스켈레톤 UI로 CLS 방지

Next/Image는 레이아웃이 흔들리는 현상 즉 CLS(Cumulative Layout Shift)를 방지하기 위한 placeholder를 제공한다. Placeholder로 빈 영역 또는 blur 이미지 혹은 커스텀 이미지도 설정 가능하다.

Next/Image 적용하면서 발생한 문제점

리모트 이미지 설정

Next/Image는 next/image로부터 Image를 import해 사용하기만 하면 되어 정말 간단했다.

다만 리모트 이미지의 경우 Next.js 서버에서 이미지를 가지고 있는 리모트 서버에 직접 요청을 하기 때문에 보안상의 이유로 모든 url에 대한 접근을 방지한다는 문제가 존재했다. 때문에 리모트 이미지를 사용하기 위해서는 next.config.js 파일에 CDN의 host를 명시해 주어야 했다.

1
2
3
4
5
6

// next.config.js
const nextConfig = {
	images: {
		domains: ['cdn-host'],
	},
};

리모트 이미지 placeholder

리모트 이미지의 경우 로컬 이미지와 다르게 빌드 타임에 이미지 파일에 접근하는 것이 불가능하기 때문에 placeholder를 blur로 설정해도 blur 이미지가 존재하지 않았다.

이 문제는 Image의 blurDataURL 속성에 직접적인 데이터를 추가함으로써 해결할 수 있었다.

1
2
3
4
5
6
7
8
9

// prettier-ignore
<Image
  width="60"
  height="60"
  alt={name}
  src={imageUrl}
  placeholder="blur"
  blurDataURL={BLUR_DATA_URL}
/>

마치며

Next.js를 사용하는 이유로 ‘SEO(Search Engine Optimization)를 위한 Server-Side Rendering(SSR)을 가능하게 함’ 정도만 알고 있었는데, 이번 프로젝트를 진행하면서 Image의 자동 최적화, 편리한 라우팅 시스템과 같은 다양한 장점들이 존재함을 알 수 있었다.

왜 많은 기업들이 Next.js를 사용하고 있는지 약간은 알 것 같다. 더 자세히 공부해봐야지!

참고

• https://nextjs.org/docs/pages/api-reference/components/image
• https://nextjs.org/docs/pages/building-your-application/optimizing/images
• https://fe-developers.kakaoent.com/2022/220714-next-image/