Post

24/04/17 데일리 미션

Posted
By KIM YEONGBEOM
17 min read

[미션 2] 스타터 노트 작성

질문에 대한 답변을 작성해보세요.

  1. 내가 React 트랙에 참여한 계기는 무엇인가요?
    • 웹 개발에 관심이 갔고, 단시간에 프로젝트를 중심으로 기본 소양을 갖추기 위해서 참여!
  2. 내가 이해한 React 웹개발자는 어떤 역할을 하는 사람인가요?
    • 웹에서 제공하는 서비스 기능을 올바르게 구현한다.
    • 웹의 디자인이나 사용자 인터페이스(User Interface)를 구현한다.
    • 서비스 사용자의 편의 최적화를 위해서 웹 서비스의 성능 개선을 한다.
  3. 웹개발자와 비슷한 경험을 해 보았나요? 어떤 점이 유사하다고 생각했나요?
    • 비슷한 경험 보다는, 실제로 웹 사이트를 만들었는데 혼자서 웹을 전담하게 되어 웹 디자인은 대부분 부트스트랩 같은 도구를 통해 구성했었다.
  4. 웹개발자의 역할을 수행하는 데에 있어 나의 강점과 연관된 부분은 무엇이라고 생각하나요? 혹은 보완, 개선하고 싶은 개인 역량이 있나요 ?
    • 강점보다는 보완이나 개선점이 많이 보이는 시기인 것 같다.
    • 아직, 프로젝트 경험이 많지 않고 기본 지식이 탄탄하지 못하다고 생각해서 이 부분을 갈고 닦아나가고 싶다.
    • 알아서 코드를 잘 작성할줄 아는 개발자가 되고 싶다.
  5. 본 코스 수료 후, 어떤 웹개발자로 성장하고 싶나요?
    • 잘 갈고닦은 기초를 발판으로 어제보다 나은 내가 되고 싶다.
  6. 그 외에 우리 트랙에 기대하는 것이 있다면 자유롭게 작성해 주세요.
    • 팀원들과 즐겁게 완주까지 달렸으면 좋겠습니다~

[미션 3] 웹개발 용어 정리

중학생도 알아들을 수 있게 쉽게 정리해보세요!

  1. 서버(Server) vs. 클라이언트(Client)
    • 답변

      • 클라이언트: 클라이언트는 서버에서 제공하는 서비스를 제공받는 사용자.

        ⇒ 우리가 네이버나 구글에 들어가서 무엇인가 검색하거나, 뉴스 같은 페이지를 들어가면 우리는 네이버 서버에 요청을 보내는 것이다.

      • 서버: 클라이언트의 요청에 대해 네트워크를 통해서 서비스를 제공하는 시스템.

        ⇒ 네이버나 구글의 서버는 우리(클라이언트)가 보내는 요청에 대해 올바른 답변을 보내주어 서비스의 기능을 이용할 수 있게 한다.

      방금 서버는 네트워크를 통해서 클라이언트에게 서비스를 제공한다고 했는데, 어떻게 연결?

  2. 프론트엔드 (Front-end) vs. 백엔드(Back-end)
    • 답변

      • 프론트엔드(Front-end): 웹사이트나 애플리케이션에서 눈에 보이는 것들을 다루는 분야.

        ⇒ 사용자가 웹과 상호작용하는 부분을 지칭한다.

      • 백엔드(Back-end): 프론트엔드와는 달리, 눈에는 잘 보이지 않는 서버를 설계하는 분야.

        ⇒ 우리(클라이언트)가 프론트엔드(네이버 같은 웹 사이트)를 통해 요청을 받으면 이에 대한 답변을 서버에서 프론트엔드로 다시 보내주는 부분을 지칭한다. 결국 서버측 프로그래밍을 말하는 것.

  3. 풀스택(Full-Stack)
    • 답변
      • 일반적으로, 2번의 프론트 엔드와 백엔드 업무를 모두 아우르는 말이다.
      • 최근에는 배포나 관리까지도 포함해서 부르는 경우도 있다고 한다.
  4. 프레임워크(Framework)

    • 답변

      프레임워크와 라이브러리를 구분해 놓으셨는데, 나는 프레임워크 vs 라이브러리의 관점으로 작성해보았다.

      • 프레임워크와 라이브러리의 차이는 제어의 역흐름(IoC: Inversion of Control)이라는 키워드를 알면 이해하는데 도움이 된다.

      전통적인 프로그래밍은, 프로그래머가 작성한 프로그램이 외부 라이브러리의 코드를 호출하는 흐름으로 이루어진다. 그러나, IoC 가 적용된 구조에서는 외부 라이브러리의 코드가 프로그래머가 작성한 코드를 호출한다.

      여기서 프레임워크는 IoC 가 적용된 구조라고 생각하면 된다. 백엔드를 다룰 때 사용하는 Django 와 같은 것이 프레임워크의 예시인데, 서버를 구축하기 위해 반드시 따라야하는 사항이(정해진 틀) 있다. 반대로 전통적인 흐름을 따르는 것은 라이브러리에 해당한다.

      예를 들어, 아래와 같이 장고를 통해 서버를 다룬다고 가정해보자.

      1
2
3
4
5

        from django.shortcuts import render
        
  # Create your views here.
  def index(request):
      return render(request,'main/index.html')

      위 코드를 통해, 요청이 들어오면 “main/index.html” 을 보내주는 기능을 구현했다.

      그런데 이렇게 작성했다고 해서, 내가 장고의 기능을 끌어오는 게 아니라 짜여진 틀에 내 코드가 들어가서 작동한다는 것이다.

      적어놓고도 다른 사람이 보면 이해 못할 것 같다.. 나중에 더 공부해서 다시 적어보자.

  5. 라이브러리(Library)

    • 답변

      프레임워크에서 작성했듯이, 라이브러리는 일반적으로 프로그래밍하는 흐름을 따른다.

      1
