입학전형시스템 고등학생한테 다털렸쥬?

EntryDSM·2020년 6월 3일
11
post-thumbnail

안녕하세요, 대덕 소프트웨어 마이스터 고등학교 입학전형 서비스를 개발하는 EntryDSM팀에서 파이썬 백엔드 개발을 맡고 있는 신은주입니다. 항상 어제보다 더 나은 나를 위해 노력하여 높은 목표를 이루려고 노력중입니다. 파이썬, 백엔드에 대해 궁금한 점이 있다면 페이스북 메신저, 이메일(eunjuoi0515@gmail.com)으로 질문해주시면 언제든 답변하겠습니다.

10번째 차시에서는 현재 Entry에서 어떤 기술 스택을 사용하는지에 대해 이야기를 하려고 합니다. 여기서 기술스택이란 프로젝트에서 사용하는 도구들을 말합니다. 구체적으로 언어, 라이브러리와 같은 것들을 예시로 들 수 있습니다.

#라이브러리 #프레임워크 🦑

아래 문서에서는 라이브러리, 프레임워크라는 단어를 사용하고 있습니다. 문서에 들어가기 전 각 단어의 뜻에 대해 이야기 하려고 합니다.

라이브러리란? 🍋

여러분이 사용하는 언어에서 어떠한 기능을 하는 코드를 작성했다고 예시를 들어보겠습니다. 이 어떠한 기능은 한번 사용되고 버려지는 것이 아니라 여러번 사용될 가능성이 있습니다.
이러한 기능들을 모아두고 나중에 불러서 사용하게 할 수 있으면 어떨까요? 여러 기능들이 비슷한 동작을 한다면 더욱 편하게 이용할 수 있을 것입니다. 이렇게 라이브러리는 여러분들 혹은 다른 개발자가 만들어둔 비슷한 기능을 하는 코드를 모아둔 것을 이야기합니다.
여러분이 개발을 하다 필요한 것을 정말 도서관의 책처럼 쉽게 꺼내 쓸 수 있습니다.

프레임워크란? 🍒

프레임워크를 이 차시에서 정확하게 이해할 필요는 없습니다. 간단하게 말하면 라이브러리와 크게 다르지 않습니다. 하지만 라이브러리와의 차이는 여러분이 개발하는 흐름에 따라 달라집니다.
라이브러리는 여러분이 코드를 작성하다가 필요해진다면 가져와서 사용하는 것이고 프레임워크는 프레임워크에서부터 시작되어 코드를 작성해 나가는 것을 말합니다.
이해하기 힘들죠? 간단하게 이야기하자면 여러분이 개발하는 코드의 주인, 흐름을 프레임워크가 쥐고있느냐 아니냐에 따라 차이가 나눠진다고 볼 수 있습니다.
물론 이 차이점을 자세하게 이해하고 있지 않아도 괜찮습니다. 처음 개발을 진행하는 사람에게는 충분히 어려울 수 있으니까요 😸

그냥 간단하게 재사용 가능한 코드를 계속 가져다 쓴다라고만 이해하셔도 괜찮습니다.

#프론트엔드 #화면 #웹 🦊

