[키보드워리어] 시작, 가로스크롤, 깃에러

기존 만들었던 SNS에 서버를 입혀서 다시 만들어보려고한다.

처음에는 기존에 있던 코드를 리팩터링해서 쓰려고 했지만 서버를 배우기전 작성했던 코드는 너무 난잡하고 보기 흉했다..

그래서 처음부터 코드를 다 갈아엎고 새출발하기로 마음먹었다.

 

GitHub - TeTedo/KeyboardWarrior

 

before after 로 폴더를 나누고 서버를 입히는건 after에 넣을 예정이다.

전에 하지 않았던 노션으로 비록 2명이지만 협업툴을 사용할 예정이다.

 

저번에 기획을 제대로 하지 않고 무작정 코딩부터 시작하면서 기획의 중요성을 깨달았다.

그래서 이번엔 폴더구조, 홈페이지 구조를 미리 기획하려고 했다.

 

홈페이지 구조는 대략 다음과 같이 짰다.

 

폴더구조는 다음과 같이 미리 짜봤다.

데이터베이스도 미리 짜보려고했지만 필요한게 정확히 어떤건지 알수 없었고 이는 코딩을 해가면서 짜도 무리가 없을것이라고 생각하여 진행하면서 짜기로 했다.

 

폴더를 만들고 오랜만에 git에 push를 하려고 한순간

 

error: Error building trees

 

이라는 에러에 부딪혔다.

구글링을 해봐도 확실한 해답을 찾지 못하여 기존에 git이 들어있던 폴더를 삭제후 

github에서 clone을 하여 새로운 폴더를 만들고 push해주니 정상적으로 작동했다.

 

폴더구조도 짜고 바로 메인 홈페이지 틀을 짜고 만들었다.

 

포스트 구간은 기존과 좀 다르게 하고 싶어서 가로 스크롤을 이용하기로 했다.

이벤트중 scroll 이벤트밖에 몰랐던 나는 일부러 세로 스크롤 공간을 만들고 scrollTo 로 세로 스크롤의 위치를 고정시켜

어느곳에서든 스크롤이 되게끔 했다. 그리고 스크롤이벤트로 left를 조절하며 넘기는 방식을 구현했다.

 

근데 세로스크롤이 뭔가 어색해서 새로운방법이 없을까 구글링하던도중 wheel이라는 이벤트를 알게됬다.

wheel 이벤트는 스크롤이 있던 없던 마우스휠을 이용하면 들어가는 이벤트 였다. 

그래서 scroll이벤트를 지우고 wheel 이벤트로 갈아 끼웠다.

 

요런식으로 이 안에 마우스휠을 하면 옆으로 이동하게끔 만들었다.