리액트로 나만의 블로그 만들기(MERN Stack)

2024년 6월은 그 어느 6월과 다르게 매우 더운 나날들인데 다들 공부 열심히 하고 계신가요? 아님 현직에서 근무하고 계신가요?

저는 2023년 말경에 'Node FullStack 개발가이드(총 3부작)' 강의를 내고 새로운 언어로 새 강의를 만들고 이를 직접 서비스하기위해 자체 플랫폼 제작에 착수했습니다.

그 새로운 언어는 바로바로~~~!!!

매년 개발자들이 새로 배우고 싶어하는 그 유명한~~~~ Rust 입니다.

어렵다고만 알려져있던 Rust로 넘어와보니 왠걸?

이미 자바스크립트 초 고수분들이 생태계를 싹~~~ 다져놓으셔서, 생각보다(?) 수월하게 배우고 새로운 프레임워크로 웹을 개발하고 있습니다.

제가 사용하는 프레임워크는 'Leptos' 라는 것으로 개인적으로는 현시점에 가장 완성도 있고, React(리액트는 프레임워크는 아니지만), NextJS 정도의 위치로 갈것이라고 보여지고요~~~

아울러, NextJS가 가고자 하는 Isomorphic 개발을 선도하고 있는 프레임워크라 생각하는 Rust의 웹 프레임워크입니다.

근데... 개발하면 개발하는 것이지 왜 새소식으로 알리느냐!!!

일반적으로 Node로 개발하면 자바스크립트로 시작해서 타입스크립트로 넘어가지만,

타입이 주는 이점(협업성, 획일성, 예측성 등)외에는 성능적인 장점이 없는 타입스크립트를 굳이 배우지말고, 그 노력으로 Rust를 배워 웹어셈블리로 웹개발해보시라고 추천드리기 위해 새소식 작성해봤습니다.

2024.6월 현 시점 기준으로는 해당 책, 강의 등이 거의 없어 오로지 leptos docs와 해당 깃허브의 예제 등으로만 배워야 하는게 큰 단점이긴 하지만, 어느정도 눈에 익으면 rust 특유의 타입 엄격성으로 코드의 균일성을 가져오면서 c, c++과 맞먹는 속도에 반하실 겁니다. (현 시점 Chat GPT-4o 도 leptos를 잘 몰라요...ㅠㅠ)

제가 플랫폼 개발이 끝나면 당연히 leptos를 통한 웹어셈블리 강의를 준비할 것입니다. 일단 강의는 2개로 구성될 것입니다.

1. leptos를 통한 기본 CRUD강의

2. leptos로 나만의 블로그 만들기(Rust판 React로 나만의 블로기 만들기)

근데 이거 준비하려면 최소 1~2년은 걸리거에요 ㅎㅎㅎ

그래서 제 부족한 강의보다는 자바스크립트를 어느정도 배우셨다면 러스트 도전해보시라고, leptos로 개발하다 Rust의 매력을 먼저 알려드리고 싶은 싸플이었습니다.

【1줄요약】 자바스크립트 배웠으면 타입스크립트 말고 Rust 공부해!!! 생각보다 쉬워~~~^^

※ 2024.6월 기준 깃 저장소(완성도 20%)

※ (참고) Nix flake도 공부해보세요. 일종에 python의 가상화같은건데, nix flake는 이를 범용화 해줍니다.

'Node FullStak 개발 가이드' 로드맵 쿠폰발급이 시작되었습니다.

'Colini 웹개발 가이드(1부 / 입문자 대상)', 'Node FullStack 개발 가이드(2부 / 초급자 대상)', 'Terraform 배포 가이드(3부 / 이전강의 수강자 및 중급자 대상)' 강의를 한곳에 모아

'Node FullStack 개발 로드맵, A~Z까지' 라는 이름으로 로드맵을 출시하였습니다.

마이크로 서비스 개발 관련 강의로써 입문자부터 중급자까지 입맛에 골라 수강하실수 있게 강의를 구성했습니다.

해당 로드맵 참여는 무료이며, 참여시 3개 강의에 대한 20% 할인 쿠폰이 발급됩니다.

기간 제한은 없으니 관심이 있으시면 언제든지 부담없이 참여해주세요~~~ ^^

