Peep

파비콘(favicon.ico) 만들기

파비콘이란?

' 파비콘 또는 패비콘이란 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다. '

-위키백과

파비콘에 사용할 아이콘 선정

저는 iconflat 사이트에서 무료라이센스 아이콘을 사용하고는 합니다. (라이선스 확인 및 출처 필수)

www.flaticon.com/

검색어에 검색을하고 Filters에서 라이센스 Free를 선택해줍니다.

원하는 아이콘을 검색하고 아이콘에 마우스를 올리면 다운로드 할 수 있는 버튼이 뜹니다.

다운로드 버튼을 클릭하여 아이콘 이미지를 다운로드 받습니다.

ICO 파일로 변환

convert 사이트를 이용해 해당 이미지를 ico 확장자로 변환하게씁니다.

변환사이트는 본인이 구글을 검색해도 되고 아래 사이트를 이용해도됩니다.

https://icoconvert.com

Step 1. 이미지업로드

파일 추가버튼 클릭 후 파일을 선택해주고, Upload 버튼을 클릭합니다.

Upload 버튼을 누른 후 아래 Step2로 스크롤해 내려갑니다.

Step 2. 이미지 자르기

내가 올린 파일 이미지가 뜨고 이미지에 마우스 드래그 시 자를 수 있는 도구가 나옵니다.

전 그대로 사용하기 위해 Step 4로 넘어갔습니다.

Step3는 액자나 기울기 등을 적용하는 부분입니다.

파비콘은 심플한게 좋기때문에 건너뛰었습니다.

Step 4. 사이즈 및 포맷설정

Step 5. 다운로드

Step4에서 크기를 설정해줍니다.

디바이스나 브라우저마다 다른 사이즈의 파비콘을 사용할 수 있습니다.

물론 최적화 시켜서 다 맞추면 좋겠지만 일반적으로는 16x16이나 32x32가 많이 사용됩니다.

저는 32x32로 선택했습니다. 

파비콘은 사이트 탭에서 사이트 이름의 옆, 즐겨찾기 시 사이트 이름 옆, 바탕화면에 바로가기 등록 시에도 사용됩니다.

Step5에서 확장자를 선택 후 Convert ICO를 클릭하면 하단에 파란색 글씨로 Download your icon(s)가 나옵니다.

Download your icon(s) 글씨를 클릭하여 파일을 다운로드합니다.

+ 만약 다운로드가 안된다면 +

Download your icon(s)위에 마우스를 올린 후 우클릭을 하여 '검사'를 눌러줍니다.

그렇게 하면 옆에 막 코드가 적혀있는 창(개발자도구)이 뜨는데 <a href="링크" 부분의 링크를 클릭해 줍니다.

그러면 다운로드가 됩니다.

저는 16x16 / 32x32 / 64x64 / 256x256을 선택함으로 인해 multi-size 파일이되었는데,

하나만 선택해도 됩니다.

multi-size 옵션

만약 여러 사이즈가 필요하다면 Step4에서 한번에 여러 사이즈르 선택하여 다운로드 받으면 됩니다.

ico파일은 하나의 파일이지만 그 안에 다양한 크기의 이미지를 포함시킬 수 있는 기능을 지원합니다.

아래 참고 이미지처럼 사이즈를 여러개 선택한 후 다운로드 받아보시면 하나의 파일입니다.

설정 완료

파비콘 설정하면 내 사이트 탭 옆에 뜨는 것을 확인 할 수 있습니다.

사이트 바로가기 설정 시에도 아이콘 확인이 가능합니다.

dangerouslySetInnerHTML

dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다.

일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출될 수 있기 때문에 위험합니다.

따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML을 작성하고 __html 키로 객체를 전달해야 합니다.

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

위의 글에서 주의 깊게 읽어야하는 부분은 2가지입니다.

코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출됩니다.

=> 이것은 innerHTML이나 dangerouslySetInnerHTML이나 동일합니다.

