회사 첫 프로젝트 시작~

📌 오늘 진행 사항

1. marzipano로 사진 3d로 만들기

2. 프로젝트 드뎌 시작!
1. webOS travel-to-tv 프로젝트
2. 첫번째 업무는 search 완성하기

3. react-router
1. Outlet
2. createBrowserRouter

4. styled-component 복기
1. theme
2. styled
3. placeholder

5. vscode
1. prettier
2. 새탭으로 열기
3. 익스텐션 설치(gitLens, gitFile History, git Graph, prettier, styled-component)

📌 New 지식

1. marzipano (https://www.marzipano.net/docs.html#as-a-node.js-package)

• Marzipano의 구성 요소
• Viewer
: DOM 요소에 초기화되어 360° 콘텐츠를 렌더링하는 핵심 클래스

var viewer = new Marzipano.Viewer(document.getElementById('pano'));

• Scene
: 이미지 소스(Source), 기하학적 구조(Geometry), 뷰(View)를 결합하여 하나의 씬(Scene)을 생성

var scene = viewer.createScene({
    source: source,
    geometry: geometry,
    view: view
});

• 이미지 3d화 하여 띄우기
• 브라우저, webOS 모두 문제없이 잘 돌아갔다.
• 듣기로는 경우에 따라 webOS에서만 튕기는 등의 문제가 발생하는 경우가 있다고 한다. (그럴 땐 해상도를 낮추는 등 사양을 낮춰서 해결하는 듯 하다.)

import React, { useEffect } from 'react';
import Marzipano from 'marzipano';

const App = () => {
  useEffect(() => {
    // DOM 요소 가져오기
    const panoElement = document.getElementById('pano');

    // Marzipano Viewer 초기화
    const viewer = new Marzipano.Viewer(panoElement);

    // 이미지 소스 설정 (tiles 폴더에 이미지가 있어야 함)
    const source = Marzipano.ImageUrlSource.fromString("tiles/{z}/{f}/{y}/{x}.jpg");

    // 기하학적 구조 정의
    const geometry = new Marzipano.CubeGeometry([
      { tileSize: 512, size: 512 },
      { tileSize: 512, size: 1024 }
    ]);

    // 뷰 설정
    const view = new Marzipano.RectilinearView();

    // Scene 생성 및 추가
    const scene = viewer.createScene({
      source,
      geometry,
      view,
    });

    // Scene 활성화
    scene.switchTo();
  }, []);

  return (
    <div>
      <div id="pano" style={{ width: '100%', height: '100vh' }}></div>
    </div>
  );
};

export default App;

2. React-Router

• Outlet
: 중첩 라우트 구조에서 자식 라우트를 표시하는 데 사용된다. 부모 라우트의 특정 위치에서 자식 라우트를 렌더링 할 수 있도록 도와준다.

// routes/index.js
const router = createBrowserRouter(
  [
    {
      path: "/",
      element: <App />,
      children: [ //중첩라우트
        {
          path: "/",
          element: <Home focusKey="CONTENT" />,
        },
    ..
        
        
        
// App.js
<ViewsContainer $isFullScreen={isFullScreenPage}>
   <Outlet /> 
</ViewsContainer>
// 이렇게 하면 children에 있는 컴포넌트들이 Outlet자리에 오게 된다

• createBrowserRouter
: 라우터 객체를 생성하는 데 사용됩니다. 이 함수는 라우터 구성을 객체 형태 로 선언적으로 만들 수 있게 해주며,이를 BrowserRouter 컴포넌트에 전달하여 라우팅을 설정합니다.
• 중첩 라우트는 children으로 표현

const router = createBrowserRouter(
  [
    {
      path: "/",
      element: <App />,
      children: [
        {
          path: "/",
          element: <Home focusKey="CONTENT" />,
        },
        {
          path: "home",
          element: <Home focusKey="CONTENT" />,
        },
      ...

3. styled-component

• theme
• themeProvider의 props로 넘겨주면 속성들을 변수로 사용할 수 있다
• ex)

//theme.js
export const theme = {
  font: {
    family: {
      LGSmartUI: '"LGSmartUI", "SandStone", sans-serif',
      Poppins: '"Poppins", sans-serif',
    },
  },
  
  ..
  
 // index.js
 ..
  <ThemeProvider theme={theme}>
        <GlobalStyle />
        <Router />
      </ThemeProvider>
	..
	
	
	//Home.style.js
	export const CommonSection = styled.div`
	  margin-left: ${({ theme }) => theme.gnbWidth};
	  width: calc(100% - ${({ theme }) => theme.gnbWidth});
	  display: flex;
  `
	..

• styled
• html태그 스타일링은 styled.태그`(스타일)`

export const BaseContentWrapper = styled.div`
  padding: 20px;
`;

• react 컴포넌트 스타일링은 styled(컴포넌트)`스타일`

export const ContentWrapper = styled(BaseContentWrapper)`
	  margin-left: ${({ theme }) => theme.gnbWidth};
	  ..
`

• placeholder
: input에서 placeholder 스타일을 변경하고 싶다면 ? ⇒ &::placeholder {} 로!

const SearchInput = styled.input`
    width: 720px;
    height: 66px;
    background-color: white;
    &::placeholder {
        
    }

📌 문제 및 해결 사항

📌 모호하게 알고 넘어가는 것이 없나요? (Y/N)

📌 오늘 결정한 것들에 대해, 근거가 확실한가요? (Y/N)

📝 내일 희망 TODO

1. luna 디버깅 모드 성공하기 (왜때문에 또 네트워크 에러ㅠ)

2. luna 정리하기(여기 문서에)

3. enact tailwind 성공하기

4. 해상도 높은 사진 marzipano 성공하기

1. 여행앱 서치 파트 계속~