SNS Clone Coding practice

SNS를 클론 코딩해 보겠습니다.

---

가장 많은 유저를 보유한 SNS를 클론 코딩합니다.

이 과정에서 모던 SNS 트랜드와 UI 설계 키포인트를 연구 합니다.

---

---

추천 콘텐츠

---

추천 콘텐츠는 인스타그램과 엑스입니다.
이미지는 unsplash 같은 이미지 링크가 깨질 위험 없는 CDN 플랫폼을 추천 합니다.
세부 텍스트 내용은 마음대로 해도 문제 없을것 같습니다.

앱스크릿샷과 제 크루의 완성코드를 레퍼런스로 제시합니다.

스크릿샷이 파일로 필요한 분은 맨 아래에 압축파일을 다운로드 받으면 됩니다.

---

---

클론 코딩 순서

---

순서는 아래와 같습니다.

스크릿샷을 보고 그대로 코딩해 본다.

일단 완성한다.

레퍼런스 코드를 보고 내코드에서 개선점을 찾아낸다.

내 코드가 더 멋지다면 미션 종료

 

---

 

---

X

---

---

Screenshot

---

 

---

---

Code reference

---

twitter main - https://codepen.io/gjouadlj-the-vuer/pen/BaMPygd
twitter sub - https://codepen.io/gjouadlj-the-vuer/pen/PoVBwrm

twitter main - https://codepen.io/z1song/pen/oNmMjzE
twitter sub - https://codepen.io/z1song/pen/dyajoMX

twitter main : https://codepen.io/YUJA-the-bold/pen/vYbaNga
twitter sub : https://codepen.io/YUJA-the-bold/pen/poGZVBV

---

---

Instagram

---

---

Screenshot

---

---

---

Code reference

---

 

instagram main - https://codepen.io/namsg/pen/abXKbVY
instagram sub - https://codepen.io/namsg/pen/RwvJZgr

instagram main - https://codepen.io/dlahdud/pen/abXGEjb
instagram sub - https://codepen.io/dlahdud/pen/dyaKLmy

 

---

---

Screenshot download

---

sns-tablet-screenshot.zip

2.69MB

 

---

---

크루 코드 레퍼런스 더 보기

---

 

twitter main - https://codepen.io/042297/pen/OJGgLeO
twitter sub - https://codepen.io/042297/pen/rNbwNNE

twitter main - https://codepen.io/parksoyeon9/pen/GRzBJvO
twitter sub - https://codepen.io/parksoyeon9/pen/GRzBJqE

twitter main - https://codepen.io/bdfuxbpm-the-bold/pen/poGZJjx
twitter sub  - https://codepen.io/bdfuxbpm-the-bold/pen/VwgBvZy

twitter main - https://codepen.io/namsg/pen/RwvBPQL
twitter sub - https://codepen.io/namsg/pen/OJdwVQZ

---

instagram main - https://codepen.io/bdfuxbpm-the-bold/pen/bGzMoOX
instagram sub - https://codepen.io/bdfuxbpm-the-bold/pen/wvNjygQ

instagram main - https://codepen.io/YUJA-the-bold/pen/RwvyQNL
instagram sub - https://codepen.io/YUJA-the-bold/pen/mdvLXyq

instagram main - https://codepen.io/parksoyeon9/pen/bGzMaQM
instagram sub - https://codepen.io/parksoyeon9/pen/wvNjmYW

instagram main - https://codepen.io/rqsaiifh-the-flexboxer/pen/VwgxQgd
instagram sub - https://codepen.io/rqsaiifh-the-flexboxer/pen/eYxrrJL

instagram main - https://codepen.io/fqnywshk-the-scripter/pen/jOdxarr
instagram sub - https://codepen.io/fqnywshk-the-scripter/pen/GRzGoqZ

instagram main - https://codepen.io/gjouadlj-the-vuer/pen/JjxvrON
instagram sub - https://codepen.io/gjouadlj-the-vuer/pen/poGVWav

instagram main - https://codepen.io/z1song/pen/poGVdjE
instagram sub - https://codepen.io/z1song/pen/NWozJZr

---