본문 바로가기

내일배움캠프/1 ~ 4 주차

[내일배움캠프] - 11일차 : 개인 프로젝트 | instargram 클론코딩

 시작하는 글 

 

오늘은 2022.04.26 내일배움캠프 스파르타코딩클럽 실무형 AI 웹개발자 양성과정의 11일차다.

 

어제 첫번째 개인프로젝트를 마치고

오늘 바로 두번째 개인프로젝트 과제를 부여 받았다.

 

그것은, 인스타그램 클론코딩.

 

따라하면 된다고 생각해서 쉬운줄 알았더니

아니었음(;;)

 

 

 

 

가자

 

 


 

1부 : 기획 / 계획
오늘은 이게 다임

 

지난번 파이썬 게임만들기 프로젝트 때는

전체적인 기획이 허술했기에,

일정을 돌보지 않고 기능 추가에만 미쳐있었다.

 

 

그래서 새벽까지 했다. ㅠ

 

 

이번엔 좀더 체계적으로 진행해보고자 하여

일정과 목표를 구체적으로 짜보았다.

 

 



1. 프로젝트 생성 / 깃 연결
->  당일 완료 

 

2. 인스타그램 웹 코딩 쓱 훑기 ->  당일 완료 

 

3. 인스타그램 클론코딩 사례 조사 ->  당일 완료 

 

4. 코딩

   -> 수집한 클론코딩 사례들과 인스타그램 공식 웹페이지(검사)를 참고하여

       아래 코딩 순서에 맞게 하나씩 완성해나감 (무리해서 하려고 하지 않기)

 

■  코딩 순서

  1) HTML /CSS : 프론트엔드 화면 구현 ->  다음날 완료 

     (1) 로고, 검색창, 아이콘

     (2) 프레임 : (좌:게시글 | 우:프로필리스트)

     (3) 게시글(최소 3개)
         .네임카드(+모달버튼)
         .이미지(carousel)
         .좋아요/댓글/메세지송신 아이콘
         .사진 설명(+더보기버튼)
         .댓글 표시
         .댓글작성칸(+post)

     (4) Footer

  2) 추가기능 구현 ->  주말 / 월요일 

     (1) JS 기본기능 

     (2) 프로필 페이지

     (3) 반응형 웹

     (4) 서버 / DB

 

 

 

잘 할 수 있을지...

 


 

2부 : 오 편하네
github 연결

 

이번 프로젝트의 핵심이라고 하는 활용.

 

 

사실 난 캠프 개강 전 독학으로 공부할 때

git과 github를 사용해본적이 있긴한데,

그땐 soucetree 같은 프로그램이 있는줄도 몰랐다.

 

에디터 터미널에서 어쩌구저쩌구해서 겨우 몇번 해보았지만 

엄청 버벅거리고 시간을 많이 썼다. (그때부터 무서워짐)

 

그래서 자주 사용하진 않고 git 활용이라기 보다는

완성된 프로젝트를 저장하기 위한 클라우드 대용으로 씀(;;)

 

 

김치레시피 프로젝트

(강의노트에 있는 대로 따라함)

 

아무튼,

어제 저녁 git특강과 강의노트대로 soucetree를 연결해서 사용해보니

쉽고 잘 되었다. (지금까지 뭐했노) 

 

soucetree로 하는 것이 가시적이다보니

터미널에서 git init,  add ., commit, push 어쩌구 하는 것보다

오히려 쉽고 관리가 잘됨.

 

많이 써야지^^

 

 


 

3부 : 인스타를 파보자

 

클론코딩이라는 단어만 들었을 때는

그냥 따라하는거니까 쉬울 것 같았지만,

막상 백지에다가 코딩을 시작하려다가 얼어버릴 내 모습을 상상됐다.

 

그래서 유튜브 클론코딩 강의를 볼까하다가

그냥 직접 사이트를 파보기로 했다.

 

 

(사이트 마우스오른쪽클릭 '검사' 선택)

 

 

 

-> 응 안돼 (너무 복잡함)

 

 

 

클론코딩 사례를 찾아보자.

 


 

구글링하다보니 어렵지 않게 클론코딩 사례들을 찾을 수 있었다.

 

일단 내가 필요했던건 react로 만든 풀스택 사례가 아니기에

HTML 프론트엔드만 구현한 사례 2개를 찾았다.

 

 

이제 이 사례들과 인스타그램 사이트를 비교해보면서

내 index.html에 코딩을 하면 된다.

 

 

 

 

 

 

내일 ㅋ

 

 


 시작하는 글 

 

오늘은 이정도면 충분하다.

코딩은 내일 하도록 하마.