Office Hour

Server Side Routing vs Client Side Routing

Client Side Rendering : 그냥 DOM 에서 history API 를 통해 요청에 따라 렌더링 해주는 과정. 이 경우는 실제로 서버에 GET 요청 등이 날아가지 않는다.

Server Side Rendering : 서버에서 해당 endpoint 로 요청을 보내면 서버에서 routing 한 대로 해주는 과정. 이 경우는 실제로 서버에 GET 요청 등이 날아간다.

Build 를 하는 이유

사실 아직 안 찾아봤다... 나중에 다 만들고 build 를 하기 위해서, 그 때 찾아보기 위해서 미뤄(?) 놓았다. git 에 "그대로" 올리면 아무것도 안 된다. 특히 우리가 만든 React 코드도 작동이 안된다.

yarn build 를 통해 우리가 React 로 만든 결과물을 webpack 을 통해 하나의 파일로 만들어주고, babel 을 거쳐서 JSX 를 JS 로 만들어주는 과정을 거친다. 간격도 없애주고, 난독화도 시켜준다! 이것이 building 이다. 즉, 배포를 할 수 있게 해주는 과정이다! (source map 이 있다면 원본 source 를 볼 수 있다) 그렇게 하면 /build 라는 폴더에 정적인 JS 파일들이 생긴다. 그리고 그 파일을 그대로 뿌려주면 된다.

만약 빌드를 하고 서버에 올렸는데 다시 수정하고 싶은게 생기면, 파일을 수정하고, 다시 빌드를 하고, 그 파일을 다시 서버에 옮겨준다. 이미 빌드한 상태에서 다시 빌드해도 문제는 없다.

나중에는 빌드 자동화같은 과정을 통해 더욱 편하게 빌드를 할 수 있다고 한다.

Server Side Setup

• npm init -y 라는 명령어는 뒤에 나오는 모든 명령에 "YES" 라고 응답하겠다는 의미

기타 질문들

무료서버 배포와 git관리가 용이해서 heroku를 이용해서 배포해보았는데, github.io와 같은 이미 정적파일을 제공할수 있는 환경에서 서버사이드 라우팅을 해보고 싶으면 (github에서 npm 실행이 되질 않으니..) 어떻게 할 수 있을까요?(heroku에서는 cli사용이 가능하지만 ... github은,...)

→ git server 는 딱 이 정도만 가능하다. git server 를 건드릴 수는 없다. 굳이 해 주고 싶다면, server 를 deploy 하면 된다.

css 적용할 때 따로 컴포넌트 만들어서 하는게 좋을까요 ?

→ 실무에서는 거의 다 그렇게 한다

반응형 웹을 만들어보고 싶어서만들었는데 pc에서 볼때는 정상 작동하는데 모바일에서 보면 전혀 안 그렇네요, 왜그럴까요

→ viewport setting 을 잡아주면 된다 copy outer html 이라는 걸 사용해보자

<meta name="viewport" content="width=device-width,initial-scale=1">

modal 이란 게 무엇인가요?

팝업이 뜨는데, 팝업을 제외한 나머지 부분이 비활성화되는(블러처리로 명시적으로 해주면 더 좋을 듯하고) 것을 modal 이라고 한다.

해 봤으면 좋겠는 것들

반응형 디자인을 한 번 해봤으면 좋겠다!

• 햄버거 메뉴(가로여백이 줄어들면 세로로 만들어지고, 버튼을 누르면 메뉴가 펼쳐지는)
  • 힌트를 주자면, state 가 존재한다. 눌렀을 때 펴지고 사라지게 하기 위한 상태이다.

modal 도 라이브러리가 아니라, 직접 만들어봐라, 무조건!

---

다시 도전!

CSS 가 진짜 너무 어렵다!

size 나 정렬을 맞춰주는 게 너무 어렵다. 일단은 겨우 원하는 개형은 나왔는데, 간격도 맞지 않고 엉망징창이다.

Dark Mode Toggle

이제는 어제 만들었다가 잠시 그만 둔 다크모드 토글로 다크모드 ON/OFF 를 해 볼 생각이다. 토글에 onChange 이벤트는 잘 달아놓았고, box 들도 어떻게 할지 감은 잡았으니 다크모드를 한 번 만들어 볼 예정이다.

참조한 글 :