위험하다는 것을 상기 시키기 위해 dangerouslySetInnerHTML을 작성하고, __html 키로 객체를 전달해야합니다.

dangerously...^^..

동작은 동일하게 HTML을 삽입합니다.

하지만 innerHTML을 사용하면 DOM노드가 수정되었을때 수정된 것을 알 수 있는 방법이 없다고 합니다.

따라서 dangerouslySetInnerHTML을 사용하여 가상 DOM과 실제 DOM을 비교하여 변경된 것이 있다면 리렌더링이 될 수 있도록 해야합니다.

잘못된 예시

const App = () => {
	const str = 'Hello!';
    
    return(
    	<div>
        	{str}
        </div>
    )
};

ReactDOM.render(
	<App />, document.getElementById('root');
)

사용 예시1

const App = () => {
	const str = 'Hello!';
    
    return(
    	<div dangerouslySetInnerHTML={{__html: str}}></div>
    )
};

ReactDOM.render(
	<App />, document.getElementById('root');
)

사용 예시2

const App = () => {
    const markup = () => {
    	return {__html : 'Hello'}
    };
    
    return(
    	<div dangerouslySetInnerHTML={markup()}></div>
    )
};

ReactDOM.render(
	<App />, document.getElementById('root');
)

간단히 알아보는 XXS

사이트 간 스크립팅 공격 or 크로스 사이트 스크립팅 (XSS, cross-site scripting)

• 웹 애플리케이션의 취약점 중 하나
• 관리자가 아닌 이가 페이지에 악성 스크립트를 삽입할 수 있는 취약점
  • 예를 들면.. 게시판에 악성 스크립트가 담긴 글을 올려 사이트를 공격 할 수 있음
• 악성 스크립트를 통해 해커가 사용자의 정보(쿠키, 세션등)를 탈취하거나 비정상적인 기능을 수행
• 주로 다른 웹 사이트와 정보를 교환하는 식으로 작동하므로 사이트 간 스크립팅이라고 함
• 취약점을 방지하기 위해서는 사용자의 입력 값을 검사하고 사용해야함

출처 & 참고

위키백과

ko.reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

ko.wikipedia.org/wiki/%EC%82%AC%EC%9D%B4%ED%8A%B8_%EA%B0%84_%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8C%85

스토리지 중에 무엇을 써볼까하다가 AWS S3를 이용하기로 했습니다.

그래서 조사하고 기억하기 위해 글을 작성합니다!

AWS S3가 무엇인지 알아보겠습니다.

AWS(Amazon Web Services) S3(Simple Storage Serviced)

아마존에서 제공하는 온라인 스토리지 웹 서비스입니다.

높은 내구성, 가용성, 저렴한 가격이 장점입니다.

이분의 블로그 글을 참고하시면 자세합니다.

저는 이 블로그 글을 읽고 제가 기억해야하는 부분을 요약한 것입니다.

 https://acstory.tistory.com/33

내구성과 가용성이 높다라는 것은 외부의 자극에도 변형되지 않고 유지되며 시스템이 장애없이 정상적으로 운영되는 성질이 높다는 것입니다.

일반 스토리지와 객체스토리지(S3)의 차이

일반 스토리지

1) 업로더가 업로드하면 스토리지에 저장됨

2) 저장된 스토리지에 있는 파일을 사용자가 다운로드 요청

3)

정상: 파일을 정상적으로 응답

손상이 있을 경우: 다운로드 실패 혹은 손상된 파일을 응답

객체스토리지 (S3)

1) 업로더가 업로드하면 스토리지가 여러 위치에 복제본을 생성함

2) 저장된 스토리지에 있는 파일을 사용자가 다운로드 요청

3)

정상: 파일을 정상적으로 응답 (이때 복제본도 응답 가능)

손상이 있을 경우: 손상본을 제외 시키고 정상적인 복제본을 통해 응답 

