1) 개인 프로젝트 - SNS 만들기(UI, 페이징코드)

 

SPA : Single Page Application

 

리엑트로 개발 했음

 

이유는 요즘 많이 사용되는 기술이며

이걸 배워두면 어플만들때 사용하는 기술인

 

공부하는데 오래 걸리지 않을 뿐더러

이건 스마트폰 어플만들때 사용하는 기술이라고 함

 

무튼.. 돈이 되는 기술을 먼서 습득하기위해 빡세게 공부 했음

물론 그 이게 끝은 아니지만

 

 

 

---

자 그럼 제작한 UI를 봐보자

 

전문 웹 디자이너는 아니라 솔직히 허접하다

단, 기능적인 측면에서 바라 보는게 좋음

CSS, HTML, JS 모르면 웹 화면을 만들기 쉽지 않음

그래서 빡시게 공부했다

 

웹 디자이너가 아니 관계로.. 겉은 좀 허접해보이지만
기능적으로 봐야 함

---

리엑트 

	폴더는 두개다 클라이언트와 서버 클라이언트는 유저가 서버에 요청할때 쓴다 서버는 이제 유저 요청 받으면 합당한 응답을 하는곳이
	폴더별 정리하는건 개발자마다 스타일이 다른편이니... 기능을 보자
	사실 Context를 적극 사용하여 전부 구현 했었음 그러나 코드가 지저분해지고 효율적인 느낌이 안들어 일단 있는거 냅두고 Redux를 사용하여 스토어에 저장하기로 노선을 바꿈
	스토어를 만들었다 웹 프론트단 한다는 사람이면 이정도 기술을 사용할줄도 알아야 한다던데..
	index.js다 Slice만들어 연결 하는곳
	전부 비슷 비슷 하기에 하나만 보자면
	코드 길어지는걸 싫어한다 그래서 최대한 짧으면서 모듈만들어 관리할수있게 했고 뭐..
	저기 service.js 안에 SERVER_URL => 서버 메인 주소 getRequest => axios로 만든 GET요청 postRequest => axios로 만든 POST요청 patchRequest => axios로 만든 PATCH요청 deleteRequest  => axios로 만든 DELETE요청 getCookies  => 쿠키에 담긴 토큰 가져오는거 여기저기 쓸거라 따로 만들어 놓는편이 코드 간결해지고 관리하기도 좋음

---

클라이언트에서 쟤들 만든거 불러다 쓰는건 이렇게 했다

	다 비슷 비슷 하니까 또 몇개만 보자면 GET요청은 useEffect 훅 썻다 먼저 토큰부터 갖고와서 있으면 dispatch()써서 스토어에서 가져온다 전달해준 인자가 여러개면 {인자1, 인자2} 이렇게 담아 넣고 토큰 없는자가 시도하면 에러 내서 쫒아 내고 요청을 계속 보낼순 없으니 클린업코드 하나 작성해주고 저기 dispatch(resetUserInfo())는 아까 UserInfo 슬라이스에서 만든 값을 없애버리는 코드다 한마디로 요청보내던거 멈춰버린다는거 이거 안해주면 데이터 누수생겨 유저가 다른 컴포넌트 놀러갔을때도 해당 컴포넌트에서는 서버에 GET요청 계속 하게된다 이런 대비도 안했는데 만약 이용자가 천명이다? 그럼 아마 메모리 터질껄..?
	이번에는 POST 요청이다 유저가 값을 입력하고 버튼 누르면 서버로 전송 되는데 전송으로 끝나는게 아닌 화면에 바로 적용까지 해줘야 됨 그래서 .then() 써서 다시 먼저 화면 리셋 시키고 얘들이 전부 비동기로 돌아가니까 잠깐 시간 텀 준다음 GET요청하면됨 이거 말고 더 효율적인게 있을거 같은데 안떠오름... POST요청후 응답값으로 업데이트된 값을 돌려줬음 됬나..? 화면 리셋 시킨 이유 : 그거 안해주면 기존 데이터 + 새데이터 + .... 의 연속이게 되는 버그가 생기기 때문이다
	다음은 PATCH다 POST와 별 다를것은 없으나 직관적이면 더 좋기 때문에 따로분류 했다 비슷 비슷한 과정의 연속이다
	다음은 DELETE다 삭제는 그냥 내가 지우고 싶은 아이템의 id값만 가져와서 파라메터로 서버한테 줄수있으면 된다 그리고 과정은 똑같다 삭제후 GET요청해줘야 한다 안그러면 원본 데이터 + 삭제된 후의 데이터 식으로 쌓이는 버그가 생긴다

