foxball

HTML+CSS+JQUERY 초중급 퍼블리싱으로 다양한 실전 예제 학습을 통해 퍼블리싱 중급 실력을 위한 퍼블리싱 기본기를 익히시게 됩니다. 특히, 다양한 실전 예제를 통해 충분한 설명과 실전 작업으로 경험하고 퍼블리싱에 자신감을 생깁니다. 41시간이 넘는 충분한 학습량을 제공하는 퍼블리싱 수업입니다. (코딩웍스 유튜브 퍼블리싱 채널에 CSS 중급이론 학습을 병행하시면 더욱 효과적입니다.)

Level 2

초급

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

HTML/CSS는 웹 페이지의 기본! 웹 페이지의 뼈대를 만들고, 디자인을 입히는 첫 시작을 열어줄 거예요.

HTML/CSS

제이쿼리는 오픈소스 기반의 자바스크립트 라이브러리입니다. 자바스크립트를 더 편하고 간결하게 해주는 툴로 생산성이 뛰어나다는 장점이 있어요!

제이쿼리

jQuery

HTML+CSS+JS 실전 포트폴리오(시즌2)는 중급 퍼블리싱으로 다양한 실전 예제 학습을 통해 퍼블리싱 중급 실력을 위한 퍼블리싱 기본기를 익히시게 됩니다. 특히, 다양한 실전 예제와 전체 반응형 웹사이트 제작을 통해 중급 퍼블리싱에 자신감이 생기고 수업한 작업물을 통해 취업을 위한 개인 포트폴리오로 귀중한 자료가 툅니다. 38시간 가까운 충분한 학습량과 실전 예제를 통한 중급 퍼블리시 노하우를 익히게 되는 퍼블리싱 수업입니다.

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)

프로그래밍 언어 랭킹마다 늘 상위권을 차지하는 자바스크립트! 프론트엔드에서 백엔드까지 다양한 영역에서 활발히 쓰이고 있어요.

자바스크립트

JavaScript

🌟 자바스크립트의 기초부터 고급까지, 진짜! 자바스크립트 강의에서 시작하세요! 🌟

고민은 이제 그만! 누구라도, 아무것도 몰라도 바로 시작할 수 있는 강의만 모았어요. 🐣

Level 1

입문

진짜! 자바스크립트(Javascript) - 기초부터 고급까지

ES6의 개념과 새로운 기능을 배워 더욱 읽기 편한 코드를 작성해보세요.

더 나은 설계, 더 좋은 코드를 작성하고 싶은 것은 모든 개발자의 소망이죠. 객체지향 프로그래밍으로 유연하고 안정적인 개발을 해봐요.

객체지향 프로그래밍(Object-Oriented Programming, OOP)

객체지향

실무에서 하자! 스크롤에 대응하는 반응형 웹 포트폴리오 #제일엔지니어링

XD UI 디자인 + Clone Coding 인터렉티브 반응형웹 포트폴리오!

하나면 충분합니다! PC, 모바일, 태블릿 등 다양한 디스플레이에서 반응하는 웹사이트를 만들어보세요.

Responsive Web

반응형 웹

사용자와 상호작용하는 감각적인 웹 페이지들을 어떻게 만들 수 있을까요? 여기서 시작해보세요.

Interactive Web

인터랙티브 웹

XD는 어도비에서 개발한 프로토타이핑 툴이에요. 클릭&드래그&드롭을 이용해 손쉽게 와이어프레임을 만들어보세요!

어도비 XD

이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념도 익히고 실습도 하며, 리액트를 위해 필요한 대부분의 지식을 한번에 습득할 수 있도록 만들었습니다.

따라하며 배우는 리액트 A-Z

페이스북이 개발한 Javascript 라이브러리, React

리액트

React

넥스트 제이에스

Next.js

자바스크립트에 타입을 부여한 언어, TypeScript. 코드 품질과 개발 생산성 향상이라는 확실한 장점 덕에 날이 갈수록 주목받고 있어요!

타입스크립트

TypeScript

짧은 개발 사이클을 반복하는 SW 개발 방법론 중 하나인 TDD! 애자일 철학이 담긴 다양한 TDD 테스트 기법을 통해 코드의 품질을 향상해보세요. 💪

테스트 주도 개발

리덕스는 자바스크립트 앱의 상태를 효율적으로 관리해 주는 도구입니다. 더 단순한 코드로 더 복잡한 애플리케이션을 만들고 싶은 분들이라면 놓치지 마세요!

리덕스

Redux

Software Test

소프트웨어 테스트

개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요.
학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

자바스크립트로 풀스택 웹 개발을 할 수 있다는 사실! 빠르게 성능을 끌어내는 Node.js의 매력을 소개합니다.

노드js

Node.js

이 강의를 통해서 쇼핑몰 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

Level 3

중급이상

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

다운받을 필요 없이 URL 한 줄로 바로 쓰는 웹앱 개발에 도전해 보세요!

