kong_woon.log

[Nogwari] React GlobalStyle

Thu, 08 Jun 2023 09:49:55 GMT

리액트에서 CSS 스타일을 주는 방법으로 Styled-component 를 주로 사용한다. 노과리 프로젝트에서도 마찬가지이다. styled-components 의 createGlobalStyle 을 페이지에 적용하는 방법을 알아보자.

ResetStyle.ts

import { css } from "styled-components";
export const ResetStyle = css`
  a {
    color: inherit;
    text-decoration: none;
  }

  a:focus {
    outline: 0;
  }

  a:active,
  a:hover {
    outline: 0;
  }
`

style 경로를 만들고 초기 설정할 디자인(reset.css)을 만든다. 여기서 정해준 CSS 요소는 전체 페이지에 들어갈 요소이다.

globalStyle.ts

import { createGlobalStyle } from "styled-components";
import { ResetStyle } from "./reset";

export const GlobalStyle = createGlobalStyle<{ theme: Theme }>`
${ResetStyle};
html {
  height: 100%;
}

`

같은 경로에 globalStyle.ts 파일을 만들고 createGlobalStyle 을 가져온다. 이 녀석은 어플리케이션 레벨 스타일링을 하는 녀석이다. 우리가 컴포넌트 안에서 styled-component 로 만든 녀석들처럼 개별적으로 동작하는 게 아닌, 최상위 컴포넌트에서 이 녀석을 정의해두면 모든 컴포넌트에 해당 스타일이 적용된다. 여기에 우리가 reset 에 만든 ResetStyle 을 지정해준다.

App.js

import { GlobalStyle } from "./styles/globalStyles.ts";

