개발자와 협업을 시작한 분들을 위해 개발자들이 현업에서 사용하는 기초 개발용어들을 몇 가지 정리했어요!

앞서 1부에서는 개발자들이 작성하는 코드와 관련된 용어들을 담았고, 이번 2부에서는 개발자들의 개발방식, 환경 등과 관련된 용어들을 담았어요.

이번 아티클에서 소개하는 개발용어들

• IDE

• 코딩 컨벤션

• 디버깅

• SSR, CSR

• 마이그레이션

• 리팩토링

IDE

노트북도 샀으니 IDE 설치부터 진행해볼까? 💻

IDE(Integrated Development Environment)는 코드 작성을 도와주는 툴로 통합 개발 환경이라고도 해요. 대표적인 IDE로는 IntelliJ IDEA, VS code 등이 있어요.

IDE는 개발자가 개발하는 과정에서 발견되는 구문 오류나 코드 자동완성 기능을 제공해요.

작성하는 과정에서 바로 확인이 가능한 오류들을 빨간색 등 구분할 수 있는 표기를 해줍니다. 또는 코드를 일부 입력하면 예상되는 코드를 자동완성 지원해주기 때문에 빠르게 개발이 가능해집니다.

코딩 컨벤션

코딩 컨벤션에 맞게 수정할 필요가 있어. ✍️

컨벤션(Convention)은 다수의 사람들이 특정한 활동을 하거나 협의하기 위해 한 장소에 모이는 회의라는 뜻을 가지고 있어요.

코딩 컨벤션은 코드 작성을 위해 사내 혹은 팀 내에서 규정한 룰을 의미해요. 그래서 코딩 컨벤션을을 가지고 개발하거나 코드 리뷰를 하는 회의를 진행해요.

구체적으로 변수나 클래스명을 짓는 작명 규칙을 정하거나 들여쓰기 방식, 주석을 어떻게 작성할지 등에 대한 전반적인 내용을 담고 있어요.

예를 들어, 들여쓰기는 tab을 이용할지, space 바를 이용할지 각자의 방식이 다르기 때문이예요. 일관된 코드 작성 규칙이 있으면 다른 사람이 작성한 코드를 볼 때도 그 구문 단위가 일정하기 때문에 한 눈에 들어와요.

디버깅

에러난 부분 디버깅 해봐야지. 🐞

디버그(Debug)는 컴퓨터 프로그램에서 버그를 제거하는 것을 의미해요. 즉, 진행형인 디버깅은 버그를 해결하기 위한 과정을 의미한다고 할 수 있어요.

앞서 말한 IDE를 통해 디버깅을 할 수 있는데 이는 IDE에서 코드 진행사항을 표시해서 보여줄 수 있는 디버거 기능을 제공하기 때문이예요. 아래 사진과 같이 디버거를 실행하면 디버깅 지점의 각각의 변수 값을 확인하면서 코드 실행 흐름을 확인할 수 있어요.

CSR, SSR

클라이언트 사이드 렌더링(CSR)은 어떻게 쓰고 있나요? 🤔
서버 사이드 렌더링(SSR)은 지원돼지? 🤔

기본적으로 클라이언트는 요청을 보내고 서버는 응답을 보내는 역할을 담당해요.

그럼 렌더링이란 무엇일까요?

렌더링에서 렌더(render)는 어떤 상태가 되도록 한다는 의미를 가지고 있어요. 즉, A에서 B로 만드는 과정을 수행하는 것이라고 생각해볼 수 있을 것 같아요. 컴퓨터 과학에서 렌더링은 원시 데이터를 시각적 데이터로 만드는 과정을 의미하기도 해요.

CSR 클라이언트 사이드 랜더링은 렌더링의 주제가 클라이언트에서 이뤄져요.

사용자가 페이지를 방문하면 HTML, CSS, JS과 같은 파일들을 먼저 받아요. 그 후에 동적 컨텐츠를 다시 요청해서 사이트를 구성하고 브라우저에서 사이트를 보여줘요. 따라서 SSR에 비해 상대적으로 초기 로딩 속도가 느리다는 단점이 있어요.

하지만 구성에 필요한 파일을 먼저 받기 때문에 이후 사용자와 상호작용이 많은 페이지에서 빠른 요청과 응답을 주고 받을 수 있어요.

