# instagram

113개의 포스트
post-thumbnail

[python]selenium - 웹 크롤링 팔로워(팔로잉) 리스트 크롤링 (web crawling for instagram follower list with python)

개요 인스타그램에서 크롤링을 하다 보면 팔로워 or 팔로잉 목록 해시태그 사용자 아이디 3가지를 크롤링 하는 상황이 나옵니다. 이번 게시글에서는 팔로워 or 팔로잉 목록을 크롤링 하는 방법을 알아보도록 하겠습니다. > #### 팔로워 or 팔로잉 추출하기 ITZY그룹 황예지 인스타그램의 팔로잉 목록을 크롤링 하기위한 사진입니다. 위 사진처럼 following 또는 followers 목록을 크롤링 하기 위해서 JSON 데이터를 추출하는 방식도 있겠지만, 제가 이번에 추출할 방식은 "scroll down" 을 통해서 팔로워 list를 불러오는 방식을 통해서 구현해볼려고 합니다.

2023년 9월 11일
·
0개의 댓글
·
post-thumbnail

전국기능경기대회 준비를 위한 인스타그램 프로젝트 - 요구사항 만들기

전국기능경기대회 웹디자인 및 개발부문에 출전하기 위해 PHP와 JavaScript를 공부하려 합니다. 학교에서 특강을 마련하여 인스타그램을 만들어보는 프로젝트를 진행하기로 결정했습니다. 대회를 준비하는 만큼 출제자의 의도를 파악하고 기능을 구현하는 것이 중요하기 때문에, 이번 프로젝트는 요구사항 작성, 데이터베이스 설계, 화면 구현 설계, 개발 단계로 진행할 예정입니다. 이번 편에서는 요구사항을 만들어보도록 하겠습니다. 먼저 인스타그램에 접속하여 어떤 엘리먼트가 있는지 살펴보고 왼쪽, 중앙(메인), 오른쪽 탭 별로 기능을 작성해보겠습니다. 인스타그램 메인페이지 개인정보 이슈로 인해 모자이크 처리를 했지만, 인스타그램 사용 경험이 있는 분들은 쉽게 알 수 있을 것입니다. 왼쪽 탭 | 탭 이름 |

2023년 8월 17일
·
0개의 댓글
·
post-thumbnail

book 계정 리뷰_테스트

시도해 봤던 한남동 전시 포스트의 라이크 수 31, 북마크 수 18으로 나쁘지 않았다. 다만 공유 0건으로 공유까지는 안 하고 북마크만 해두어 정보성으로 저장해두는 정도로 추정된다. 전시로 유입된 프로필 방문 수도 45건이나 찍혀서 '전시 콘텐츠' 효과성 확인해 보기 위해 이번엔 강남/코엑스 내가 좋아하는 마이아트뮤지엄 포스트를 업로드해봤다. 최근 지갑이 가벼워져서 광고 스케일은 아주 귀엽게 시도해본다.. 🥹 전시 정보 (a) / 인문학 책 (b) 기간 8.14 - 08. 16 일 $2 각 포스팅당 총 $6 자동 타게팅 (현재 팔로워와 유사한 사람들에게 광고를 타게팅하는 기능이다. ) 타겟 그룹 생성해둔 옵션 선택 안 하고 자동 타게팅 시도했다. 팔로워가 이번 주에 100명을 초과했기 때문 나름 추산 도달 수 a, b 각 1,600 총 3,200으로 효과성 입증 안 되더라도 팔로워 늘릴 수 있는 기회

2023년 8월 14일
·
0개의 댓글
·
post-thumbnail

book 계정 리뷰_완성과 진행 중

완료 톤앤매너 구축 팔로워 90명 달성, 100명 이벤트 준비할 수 있는 환경 구축 책 외 인사이트 공유할 수 있는 요소 (전시회) 추가 하는 중 포스트 당 광고 $5 집행하며 인사이트 얻는 중 얻은 인사이트를 기반으로 폰트와 행간 리사이징, 아이콘, 카피라이팅 뉘앙스 등에 미묘한 차이 변화를 시도하는 중 3번은 내 개인적 욕구 때문에 노출 시도해본거라 반응을 잘 살펴봐야 함 (숫자 자체가 낮아서 일할 때와 달리, 반응 파악하기가 더 어려움) 개인적인 코멘트 이 계정을 생성한 후로, 다독은 많아졌으나 책을 대하는 내 태도에서 밀도가 낮아진 것이 느껴진다. 위험신호 감지했으니 실제로 내가 감명깊게 읽고 그 내용을 바탕으

2023년 8월 12일
·
1개의 댓글
·
post-thumbnail

book 계정 리뷰_test/vision