※ 로드맵 주소 : https://www.inflearn.com/roadmaps/731

아울러 인스타도 개설했습니다. 개발 소식 및 일상 등을 올릴 예정이니 좋아요 팔로우 및 하트 부탁드려요~~~^^

※ 인스타 주소 : https://www.instagram.com/ssaplecode

'Terraform 배포 가이드'는

• Git에 코드를 저장하기만 하면

• Git Action을 통해 자동으로 Terraform 코드가 작동되어

• 'Node FullStack 개발 가이드'에서 도커로 만든 애플리케이션을 prod 상태로 바꿔서

• Azure에 배포하는 것을 배웁니다

배포 방법에 갈증이 있다면 2023.11.30.까지 진행하는 얼리버드 할인때 구매하세요~~!!!

구매주소 : https://inf.run/2GAGp

※ 이번에 출시된 'Node FullStack 개발'(총 3부) 시리즈는 로드맵으로도 안내가 될 것이니 참고하세요 ^^

정말 오랜만에 인사드립니다. (그 동안 인사 못드려서 죄송합니다 😭)

드디어~~!!! 3년만에 새 강의를 가지고 돌아왔습니다.

이름은 'Node FullStack 개발 가이드' 이고요 총 3부로 구성되어 있습니다.

해당 강의를 간략하게 소개해드리면

1. Colini 웹개발 가이드(1부) <강의 이동>

   1. 완전 초심자를 위한 강의(Html, Css, Javascript, 리액트 공부)

2. Node FullStack 개발 가이드 (2부) <강의 이동>

   1. 초보 단계를 벗어나신 분들을 위한 강의로

   2. Docker, Nginx, Postgresql, SNS Login, 카카오페이 구현으로 쇼핑몰을 만들어봅니다

   3. 도커로 개발부터 최종마무리까지 진행을 합니다

3. Terraform 배포 가이드 <강의 이동>

   1. 리액트로 웹구현은 하실줄 아는 분들을 위한 강의로

   2. 최신 배포 기술인 Terraform을 사용해 쿠버네티스를 운영합니다

   3. 2부에서 만든 쇼핑몰을 배포해보는 단계로 2부를 듣지 않아도 독립적으로 수강에 지장없도록 만들었습니다

얼리버드 30% 할인은 단 1달간(10.31.~11.30.) 진행합니다.

이후 할인은 인프런 공식할인 또는 로드맵 구매시 10% 기본 할인에는 별도로 진행하지 않으니 놓치지 마세요~~

<react-router-dom 버전 5번 사용>

react-router-dom이 6버전으로 올라가면서 바뀐 부분이 많습니다. 

해당 강의는 버전5를 기준으로 제작되었기에 설치시에는

npm i react-router-dom@^5

로 설치해주시기 바랍니다. 

<node-sass 버전 충돌문제 해결>

npm i node-sass@4.14.1 로 해주시기 바랍니다. 

제가 게을러서.. ㅠㅠ

질문 댓글로 적어놓고 공지해야지 해야지 했는데... 이제야 올리네요. 

질문 주신 수강생분들께 감사를 드립니다. *^^*

1. Import 방법이 변경되었습니다. 

(기존) import CKEditor from "~~" -> (변경) import {CKEditor} from "~~"

2. CKEditor가 기존 onInit에서 onReady로 변경되었습니다

<기타 참고> https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html

[알림] nodemon, babel-node 충돌문제 해결법 / (5) Express Start 강의 관련

현재 윈도우를 사용하고 계신분들께서는 nodemon을 사용하지 마시고, 아래 방법으로 진행해주시기 바랍니다. 

[원 인]

윈도우에서 nodemon과 babel-node를 같이 쓰면 제대로 작동하지 않는 문제가 있습니다. (2번 실행되거나 ignore 등 옵션이 제대로 작동하지 않습니다)

[해결방법]

(설치) npm i babel-watch 

(script) 추가

"dev-watch": "babel-watch server/server.js --ignore'./client'",

(서버실행)

npm run dev-watch 

이렇게 바꿔주시면 서버 작동후 같이 프론트 작업시 서버도 같이 재 실행되지 않습니다.