SSR 서버 사이드 렌더링은 CSR과 반대로 렌더링의 주체가 서버 측에서 이뤄져요.

서버에서 사용자의 요청을 받아 해당 페이지를 완전히 렌더링하고 그 결과를 클라이언트에게 전달하는 방식을 말해요. 서버에서 사이트 렌더링해서 가지고 오기 때문에 초기 로딩 속도가 빠르다는 장점이 있어요. 그래서 검색엔진 최적화(SEO, Search Engine Optimization)에 유리해요.

정리하면, CSR은 필요한 파일을 받고 다시 페이지를 구성한 다음 보여주기 때문에 초기 속도가 느릴 수 있어요. SSR은 필요한 컨텐츠를 넣어서 만들어가지고 오기 때문에 초기 로딩 속도가 빠르다. 이렇게 이해할 수 있을 것 같아요.

실제로 사이트 형태와 구성에 따라 혼합하기도 하고 적합한 방식이 다르기 때문에 SSR이 더 좋다고 단정할 수는 없어요.

SEO

검색엔진 최적화 작업은 어떻게 진행되고 있나요? 🥸

검색엔진 최적화(SEO, Search Engine Optimization)란 검색 엔진들이 검색 결과에서 더 높은 순위를 받을 수 있도록 최적화 작업을 하는 것을 말해요.

즉, 더 높은 순위에 있다는 건 사용자 유입률을 더 높일 수 있다는 의미예요.

SEO를 높이기 위해서는 검색이 잘되는 컨텐츠나 키워드로 유입을 높일 수 있어요.

개발 측면에서는 실제 사용자 경험을 최적화해서 앱 사용시 더 좋은 환경을 만드는 방안도 생각해볼 수 있어요. 그리고 위에서 언급한 SSR을 고려한다거나 사이트 구조를 개선하는 방법들이 있어요.

마이그레이션

데이터베이스 마이그레이션 이번 주에 해야겠는데요? ✅

회의를 하다보면 마이그레이션이라는 용어를 들어본 적이 있을거예요.

마이그레이션(Migration)이란 이주나 이동을 뜻하는 단어 이름처럼 데이터나 소프트웨어를 옮기는 것을 말해요. 데이터베이스 마이그레이션, 클라우드 서버 마이그레이션 등 자원 리소스나 비용에 따라 다양한 마이그레이션이 생겨요.

왜 마이그레이션이 발생할까요?

앞서 리소스나 비용 문제라고 설명했는데 더 구체적으로 예시를 들어볼게요.

데이터베이스로 사용하고 있는 서비스가 A라는 있다고 할게요. 이 서비스 용량이 부족하다면 더 큰 서비스를 이용하거나 다른 서비스를 하나 더 추가해서 나눠 담을 수도 있을거예요. 이런 과정에서 필요한 것이 데이터베이스 마이그레이션이예요.

혹은 다른 언어를 이용해서 개발을 하는 경우에도 코드 마이그레이션이 발생한다고 표현할 수 있어요. 언어를 변경하는 이유는 더 업데이트가 잘 되어 관리가 용이하거나 서비스에 더 적합한 언어가 필요해서 또는 원래 개발언어를 사용할 수 있는 인력이 없어서 등 여러 이유가 있을 수 있어요.

리팩토링

이번 리팩토링으로 코드가 간결해졌어! ⚒️

리팩토링(Refactoring)이란 코드 구조를 변경하는 것을 말해요.

리팩토링을 통해 사용하지 않는 기능을 제거하거나 코드 구조를 코딩 컨벤션에 맞게 수정하는 작업들을 해요. 여러 사람이 코드를 작성하는 과정에서 아무리 룰이 있다고 해도 약간씩 스타일의 차이가 발생할 수 있어요. 이 부분을 개발자들은 코드 리뷰 과정을 거쳐 바로잡는 시간을 갖고 있어요.

또 복잡한 코드를 수정하면서 더 유지보수가 편리한 코드를 작성하기도 하고 잠재적으로 에러가 날 수 있는 코드들을 확인하고 수정할 수 있어요.

코드를 수정하기만 하는 것이 리팩토링의 전부는 아니예요.

리팩토링은 기존의 레거시 코드들을 개선하고 성능을 높이는데 중요한 역할을 해요. 같은 기능이여도 어떻게 작성하느냐에 따라 성과가 달라질 수 있기 때문에 이를 개선하는 역할을 하기도 해요.