스파르타코딩클럽 내일배움캠프 84일차

오늘 일과 간단 요약

1. 오전 스크럼 (기술면접 질문 답변 정리)
2. SNS 공유 기능
3. 오후 스크럼
4. 면접 질문 튜터님과 진행

 

 

 

 

 

 

 

 

 

SNS 공유 기능

 필수 기능은 아니었지만, 코스 페이지를 만든 만큼 SNS 공유하는 기능을 넣고 싶어서 후반 작업의 첫 번째로 정했다. 검색해보니까 라이브러리 설치하고, 생각보다는 간단하게 될 것 같아서 오늘 하루 내에 전부 구현할 수 있었다.

 

 내가 구현한 공유는 facebook, twitter, 웹 링크 복사, 그리고 카카오톡으로 보내기이다. facebook이랑 twitter는 아예 공통된 라이브러리를 다운받아서 했고, 웹 링크 복사도 라이브러리가 있어서 설치 후에 바로 넣었다. 생각보다 오래 걸렸던 건 카카오톡으로 보내기인데, 뭔가 제대로 되는 듯 싶으면서 계속 안되고....ㅋㅋ 여튼 시간이 좀 걸렸지만 잘 해결하긴 했다.

 

facebook과 twitter 공유 기능을 위해 설치한 라이브러리는 react-share 라이브러리이다.

https://github.com/nygardk/react-share

GitHub - nygardk/react-share: Social media share buttons and share counts for React

이 라이브러리 안에는 다양한 공유 기능이 있는데, 이 중에 telegram이나 링크드인 같은 것들은 필요 없을 것 같아서 자주 쓸 만한 버튼들만 추가했다. 

 

import {
  FacebookShareButton,
  FacebookIcon,
  TwitterIcon,
  TwitterShareButton,
} from "react-share";

<FacebookShareButton url={currentURL}>
            <FacebookIcon size={40} round={true} borderRadius={24} />
          </FacebookShareButton>
          <TwitterShareButton url={currentURL}>
            <TwitterIcon size={40} round={true} borderRadius={24} />
          </TwitterShareButton>

 

정말 간단하지 않은가....?ㅋㅋㅋㅋ 그냥 import 해주고, 버튼과 아이콘을 custom 해주기만 해주면 되었다. 그래서 간단하게 구현 완료. 그런데 localhost 환경에서는 facebook으로 링크 공유가 안되길래 그건 배포한 페이지에서 확인해보기로 하고 twitter는 제대로 공유 되는 것을 확인했다. 코스 페이지마다 아이디를 받아줘야 하나 고민했는데 그냥 현재 url을 가져오면 되는 거여서 고민할 필요가 없었다.

 

 

그리고 웹 링크 복사 라이브러리는 react-copy-to-clipboard이다.

https://github.com/nkbt/react-copy-to-clipboard

GitHub - nkbt/react-copy-to-clipboard: Copy-to-clipboard React component

 이거는 버튼 클릭 시 현재 url이 복사되는 기능으로 그냥 버튼만 custom해서 만들어주면 되기 때문에 구글링을 조금 해본 뒤에 간단하게 구현했다.

 

// @ts-ignore
import { CopyToClipboard } from "react-copy-to-clipboard";

<CopyToClipboard text={currentURL}>
            <button>
              <img
                className="w-[40px] h-[40px] border rounded-full bg-white"
                src="https://cdn.icon-icons.com/icons2/3510/PNG/512/link_share_url_hyperlink_icon_220890.png"
                alt="링크복사"
              />
            </button>
          </CopyToClipboard>

 

그런데 이 라이브러리를 타입스크립트 버전으로 설치하려고 했는데 없는 건지 계속 오류가 나서 ts-ignore를 적어두었다. 이랬더니 오류 해결 완료....ㅎ 그래도 버튼에 원하는 이미지를 넣어주고 custom했더니 제대로 되었다. 링크 복사한 뒤에 alert창을 추가했어야 했는데 안했네. 그래도 웹 링크 복사는 제대로 구현되었다.

 

 

대망의 카카오톡으로 구현하기. 이건 내일 따로 블로그로 정리해서 올려야겠다. 우선은 이전에 소셜 로그인을 구현하려고 만들어놓은 내 애플리케이션의 javascript 키를 이용하면 되었고 간단하게 kakao share 기능을 사용하면 되었다. 그냥 링크를 구현할지 아니면 공유 템플릿을 만들지 고민하다가 sendDefault로 직접 만들었더니 오히려 더 예뻤다.

 

...