Web Application

웹앱

몽고DB는 기존의 RDBMS의 한계를 극복하기 위해 만들어진 NoSQL 데이터베이스입니다. 방대한 데이터 처리를 빠르게 할 수 있다는 장점 덕에 많은 기업이 사용하고 있어요.

몽고DB

MongoDB

‘이미지와 같은 파일들을 어디에 어떻게 저장해야 되지? 데이터베이스에 저장? 아니면 서버 하드디스크? 어떻게 하면 서버 부하를 줄일 수 있을까? 어떻게 하면 버벅거림 없이 많은 이미지들을 빠르게 불러올 수 있을까? AWS S3? CDN?! 단순히 이미지를 저장하고 불러오고 싶은데 왜 이렇게 요소들이 많은 걸까? 어떤 요소들이 무슨 역할을 하고 어떻게 조합해야 될까?’ 이미지 파일 관련 필요한 요소들을 풀스택으로 처음부터 끝까지 정제해서 가르쳐드립니다 :)

지식공유자의 깜짝할인

이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)

람다

Lambda

아마존이 제공하는 클라우드 서비스 AWS(Amazon Web Services)는 다양하고도 강력한 기능을 자랑합니다. 클릭 몇 번으로 든든한 웹 인프라를 구축할 수 있어요.

아마존 웹 서비스

Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크입니다. Node.js에서 가장 보편적으로 사용하는 프레임워크예요!

익스프레스

Express

리액트18 & 넥스트14 & 리액트쿼리5 & Next Auth5 & MSW2 & socket.io4 & zustand 스택으로 트위터(X.com)와 유사한 SNS 서비스를 만들어봅니다.
끝으로 검색엔진 최적화를 위한 SSR까지!

Next + React Query로 SNS 서비스 만들기

react-query

next-auth

React, Next.JS 14, TailwindCss, RadixUI, Shadcn, zustand 으로 YoutubeMusic 웹사이트를 클론합니다. NextJS 기초부터 UI 중점으로 웹프론트 기초를 마스터 할 수 있어요.!

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

tailwind-css

zustand

저 서비스는 어떻게 만들었을까? 내 손으로 직접 실제 서비스를 따라 만들면서 학습해보세요.

Clone Coding

클론코딩

mongoDB, NoSQL 요즘 많이 들리지만 아직은 낯선 데이터베이스인가요? 관계형 데이터베이스(RDS/SQL)처럼 사용하고 계시지는 않으신가요? 아무리 좋은 기술도 올바르게 사용하지 않으면 역효과가 발생합니다. 그래서 몽고디비 사용 실패 사례도 종종 보이는데요. 이 강의는 mongoDB를 최대한 mongoDB스럽게 사용할 수 있도록 기본 개념부터 실무 노하우까지 가르쳐드려요.

mongoDB 기초부터 실무까지(feat. Node.js)

RESTful하게 API를 설계하고 구현해보세요.

RESTful API

REST API

데이터도 꿰어야 보배! 데이터를 공유하고, 관리할 수 있도록 도와주는 데이터베이스 관리 시스템을 만나보세요.

데이터베이스 관리 시스템

DBMS/RDBMS

서비스의 성공을 좌우하는 데이터의 힘! 그 중심에 데이터를 흐르게 하는 데이터 엔지니어링이 있어요.

Data Engineering

데이터 엔지니어링

Node.js+자바스크립트+익스프레스+몽고DB로 서버의 핵심을 향해 한눈팔지 않고 달린다!

Do it! Node.js 프로그래밍 입문

리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다.
끝으로 검색엔진 최적화 후 AWS에 배포합니다.

[리뉴얼] React로 NodeBird SNS 만들기

<div><div class="grid-wrapper"><div class="action-menu-wrapper action-menu-wrapper--root action-menu-wrapper--view-mode"><div class="one-column-grid"><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display: flex; flex-direction: column; height: auto; max-height: 100%; min-height: auto; border-radius: 8px;"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color: rgb(255, 255, 255); cursor: auto;"><div class="tiptap ProseMirror" tabindex="-1" translate="no"><p>몇년간 혼자듣던 로드맵 이제와서 공개합니다. <br>기초부터 ~고급까지  초보자도 비전공자도  아래나와있는 로드맵 순서대로만 따라하면 풀스택 개발자가 될수 있습니다.<br>HTML+CSS+JAVASCRIPT+JQUERY로 기초를 탄탄히 다진 후 요즘 대세인  REACT / NEXT.JS 로 완벽한 프론트앤드<br>고수가 되어보세요. <br>기초와 프레임워크 까지 완벽히 익히셨다면,  NODE.JS  / 몽고디비로  백앤드 기술까지 ~ 몽땅다 가져가세요~<br><br class="ProseMirror-trailingBreak"></p></div></div></div></div></div></div></div></div></div></div>

내가들은 강의만 들어도 여러분은 Full Stack 개발자

로드맵 코스