1. 패키지 매니저: 라이브러리들 관리, 설치, 및 업데이트를 도와주는 툴 2. 번들러: 라이브러리 중 쓰지 않는 코드를 지워주고 하나의 js 파일로 변환하여 배포가 편하게 해줌 3. SPA: 자바스크립트를 통해서 클라이언트 (예시로 브라우저) 사이드에서 html 변환 4. SSR: 서버에서 자바스크립트 코드를 html 로 변환. 전부 html로 작성하기 힘들기 때문 5. Node js: 원래 자바스크립트는 브라우저 엔진을 통해서만 실행 가능했는데 다른 플랫폼들에서도 사용할 수 있게 해주는 엔진. 이로써 자바스크립트로도 서버 개발이 가능해짐. 6. SSR이 유행 하는 것으로 보아 요즘에는 서버가 많은 일을 담당하는 것이 유행하는 듯. 백엔드와 프론트엔드의 경계가 모호해지고 있다.
프론트 개발의 전체 맥락을 이렇게 쉽게 정리해주시다니... 어떤 기능이 필요해서 이런 걸 쓴다라는걸 정말 간단하고 이해하기 쉽게 영상 만들어주셔서 감사합니다 특히 예전에 다른 프론트 강의 들을때 라이브러리 사용하면서 parcel 번들러 같은거 왜 써야하는지 몰랐는데 지금 정확하게 알게 됐습니다...
npm이 생기기 전, jquery로 웹개발에 입문해서 퓨어 자바스크립트 + php를 파다가 요즘은 리액트 기반 서버사이드 렌더링 프레임워크로 웹을 개발하고 있습니다. 저는 기술의 발전을 따라 어떤게 불편해서 어떻게 발전했는지 몸소 느끼면서 함께 성장했지만 요새 프론트엔드 개발을 시작하시는 분들은 이 맥락을 파악하기가 참 힘들거같다는 생각이 듭니다. 다들 응원해요
1. html css javascript 2. javascript library 3. npm: package manager 1. nodejs → install npm 4. nodejs: cross-platform JavaScript runtime environment 5. bundling tool (trubopack, vite, webpack, etc) combine js files, compact size, rename fileformat to js, up-to-dated js format 6. build: (npm run build) 7. SPA (Vue, Svelte, React, Angular) 1. Single page application 2. Dynamic html creation (client side rendenring) 8. State management (redux, recoil, mobx, etc) 1. Front end doesn’t have db. They need to handle state (variables) 9. server side rendering 1. client side rendering → not able to expose to google, long loading 2. server → html to client 10. meta-framework 1. react like server side rendering (next, nust js, remix, etc) 2. full stack 11. TypeScript 1. JS doesn’t have type 2. bundling tool .ts → .js 12. serverless (no need to build back end) 1. front end: html css js 2. back end: server, db, etc 3. expensive
쓸데없이 숫자만 많아보이는거지, html, css, jss, webpack, react, redux 정도만 제대로 알아두면 나머지는 저절로 따라옵니다. 거기에서 더 나가서 언어와 상관없이 백엔드를 할줄알면 좋구요. 저기 나온것들을 몇개나 해봤는지는 하나도 중요하지않아요. 제대로 아는게 중요하지
하나만 예를들자면 전 지금 회사에서 zustand 쓰고있는데, 전 이걸 공부해본적이 한번도 없어요. 제대로 파본건 리덕스가 끝입니다. 근데 zustand는 그냥 문서보고 바로 사용할수있었어요. 저기 나온 대부분의 것들이, 더 편하게 개발하려고 나온것들이지 괴로운것들이 아닙니다.
React vue nodejs nextjs 등 프론트에 필요한건 많이 배웠고 실무에서도 쓰고있지만.... 솔직히 트랜드 바뀌는건 짜증을 넘어서 분노가 올 때도 있음. 다 먹고 살자고 하는짓인데 그렇게 엄청난 기술의 진보도 아니면서 따라가야하는게 지침.... 페이지전환시 웹서버에 요청하는거나 프론트에서 처리하는거나 구조만 잘짜면 그렇게 엄청난 차이도 아닌데. (심지어 SPA도 nextjs 기준으로는 정적 리소스를 라우팅하는 매번 웹서버에 요청해야함) 걍 이대로 10년정도만 vue react 이외의 기술이 유행하지 않았으면 하는 바람. 엄청난 기술발전이 아닌 이상..
연차가 쌓이고 실무 능력 출중하면 트랜드는 선택 아닌가요? react로 하는거 html + js로 전부 다 만들 수 있는건데 react를 쓰면 더 깔끔하고 이쁘게 만드는거고, 극단적으로는 react로 만든거를 c언어나 심지어 어셈블리어로도 똑같이 만들 수 있는거 아닌가 싶은데 10년정도의 연차면 리액트든 새로 나온 무언가든 그냥 도구로만 쓸 것 같아서요. 그래서 이것저것 계속 새로 나오는게 좋다는 생각이 드네요. 도구가 더 쉽고 편해지는거니깐요. 공부한지 얼마 안된 초보의 생각입니다~
아직까지 html css js 로 잘버티고 있음.. 프론트웹 말고도 공부할게 지천에 널려 있는데.. 이런거로 시간 뺏기는거 같아서.. 그시간에 다른 개발 공부함.. 10년 동안 아무탈 없이 잘돌아감.. (아 물론.. 그래도 되는 포지션인 경우에만..) 웹dll이 대세가 되면 그건 발담글 생각 있음..
1. 패키지 매니저: 라이브러리들 관리, 설치, 및 업데이트를 도와주는 툴
2. 번들러: 라이브러리 중 쓰지 않는 코드를 지워주고 하나의 js 파일로 변환하여 배포가 편하게 해줌
3. SPA: 자바스크립트를 통해서 클라이언트 (예시로 브라우저) 사이드에서 html 변환
4. SSR: 서버에서 자바스크립트 코드를 html 로 변환. 전부 html로 작성하기 힘들기 때문
5. Node js: 원래 자바스크립트는 브라우저 엔진을 통해서만 실행 가능했는데 다른 플랫폼들에서도 사용할 수 있게 해주는 엔진. 이로써 자바스크립트로도 서버 개발이 가능해짐.
6. SSR이 유행 하는 것으로 보아 요즘에는 서버가 많은 일을 담당하는 것이 유행하는 듯. 백엔드와 프론트엔드의 경계가 모호해지고 있다.
풀스텍이 기본인 세상인거 같습니다
프론트 개발의 전체 맥락을 이렇게 쉽게 정리해주시다니...
어떤 기능이 필요해서 이런 걸 쓴다라는걸 정말 간단하고 이해하기 쉽게 영상 만들어주셔서 감사합니다
특히 예전에 다른 프론트 강의 들을때 라이브러리 사용하면서 parcel 번들러 같은거 왜 써야하는지 몰랐는데 지금 정확하게 알게 됐습니다...
npm이 생기기 전, jquery로 웹개발에 입문해서
퓨어 자바스크립트 + php를 파다가
요즘은 리액트 기반 서버사이드 렌더링 프레임워크로 웹을 개발하고 있습니다.
저는 기술의 발전을 따라 어떤게 불편해서 어떻게 발전했는지 몸소 느끼면서 함께 성장했지만
요새 프론트엔드 개발을 시작하시는 분들은 이 맥락을 파악하기가 참 힘들거같다는 생각이 듭니다.
다들 응원해요
걱정하실 필요없습니다. 선대의 것을 모두 알지 못해도 다 하게 됩니다. 개발하려고 컴퓨터부터 만들어야하는 건 아닌 것처럼요.
제가 지금 바닐라+php 인데 리액트로 어떻게 넘어가셨나요,,%너무답답하네요
@@쵹쵹-n6c저도 비슷한케이스였는데, 상사한테 못해먹겠다고 꼬장부리면 돼요 ㅋㅋㅋ ux가 안좋으면 유저를 잃듯이 dx가 안좋으면 개발자를 잃는거라고 설득하세요. 기존코드가 어쩌고 저쩌고 하면 신기능 만들때마다 쪼끔씩 이사가면 된다고하세요
코딩애플사이트에서 바닐라 + 노드로 개발공부하고 웹사이트 만들어보고 불편함을 느끼고 리액트를 다시 만져보니 ㅜㅜㅜ눈물이나오더라구요
@@쵹쵹-n6c바닐라가 익숙하면 리액트는 공짜로 먹는건데요.
6분만에 이걸 다 정리하는 코딩애플 goat..
1. html css javascript
2. javascript library
3. npm: package manager
1. nodejs → install npm
4. nodejs: cross-platform JavaScript runtime environment
5. bundling tool (trubopack, vite, webpack, etc) combine js files, compact size, rename fileformat to js, up-to-dated js format
6. build: (npm run build)
7. SPA (Vue, Svelte, React, Angular)
1. Single page application
2. Dynamic html creation (client side rendenring)
8. State management (redux, recoil, mobx, etc)
1. Front end doesn’t have db. They need to handle state (variables)
9. server side rendering
1. client side rendering → not able to expose to google, long loading
2. server → html to client
10. meta-framework
1. react like server side rendering (next, nust js, remix, etc)
2. full stack
11. TypeScript
1. JS doesn’t have type
2. bundling tool .ts → .js
12. serverless (no need to build back end)
1. front end: html css js
2. back end: server, db, etc
3. expensive
쓸데없이 숫자만 많아보이는거지, html, css, jss, webpack, react, redux 정도만 제대로 알아두면 나머지는 저절로 따라옵니다. 거기에서 더 나가서 언어와 상관없이 백엔드를 할줄알면 좋구요.
저기 나온것들을 몇개나 해봤는지는 하나도 중요하지않아요. 제대로 아는게 중요하지
하나만 예를들자면 전 지금 회사에서 zustand 쓰고있는데, 전 이걸 공부해본적이 한번도 없어요. 제대로 파본건 리덕스가 끝입니다. 근데 zustand는 그냥 문서보고 바로 사용할수있었어요.
저기 나온 대부분의 것들이, 더 편하게 개발하려고 나온것들이지 괴로운것들이 아닙니다.
근본 자바스트립트랑
웹이 어떻게 동작하는지만 제대로 알고 있으면
솔직히 저런 것들은 공식문서 따라가면서 하면 금방 함
반에서 1등하는애가 깔끔하게 수업정리한 요점정리 노트 읽어보는 기분이네요.
정리 ㄹㅇ 깔끔하다 진자루 웹린이가 잘 보고갑니다.
0:12 정말 다 알아야 하는 부분...ㅠㅠ 아무것도 모르고 문서만 뒤적거리면서 독학으로 프론트엔드로 전향했는데 정말 힘들었습니다.
호오..진짜로 요즘의 프론트 쓸 때 필요한 요소들을 유기적으로 순서대로 깔끔하게 설명해주셔서 쏙쏙 들어오네요
프론트는 볼게 너무 많아서 헷갈렸는데 한번에 쉽게 정리해주셔서 감사합니다!
3년차 뷰쟁인데 1년에한번씩 대세가바뀌고 지랄나서 결국 CS지식이 풍부하고 습득력 빠른 사람이 승리함
애플교수 나와 결혼해서 내옆에서 하루종일 강의들려주고 하루종일 코드짜주세요 모닝콜도 코드로해줘 똥쌀때도 내옆에서 강의해주세요 매일매일 당신의 목소리를 듣고싶습니다 사랑해요 교주님❤️
이미저랑결혼했습니다.꼬리치지마십쇼
ㄷㄷ
안 돼 이 고양이들아 애프리형은 내꺼야
ㄷㄷㄷ
어?
솔직히 웹 개발 HTML CSS JS 요 3개만 알면 다된다식으로 입문시키는데 실제로 멋있는 서비스 만들려면 알게 너무 많음 ㄹㅇ
임베디드 분야에서 일하다가 현재는 웹 기반으로 일을 많이 하고 있는데요. 프론트엔드 쪽의 수많은 기술들과 키워드들을 파악하기가 어려워 하고 있었는데 짧고 굵게 잘 요약해서 설명해주시네요~
진짜 정보의 홍수 ㅠㅜ
삽질에서 키보드질로 직업 전환했어여 감사해요 코딩애뽈 쌤
인증 없으면 뭐다?
@@electrickinglogic OTP 없으면 사기냄새 나긴 함 ㅇㅇ;;
진짜 내가 젤 좋아하는 채널임 진짜 양질의 정보를 기교없이 깔끔하게 딜리버리 개 굳
이렇게 대유행하기 이전인 3,4년 전에 리액트 하나만 알아도 FE를 시작할 수 있던 시대에 시작한 사람이 승리자인 상황.
요즘 웹 프로그래밍 공부중인데 글자가 안보여서 공부하기 힘든데 모가 이리 많고 복잡한지 헤깔리는데 깔끔하게 정리해주셨네요. 감사. 그래서 지금 html css java script 공부하고 있습니다. 3일째 강좌로 조만간 들을 예정입니다. 수고
쌩으로 SPA 짜던 사람인데 요즘것들(?) 쓰긴 써야겠다 하고 벼르고는 있지만 너무 이것저것 많아져서 머리에 잘 안 들어오던데 단계적으로 넣어주시네요. 잘 봤습니다.
프론트엔드 얘기 들을때마다 드는 의문은 매일같이 새로나오고 갱신되는 라이브러리와 기술정보를 어디서 끌고오는건지 궁금합니다..
오픈소스
얼마전부터 브금 끊어서 효과음처럼 쓰는거 킹받는포인트
매번 느끼지만 진짜 설명 잘하신다..
코딩애플 선생님 왜이렇게 말투가 웃기셈요?ㅋㅋㅋㅋ robot같아요 ㅋㅋㅋ
코딩사과 폼 미쳤다…. 20만원 주고 강의 보는 보람이 있다 증말루..
마지막 멘트가 핵심이네요
그간 공부해온 것들이 주마등처럼 지나가네요. 독학으로 만드느라 외롭고 고됐는데 정말 공부 할게 많긴 했네요.
나온 것들 다 사용해서 만들다보면 좀 경계가 모호하더라구요. 아시아어와 서양권 문법차이, 한국어와 일본어 차이, 각지방 사투리같은 정도 간극의 차이가 있는데 지칭하는 대상는 모두 같은걸 말하고 있는 정도랄까요.
python django 기반으로 웹개발을 하고 있는 데, 이런 서비스에 react나 vue같은 이쁜 거 집어넣어서 싱글페이지 웹서비스 만들고 싶은 데 어디서부터 시작해야할 지 막막해요오...
백엔드: 기능 만들기 힘들다
프론트엔드: 배우기 힘들다
덕분에 zustand 잘쓰고있어요! vite도 써봐야겠네요
React vue nodejs nextjs 등 프론트에 필요한건 많이 배웠고 실무에서도 쓰고있지만.... 솔직히 트랜드 바뀌는건 짜증을 넘어서 분노가 올 때도 있음. 다 먹고 살자고 하는짓인데 그렇게 엄청난 기술의 진보도 아니면서 따라가야하는게 지침.... 페이지전환시 웹서버에 요청하는거나 프론트에서 처리하는거나 구조만 잘짜면 그렇게 엄청난 차이도 아닌데. (심지어 SPA도 nextjs 기준으로는 정적 리소스를 라우팅하는 매번 웹서버에 요청해야함) 걍 이대로 10년정도만 vue react 이외의 기술이 유행하지 않았으면 하는 바람. 엄청난 기술발전이 아닌 이상..
연차가 쌓이고 실무 능력 출중하면 트랜드는 선택 아닌가요? react로 하는거 html + js로 전부 다 만들 수 있는건데 react를 쓰면 더 깔끔하고 이쁘게 만드는거고, 극단적으로는 react로 만든거를 c언어나 심지어 어셈블리어로도 똑같이 만들 수 있는거 아닌가 싶은데 10년정도의 연차면 리액트든 새로 나온 무언가든 그냥 도구로만 쓸 것 같아서요. 그래서 이것저것 계속 새로 나오는게 좋다는 생각이 드네요. 도구가 더 쉽고 편해지는거니깐요. 공부한지 얼마 안된 초보의 생각입니다~
@@kt_account712 하지만 기업이란 곳은 이윤을 추구하기에 가능하다고 해서 현업에 적용되기보단 얼마나 생산성 있는가 하는게 쟁점이 될거에요
진짜임?
ㄹㅇ 지침ㅋㅋㅋ
@@kt_account712 글을 이해를 못하신거 같은데요. 도구가 편리해지든말든 기술적인 큰 진보가 없다면 그만하고싶다는겁니다. 그정도로 스트레스를 받는다는말이에요.
깔끔하네요... 프론트로 이직 전향할 때, 참고가 많이 될 거 같습니다
핵심요약 지렸습니다...
항상 난데없이 끝내는게 매력
어질어질합니다 ㅋㅋㅋㅋ
분명 시작은 vue 하나해서 날먹할랬는데 하다보니까 이거하고 저거하고 여기는 이거쓰고 저거쓰고 이게좋고 걍 조졌는데 재밌고 해보고싶고 근데 회사는 안시켜주고 이직마렵고 암튼 그럼;
웹개발 시작하려는 저에게 너무 좋은 인사이트들이라 감사합니다.
진짜 최고에요....
리액트가 적폐
결국 웹은 근본부터가 풀스택이다 이말이야
와! 우리회사 오면 신입한테 이것부터 보여줘야겠다
진짜 필요한거 다있네
@@잉여-p3r 좆소의 현실을 더 합니다...
8개월지난 지금 영상에 나온것들 어떻게 진행되어가나요? 현업에서,, 또 엄청 많이 바뀌거나?ㅋㅋ
어질어질하네요..
와 개깔끔! 취준생인데 영상 개꿀잼이네연
새벽에 눈이 떠져서 이 영상 보니 즐겁다
음~ 역시 킹갓 코딩사과 너무 깔끔하고
js 프레임워크 춘추전국시대에 살고있어서... 너무 혼란스럽습니다;; 10년뒤에는 과언 어떤 개발환경이 되어있을지 ㅎㅎ
6:19 중간에 스프링 함정이 있는거 같은데 ㅋㅋㅋㅋㅋㅋ 다시 보니 라라벨도 있네 ㄷㄷ
설명력 최고
npm이머였드라...Green Tunnel TUi로 깔아보고싶어서 리눜스민트xfce에 깔어봤등가? 기억이 가물가물 가물치
걍 웹프론트는 하지 말아야겠다 ㅋㅋ
포기하면 편합니다.^^
백엔드는 더 어렵습니다
넘모 재밌습니다!
이 흐름으로 가겠다 싶으면 그냥 풀스택 잡는 게 답이구먼.. 뭐 그렇게 정리 했습니다
와 진짜 프론트 할 거 댕많네ㄷㄷㄷㄷㄷ
왠지..튜닝의 끝은 순정이라는 말이 떠오르네요...
0:36 ㄹㅇㅋㅋ 소리가 나온다
아 몰랑 언젠간 jquery처럼 다들 갖다버려라 제발
끝에 결론이 나중에는 프론트가 백엔드까지 해버리는 상황이 와버리겠죠? 백엔드는 더 고도화된 기술로 빠지겠고...아닌감.. 영상감사합니다!
아직까지 html css js 로 잘버티고 있음.. 프론트웹 말고도 공부할게 지천에 널려 있는데.. 이런거로 시간 뺏기는거 같아서.. 그시간에 다른 개발 공부함.. 10년 동안 아무탈 없이 잘돌아감.. (아 물론.. 그래도 되는 포지션인 경우에만..) 웹dll이 대세가 되면 그건 발담글 생각 있음..
옛날에 바닐라 쓸때는 “아 저건 뇌절이다” 이랬는데 리액트를 쓰면서부터 다 필요해짐
코딩 하나도 모르는데 듣기 좋네요
혹시 백엔드도 가능한가요?
간단명료❤
편집도 웃겨요 ㅠ
할 것이 많네요 흑흑
이 형 은근 웃기네 ㅋㅋㅋㅋㅋㅋ
프론트 엔드 cdn 으로 배포하고 있는데 나중에는 컴포넌트를 cdn 으로 끌어다 쓰는 시대가 오지 않을까용
난 개발자가 아니다 심지어 전혀 상관없는 직종에 종사중이다 근데 이 강의 재밌다
ㅇㅈㅇㅈ next 개꿀임
지나가던 HTML 개발자인데 영상 잘보고 갑니다!
css 개발자로써 공감합니다 ㅜㅜ
tailwindcss 개발잔데 너무 맞말밖에 없네요 ㅠㅠ
감사하빈다.
Vscode 테마 뭐쓰시는지 여쭤봐도될까용
아톰인거 같슴다
프론트 종사하시는 분껜 좀 미안한 말이지만 프론트 너무 무근본 😭
6:29 진짜 진심으로 공감...
먼가 주객이 전도 된거 같은느낌이다...
휴.. 그새 뭐가 또 바뀐줄알고 부랴부랴왔더니 다행이네요(?)
요즘 핫한 chatgpt 로 코딩 시켜보면 바닐라js로 온갖거 다 만들어주던데. 이런거 보면 나도 걍 바닐라로 할까....다시 생각하게댐
진짜 개발자는 평생 공부만해야겠네..
0:11 엇...
npm
nodejs
DOM lib
webpack video turbopack snowpack rollup
TS
single page application
react vue angular svelte remix
state management
server side rendering
client side rendering
build / bundling
serverless / edge
뭥미... 언제다해....
ㅋㅋㅋㅌㅋㅋㅋ 입문자들은 프론트 로드맵보고 깜짝들 놀란다고 하죠..
먹고 살기 참 팍팍하다 그쵸?
프론트 노예는 웁니다...
챕터마다 BGM 개웃김ㅋㅋ
저거 한 번에 다 하는 강의를 만들어줘...
취업하려면 어디까지 배워야 하나요...
최,고.
또 뭐가 나옴 고거 트렌드얌~ 넘어가자~
Angular는 따로 state manager가 필요 없습니다!
저는 그냥 하던 거 하겠습니다.... 너무 어려워 으으
항해 99 후기 영상으로 찍어주세요
근데 b2b관계는 프론트가 낄일이 없...
요즘 웹개발은 산으로 가는 느낌
전국시대 통일이 필요함
맞아요. 너무 산으로 가는 느낌이라.... 다시 정리할 때가 왔는데
차별화 지림. 저 bgm 하나 틀어두고 떠드는데 다 쓰는 시간낭비 개발유튜버 렉카충 보다가 힐--링
❤
프론트 요즘 너무 할게 많아진것같습니다ㅠ 머리 너무 아픔
ssr 쓰면 기존 프론트 개발자들 할일이 없네...
후 할게 너무 많앙
리스트보니 갑갑해..
타입틀려도 봐줌 (착함) ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
이번 모기업 최종테스트도 자바로 짤 서버 객체지향 코드를 동일하게 노드로 짜는게 나왔다죠......