Inflearn brand logo image
Inflearn brand logo image
BEST
개발 · 프로그래밍

/

풀스택

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다.

(4.8) 수강평 35개

수강생 682명

HTML/CSSJavaScriptREST APIMySQLAWS

초급자를 위해 준비한
[풀스택, 웹 개발] 강의입니다.

이런 걸 배울 수 있어요

  • 웹 프론트엔드: HTML, CSS, JS

  • Open API: 카카오맵 API

  • 서버&벡엔드: Nginx + Express.js: Rest API

  • 데이터베이스: MySQL, DB설계와 SQL

  • 클라우드: AWS EC2 + Ubuntu

  • Git & Github

개발의 전과정을 경험하고
결과물까지 만들어요 🗺


우리가 코딩을 배우는 이유는 우리에게 필요한 것을 만들기 위함인데,
목적없이 배우다 보면 원래의 의도와는 다르게 최신 기술 스택만을 따라갈 수 있습니다.

개발의 전 과정을 직접 경험해보고 내가 흥미를 느끼는 분야에 집중해도 늦지 않아요.
너무 난이도가 높은 기술을 배제하고 개발 프로세스 경험이라는 취지에 포커스를 맞춰 구성했습니다.

본 강의에서는 맛집 지도 서비스 제작에 필요한 과정을 A부터 Z까지 다루어보며,
내가 좋아하는 유튜버의 맛집 지도를 차근차근 만들어봅니다.

이런 분들께 추천드려요 👌

개발 경험이
아직 부족한 분

웹서비스를
만들고 싶은 분

프로토타입을
만들고 싶은 분

독특한 지도서비스를
만들고 싶은 분


이 강의만의 특징을
알려드릴게요 🚩

1. 기본 기술에 충실하여 최대한 활용하는 강의

꼭 최신 프레임워크를 알고 있어야만 개발할 수 있는 것은 아닙니다.
오히려 기본 기술을 모르는 상태에서 최신 기술부터 배운다면 금방 흥미를 잃기 쉽습니다.
본 과정은 웹 클라이언트부터 서버, 배포 기술까지 최대한 활용하는 것에 초점을 맞췄습니다.

2. 실제 웹 서비스를 만들며 익히는 풀스택 기술

철저하게 핵심 위주로 학습하여 실습 위주로 활용할 수 있도록 하는 것이 1순위 목표입니다.
- HTML, CSS를 배우고, 활용할 수 있는 퍼블리싱 프로젝트,
- AWS 서버를 구축하고 REST API 서버 구현, 그리고 배포까지!

3. 내 것으로 만들기 위한 연습

강의 중간마다 배운 내용을 직접 실습해볼 수 있도록 퀴즈가 나오는데,
강의를 수강하며 직접 풀어본다면 배운 지식들을 진짜 내 것으로 만드는데 도움이 될 겁니다.

4. 원활한 질의응답 & 다양한 강의자료

질문을 남겨주시면 효과적인 학습을 위해 빠르게 답변드리겠습니다.
또, 각 챕터별 강의에서 활용할 수 있도록 다양한 강의자료를 제작했습니다.

클라이언트 & 서버를 배워요 👨‍💻

클라이언트

  1. 핵심 콕콕! HTML, CSS
    • HTML 주요태그
    • CSS Box Model, Position, Flex...
  2. 맛집지도 일단 만들어봐요! : HTML, CSS + 카카오맵 퍼블리싱
    • HTML, CSS로 맛집지도 뼈대 만들기
    • 카카오맵 API로 지도 넣기
  3. 깔끔하게 정리하는 Javascript 문법
    • variable, operator..
    • condition, loop
    • function
  4. JS DOM과 비동기처리
    • DOM && Event Handling
    • Asynchronous
  5. 카카오맵 API
    • 지도 생성 & 컨트롤러
    • Marker 생성
    • InfoWindow 커스터마이징
    • 카테고리 핸들링

서버

  1.  서버를 구축하자! 쉽게 이해하고 만드는 AWS 서버
    • AWS EC2 + Linux Ubuntu
    • Nginx, Node Express.js, MySQL
  2. 데이터를 저장하는 공간, MySQL로 배우는 DB 설계방법과 SQL
    • ERD 설계
    • Query
  3. 데이터를 깔끔하게 제공하는, Express.js 백엔드와 REST API
    • REST API
    • Express 사용법
    • CRUD API 구현
  4. 맛집지도를 완성해볼까요?
    • 프로젝트 완성 과제
  5. 배포하기: 전 세계에서 내 맛집지도를 볼 수 있도록
    • Git, Github
    • PM2 무중단 배포
    • Domain 적용


