1. 결과물 URL

https://lee-yun-pyo.github.io/Twitter_clone/login 

---- 샘플 예시 ----

2. 자기소개

현재 대학교 컴퓨터공학과 재학 중인 20대 학생입니다. 컴퓨터공학과 이지만 코딩에는 지식이 없던 중 지난 3월부터 코코아 클론 코딩 강의를 들으며 코딩을 본격적으로 시작하게 되었습니다.

여러 챌린지를 하면서 지식을 쌓았고 많은 콘테스트를 참가하고 싶었지만 그 때는 각 프로그래밍 언어마다 지식이 부족해서 참가할 수 없었지만 이번에는 지금까지 배운지식으로 참여할 수 있을 것 같아 콘테스트에 처음으로 참가하게 되었습니다.

3. 서비스 소개

HTML, CSS, vanilar JS로만 만든 웹사이트입니다. 디자인은 트위터와 같은 SNS인 페이스북을 클론코딩 해봤습니다.

다크모드 해제 및 설정할 수 있고 login페이지에서 nickname을 입력하면 입력값이 localStorage에 저장되고 게시글 게시 또한 localStorage에 저장해서 새로고침해도 브라우저 화면에 계속 띄우도록 했습니다.

-- 로그인 화면 --

-- 게시물 게시 화면 --

-- 다크 모드 --

4. 개발 과정 (어려웠던 점과 해결방법)

이번 웹사이트를 개발할 때 디자인을 어떻게 해야할 지 고민하는 것이 가장 시간이 소모되는 것 같아서 유명한 웹사이트를 클론코딩을 하자고 마음먹고 코딩했습니다.

챌린지를 할 때마다 다크모드도 구현해야지 라는 생각을 늘 가지다가 막상 챌린지해보니 시간적 여유도 없고 정신적 여유도 없어서 결국 구현을 안 하게 됐었는데 이번 콘테스트를 통해 다크모드 구현 방법에 대해 배우고 구현까지 할 수 있었습니다.

다크 모드 변수를 localStorage에 저장해서 사용자가 웹사이트를 이용할 때마다 다크모드 된 상태를 유지하고 싶었으나 구현이 쉽지 않았습니다. 하지만 window.onload를 활용해 함수를 만들어 구현할 수 있었습니다.

5. 앞으로 계획

앞으로도 이런 콘테스트가 있으면 지금까지 배운 지식에 한해서 최대한 참가할 것이고 React강의 또한 들으며 React 챌린지, instagram 챌린지까지 도전할 계획입니다.