![https://velog.velcdn.com/images%2Fsineunju%2Fpost%2F2cefdfda-803a-440b-9e1d-223ca2599ef4%2Fimage.png%5D(https%3A%2F%2Fimages.velog.io%2Fimages%2Fsineunju%2Fpost%2F2cefdfda-803a-440b-9e1d-223ca2599ef4%2Fimage.png)

메인 언어 🍎

앞선 차시에서 프론트엔드와 서버에 대해 학습하셨을 것으로 예상됩니다. 엔트리에서는 사용자들에게 보여지는 화면인 웹 프론트를 TypeScript라는 언어를 메인으로 개발하고 있습니다. TypeScript라는 언어는 JavaScript라는 언어에서 확장되어 개발된 언어입니다. 예시를 들자면 C언어에서 C++이라는 언어가 파생된 것과 같은 이치라고 볼 수 있습니다.

메인 프레임워크 🍏

그리고 프론트에서는 사용자에게 보여지는 인터페이스를 더욱 쉽게 만들어 줄 수 있는 React라는 프레임워크를 사용하고 있습니다. 물론 JavaScript, TypeScript를 이용해서도 충분히 화면을 구성해 나갈 수 있습니다. 하지만 더욱 간편하고 편하게 개발하기 위해서 개발자들은 프레임워크를 사용하고 있습니다. 저희 엔트리는 다양한 프레임워크 중 React라는 프레임워크를 선택하여 개발하고 있습니다.

그외 라이브러리 🍐

웹을 개발하는 코드 구성은 대부분 HTML, CSS, JavaScript 3가지로 이루어져 있습니다. 저희는 각 세가지의 구성요소, 데이터간의 상호작용을 더 용이하게 하기 위해 다양한 라이브러리, 기술을 사용하고 있습니다. css in js (styled components), PostCSS, Redux가 그 예시입니다. 물론 지금 상황에서는 이러한 라이브러리가 어떠한 라이브러리인지 아실 필요는 전혀 없습니다. 여러분이 Entry와 함께하신다면 이해하기 쉽게 학습하실 수 있을 것입니다.

#백엔드 #데이터 #관리

![https://velog.velcdn.com/images%2Fsineunju%2Fpost%2Ff8c96099-95dd-403d-8303-2efba49a4816%2Fimage.png%5D(https%3A%2F%2Fimages.velog.io%2Fimages%2Fsineunju%2Fpost%2Ff8c96099-95dd-403d-8303-2efba49a4816%2Fimage.png)

메인 언어 🍓

사용자들에게서 받은 정보를 저장하고, 가공하는 역할을 하는 서버는 엔트리에서 다양한 언어로 개발되고 있습니다. Java, Python, JavaScript, Ruby 총 4가지 언어를 사용하여 개발하고 있습니다. 신입생들이 직접 사용하는 원서 서비스는 Java, 선생님들께서 사용하시는 어드민 서비스는 Python, Ruby, 학생과 선생님간의 질문 서비스는 NodeJS를 이용하여 개발됩니다. 엔트리에 들어오신다면 4가지 언어 중 한가지의 언어를 선택하여 학습하실 수 있고 자유롭게 새로운 언어를 학습하셔도 됩니다.

메인 프레임워크 🍑

각 언어에서 사용하는 웹 프레임워크가 다릅니다. 웹 프레임워크에서는 기능과 URL을 연결해 주는 역할, 요청과 결과를 쉽게 반환하도록 도와주는 역할등이 구현 되어 있습니다. 물론 이 외에도 다양한 기능들이 구현되어있습니다.

각 기능을 구현하기에 편한 메인 서비스 기술스택인 Java는 Spring, 어드민 서비스의 Python은 Flask, Ruby는 Ruby on Rails, 질문 서비스는 JavaScript의 NodeJS를 사용하고 있습니다.

물론 위의 프레임워크를 모두 알고 구현해야할 필요는 없습니다. 이 중 마음에 드는 하나의 언어와 프레임워크를 선택하여 학습하시면 됩니다.

데이터베이스 🥝

프론트에서 사용자에게 받은 정보를 서버에서 받아와서 데이터베이스에 저장하는 일련의 작업 중 데이터 저장을 맡은 데이터베이스에 대해 이야기를 하려고 합니다.

엔트리에서는 기본적으로 MySQL이라는 데이터베이스를 사용중입니다. 데이터의 저장되는 형식(모양)은 여러분께서 흔히 아시는 2차원 배열, 테이블의 형태입니다. 글로 설명만 들어서는 잘 와닿지 않을 것 같습니다. 예시를 들자면

![https://velog.velcdn.com/images%2Fsineunju%2Fpost%2F94a1950b-a0c5-4017-9436-7600a4985126%2Fimage.png%5D(https%3A%2F%2Fimages.velog.io%2Fimages%2Fsineunju%2Fpost%2F94a1950b-a0c5-4017-9436-7600a4985126%2Fimage.png)

위의 사진과 같은 형태로 데이터가 저장되고 있습니다. 물론 기획에 변경에 따라 다른 데이터베이스로 변경될 가능성도 있지만 지금 현재 상태로는 위와 같은 구조로 데이터를 저장 및 관리하고 있습니다.

#디자인 #예쁨 #꽃 🌸

![https://velog.velcdn.com/images%2Fsineunju%2Fpost%2F82e39fbe-5b80-4fed-9dd9-1c45be91db43%2Fimage.png%5D(https%3A%2F%2Fimages.velog.io%2Fimages%2Fsineunju%2Fpost%2F82e39fbe-5b80-4fed-9dd9-1c45be91db43%2Fimage.png)

엔트리 서비스에 처음 접속하면 바로 볼 수 있는 예쁜 화면은 XD라는 툴을 이용하여 디자인하고 있습니다. 위의 화면은 엔트리의 어드민 로그인 화면입니다.
그리고 XD로 만든 레이아웃을 개발자와 공유하기 위해서 Zeplin을 이용하여 공유하고 있습니다.

![https://velog.velcdn.com/images%2Fsineunju%2Fpost%2F41d352f9-3f0e-4869-88d2-7e8f522e0e11%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-06-01%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%207.48.23.png%5D(https%3A%2F%2Fimages.velog.io%2Fimages%2Fsineunju%2Fpost%2F41d352f9-3f0e-4869-88d2-7e8f522e0e11%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-06-01%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%207.48.23.png)

이런식으로 공유하고 있습니다. 엔트리 디자이너는 사용자에게는 친화적이고 예쁜 디자인을 개발자에게는 이해하기 쉽게 전달하는 것을 목표로 항상 최선을 다하고 있습니다.

끝으로 🍀

엔트리에서는 매우 다양한 기술 스택을 사용하여 개발을 진행하고 있고 본 글에 작성되지 못한 다양한 기술스택을 유연하게 활용하고 있습니다. 개발자가 보기에 직관적인 코드, 사용자가 보기에 편안한 웹을 위하여 여러 기술을 도입하는 시도또한 진행중입니다. 엔트리에 들어오시면 더욱 다양한 기술을 학습하고 배울 수 있는 기회가 될 것 같습니다.

작성하다보니 어느정도 글이 길어졌습니다. 여기까지 집중하여 읽어주셔서 감사합니다. 🙇‍♀️ 엔트리에서 뵐 수 있었으면 좋겠습니다.

11번 챕터는 엔트리에 대해 자세히 알 수 있는 챕터입니다. 엔트리에 관심이 있는 분이라면 재밌게 읽으실 수 있을 것 같습니다! 고맙고 수고하셨습니다. 👋

profile
대덕소프트웨어마이스터고등학교의 입학전형 시스템을 만드는 EntryDSM팀 입니다.

0개의 댓글