여러분들의 미래 모습 😎

  • HTML, CSS를 활용해서 웹사이트의 레이아웃을 만들 수 있습니다.
  • 카카오맵 API를 필요한 형태로 커스텀하여 사용할 수 있습니다.
  • 클라이언트와 서버의 개념을 이해하고 설명할 수 있습니다.
  • AWS EC2 Linux Ubuntu 서버를 구축할 수 있습니다.
  • REST API의 개념을 이해하고 설명할 수 있습니다.
  • 필요한 REST API를 구현할 수 있습니다.
  • 사이트를 배포할 수 있습니다.

예상 질문 Q&A 💬

Q. 왜 풀스택 기술을 배워야 할까요?
프로그래밍을 입문하시는 분들이 문법 공부만 반복하다가 실제 개발은 해보지 못하고 포기하는 경우를 많이 봤습니다. 프로그래밍 사고력을 요구하는 알고리즘 분야와 실전 개발 분야는 또 차이점이 있습니다. 풀스택 기술을 익히며 프로젝트의 A-Z를 느껴보는 경험을 드리고 싶어요!

Q. 코딩은 처음인데 수강해도 괜찮을까요?
비전공자들도 수강하실 수 있도록 최대한 신경써서 강의를 구성했지만 최소한의 기초지식은 필요합니다. 대학생의 경우 학교에서 기초 프로그래밍 강의를 들어본 적이 있다면 충분히 수강하실 수 있고, 생활코딩을 보고 이해하실 수 있는 정도라면 수강하실 수 있다고 생각합니다. 만약 어려운 점이 있으시다면 언제든 질문해주세요! 빠르게 답변드리겠습니다.

Q. 완강하고 난 다음엔 무엇을 해야 할까요?
제가 추천드리는 것은 프로젝트를 하나 구상하는 것입니다. 어떤 프로젝트라도 일단 만들어보고 싶었던 걸 정하고 부딪혀 보시는 겁니다. 수강하면서 재미있었던 한 분야를 정해 전문성을 쌓아보시면 큰 도움이 될 겁니다.

Q. 수강 시 주의할 사항이 있을까요?
A. 클라이언트 파트를 진행할때는 Chrome 웹 브라우저를 기준으로 진행하며, 전체적인 강의는 Windows OS 기준으로 진행됩니다.

A. 코드를 직접 작성하며 강의를 진행하는 부분이 있기에 키보드 소리가 날 수 있습니다.
소리에 매우 민감하신 분은 반드시 공개된 강의 음량을 확인해주시길 바랍니다.

A. 서버 파트 강의에서는 전체적으로 Top-down 형식의 학습이 진행됩니다.
Express 템플릿을 제공하고, 이를 활용해 RestAPI를 설계하는 방법을 배웁니다.
Express generator가 아닌 강사 본인이 직접 제작한 MVC 패턴 템플릿입니다.
템플릿 구조를 이해하고 활용하여 기능을 구현하는데 초점을 맞추고 있습니다.
학습 스타일면에서, Bottom-up으로 템플릿 제작에 모든 코드를 직접 작성하며 배워야 한다고 생각하시는 분은 참고해주시길 바랍니다.

 

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 프로그래밍 문법만 공부하다가 포기한 적이 있는 분

  • 기초부터 배포까지 개발의 모든 과정을 배워보고 싶은 분

  • 나만의 맛집 지도를 기록하고 웹사이트로 만들고 싶은 분

안녕하세요
Jiwoon Jeong입니다.

6,525

명

수강생

163

개

수강평

169

개

답변

4.9

점

강의 평점

4

개

강의

저는 현재 국내 대기업에서 추천 시스템 연구 개발을 하고 있습니다.

누구나 재밌고 유익하게 배울 수 있는 개발 콘텐츠를 만들겠습니다.

 

이력 사항 ✒️

  • 네이버커넥트 부스트캠프 웹 백엔드(Node.js) 6기 code reviewer 활동

  • 서울산업진흥원 SeSSAC 온라인 IT콘텐츠 파트너 (Full Stack)

  • 서울산업진흥원 SeSSAC 개발자 입문과정 진행 (Python, Javascript)

  • 건국대 몰입형 프로그래밍 과정 강의 진행

  • 서울시 SSAC 라이징 프로그래머 서버파트 총괄

  • 암호화폐 매매 자동화 프로그램 개발 외주 (Qt)

  • 마케팅 에이전시 랜딩 페이지 개발 외주 (Web)

  • 실시간 데이터처리 Windows 응용 프로그램 개발 외주 (Qt)

     

