처음 만들어본 나의 웹사이트

패캠 강의를 수강하면서 나온 결과물, 제 첫 웹사이트에 대해 포스팅합니다.

사실 만든지는 조금 됐는데, 더 늦어지기 전에 기록을 남겨두어야 할 것 같아서 이제 적게 되네요 헤헤..

(벌써 코드가 가물가물해질라 하는)

 

조잡하구만

 

html 요소를 기준으로 설명하면, header부분에는 사진들 보기, 사진 올리기, 내 정보 기능이 있습니다

사진들 보기는 현재 보고있는 페이지이며, 기본적으로 스토라지에 있는 모든 사진들을 표시합니다(aside에서의 default값은 전체 사진입니다)

 

줗아요 순 보기

각 사진마다 있는 하트 속의 숫자는 그 사진이 가진 좋아요를 나타낸다.

좋아요 순 보기를 클릭하면 숫자가 큰 순서대로 정렬됩니다.

 

 

좋아요 한 사진

인스타그램처럼 하트를 클릭하면 불이 들어오는 '좋아요' 기능입니다.

좋아요 한 사진을 클릭하면 하트가 올라와있는 사진들만 볼 수 있는 것을 알 수 있습니다.

 

 

 

팔로잉 유저

별명 옆에는 파란색으로 following이 있는데, '팔로우' 리스트에 들어가 있음을 시각적으로 표현했습니다.

그리고 글자나 이름을 클릭하면 사라집니다!

 

 

사진을 클릭시 댓글 기능

 

사진을 클릭하면 그 사진에 대한 댓글 페이지가 나옵니다.

엔터키로도 입력할 수 있게 구현하던 흔적이 댓글로 남아있네요..

 

 

사진 올리기!

 

헤더부분의 두번째, 사진 올리기 기능입니다! 해당하는 파일을 클릭해서 올리면...

 

 

 

아이언맨과 캡틴아메리카의 중괄호 짤

 

쨔잔! 올라갔습니다 허허...

사진이 사이즈때문에 짤린다는 것은 알고 있었지만,

사진 설명을 넣지 않으면 좋아요 누른 사람의 수(하트 안의 숫자)가 제대로 들어가지 않는다는 것은 처음 발견했네요..

 

 

보완해야 할 점(버그포함)

 

업로드시 사진 사이즈에 따라 사진이 짤리는 부분이 생긴다

아이디-인증 기능과 구현되어있지 않아 사진 업로드시 아이디가 동일하다(leejunhee로 항상 올라감 ...)

사진 업로드 할 때 설명 미입력시 하트 안 숫자 깨짐..

등등등 작은 제작시 문제들..

 

그리고 처음 설계시 문제라면

 

반응형으로 만들지 않았다.

모바일을 고려하여 만들지 않았다.

 

 

느낀 점

나는 허접이다.. 

 

현재는..  만들고자 하는 주제의 사이트가 있어서 React.js를 공부하고 있습니다.

웹을 반응형으로 만들어 보고 싶었거든요!

JavaScript도, HTML도, CSS도 완벽하진 않지만

제가 지금 하는 '삽질'이 성장의 밑거름이 될 것이라 믿으며

정진해보겠습니다.

힘낼게요