Create A Dark/Light Mode Switch with CSS Variables

일단은 :root 라는 pseudo class 에 default mode css 를 추가할 것이라고 한다.

:root {
    --primary-color: #302AE6;
    --secondary-color: #536390;
    --font-color: #424242;
    --bg-color: #fff;
    --heading-color: #292922;
}

그 다음엔 dark mode css variable 을 추가한다고 한다

[data-theme="dark"] {
    --primary-color: #9A97F3;
    --secondary-color: #818cab;
    --font-color: #e1e1ff;
    --bg-color: #161625;
    --heading-color: #818cab;
}

What is [data-theme="dark"]? This means we are referencing a data attribute called data-theme with a value "dark". We will find the use of it in a while.

[data-theme="dark"] 라는 것의 의미는 data-theme 라는 data attribute 를 "dark" 라는 value 로 불러올 수 있게 만드는 밑작업이라고 한다.

이제 이런 식으로 추가를 할 수 있다고 한다

body {
  background-color: var(--bg-color);
  color: var(--font-color);
}

h1 {
  color: var(--secondary-color);
}

a {
  color: var(--primary-color);
}

이제 이를 event handler 를 통해서 switching 해 주는 과정을 넣어보자.

const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
    }
    else {
        document.documentElement.setAttribute('data-theme', 'light');
    }    
}

toggleSwitch.addEventListener('change', switchTheme, false);

여기서는 vanilla JS 를 통해 예시를 들어주었으나, 코드를 통해 본질을 해석해 본다면 "event object 의 target 이 checked 되면, setAttribute 메서드를 통해서 switching 을 해 준다" 라는 과정임을 알 수 있다.

React 에서 setAttribute 를 통해 documentElement 를 건드려주는 방법은 뭐가 없을까? 해서 찾아봤지만, 찾은 다른 글에서도 setAttribute 를 직접 이용하여서 나도 일단 이거로 구현해 보기로 하였다.

참조 문서 :

Theming with React.js or any in minutes with CSS Variables

별도의 Branch 에서 dark mode 구현하기

간단하게 다크모드를 구현해 보았다. 일단 내가 만든 기존 포트폴리오는 너무 꼬여서, [darkmode 라는 새로운 branch 를 만든 뒤 거기서 작업을 진행했다.](https://github.com/InseobJeon/im-sprint-personal-portfolio/tree/darkmode)

이걸 하면서 느낀 점은 한 번의 클릭으로 모든 부분의 dark mode 값을 바꿔주려면 HTML 태그를 일정하게 사용해야 한다는 사실을 알았다. 구조화된 웹을 만드는 것이 정말 중요하다는 사실을 다시 한 번 깨달았다.

Main Branch 에서 dark mode 구현하기 - tag refactoring 부터 다시 시작!

위에 적힌 것처럼 다크모드를 통해 깔끔하게 바꿔주기 위해서는 구조화된 웹에서 진행해야 한다는 사실을 뼈저리게 느꼈기 때문에 일단은 tag refactoring 부터 다시 해보기로 했다.

임시 완성

쉬운게 아니라는 걸 알았다. 그리고, 해야 할 것들이 엄청나게 많다... client side routing 이랑 dark mode toggle 정도만 구현했고, 나머지는 아직 건드리지도 못 했다. 일단은 내일부터 DB니까 또 DB 에 몰두하고, 일과 후랑 주말에 시간을 내서 계속 만들어가봐야겠다. 제출은 하자.

후기

진짜 아무것도 못 했다... 아쉬움만 가득 남는 스프린트였다. 아무것도 없는 상태에서 CSS 도 사용해서 예쁘게 웹사이트를 만드는 걸 해보지 않았던 것이 너무나도 큰 요인인 듯 하다. 그렇지만 지금은 비록 다크모드나 간단한 개형밖에 만들지 못 했지만, 더 공부해서 더 멋진 사이트를 만들어야겠다는 의욕이 넘친다. 이번주의 DB스프린트를 잘 마무리하고 위에 적었듯 주말과 일과 후를 활용해서 해당 사이트를 더 멋지고 체계적으로 만들어보자는 목표도 덕

---

Nested Concepts

setAttribute()

참조 문서 :

Element.setAttribute()

Element.setAttribute(name, value); 와 같은 방식으로 사용한다고 한다.