2
3

        const a = document.querySelector("div");
        
  console.dir(a);

      이런 것 처럼, 우리는 일반적으로 필요한 함수나 기능을 호출해서 적재적소에 사용한다.

      정리하자면, 라이브러리는 코드 모음집에서 내가 마음대로 꺼내쓰는 것이다.

      이와달리 프레임워크는, 원하는 기능을 구현하기 위해서는 규격을 맞추는 것 처럼 요구하는 틀에 맞춰서 코드를 작성해야 한다. 이미 구현된 틀이 있고, 유저가 틀에 맞춰 작성한 코드를 호출해 원하는 대로 동작하게 만들어 주는 것이다. 이때, 제어권이 프레임워크에게 넘어간다고 보는 것이다.

  6. 플러그인(Plug-in)

    • 답변

      컴퓨터 또는 소프트웨어에 추가 기능을 설치하기 위한 확장 소프트웨어 또는 장치다. 이해하기 쉬운 예시로는, 구글 확장 프로그램을 떠올리면 쉽다.

  7. 미들웨어(middleware)

    • 답변

      미들웨어는, 데이터를 주고받는 양 측을 연결해 매개 역할을 하는 소프트웨어다.

      서버와 다수의 클라이언트 사이 네트워크를 통해서 데이터를 주고받는다고 했는데, 우리(클라이언트)가 서버로 요청을 보내면, 미들웨어가 이 요청을 받고 데이터 베이스에 접근해서 다시 보내주는 과정에 미들웨어가 있다고 생각하면 될 것 같다.

      ⇒ 그렇다면, 왜 필요할까? 하나의 서버에서 요청 받아서 바로 보내주면 되는 거 아닐까?? 이와 관련해서 좋은 예시를 발견했다. [https://velog.io/@unyoi/인프라-뿌시기1-미들웨어-개념을-알아보자]

      위 블로그에서 다룬 예시로, 네이버[www.naver.com] 에 접속하자마자 단 시간에 100 여개의 파일 처리가 일어났다.

      하나의 서버에서 동시다발적으로 이를 처리하게 되면 결국 과부하가 올 수 있다. 따라서, 매개 역할을 해줄 서버를 증설해 이 부담을 덜어주는 것이다.

  8. 마크업 언어(Markup Language)

    • 답변

      먼저 접하기 쉬운 대표적인 예로는, HTML 과 마크다운이 있다.

      사전적 의미로는 ‘문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙을 정의한 언어’ 로 다소 복잡한 느낌이다.

      달리 말하면, 양식이 있는 문서의 한 종류로 정보를 정확하게 전달하기 위한 목적으로 만들어진 것이다. HTML 에서는 <head>, <body> 태그 처럼 사용하는 것을 생각하면 쉽다.

      태그 내부에 있으면, 이 내용은 body 에 속한다는 의미니까!

  9. 검색 엔진 최적화(Search Engine Optimize)

    • 답변

      • 검색 엔진은 보다 정확한 검색 결과를 제공하기 위해, 웹 페이지에 대한 정보를 얻는 것에 초점을 맞춘다.
      • 이때, 웹 크롤러가 웹 페이지의 코드를 살펴보며 페이지의 내용(이미지, 동영상, 텍스트 등)을 수집한 뒤 유익한 정보를 제공하는지 평가하는 과정이 있다.
      • 이 평가에 따라서, 웹 페이지가 검색 결과 상단에 위치할지 뒤로 밀려날지 결정이 된다.
      • 따라서, 웹 페이지를 운영하는 입장에선 SEO 가 필수적이다.
  10. 버그(Bug)

    • 답변

      간단히, 프로그램이 의도한 대로 동작하지 않았을 때를 말한다. 1878년 토머스 에디슨이 언급한 적 있던 용어로, 예전부터 사용하던 용어라고 한다~

      조금 명확히 구분하자면, 프로그래머가 작성한 코드에 의해서 올바르게 동작하지 않는 상황을 말하는 것이다.

  11. 에러(Error)

    • 답변

      에러는 버그와 다르게, 일반적으로 프로그램 사용자에 의해서 의도와는 다른 동작을 하는 상황을 말한다. 이때, 프로그래머는 올바른 예외 처리를 통해 에러 상태를 다룰 수 있어야 한다.

  12. 예외(Exception)처리

    • 답변

      예외에 대한 내용을 정리하고, 예외 처리를 함께 정리해보자.

      • 예외(Exception): 일반적으로 예방하기 어렵거나 불가능한 오류를 말한다. 예를 들어, 더 이상 존재하지 않는 파일에 접근하려고하는 상황은 일반적으로 대처하기 어려운 상황이라고 할 수 있다.
      • 예외처리: 에러에서 다룬 것 처럼, 그 상황에서 어떤 에러인지 상태를 결정해주는 등 적절한 대처를 하기 위해 필요한 것이다.
  13. 트래픽(Traffic)

    • 답변

      일상적인 용어에서도 교통량을 일컫는 것 처럼, 인터넷에서도 비슷하다! 서버에서의 데이터의 전송량으로 이야기할 수 있다. 요청을 보내는 사람이 많아지면, 자연스레 서버에서 보내주는 데이터의 양도 늘어나는 것!

Development, TIL
Development TIL
This post is licensed under CC BY 4.0 by the author.