---

JavaScript 좀 치는 사람이 되면 화면 동적으로 만들기 어렵지 않음

유저끼리 서로 페이지 방문하면 쪽지 남길수 있게 해놨다

일종의 방명록같은건데

 

일단 이 쪽지가 겁나 많이 쌓이게 되면 부담스러워 지잖음?

그래서 페이징기능을 만들었다

 

이건 문서로 놔두고 필요할때 꺼내쓰게 하는편이 좋을듯. .

const itemsPerPage = 5; // 페이지당 보여질 아이템 수
  const [currentPage, setCurrentPage] = useState(1); // 디폴트 값
  const totalPages = Math.ceil(getNotes.length / itemsPerPage); // 전체 페이지 = 총 아이템 / 페이지당 보여질 이이템 수
  const [leftBtn, setLeftBtn] = useState(false); // 왼쪽 버튼
  const [rightBtn, setRightBtn] = useState(false); // 오른쪽 버튼
  
  const handlePrevPage = () => {
    setCurrentPage((prevPage) => Math.max(prevPage - 1, 1));
    setLeftBtn(true); // 버튼 클릭 상태 변경
  };
  
  const handleNextPage = () => {
    setCurrentPage((prevPage) => Math.min(prevPage + 1, totalPages));
    setRightBtn(true); // 버튼 클릭 상태 변경
  };
  
  const currentItems = getNotes.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage
  );
  
   useEffect(() => {
    if (leftBtn) {
      setTimeout(() => {
        setLeftBtn(false);
      }, 200);
    }

    if (rightBtn) {
      setTimeout(() => {
        setRightBtn(false);
      }, 200);
    }
  }, [leftBtn, rightBtn]);

getNotes에 담긴 배열형태의 쪽지를 가져와서 요리조리 손보면 됨 고민없이 필요하면 그냥 복붙해서 변수만 입맛에 맞게 바꾸면 맛있음

---

친구 페이지 방문하기

	진짜 고민좀 많이 했던 부분인데 로그인한 유저는 스토어에 nick이 있고 파라메터에는 유저의 nick이 들어가야 된다 어떻게 하면 로그인한 내가 친구의 페이징 방문 할수있을까 고민 해봤는데 조금 비효율적인것 같지만 이것 뿐이겠더라싶었음
	그럼 저기파라메터로 값은 어떻게 넣느냐..? 먼저 단계를 생각해 보자 1. 입력을 한다 2. 파라메터로 들어간다 3. 이동한다 순서는 이게 전부다 그럼 하나씩 해보자
	먼저 입력을 한다 이건 서버에서 해당 유저의 정보를 가져오는 GET요청 가져온 유저의 정보에서 필요한건 저 nick이니깐 저거 가져다가
	파라메터로 이동한다 사실 처음보는건데 navigate라는녀석은 react-router-dom에 있는 기능중 하나로 주소경로를 내가 원하는대로 바꿔주는 역할을 해준다
	그러니까 내가 저기 방문하기 클릭 하면 저 terry 페이지로 이동할수 있게 된거
	다시 되돌이 표로 이거 까지 되야 페이지 이동이 된다 GET요청해서 해당 페이지 정보 봐야 하는데 나는 다른 유저 페이지에서는 읽기만 권한 있잖음? 파라메터로 던져주는건 저 thisUser만  서버 주면 되는거

---

작년 7월부터 시작했나 이걸. .

리액트 공부하면서 만드려하니 쉽지 않았는데 참..

고난과 역경의 연속에서 결국 뭘 만들어내긴 했음

 

하다보니 느낀게.. 개발은 정말 80%의 검색과 20%의 센스인듯

 

그리고 사실 뭘 만들긴 했으나 아직 갈길이 멀었고

이걸 왜 이렇게 해야 되나 궁리하면 안된다는걸 깨닳았음

일단 검색이든 뭐든 누굴졸라서라든 기능을 구현 해놓고

그 다음 왜 이렇게 쓰지? 해야지

안그러면 개발속도면에서 너무 느려짐

---

	실시간 체팅을 위해 소켓 뚫어만 놨음
	해당 클라이언트 제작에 설치된 것들...