# instagram

71개의 포스트
post-thumbnail

Instagram Clone : React Native - part 6 [ DIRECT MESSAGES]

DM 기능을 추가하기 위해, LoggedInNav 스택 네비게이터 안에 또 다른 스택 네비게이터를 추가한다. MessagesNav 안에는 Rooms와 Room 두 개의 스크린이 있다. Rooms에서 채팅방을 선택하면, 해당 id의 채팅방으로 이동한다.채팅방 목록을 볼

2021년 10월 14일
·
0개의 댓글
post-thumbnail

Instagram Clone : React Native - part 5 [ UPLOAD PHOTO]

사진 촬영 기능을 위해, 상위 스택 네비게이터를 하나 더 만든다. 기존에 있었던 탭은 스택의 첫 번째 스크린이 되는 것이다. 카메라는 아래에서 올라오게 하기 위해, mode를 modal로 설정한다. 카메라 아이콘을 클릭했을 때, Upload 스크린으로 이동하게 한다.

2021년 10월 11일
·
0개의 댓글
post-thumbnail

Instagram 새 스토리 animation

캔버스를 이용해 instagram 새 스토리에 animation을 만들어 봅시다.

2021년 10월 9일
·
4개의 댓글
post-thumbnail

[Practice] JavaScript로 Instagram 로그인 & 댓글 페이지 구현

HTML&CSS 정리 init() 초기화 시작점을 쉽게 찾기 위해 명확하게 표현하기 위한 함수 쓰지 않아도 무관. querySelector vs getElementBu 큰 차이는 없지만 쿼리셀ㄹ게터 메모리 효율에 좋다. 0 인덱스로 접근하는 이유 clssname은

2021년 10월 8일
·
0개의 댓글
post-thumbnail

Instagram Clone : React Native - part 4 [ LIKES, SEARCH & PHOTO]

좋아요를 누른 유저의 목록을 받는 query (seePhotoLikes)를 요청하기 위해 Like 스크린으로 사진의 id를 전달해야한다. navigation.navigate을 이용하여 전달한다.전달 받은 id로 query 요청을 한다. User 목록은 재사용 가능하니,

2021년 10월 7일
·
0개의 댓글
post-thumbnail

Instagram Clone : React Native - part 3 [ FEED]

여러 탭을 만든다. 스택과 마찬가지로 Tabs.Navigator 안에 필요한 Tabs.Screen 넣는다. Screen 전체에 일괄적으로 옵션을 적용하기 위해선 Navigator에 screenOptions를 , 개별적으로 options를 Screen의 props로 넣는

2021년 10월 5일
·
0개의 댓글
post-thumbnail

Instagram 게시물 불러오기 / api 연동

동영상 강의https://www.youtube.com/watch?v=cWj1vEuB1GIInstagram api 내용 정리된 블로그https://tonhnegod.tistory.com/245인스타그램과 페이스북 계정 둘 다 있어야한다.인스타그램 계정

2021년 10월 4일
·
0개의 댓글
post-thumbnail

Instagram Clone : React Native - part 2 [ AUTHENTICATION]

스택 네비게이터는 화면을 넘어가는 것이 아닌 새 화면이 스택의 제일 위에 쌓이는 방식으로 구현된다. React.js에서 router를 만드는 것과 비슷하다. Navigator가 아닌 Screen에서 다른 Screen으로 이동 가능하다. React Native의 모든 컴

2021년 10월 2일
·
0개의 댓글
post-thumbnail

Instagram Clone : React Native - part 1 [ SETUP]

React Native를 위한 Create React App와 같다.Create React App을 쓰는 이유는 webpack 등 별도의 설정 없이 쉽게 React JS를 사용하기 위한 것이다.Expo나 React Native CLI도 마찬가지다. CLI와 차이는 시작

2021년 10월 1일
·
0개의 댓글
post-thumbnail

Instagram Clone : Frontend - part 4 [ PROFILE]

Profile 컴포넌트로 이동하는 Link를 프로필 사진과 유저이름에 걸어준다.Profile 컴포넌트를 만든 후, Route를 설정한다. 이때, path를 ":"과 함께 유저이름으로 설정한다. useParams로 파라미터의 값을 가져온다. 이제, ":" 뒤에 붙은 u

2021년 9월 28일
·
0개의 댓글
post-thumbnail

Instagram Clone : Frontend - part 3 [ FEED]

Header는 로그인하거나 가입할 때, 숨겨지기 때문에 따로 Header와 함께 Route를 같이 렌더링해주는 컴포넌트가 필요하다.Layout 컴포넌트로 내려주는 children은 모든 내용이 들어가는 Home 컴포넌트다. 이런 식으로 Layout 컴포넌트의 자식으로

2021년 9월 26일
·
0개의 댓글
post-thumbnail

Instagram Clone : Frontend - part 2 [ LOGIN & SIGN UP]

공통된 CSS 속성이 반복되는 경우, 속성의 묶음을 하나의 컴포넌트로 선언해준 다음 해당 스타일 컴포넌트를 다른 컴포넌트에게 상속시킬 수 있다. 공통된 스타일이 많을 경우 따로 저장하는 폴더를 만드는 것이 좋다. 방법은 다음과 같다.컴포넌트 안에 있는 특정 태그를 타겟

2021년 9월 21일
·
0개의 댓글
post-thumbnail

instagram 바닐라 자바스크립트 로그인 로직구현

ID : '@'가 포함되어 있어야 한다.PW : 5글자 이상이어야 한다.요구 사항 충족 시, 로그인 버튼 활성화 및 색상 변경.

2021년 9월 19일
·
2개의 댓글
post-thumbnail

Instagram Clone : Frontend - part 1 [ SETUP ]

타입스크립트로 리액트 앱 만들기NPX란?패키지를 실행시켜주는 npm 명령어. ( 다운로드 받을 때, 저장 / 실행 중 실행을 누르는 것과 동일 )패키지를 저장시키지 않고 실행만 시켜준다. 즉, 컴퓨터에 create-react-app을 설치하지 않고 호출함.폴더를 레포지

2021년 9월 19일
·
0개의 댓글
post-thumbnail

Instagram refactor to React 회고(feat. 지극히 개인적인)

Backlog만 보지 말고 Done도 보면서 살자!

2021년 8월 29일
·
4개의 댓글
post-thumbnail

React | 인스타그램 클론 코딩

인스타그램 클론 코딩 with React 👨‍💻

2021년 8월 29일
·
5개의 댓글
post-thumbnail

JavaScript | 인스타그램 클론 코딩(Main Page)

Westagram - Instagram 클론 코딩👨‍💻

2021년 8월 21일
·
5개의 댓글
post-thumbnail

JavaScript | 인스타그램 클론 코딩(Login Page)

Westagram - Instagram 클론 코딩👨‍💻

2021년 8월 14일
·
3개의 댓글
post-thumbnail

TIL-24 인스타그램 로그인 페이지 review

인스타그램 로그인 페이지 코드 리뷰~!

2021년 8월 12일
·
2개의 댓글