function App() {
    return (
      
          
          
              
                      노과리 프로젝트

페이지의 최상단인 App 에서 위에서 만든 GlobalStyle 을 넣어주면, App 에서 라우터를 타는 모든 컴포넌트에 전역 디자인을 넣을 수 있게 된다

▶ 마치며

사실 테마까지 넣어서 다크 모드, 라이트 모드도 만들어서 블로그를 쓰고 싶었는데, 막혀서 나누어서 글을 쓴다. 그저 그런 개발자와 뛰어난 개발자가 나누어지는 조건은, 이런 식으로 찡찡거리지 않는 게 아닐까? 잉웅앵웅

[NoGwari] EC2 Memory Swap

Thu, 08 Jun 2023 08:04:31 GMT

AWS EC2 에서 npm run start 를 할 때 일정 퍼센트에서 멈춘다면,,

package.json 에 문제가 있나? npm 이 꼬였나? 한참 생각하다가, EC2 의 RAM 문제라는 것을 알았다.

스왑파일을 사용하여 메모리를 할당해주는 방법으로 문제해결이 가능하다.

▶ SWAP 이란?

활성 상태가 아니거나 다른 데이터, 긴급히 필요하지 않은 RAM의 콘텐츠를 스왑 파일에 페이징해 RAM을 확보하는 것을 말한다. 파티션에 스왑 공간을 만들 수도 있다.

▶ 메모리 스왑

sudo dd if=/dev/zero of=/swapfile bs=128M count=16

스왑 파일을 생성 bs*count만큼 메모리가 할당된다. 128M * 16 = 2gb 의 메모리가 할당

sudo chmod 600 /swapfile

스왑 파일의 읽기 및 쓰기 권한을 업데이트 한다.

sudo mkswap /swapfile

Linux 스왑 영역을 설정한다.

sudo swapon /swapfile

스왑 공간에 스왑 파일을 추가하여 즉시 사용할 수 있도록 한다.

sudo swapon -s

프로시저의 상태를 확인한다. 방금전에 생성한 파일이 보이면 성공이다.

sudo vim /etc/fstab

vi 편집기로 위 파일을 열고 마지막 줄에 아래의 내용을 추가한다 부팅 시 스왑 파일을 시작하는 설정이다

/swapfile swap swap defaults 0 0

free 명령어로 ec2 메모리 상태를 확인.

됐다!

▶ 마치며

나중에 더 고성능이 필요할 때는 비용을 지불하고 고성능 서버를 이용해야겠지? 돈 내는 거 무섭다

이거 참고했다

AWS - EC2 swap 에 대한 질문

[Nogwari] NPM 꼬였다

Wed, 07 Jun 2023 06:46:05 GMT

npm ERR! Cannot read properties of null (reading 'resolve')

로컬에서 npm 이 꼬였을 때는 빠르게 커버가 가능하지만, EC2 서버에서 꼬였을 때는 좀 골치 아프다. node module 을 지우고 받을 때마다 시간이 너무 오래 걸리기 때문인데, 여러 번의 시도 끝에 다음 과정을 해결할 수 있었다

rm -r node_modules/

node_module 을 전체 삭제한다.

npm cache clear --force

캐쉬를 지운다.

npm install

재설치

나의 경우 타입스크립트를 나중에 추가하는 과정에서 에러가 났기 때문에 다음 명령어도 입력해준다.

▶ 추가

   for (let i = startIndex ?? 0; i < array.length; i++) {
                             ^
SyntaxError: Unexpected token '?'

만약 위 에러가 날 경우에는 자바스크립트 버전이 nullish 병합을 허용하지 않는 버전이기 때문이다. 아래 명령어를 입력해주면 된다.

sudo apt update sudo apt install nodejs

▶ 마치며

동일한 package.json을 사용하더라도 Ubuntu의 Node.js 환경에서는 다른 Node.js 버전을 사용할 수 있습니다. 프로젝트를 실행하기 전에 node 명령어가 올바른 버전의 Node.js를 가리키는지 확인하고, 필요한 경우 Node.js 버전을 전환해야 한다. 이런 걸로 시간낭비 좀 그만하고 싶다

[Front] 시멘틱태그(sementic tag)

Mon, 05 Jun 2023 04:14:21 GMT

▶ 시멘틱태그란?

Semantic은 '의미의', '의미론적인'이라는 뜻을 가진 형용사이다. 따라서 시맨틱 태그란 의미가 있는 태그를 말한다.

div나 span과 같이 의미가 없는 태그는 태그 이름만 보고는 어떤 내용인지 전혀 유추할 수가 없는 반면, form, table, article 등 의미가 있는 태그는 내용을 명확하게 정의한다.

그렇다면 의미있는 태그를 사용함으로써 얻는 장점은 무엇일까??

▶ 시멘틱태그의 장점

SEO 최적화에 유리. (SEO: Search Engine Optimization)

검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 따라서 제목은 h1, 중요한 단어는 strong 또는 em을 사용하는 등 의미에 맞는 올바른 태그를 사용하는 것이 중요하다.

효율적인 웹 접근성

일반적인 브라우저에서는 차이가 없지만 스크린리더(시각장애인을 위한 웹 서핑 프로그램)와 같은 환경에서는 웹 접근성과 사용성을 향상시켜준다.

유지보수의 용이성

의미가 있는 태그는 개발자에게 명확한 의미를 전달한다. W3C에 따르면 "시맨틱 웹을 사용하면 애플리케이션, 기업 및 커뮤니티에서 데이터를 공유하고 재사용할 수 있다"고 한다.

예를 들어, 끝없는 div(div > div > div ...)를 탐색하는 것보다 시맨틱 태그를 사용한 코드 블록을 찾는 것이 훨씬 쉽다.

▶ 시멘틱태그의 종류

머리글, 제목, 헤더

네비게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현

좌측과 우측 사이드 위치의 공간을 의미하며, 본문 외에 부수적인 내용을 주로 표현하는 태그

주제, 카테고리 별로 섹션을 구분하는 용도의 태그로 주로 사용. 같은 테마를 가진 여러개의 콘텐츠의 그룹화

기사, 블로그 등 텍스트 위주의 페이지를 구성할때 주로 사용.

[Nogwari] 구글 소셜 로그인 붙이기(로컬)

Mon, 05 Jun 2023 03:13:27 GMT

▶ 구글 소셜 로그인 과정

1. Google API를 요청하기 위해선 Google Cloud Platform(이하 GCP)에서 OAuth인증을 위해 사용할 애플리케이션을 등록하고 Client ID와 Client Secret을 받아와야 한다.

1-1. 프로젝트 생성을 한다

1-2. OAuth 동의 화면을 다음과 같이 작성한다.

1-3. OAuth 클라이언트 아이디를 생성

※ localhost 와 localhost:port 를 둘 다 적어주어야 한다!

완료!

2. 구글 로그인 코드 작성


import {GoogleLogin} from "@react-oauth/google";
import {GoogleOAuthProvider} from "@react-oauth/google";
import jwtDecode from "jwt-decode";

const GoogleLoginButton = () => {
    const clientId = '${clientKey}'
    return (
        <>
            
                 {
                        console.log(jwtDecode(res.credential));
                    }}
                    onFailure={(err) => {
                        console.log(err);
                    }}
                />
            
        
    );
};

3. 끝

▶ 마치며

배포한 사이트에서 clientKey 가 허락되지 않았다는 이슈로 막히고 있다 문제 해결 뒤 그 과정을 공유하고자 한다.

[Nogwari] EC2 서버 포트 번호 지우기 & pm2

Fri, 02 Jun 2023 07:35:49 GMT

▶ :3000 을 지우자!

당연히 내가 3000포트에서 실행주고 있기 때문에 3000포트로 접속해야 페이지 접속이 가능하다.

하지만 보통 웹페이지에 접근할 때는 뒤에 포트번호가 붙지 않는다.

여기서 우리가 알아야 할 건 일반적으로 우리가 웹페이지에 접속할 때는 기본 포트가 뒤에 붙어있는데,

http의 경우 : 80 https의 경우 : 443

이다.

기본 포트는 보이지 않도록 설정되있기 때문에 위 포트로 접속하면 포트는 보이지 않는다. http 프로토콜로 접속한 사이트에 :80 을 붙여도 80이라는 포트가 보이지 않게 된다는 것이다.

그렇기에 80 포트로 연결됐을 때 3000 포트로 리다이렉트만 해주면 된다.

아래는 그 명령어이다.

sudo iptables -A PREROUTING -t nat -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 3000

이것만 하면 포트 번호를 지워도 잘 보인다! 라고 생각했는데, 접속 오류가 뜬다!

▶ 왜 오류가 떠?

EC2 인스턴스 인바운드 규칙에 80 포트가 없기 때문이었다. 추가하면 된다.

▶ 터미널 꺼도 계속 남아있으면 좋겠어!

인스턴스의 터미널을 종료할 경우 사이트가 뜨지 않는데, 이 문제를 해결하기 위해선 pm2 라이브러리를 사용하면 된다.

pm2 는 백그라운드에서 서버를 실행시켜주기 때문에 인스턴스에서 서버를 종료해도 계속 배포 환경이 실행될 수 있게 해준다.

pm2 를 설치한 후

sudo npm -g install pm2

설치한 후 pm2 명령어를 통해 파일을 실행해보자.

pm2 start 'npm start'

이제 터미널을 종료해도 페이지가 잘 접속된다

[Nogwari] 프론트 EC2 에 배포 2

Fri, 02 Jun 2023 05:59:43 GMT

▶ ssh를 통하여 인스턴스 접속

SSH를 통한 EC2 접속

인스턴스에 접속하기 위해서는 1편에서 만든 pem 파일(키페어)이 준비되어야 한다

ssh -i "pem 파일명" ubuntu@*********.ap-northeast-2.compute.amazonaws.com

터미널에 ubuntu@ip-17 로 시작하면 연결이 성공한 것이다.

▶ 설치

프로젝트를 실행하기 위해 인스턴스 서버에 설치할 것들은 다음과 같다.

npm node.js git 프로젝트(git clone) 업데이트

우선 다음 명령어로 update를 진행줘야한다. sudo apt update
npm을 설치해준다. sudo apt install npm
node.js을 설치해준다. sudo apt install nodejs
git 을 설치한다. sudo apt install git
github에 등록된 나의 프로젝트 가져오기 git clone https://github.com/~~~~~~~.git

그리고 프로젝트 루트로 들어간 후

npm i 이후 npm run build 를 하면 된다.

▶ 실행

배포 완료.

혹시 url 로 접속 시 페이지를 찾을 수 없다면 인바인드 규칙을 확인하자.

보안 그룹 -> 인바운드 규칙 탭 -> 인바운드 규칙 편집에서

해당 포트 번호를 추가해주면 된다.

[Nogwari] 프론트 EC2 에 배포 1

Fri, 02 Jun 2023 05:25:31 GMT

~~지우다보니 구멍투성이~~

노과리 프로젝트를 AWS EC2에 배포했다.

▶ 배포 과정

인스턴스 시작을 누른다

이름을 입력한다

가상 머신 OS 를 선택한다. (ubuntu 선택)

키 페어 생성

네트워크 설정

인스턴스 유형 선택

이제 우리는 AWS EC2 인스턴스가 준비되었다!

~~2편에 계속~~

[Front] React 의 상태 관리

Sun, 28 May 2023 07:59:16 GMT

▶ React의 상태관리

리액트는 단방향 데이터 흐름을 가진다. 상위 컴포넌트에서 State를 가지고 이에 의존하는 하위 컴포넌트가 있다면 props로 해당 state를 넘겨준다.

만약 루트 컴포넌트에서 해당 state가 필요한 컴포넌트 사이에 다른 컴포넌트들이 많이 존재하면 심각한 Props Drilling이 발생하게 된다.

▶ Props Drilling 이 뭐야?

import React from "react";
import "./styles.css";

export default function App() {
  return (
    
      
    
  );
}

function FirstComponent({ content }) {
  return (
    
      I am the first component;
      |
    
  );
}

function SecondComponent({ content }) {
  return (
    
      I am the second component;
      
    
  );
}

function ThirdComponent({ content }) {
  return (
    
      I am the third component;
      
    
  );
}

function ComponentNeedingProps({ content }) {
  return {content};
}

props drilling이란 위 코드처럼 props를 하위 컴포넌트로 전달하는 과정에서 몇 개의 컴포넌트를 뚫고 들어가는 형태를 말한다. props drilling이 너무 많이 발생하면 컴포넌트 의존성이 생기고, props를 추적하는 게 어려워진다. ~~그냥 딱 보기에도 어렵다~~

▶ 리덕스

전역 상태 저장소가 있고, 어디서든 해당 저장소에 접근할 수 있다면 문제는를 해결할 수 있다.

▶ 리덕스의 특징

Single source of truth : 동일한 데이터는 항상 같은 곳에서 가지고 온다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다.

State is read-only : 상태는 Action이라는 객체를 통해서만 상태를 변경할 수 있다.

Change are made with pure function : 변경은 순수 함수로만 가능하다

▶ 리덕스 장단점

장점

컴포넌트들의 의존성을 분리한다. Redux DevTools 확장 프로그램을 이용해 상태 파악을 할 수 있다.

단점

수많은 설정 코드가 필요하다. API 통신 관련 코드를 전역적으로 관리해야 한다.

▶ 마치며

위에서 아래로 가는 게 어려우니 그냥 공용 창고 하나 만들어놓고 집어넣고 꺼내쓰고 하자! 낙수효과는 유지보수가 어렵다.

이거 보는 게 낫다

https://hanamon.kr/%ec%83%81%ed%83%9c%ea%b4%80%eb%a6%ac%eb%8f%84%ea%b5%ac-%ed%95%84%ec%9a%94%ec%84%b1/ 하나몬 - 상태 관리 도구(State Management Tools)의 필요성

[Nogwari] ⚠️깃 인증 에러

Fri, 26 May 2023 06:13:13 GMT

The requested URL returned error: 403 이 녀석 때문에 1시간을 날렸다.

403 오류는 해당 레포지토리 주소에 접근 권한이 없을 경우 발생한다고 한다.

프로젝트를 clone 후 첫 커밋을 푸쉬하려고 했는데 위와 같은 에러가 떴다.

문제의 원인은 권한에 있었다.

깃허브에서 Organization 을 만들어 협업을 할 때 푸쉬를 하기 위해선 권한을 'Member' 가 아닌 'Owner' 로 줘야 한다.

이 오류로 시간이 오래 걸린 이유는, 'Member' 권한에 레포지토리 생성 권한이 포함되어 있기 때문이다. 당연히 내가 만든 레포지토리에 푸쉬가 가능할 거라고 생각했는데, 도대체 레포지토리 만드는 건 'Member' 가 되는데, 푸쉬는 'Owner' 여야 하는지 모르겠다.

혹시 같은 에러가 나면, 깃 권한을 한 번 확인해보자.

_ user.email 이 깃허브에 email 과 달라도 같은 에러가 날 수 있다. git config --list 로 확인해보자. _

[CS] 브라우저 렌더링 원리

Fri, 26 May 2023 05:53:12 GMT

▶ 브라우저 렌더링

브라우저 렌더링은 웹 페이지의 HTML, CSS, JavaScript 코드를 해석하고, 이를 시각적인 형태로 사용자에게 보여주는 과정을 말한다. 일반적으로 브라우저 렌더링 과정은 다음과 같다.

HTML 파싱: 브라우저는 웹 페이지의 HTML 코드를 파싱하여 DOM(Document Object Model) 트리를 생성. DOM 트리는 HTML 문서의 계층 구조를 나타내며, 웹 페이지의 구조와 내용을 표현한다.

-> 따라서 브라우저가 아닌 Node 환경에서는 접근할 수 없다..!

CSS 파싱: 브라우저는 HTML 파싱 중에 외부 CSS 파일과