1. 시도 2023.08.04 [스토리] 영역 추가 하이라이트 '비전' 추가 - @note.chorok의 대략적인 비전을 공유했다. '성취/여유/균형' a/b test a. 원하는 것을 얻어내는 협상의 비밀 b. 원하는 것을 얻어내는 협상의 비밀 - 이모지 변형 여기서 확인하고 싶었던 것은, 통일감에 너무 중심을 둔 나머지 모두 일괄적으로 적용한 책 이모지가 오히려 지루함을 주진 않을까 해서 feeling 이모지로 변형을 시도했다. 아직 1일차 수치지만 프로필 방문 오히려 1건, 비교군은 오히려 3건으로 더 높다. 즉, 어차피 내 계정을 팔로잉해서 매일 보는 사용자가 아니기 때문에 책 이모지가 지루할 틈이 없으며, 기분 이모지보다 책 이모지가 컨

2023년 8월 4일
·
0개의 댓글
·
post-thumbnail

book 계정 리뷰

인사이트 2건의 포스팅을 "a는 b다"라는 타이틀을 사용해 반응을 확인했다. a. 워라밸은 망상이다. 분야: 경제 내용: 레버리지의 원리, 기회비용 관련 특징: 숫자로 순서로 내용을 정리했다, 바디텍스트는 작가의 이야기를 인용 타이틀 크기 80대 노출/프로필활동 14/12 b. 우아함은 가벼움이다. 분야: 인문학 내용: 발레 및 교양 아비투스 관련 특징: 발레 클래스 1장에 실린 우아함이라는 발레의 가장 기초를 담았다. 자세한 발레의 유래를 다루면 카드가 뚱뚱해지고 집중력이 낮아질 것을 우려해서 '우아함'에 포커스를 맞췄다. '발레'키워드를 제외시키고 태도를 담으려고 애쓰다보니 행간 사이의 연관성이 다소 떨어지는 느낌.. 또, 바디텍스트에 내 생각을 담으면 호기심을 불러일으켜 '프로필 확인' 수가 증가할 것이라고 생각했는데 반대였다. 타이틀 크기 90대 노출/프로필활동 6/6 결론 (시도해볼 것/

2023년 8월 3일
·
0개의 댓글
·
post-thumbnail

인스타그램 게시물 연동하기 A to Z

인스타그램 콘텐츠를 웹에 연동할 수 있는 기능을 구현해보자! >공식 문서 >https://developers.facebook.com/docs/instagram-basic-display-api 우선은, https://developers.facebook.com 에 가입하고, 새로운 앱을 등록해주어야 한다. 1. 앱 만들기 기타로 선택 소비자로 선택 앱 이름 및 연락처 등록하여 앱 만들기 완성 ![](https://velog.velcdn.com/images/jiwonyyy/post/b158dcb6-7fab-43

2023년 7월 7일
·
0개의 댓글
·

인스타그램 소셜 로그인 구현하기

⚠️ 페이스북 소셜로그인 구현이 선행되어있어야 한다. 🔗 페이스북 소셜로그인 구현하기 🔗 Meta for Developers 공식 홈페이지 ✏️ 앱 세팅 📍 제품 추가 제품 추가 → Instagram Basic Display → 페이지 하단의 새 앱 만들기 → 표시 이름 입력 클라이언트 OAuth 설정 유효한 OAuth 리다이렉션 URL 콜백 승인 취소 데이터 삭제 요청 정보 입력 후 변경내용 저장 📍 사용자 토큰 생성기 인스타그램은 개발단계에서는 실제 인스타그램 계정으로 로그인 할 수 없어서 테스트용 계정을 생성후 로그인해야한다. 좌측 매뉴 → Instagram Basic Displa

2023년 5월 3일
·
0개의 댓글
·
post-thumbnail

[Instagram 클론 코딩] 홈페이지 만들기 (2)

오늘은 전에 말했던대로 홈페이지의 RecyclerView에 대해서 작성할 예정이다. fragment_home.xml의 뷰다. 화면의 제일 위에 앱바를 구현하고, 그 아래에 ScrollView를 사용해 RecyclerView를 넣어줬다. ScrollView를 사용하는 이유는 당연히도 게시물들을 스크롤 하며 봐야 하기 때문이다. fragment로 작성했기 때문에 홈 액티비티에 두어도 바텀 네비게이션은 사라지지 않는다. 그럼 우선 RecyclerView의 xml 파일을 작성해보자. 이런 화면을 만들기 위해서는 ![](https://ve

2023년 1월 26일
·
0개의 댓글
·
post-thumbnail

[Flutter] SNS 애니메이션 만들기(2) - 하트 모션

SNS 애니메이션 만들기(2) - 좋아요 모션 SNS 애니메이션 만들기(1) - 좋아요 아이콘 이번 글에서는 이전 글에서 다뤄봤던 좋아요 아이콘 내용과 거의 같은 내용이지만, 이미지 부분을 더블 클릭 했을 때 좋아요 아이콘이 튀어나오는 UI처리에 대해서 작성하도록 하겠다. Flutter UI 이전 글에 이이서 여기서도 Provider를 사용하여 만들어 보았고 공통 UI 위젯은 같다고 보면된다. 이미지를 보여주는 부분인데 해당 부분을 Stack으로 쌓고 이전 글에서 사용 하였던 AnimatedSwitcher를 똑같이 사용하면 되는데, 여기서는 애니메이션이 나오고 들어가는 In Out의 모션을 처리하기 위해 switchInCurve/switchOutCurve를 이용하여 빠르게 노출 되었다가 천천히 사라지는 애니메이션 처리를 하였다. Ges

2023년 1월 21일
·
0개의 댓글
·
post-thumbnail

[Flutter] SNS 애니메이션 만들기(1) - 좋아요 아이콘

SNS 애니메이션 만들기(1) - 좋아요 아이콘 SNS 애니메이션 만들기(2) - 하트 모션 이번 글에서는 인스타그램 등의 SNS에서 좋아요 하트 아이콘을 클릭 했을 때 처럼 아이콘에 애니메이션 처리를 하는 방법에 대해서 작성하려고 한다. 애니메이션 처리를 위해 AnimatedSwitcher 위젯을 활용하였고, 아래에서 예시로 만든 방법 외에도 다른 방법으로도 충분히 처리하거나 커스텀으로 만들어서 사용할 수도 있다. Flutter UI 여기서 상태관리는 Provider를 사용하기에 Provider를 등록을 해주었다. 아래 snsUiHeartComponent 위젯을 메소드로 만들어서 다른 부분에서도 공통으로 사용할 수 있게 만들어 주었다. UI는 인스타그램의 폼과 비슷한 구조로 간단하게 만들었다. 공통 위젯을 살펴보면 아래 AnimatedS

2023년 1월 20일
·
0개의 댓글
·
post-thumbnail

[Instagram 클론 코딩] 특정 텍스트의 style 변경

원래대로면 홈페이지 게시물을 이어서 작성하는 게 맞지만, 안드로이드를 1년 넘게 하면서 처음 써본 속성이 있어서 중간에 잠시 다른 기능을 소개하겠다. 내가 구현하고자 했던 페이지는 알림 페이지. 본인 계정에 누가 팔로우를 걸었다든지, 게시물에 하트를 눌렀다든지 기타 등등의 활동이 있을 때의 알림을 보여주는 페이지다. 이런 식으로 구성이 되어 있는 페이지인데, 저 TextView를 어떻게 작성해야 하는지 고민이 많았다. 지금 생각해보면 굉장히 간단하지만 앞서 말했듯 그 간단한 기능을 몰랐기에 처음에는 TextView 두 개를 수평으로 배치해봤다. 이렇게 배치해보니 앞의 아이디 부분엔 스타일이 잘 주어지지만, 뒤의 내용이 길어졌을 경우 같은 시작점에서 텍스트가 시작하지 않고 뒤의 텍스트뷰 시작점에서

2023년 1월 20일
·
0개의 댓글
·
post-thumbnail

[Instagram 클론 코딩] 홈페이지 만들기 (1)

오늘은 저번에 얘기했던대로 홈 페이지 구현을 가져왔다. 사실 코드를 깔끔하고 안정적으로 작성하지 못하는 편이라 아직 내 코드를 보여주는 게 부끄럽지만, 내 코드의 지저분함을 알아볼 정도의 사람이면 어련히 걸러 보겠거니 하고 오늘도 적어본다. 혹시 이 글을 보시는 분들 중에 부족한 부분을 발견하시고 댓글을 남겨주시는 건 언제나 환영입니다 이번 게시물의 핵심 주제가 될 RecyclerView의 디자인 화면이다. 왜냐면 이 리사이클러뷰를 활용해서 이렇게까지 만드는 게 이번 주제기 때문이다. 로딩 화면에서 넘어가는 홈 페이지를 구현한

2023년 1월 18일
·
0개의 댓글
·
post-thumbnail

[Instagram 클론 코딩] 로딩 페이지 만들기

첫 클론코딩 주제로 잡아본 인스타그램... 생각보다 필요한 아이콘이 많아서 애먹었다. 맨 처음으로 만들려고 한 것은 역시 시작 화면인 로딩 페이지. 실제 구현 화면인데, 필요한 것만 넣고 깔끔하게 진행했다. xml 코드는 딱 로고를 띄울 ImageView 두 개만 필요하다. 요소가 적은만큼 xml 코드 역시 간단하다. RelativeLayout을 사용해서 작성했고 첫 시작으로 나올 페이지라서 따로 만들기보단 MainAcitivity에 바로 작성해줬다. 이 글을 작성하는 시점에는 여러 페이지들이 추가돼서 MainActivity.kt에 다른 기능이 있는데, 이 화면만 완성되고 났을 때는 따로 메인 액티비티를 건들 게 없다. 그래서 로딩 페이지의 느낌이라도 주고자 HomeActivity.kt를 하나 생

2023년 1월 17일
·
0개의 댓글
·
post-thumbnail

[react] Instagram 코드 리뷰

instagram 코드 리뷰 1️⃣ 프로젝트 PR 작성 구체적으로 적어서 기록하기 완료 : 더이상 수정할 사항 없음 => merge 됨 추가 기능 구현 중 : merge 하지 않음 멘토 리뷰 요청 : 리뷰를 남겨 주심 => 수정 요청으로 답변해주심 도움 요청 2️⃣ 팀프로젝트 디자인 완성 후, 기능 구현하는 것이 좋음 3️⃣ 코드 리뷰 ResetCSS.js => index.html에서 호출 SCSS nesting, SPA는 body는 단 하나만 사용하기. stylelint => 자동으로 css property 순서 정해 줌 => id 보다 className으로 적용하는 것이 좋음 함수 이름 => 동작할 함수명으로 이름 정하기 변수명 짓는 사이트 const isVaild => true/false const

2022년 12월 30일
·
0개의 댓글
·
post-thumbnail

[React] Instagram 댓글 추가, 수정, 삭제

바닐라JS로 인스타그램을 만들어 본 후, react를 활용해서 다시 구현했다. 컴포넌트를 나눈 후, 필요한 기능만 묶어서 구현해서 댓글 등록과 삭제는 쉽게 구현할 수 있었는데 댓글 수정에서는 'useState 끌어올리기'를 활용해서 해결 할 수 있었다.

2022년 12월 30일
·
0개의 댓글
·
post-thumbnail

Instagram 회고

instagram 인스타그램 클론코딩(3일) 1. 개인 프로젝트 시작 왼쪽이 실제 인스타그램 화면, 오른쪽이 구현 한 화면 2. 추가 구현 내용 로그인 id에 '@'포함, password 5자 이상 일 때 로그인 버튼 활성화 로그인 버튼 클릭 시, 메인 페이지로 이동 게시글 댓글 남기기, 수정, 삭제 기능 3. 프로젝트 회고 CSS 프레임워크로 프로젝트를 만들다가 순수 css로 클론코딩을 해보니, class명과 id를 똑똑하게 사용하지 못 했다. 다음 프로젝트

2022년 12월 16일
·
0개의 댓글
·

[playwright, python] 인스타그램 포스팅 자동화

시작하기 전에 약관 위배이다. 적발되서 정지되어도 책임질 수 없다. https://www.quora.com/Are-Instagram-bots-illegal https://www.quora.com/Is-it-illegal-to-use-a-bot-for-Facebook-or-Instagram 만든 이유 playwright도 연습해볼겸 제작해보았다. 인스타그램 자동 포스팅을 검색해보니 대부분 selenium이나 bs4로 제작되었고, 판매용이라 코드도 공개 안하는 것이 슬퍼서 만들었다. 특히 playwright를 Python으로 적은 예제가 없다시피해 부족한 실력이지만 올려봅니다. 코드 수정 사항 2022/12/12 : textarea 찾기 변경

2022년 12월 4일
·
0개의 댓글
·
post-thumbnail

4. 메인 페이지 작업

메인페이지 작업을 진행하면서 가장 어려웠던 것은 세션의 개념을 몰라 헤맸던 것이다. 조원 분께 여쭤본 덕분에 세션의 정체를 알게되었고, 세션을 통해 mySQL에서 데이터를 받아와 출력까지 할 수 있게 되었다. 🤷‍♀️ 세션이란 무엇일까 세션을 쓰지 않으면 동일한 클라이언트에서 request를 보냈음에도 다른 클라이언트로 인식한다. 세션을 쓰면 동일한 클라이언트로 인식할 수 있다. 💁‍♀️ 세션에 값 저장하기 (세션 정보 생성) 세션 정보 생성 💁‍♀️ 세션에서 값 확인하기 세션에 저장한 데이터

2022년 12월 3일
·
0개의 댓글
·
post-thumbnail

3. 회원가입 페이지 작업

나동빈님의 jsp 게시판 만들기 강좌를 참고해 작업했다. https://www.youtube.com/watch?v=wEIBDHfoMBg&list=PLRx0vPvlEmdAZvokJzox5wj2gGfNh_6 1. 데이터베이스 생성 로그인 페이지 만들기 글의 내용과 동일하다. 2. JSP 파일 생성 2-1. login.jsp 팀원 분이 보내주신 코드를 사용했다. 3. action.jsp 파일 생성 3-1. loginAction.jsp 코드 마지막 부분 e

2022년 12월 1일
·
0개의 댓글
·