단점은 스토리지가 객체를 내부 복제하는데에 시간이 걸린다.

물론 매우 짧다.

따라서 복제 도중 다양한 요청에 대해 일관적인 응답이 아닐 경우도 존재합니다.

덮여쓰기 중 이전 버전을 응답한다거나 삭제했음에도 응답이 되는 경우를 예로 들 수 있습니다.

S3 요금

최초요금은 없으며 사용한 만큼 비용을 지불해야합니다.

스토리지 클래스를 결정할 때엔 네가지 비용 요소를 고려해야한다고 하네요.

- 스토리지 요금

- 요청 및 데이터 검색 요금

- 데이터 전송 및 전송 가속화 요금 

- 데이터 관리 기능 요금

https://aws.amazon.com/ko/s3/pricing/

리전을 눌러보면 GB당 얼마인지 나옵니다.

리전마다 다르니 확인하시고 사용하세요.

https://acstory.tistory.com/33

aws.amazon.com/ko/s3/

게임을 저장하고 불러오는 작업을 진행하고 있습니다.

db 작업도 하고있는 중인데, 여태 해본적이 없어서 꽤나 찾아보고 해야하네요..

sequelize를 통해 작업을 하고 있는데,

데이터 갯수를 몇개 정해서 가져오고 이것을 랜덤으로 섞어서 프론트로 내려줘야하는 경우가 생겼습니다.

원래 작업했던 순서는..

프론트에서 모든 배열을 받은 후 배열의 갯수를 특정하고 그 다음 랜덤하게 섞는 작업을 했었습니다만...

모든 데이터를 받는 것부터가 너무 낭비였습니다.

그래서 이 부분을 수정하면서 랜덤하게 섞는것도 가능하단것을 알게되었습니다. 

limit을 통해 몇개 가져올지,

order를 통해 어떤형식으로 가져올지 정할 수 있습니다.

다만 어떤것이 성능상 좋은지는 잘 모르겠군요... (order부분)

router.get('/nonsensequiz', async (req, res, next) => { // POST /game/nonsensequiz
    try {
        const quiz = await NonsenseQuiz.findAll({
            limit: 20,
            order: sequelize.random()
        });

        res.status(200).json(quiz);
    } catch (error) {
        console.error(error);
        next(error);
    }
});

프론트에서 작업했던 코드도 한 번 보겠습니다.

원래는 sort로 간단하게 끝내려다가 피셔-에이츠 셔플 알고리즘으로 작업하기로 결정했습니다.

sort는 랜덤정렬이라고 하기에는 빈도 수에 차이가 꽤 발생한다고 합니다.

아래 블로그글을 참고해보세요 (블로그 글에서 해답보기 클릭하셔야 글 확인이 가능합니다.)

ko.javascript.info/task/shuffle

피셔-에이츠 셔플 알고리즘은..

배열의 첫번째부터 시작해 배열의 크기만큼 반복하면서 임의의 요소와 해당 요소를 바꿔치기하는 알고리즘입니다.

일단 셔플하기 전에 원본 데이터를 deep copy해주었습니다.

function shuffleArray (arr){
    let temp = arr.map((v) => {
        return cloneObject(v);
    });

    for(let i = temp.length - 1; i > 0; i--){
        let j = Math.floor(Math.random() * (i + 1));
        [temp[i], temp[j]] = [temp[j], temp[i]];
    }

    return temp;
};

function cloneObject(obj) {
    let clone = {};

    for (var key in obj) {
        if (typeof obj[key] == 'object' && obj[key] != null) {
            clone[key] = cloneObject(obj[key]);
        } else {
            clone[key] = obj[key];
        }
    }

    return clone;
}

현재 db에서 배열을 섞어서 내려주는 작업을 진행해서 프론트쪽 코드들은 사용안하게됐지만,

성능상 비교를 하여 어느쪽이 좋은지 판단해서 작업하는 작업자가 되어야겠습니다.