const handleKakaoBtn = () => {
    window.Kakao.Share.sendDefault({
      objectType: "feed",
      content: {
        title: "NILILI의 여행 코스를 공유합니다",
        description: "NILILI의 여행 코스로 여행을 다녀오세요!",
        imageUrl:
          "https://user-images.githubusercontent.com/117059420/217982337-b6b4d259-e3d2-4535-8e62-ca8d5d27082f.jpg",
        link: {
          webUrl: currentURL,
          mobileWebUrl: currentURL,
        },
      },
      itemContent: {
        profileText: "NILILI",
        profileImageUrl:
          "https://user-images.githubusercontent.com/117059420/217982337-b6b4d259-e3d2-4535-8e62-ca8d5d27082f.jpg",
        titleImageUrl:
          "https://user-images.githubusercontent.com/117059420/217982337-b6b4d259-e3d2-4535-8e62-ca8d5d27082f.jpg",
      },
      buttons: [
        {
          title: "자세히 보기",
          link: {
            webUrl: currentURL,
            mobileWebUrl: currentURL,
          },
        },
      ],
    });
  };
  
  ...
  
  const status = useScript("https://developers.kakao.com/sdk/js/kakao.js");
  
  useEffect(() => {
    if (status === "ready" && window.Kakao) {
      // 중복 initialization 방지
      if (!window.Kakao.isInitialized()) {
        window.Kakao.init("48bbfc6b192bda8667b971cc07bdee12");
      }
    }
  }, [status]);
  
  ...

 

 공유하는 템플릿을 직접 만들어서 좀 길긴 하지만, 이대로 잘 실행하면 되었다.

https://blog.toycrane.xyz/social-%EA%B3%B5%EC%9C%A0-%EB%B2%84%ED%8A%BC-%EB%A7%8C%EB%93%A4%EA%B8%B0-11563e54af82

Social 공유 버튼 만들기

이 분의 블로그를 보면서 참고해서 구현했는데, 이자리를 빌어 감사하다는 말씀을 드리며....ㅋㅋㅋ 여기서 언급해주신 custom hook을 복사해서 사용했다.

 

https://usehooks.com/useScript/

useScript

 

useScript의 기능은 src에 해당하는 script를 불러오고, script의 상태를 결과 값으로 내려주는 hooks이고, 이렇게 사용하는 이유는 script를 비동기로 불러오기 때문에 script가 다 불러왔을 때 우리가 원하는 작업들을 하기 위해 쓰인다. (출처: 위의 블로그)

 

그래서 html에 태그를 붙여넣지 않고 이분과 똑같이 hooks 폴더에 useScript 파일을 만들어서 사용했다. 그렇게 했더니 처음에는 javascript key가 제대로 안 읽혀서 오류가 생겼다가 그걸 변경하니까 다시 제대로 잘 되었다.

 

 

 UI를 제대로 구현한 건 아니지만, 이렇게 버튼이 제대로 완성되었다. 카카오톡 공유 버튼을 누르면 카카오톡으로 링크를 공유할 수 있고 아래 캡처본처럼 공유가 된다.

 

 

 지금은 임시 이미지로 메인 페이지의 랜딩 이미지를 넣어두었는데 로고를 넣던지 아니면 이대로 갈지는 아직 잘 모르겠다. 그래도 성공적으로 구현 완료...!

 

 

아, 그리고 모바일에서 보는 우리 웹페이지에서는 다른 기능을 넣었다.

web share api를 사용하는 것인데,

Navigator.share() 메소드는 Web Share API 의 부분으로서 디바이스의 네이티브 공유하기 메커니즘을 작동시킨다. Web Share API 가 지원되지 않는다면, 이 메소드는 undefined 일 것이다.

 

핸드폰에서 공유하기 버튼을 누르면 링크 복사를 하거나 카카오톡, 기타 등으로 공유할 수 있도록 화면창이 뜨는데 이게 web share api를 사용하면 구현 가능했다.

 

해당 기능은 https:// 환경에서만 지원이 되고, http:// 인 환경에서는, 공유하기 기능이 실행 되지 않는다. 그래서 이것도 예외 처리를 해주어야 한다. 그리고 text, url 두 속성 중 하나 이상을 필수로 넣어야 한다. 따로 라이브러리는 아니고 원래 있는 기능을 사용한 것이다.

 

관련 설명은 아래에 있다.

https://developer.mozilla.org/ko/docs/Web/API/Navigator/share

Navigator.share - Web API | MDN

 

그래서 이걸 이용해서 버튼을 하나 더 만들어서 함수를 연결했다.

// mobile web share api
  const shareHandle = () => {
    if (navigator.share) {
      navigator.share({
        title: "NILILI",
        text: "NILILI의 여행코스를 공유해보세요",
        url: currentURL,
      });
    } else {
      alert("공유하기가 지원되지 않는 환경입니다");
    }
  };

 

 localhost를 핸드폰을 연결하려고 ip 주소값으로 불러왔는데도 계속 오류가 떠서 노트북으로만 확인했는데 이것도 제대로 잘 작동되었다.

 

 

 노트북에서는 아래와 같이 나온다. 아마 모바일에서도 잘 작동되지 않을까...지금 dev에 합친 상태인데 반영이 된 후에 한번 점검해봐야겠다. 아무래도 모바일 페이지에서는 버튼 여러개인 것보다 저게 낫지 않을까 싶어서 넣었는데 아니다 싶으면 빼야지 뭐.ㅋㅋㅋ

 

 

 

 

 

 