더보기

커리큘럼

전체

72개 ∙ (9시간 7분)

강의 게시일: 
마지막 업데이트일: 

수강평

전체

35개

4.8

35개의 수강평

  • 설이님의 프로필 이미지
    설이

    수강평 7

    ∙

    평균 평점 5.0

    5

    31% 수강 후 작성

    이해하기좋아요

    • 이희은님의 프로필 이미지
      이희은

      수강평 1

      ∙

      평균 평점 5.0

      5

      6% 수강 후 작성

      설명 너무 잘해주셔서 잘 따라가고있습니다. 좋은 강의 감사합니다!

      • Jiwoon Jeong
        지식공유자

        감사합니다 :) 수강 중에 어려움이 생기시면 Q&A 활용해주세요!

    • 챗지피티님의 프로필 이미지
      챗지피티

      수강평 2

      ∙

      평균 평점 4.5

      5

      61% 수강 후 작성

      비전공자인데 개발자가 되려는 사람인데 JS부터 막막함을 느껴서 이 강의를 듣게 되었습니다. 많이 배워갑니다..!

      • 퀀텀코더님의 프로필 이미지
        퀀텀코더

        수강평 3

        ∙

        평균 평점 5.0

        5

        88% 수강 후 작성

        노드js 부분빼고는 정말 좋아요. 근데 노드js 부분까지 다 설명하려면 솔직히 그것도 아닌거같구요.. 무엇보다 강사님 질의응답이 너무좋습니다. 솔직히 돈 안 아깝습니다. 지금 이제 끝을 달려가는데 제바바알 배포까지 성공할수있었음좋겠어요. 할수잇겟죠ㅜㅜ?

        • Suit & Coffee님의 프로필 이미지
          Suit & Coffee

          수강평 11

          ∙

          평균 평점 4.8

          5

          88% 수강 후 작성

          Good!

          Jiwoon Jeong님의 다른 강의

          지식공유자님의 다른 강의를 만나보세요!

          핵심만 빠르게, 입문자를 위한 딥러닝(Deep Learning)과 텐서플로(TensorFlow)강의 썸네일

          핵심만 빠르게, 입문자를 위한 딥러닝(Deep Learning)과 텐서플로(TensorFlow)

          Jiwoon Jeong

          딥러닝(Deep Learning)을 텐서플로(Tensorflow)를 활용하여 학습할 수 있는 강의입니다. 선형(Linear) 회귀, 로지스틱(Logistic) 회귀, 소프트맥스(Softmax) 회귀 모델을 배우고, 최종적으로 패션 이미지를 분류할 수 있는 MLP 모델을 만들어보세요!

          초급

          초급

          딥러닝, Tensorflow, Python

          핵심만 빠르게, 입문자를 위한 파이썬(Python)과 판다스(Pandas)강의 썸네일

          핵심만 빠르게, 입문자를 위한 파이썬(Python)과 판다스(Pandas)

          Jiwoon Jeong

          파이썬(Python)과 판다스(Pandas) 라이브러리의 핵심적인 개념을 빠르게 익힐 수 있는 강의입니다. 각 파트 뒤에 있는 연습 문제를 함께 해결해 나가며 프로그래밍 역량을 향상시켜보세요!

          입문

          입문

          Python, Pandas

          평생 써먹는 데이터 기반 투자법 with 파이썬 퀀트 투자강의 썸네일

          평생 써먹는 데이터 기반 투자법 with 파이썬 퀀트 투자

          Jiwoon Jeong

          파이썬 퀀트 투자와 함께 데이터를 기반으로 투자 전략을 세우고 전략에 따른 투자를 해보세요. 다양한 자산 배분 전략을 구현하고, 최종적으로 자신만의 투자 전략을 만들어 볼 수 있습니다.

          초급

          초급

          퀀트, 투자, Pandas

          비슷한 강의

          같은 분야의 다른 강의를 만나보세요!

          리액트(React.js)를 이용한 나만의 유튜브 사이트 만들기 프로젝트강의 썸네일

          리액트(React.js)를 이용한 나만의 유튜브 사이트 만들기 프로젝트

          webstoryboy

          강의를 통해 React 프레임워크와 YouTube API를 이용하여 자신만의 리액트 유튜브 영상 사이트를 만들어봅니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용하는 것을 목표로 합니다.

          초급

          초급

          React, HTML/CSS, JavaScript

          비전공자도 이해할 수 있는 AWS 중급/실전 (보안, 가용성편)강의 썸네일

          비전공자도 이해할 수 있는 AWS 중급/실전 (보안, 가용성편)

          JSCODE 박재성

          비전공자 입장에서도 쉽게 이해할 수 있고, 실전에서 바로 적용 가능한 'AWS 중급/실전' 강의를 만들어봤습니다!

          초급

          초급

          AWS, devops, infrastructure

          비전공자를 위한 웹사이트 개발 첫걸음 #HTML, #CSS강의 썸네일

          비전공자를 위한 웹사이트 개발 첫걸음 #HTML, #CSS

          banana-coder

          웹사이트를 만드는 개발자가 되기 위해선 배워야 할 기술들이 많습니다. 그 많은 기술들 중 가장 먼저 배워야 할, 웹사이트의 제작의 기본인 HTML, CSS에 대해 설명합니다. HTML, CSS를 작성하는 방법을 배우고, 마지막엔 아마존이라는 실제 웹사이트를 비슷하게 만드는 프로젝트를 합니다. 그리고 만든 프로젝트를 url로 만들어 배포할 수 있도록 합니다.

          입문

          입문

          HTML/CSS, github-desktop

          React & FastAPI로 만드는 투표 커뮤니티 플랫폼: 결제 시스템으로 수익화까지!강의 썸네일

          React & FastAPI로 만드는 투표 커뮤니티 플랫폼: 결제 시스템으로 수익화까지!

          닭강정

          이 강의에서는 React와 FastAPI를 활용해 실시간 투표, 댓글, 좋아요 등의 소셜 기능은 물론, 결제 시스템(카카오페이, 토스페이 등)을 연동해 수익화하는 방법까지 단계별로 실습합니다.

          중급이상

          중급이상

          React, MySQL, Docker

          비전공자도 이해할 수 있는 CI/CD 입문·실전강의 썸네일

          비전공자도 이해할 수 있는 CI/CD 입문·실전

          JSCODE 박재성

          비전공자 입장에서도 쉽게 이해할 수 있고, 실전에서 바로 적용 가능한 CI/CD 입문 강의를 만들어봤습니다!

          초급

          초급

          CI/CD, github-actions, AWS

          비전공자도 이해할 수 있는 Nginx 입문/실전강의 썸네일

          비전공자도 이해할 수 있는 Nginx 입문/실전

          JSCODE 박재성

          비전공자 입장에서도 쉽게 이해할 수 있고, 실전에서 바로 적용 가능한 'Nginx 입문/실전' 강의를 만들어봤습니다!

          초급

          초급

          nginx, infrastructure, AWS

          비전공자도 이해할 수 있는 MySQL 성능 최적화 입문/실전 (SQL 튜닝편)강의 썸네일

          비전공자도 이해할 수 있는 MySQL 성능 최적화 입문/실전 (SQL 튜닝편)

          JSCODE 박재성

          비전공자 입장에서도 쉽게 이해할 수 있고, 실전에서 바로 적용 가능한 'MySQL 성능 최적화 입문/실전 (SQL 튜닝편)' 강의를 만들어봤습니다!

          초급

          초급

          MySQL, DBMS/RDBMS, query-tuning

          제대로 배우는 Express.js: Part1 기초부터 심화까지 [기초편]강의 썸네일

          제대로 배우는 Express.js: Part1 기초부터 심화까지 [기초편]

          nhcodingstudio

          물 흐르듯 따라가는 Express.js 입문부터 실전까지! 서버 기초 개념부터 CRUD 프로젝트 완성까지 직접 구현하며 제대로 익히는 백엔드 여정.

          초급

          초급

          express.js, Node.js, routing

          풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)강의 썸네일

          풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

          정재남

          React 기반의 간단한 SNS 서비스를 만들면서 REST API 및 GraphQL을 연습합니다. 프론트엔드 개발을 위한 백엔드 환경을 쉽고 간단하게 만드는 방법을 소개합니다.

          초급

          초급

          REST API, GraphQL, React

          FastAPI 찍어먹기 (FastAPI + React.js + AWS LightSail)강의 썸네일

          FastAPI 찍어먹기 (FastAPI + React.js + AWS LightSail)

          개발크리에이터

          이 강의를 통하여 러프하게 FastAPI를 통한 백엔드 기초와 더불어 React.js AWS 배포까지하여 실제 배포까지 빠르게 경험해볼 수 있어요

          초급

          초급

          FastAPI, react.js, AWS

          Real MySQL 시즌 1 - Part 1강의 썸네일

          Real MySQL 시즌 1 - Part 1

          이성욱

          MySQL의 핵심적인 기능들을 살펴보고, 실무에 효과적으로 활용하는 방법을 배울 수 있습니다. 또한, 오랫동안 관성적으로 사용하며 무심코 지나쳤던 중요한 부분들을 새롭게 이해하고, 깊이 있는 데이터베이스 지식을 얻을 수 있습니다.

          초급

          초급

          MySQL, DBMS/RDBMS, backend

          스프링부트를 이용한 웹 프로그래밍: 웹사이트 이렇게 만드는 거예요!강의 썸네일

          스프링부트를 이용한 웹 프로그래밍: 웹사이트 이렇게 만드는 거예요!

          블스

          캘린더(일정관리)를 만들면서 배우는 스프링 웹 프로그래밍! 짤 예제가 아닌 바로 써먹을 수 있는 예제로 스프링 완전 정복해요~

          초급

          초급

          Spring Boot, Spring Security, JPA

          GSAP의 ScrollTrigger를 활용한 포트폴리오 제작강의 썸네일

          GSAP의 ScrollTrigger를 활용한 포트폴리오 제작

          J.영

          GSAP의 ScrollTrigger를 활용하여 스크롤에 반응하는 인터랙티브 반응형 웹 포트폴리오를 만들어봐요!

          초급

          초급

          HTML/CSS, scrolltrigger, gsap

          아무도 알려주지 않는 WebRTC를 사용한 P2P통신강의 썸네일

          아무도 알려주지 않는 WebRTC를 사용한 P2P통신

          July

          WebRTC를 활용하여 구현하는 웹캠과 피어간 통신에 대해서 학습할 수 있습니다.

          입문

          입문

          Go, webrtc, p2p

          Real MySQL 시즌 1 - Part 2강의 썸네일

          Real MySQL 시즌 1 - Part 2

          백은빈

          MySQL의 핵심적인 기능들을 살펴보고, 실무에 효과적으로 활용하는 방법을 배울 수 있습니다. 또한, 오랫동안 관성적으로 사용하며 무심코 지나쳤던 중요한 부분들을 새롭게 이해하고, 깊이 있는 데이터베이스 지식을 얻을 수 있습니다.

          초급

          초급

          MySQL, DBMS/RDBMS, backend

          MySQL Geospatial Query를 통한 위치 탐색과 AWS를 활용한 이미지 캐싱강의 썸네일

          MySQL Geospatial Query를 통한 위치 탐색과 AWS를 활용한 이미지 캐싱

          July

          AWS (S3, CloudFront), MySQL(Geospatial Query)를 활용한 플랫폼 메스어답션 방법에 대해서 알려드립니다.

          초급

          초급

          MySQL, s3, cloudfront

          웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

          깡코딩

          웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

          초급

          초급

          인터랙티브 웹, JavaScript, HTML/CSS

          자바스크립트 입문자를 위한 강의강의 썸네일

          자바스크립트 입문자를 위한 강의

          JeongTaeHyun

          자바스크립트 입문을 하시고 싶으신가요? 그럼 저의 강의를 선택해 주세요.

          초급

          초급

          JavaScript

          함수형 프로그래밍과 JavaScript ES6+강의 썸네일

          함수형 프로그래밍과 JavaScript ES6+

          MDU 유인동

          ES6+와 함수형 프로그래밍을 배울 수 있는 강의입니다. 이 강좌에서는 ES6+의 이터러블/이터레이터/제너레이터 프로토콜을 상세히 다루고 응용합니다. 이터러블을 기반으로한 함수형 프로그래밍, map/filter/reduce, 파이프라인, 제너레이터를 통한 지연 평가, Promise 합성, 동시성/병렬성, async/await와 비동기 에러 핸들링 등을 배울 수 있습니다. 이 강좌를 습득하고 연습하여 중급 자바스크립트 개발자로 성장하세요!

          초급

          초급

          JavaScript, 함수형 프로그래밍

          비동기 프로그래밍: Promise, async/await 끝장내기강의 썸네일

          비동기 프로그래밍: Promise, async/await 끝장내기

          짐코딩

          이 강의는 자바스크립트 비동기 프로그래밍에서 Promise와 async/await의 개념과 작동 원리를 명확히 설명하며, 실무에서 비동기 처리를 능숙하게 다룰 수 있도록 돕습니다.

          초급

          초급

          promise, async-await, asynchronous-programming

          ₩53,900

          30%

          ₩77,000