anstagram's Introduction

Anstagram

What is Anstagram?

인스타그램의 클론코딩으로 내 성(姓)인 An + Instagram을 합쳐 Anstagram 으로 이름지었다.

시중에 많은 인스타그램 클론 코딩이 있기 때문에 해도 괜찮을까 하는 고민이 들었지만 아래의 이유로 인스타그램을 따라 만들어 보기로 했다.

잘 아는 서비스일 것 : 혼자 하는 프로젝트이기 때문에 기획, 디자인에 너무 많은 시간을 들이기가 어려웠다. 또한 서비스의 플로우를 잘 알고 있으므로 기술에 더 집중할 수 있을 것이라고 생각했다.
배운 것을 응용할 수 있을 것 : 사용자 인증, CRUD, api를 고루 연습하고 내 것으로 만들 수 있는 서비스를 골라야 했다. 인스타그램은 이미지를 업로드하는 것에서 시작하고 유저 간의 교류가 중심이 되는 서비스다. 따라서 이미지와 관련된 CRUD, 사용자 간의 팔로우, 좋아요 등을 구현하며 실력을 높일 수 있다고 판단했다.

일정

2021.02.07 -

개인 Notion(https://www.notion.so/Anstagram-dce7cb214fff4550ae4455c6b2bfcc80)을 통해 그 날의 프로젝트 진행 상황을 기록할 예정이다.

사용 기술

Front-end: HTML, SCSS, PUG, JavaScript

Back-end: Node.js, Express, MongoDB, AWS S3

구현하고 싶은 기능

passport를 이용한 authentication (Join, Login, Social Login)
Image CRUD
좋아요❤ 기능
팔로우 기능(팔로잉, 팔로워 확인 가능)
댓글
검색기능
(이미지 좌우 슬라이드)
(무한스크롤)
(해시태그)

프로젝트 진행 순서

간단한 기획(기능명세, flow chart, 화면설계(간단하게))
코딩
배포
테스트 및 수정

anstagram's People

Contributors

Watchers

anstagram's Issues

#1 다른 사람의 profile 창에 들어가면 header가 로그인 된 상태로 보임

문제점
: 비로그인 상태로 다른 사람의 profile 창에 들어가면 로그인 된 header가 보임

로그아웃 상태의 헤더(이후 logout 글자는 모달로 띄울 예정)
로그인 상태의 헤더

예상되는 정상 작동 모습
: 비로그인 시에는 어떤 페이지에서도 로그아웃 상태의 header가 나타나야 함.

현재 코드
:
header.pug

.header__container
  a(href=routes.home).header__column
    h1.service-title Anstagram 
  form.header__column
    input(type="text", placeholder="검색")
  nav.header__column
    ul
      li 
        a(href=routes.home)
          i.fas.fa-home
      if (!user)
        li
          a(href=routes.login)
            i.far.fa-user
      else
        li
          a(href=`/content${routes.upload}`)
            i.far.fa-plus-square
        li 
          a(href=`${routes.profile(user.id)}`)
            i.fas.fa-user
    .header__menu
      ul 
        if (user)
          li 
            a(href=routes.logout) Logout

userController.js 중 getProfile

export const getProfile = async (req, res) => {
  const {
    user: { _id: id },
  } = req;
  const user = await User.findById(id).populate("content");
  res.render("profile", { pageTitle: "Edit Profile", user });
};