기술 면접 질문

 토요일 저녁에 우리 프로젝트에 관련된 기술 면접 질문이 나왔고, 이걸 오전 스크럼 시간이 우리끼리 대답해보고 저녁에는 튜터님과 함께 질의응답 시간을 가졌다.

 

• 서비스가 활성화되어 데이터가 10000개이상 쌓였다고 생각해봅시다. 예를들면, 검색결과에 따른 페이지가 10개가 넘었다고 가정하고, 유저가 상세페이지를 확인후 다른 페이지도 확인해보려고 뒤로가기를 눌렀는데 검색결과가 초기화되는 불편함을 느꼈다고 합니다. 우리서비스에 이를 개선하고자한다면 어떤 방법들이 있을까요?

→ 로컬 스토리지,세션 스토리지, 전역 상태 관리로 페이지 이동 후에도 어느 정도 검색 내역 저장 필요

대용량 트래픽 관련 질문
너무 다양하게 답변을 할 수 있어서 더 어려운 질문임
뒤로 가기 해도 검색 기록이 있으면 된다

튜터님 생각
1) 검색 결과가 검색을 하는 순간 현재 있는 url을 쿼리 파라미터를 넣어버리면 된다 (튜터님만의 생각이지만)
쿼리 파라미터 : ? &로 이어지는 변수들
검색하는 순간 url 자체가 바뀌는 것
뒤로 가기를 하더라도 해당 url로 가는 것이다
2) 가장 최근 결과를 로컬 스토리지, 세션 스토리지에 저장을 해놓았다가 다시 돌아올 때 읽어서 pop을 해서 first-in, last-out을 하면 된다

---

• 다양한 상태관리 라이브러리가 존재하는데 이 프로젝트에 왜 redux를 채택하셨는지 궁금합니다. 또 redux를 쓰면서 어떤 장단점이 있으셨나요?

장점 : 단방향으로 데이터가 흐르는 구조로 버그를 예측할 수 있어 유지보수 측면에서 용이하다. 또한, store라는 변수를 이용해 상태를 중앙에서 관리하여 전역상태를 관리할 수 있다. 그리고 action을 dispatch로 보낸 기록이 남아 이전 상태로 돌아갈 수 있다.

단점 보일러플레이트가 크다. 읽기 전용이다 보니 수정에 제약이 있다.

 

---

• 모달을 구현하다 보면 모달내부를 클릭해도 꺼지는 문제가 종종 발생합니다. 이런현상이 무엇이며, 이를 해결하기 위해선 어떤 방법이 있을까요?

→ 이벤트 버블링 (한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상)

→이벤트 캡처링:  부모 엘리먼트에만 넣어놓은 이벤트가 전파되어 자식 엘리먼트에도 실행이 되는 현상. 이벤트 버블링과 전파되는 방향이 반대이다. 
이벤트를 완전히 처리하고 난 후 버블링을 중단하도록 `event.stopPropagation()` 사용하여 해결할 수 있다.

 

 

 그냥 바로 튜터님의 말을 받아 적은거라 두서 없어보일 수도 있는데, 내일 다시 정리해야지. 솔직히 처음에 아침이 이 질문들을 봤을 때는 과연 내가 면접에서 제대로 말할 수 있을까 걱정 만땅이었다. 프로젝트를 계속 한다고 해서 개념이 머릿속에 박히는 것도 아니고, 직접 고민해보고 결론을 내려야 알 수 있는 것들인데...그래서 튜터님 얘기를 들어보면서 최대한 내식으로 정리해봐야겠다는 생각이 들었다.

 

 기술 질문이 많을 줄 알았는데 생각보다 없어서 이게 다인가, 싶었는데 또 더 많았으면 오전 내에 전부 대답을 준비하지 못했을 것 같기도 하다. 저 세가지 질문도 바로 안 떠오르는데 뭐...ㅋㅋㅋ 아무튼 공부가 더 필요하다고 느낀 시점이었다.

 

 

 

 

 

 

 

 

 

짧은 일기

 중간 발표가 끝나고 주말에는 좀 쉬다가 다시 작업을 시작하려고 보니 생각보다 시간이 얼마 남지 않았다는 걸 알게되었다. 주말과 1일 제외하고는 8일밖에 남지 않는다...! 사실 이건 우리 조가 여유롭게 끝내고 발표 준비를 하려고 해서 만들어진 거지만 그래도 전혀 여유롭지 않은 일정이다. 3주도 짧다고 생각했는데 2주는 당연히 짧겠다.

 

 우선은 그래도 SNS 공유 기능이 오늘 안에 끝나서 내일은 UI 구현하면서 동시에 반응형도 생각해봐야겠다. 이제는 기능을 더하기보다는 최적화에 신경쓸 때니까. 벌써 내일 모레면 3월이고 끝이 다가온다. 마무리까지 열심히 해야지...