[React] 무작정 윈도우 11 구현해보기 !!

/*

*  주니어개발자의 리액트 이해를 위해

*  무작정 아무거나 만들어보기 시즌 1 !!

*

*  주제 : 윈도우 11

*/

---

1. 배경화면(실제 윈도우 화면)

진짜 내 윈도우 바탕화면

평소 저는 화면 2개를 이어서 하나의 화면 처럼 보고있어서

마치 엄청 긴 모니터처럼 화면이 나오네요..?

 

아무튼 희생양(?)이 될 디자인입니다 !!

---

2. 윈도우의 기본적인 시스템을 이해하기 !!

 

윈도우에서 가장 중요한건 폴더 구현일 것이라 생각을 해 보았습니다.

 

더블클릭시 폴더가 열려야하며..

이미 열린 창은 또 열리는것이 아니라 포커스를 주고,

폴더 내에서의 주소 변경과 이동.. 그리고 파일의 실행..

기타 등등..

 

사실 더 깊게 들어가면 지금의 나로써는 거의 불가능에 가까운 일이 되겠지만,

기본적인 모양새만 한 번 만들어보려고 해보았습니다.

---

3. 결과물

 

중간 과정도 없이 갑자기 결과물이 나와서 뜬금없겠지만..

지금 이 포스팅은 이미 완성아닌 완성이 된 후에 올리는 포스팅이라 ㅎㅎ

이해 부탁드리겠습니다 😮

 

그럼 바로 결과물 한 번 봅시다 ~~

 

 

먼저.. 로그인부터 해야 정석이겠죠..?

왼 :: 로그오프 화면 / 우 :: 로그인 화면

우선.. 게스트 입장으로 입장 !!

(게스트 입장만 구현되어있는게 아닌척 해봤습니다..)

 

 

쨔쟌~👏👏👏

 

요로코롬 바탕화면이 나타납니다 !!

 

폴더가 하나 밖에 없는 단순한 화면이 되어버렸지만,

정말 실제 바탕화면을 똑같이 만들려고 애를 많이 썼습니다..😢

좌 :: 완성된 바탕화면 / 우 :: 폴더 하나 열어봄..ㅎ

이렇게 폴더도 잘 열리고.. 밑에 열린 태스크가 추가되는 것 까지 완..벽..⭐

 

 

사진으로 하나하나 다 보여드리기에는 별거 없지만서도 생각보다 양이 꽤 되므로,

 

↓ ↓ 나머지 세세한 기능들은 동영상으로 첨부합니다 ↓ ↓

---

4. 동영상

 

* 기본 로그인 화면

로그인 화면

* 태스크바와 달력

* 폴더

동영상을 처음 올려봐서.. 한번에 올려도 되는데 여러개로 나눠서 올렸네요 ㅜㅜ

 

다음에는 깰끔하게 올려보겠습니다 🤣

---

5. 결론 / 고찰(?)

 

느낀점 :: 빌 게이츠 형님 진짜 존경합니다.

(우리 빌 형 짱..⭐)

 

 

윈도우에서 제공된 기능들의 정말 세세한 부분까지 다뤄보려고 하였으나.

 

아직 리액트에서 각각의 컴포넌트들이 어떻게 작동하는지에 대한 원리 이해가 부족했다고 생각합니다.

 

 

디테일하게 손을 대면 의도하지 않은 동작이 다른 컴포넌트에서 발생하거나.

 

각각 작동해야 하는 화면이, 열려있는 모든 컴포넌트에서 동시 발생하거나.

 

하는 등의 문제들을 많이 마주하였습니다.

 

 

지금의 결과물은 해당 부분들을 모두 제거한 최소의 결과물이지만,

 

윈도우 11 프로젝트는 지속적으로 틈틈히 기능들을 추가하려고 생각중입니다.

 

 

* Node.js를 이용해 VSCode / IntelliJ 등의 파일들은

실제로 더블 클릭시 사용자의 로컬에서 파일을 찾아 실행되도록 구현하였습니다.

없을 시 다운로드 가능한 사이트로 이동됩니다.

---

관련 #해시태그

 

#마소 #마이크로소프트 #빌게이츠 #존경 #microsoft #billgates #respect

#주니어 #개발자 #리액트 #뷰 #윈도우 #11 #윈도우11 #개발 #컴포넌트 #노드 #자바스크립트

#junior #developer #react #vue #window #window11 #component #node #js