🌠 문제 설명


네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다.

다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다.

1478 → "one4seveneight"
234567 → "23four5six7"
10203 → "1zerotwozero3"
이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해주세요.

참고로 각 숫자에 대응되는 영단어는 다음 표와 같습니다.

숫자 영단어
0 zero
1 one
2 two
3 three
4 four
5 five
6 six
7 seven
8 eight
9 nine

🌠 제한사항

  • 1 ≤ s의 길이 ≤ 50
  • s가 "zero" 또는 "0"으로 시작하는 경우는 주어지지 않습니다.
  • return 값이 1 이상 2,000,000,000 이하의 정수가 되는 올바른 입력만 s로 주어집니다.

🌠 입출력 예

s result
one4seveneight 1478
23four5six7 234567
2three45sixseven 234567
123 123

🌠 입출력 예 설명

입출력 예 #1

  • 문제 예시와 같습니다

입출력 예 #2

  • 문제 예시와 같습니다

입출력 예 #3

  • "three"는 3, "six"는 6, "seven"은 7에 대응되기 때문에 정답은 입출력 예 #2와 같은 234567이 됩니다.
    입출력 예 #2와 #3과 같이 같은 정답을 가리키는 문자열이 여러 가지가 나올 수 있습니다.

입출력 예 #4

  • s에는 영단어로 바뀐 부분이 없습니다.

🧞 풀이

function solution(s) {
    const numberWords = {
        "zero": 0,
        "one": 1,
        "two": 2,
        "three": 3,
        "four": 4,
        "five": 5,
        "six": 6,
        "seven": 7,
        "eight": 8,
        "nine": 9
    };
    let answer = [];
    let arr = s.split("");
    let temp = [];
        for (let e of arr) {
        if (!isNaN(e)) {
            answer.push(+e);
            temp = [];
        } else {
            temp.push(e);
            let word = temp.join("");
            if (numberWords[word] !== undefined) {
                answer.push(numberWords[word]);
                temp = [];
            }
        }
    }
    
    return Number(answer.join(""));
}

💡 알게 된 점

  • 객체 (Object) 자료형은 {"속성": "값"...} 의 형태로 되어 있다.
  • NaN (Not a Number)는 자바스크립트에서 숫자가 아닌 값을 나타낸다.
  • 숫자로 변환할 수 없는 값을 연산할 때 'NaN'이 결과로 나오는 것이다.
  • NaN은 자신과도 같지 않다.
  • NaN은 Boolean 컨텍스트에서 false로 평가된다.
  • isNaN 함수를 통해 문자열인지, 숫자가 문자열화된건지 확인할 수 있다.
  • 객체[속성]을 통해 객체 안 속성에 해당하는 값을 확인할 수 있고,
  • object[key] !== undefined를 통해, 객체 안에 해당 속성이 있는지 확인할 수 있다.

🌠 문제

N진수 게임
튜브가 활동하는 코딩 동아리에서는 전통적으로 해오는 게임이 있다. 이 게임은 여러 사람이 둥글게 앉아서 숫자를 하나씩 차례대로 말하는 게임인데, 규칙은 다음과 같다.

숫자를 0부터 시작해서 차례대로 말한다. 첫 번째 사람은 0, 두 번째 사람은 1, … 열 번째 사람은 9를 말한다.
10 이상의 숫자부터는 한 자리씩 끊어서 말한다. 즉 열한 번째 사람은 10의 첫 자리인 1, 열두 번째 사람은 둘째 자리인 0을 말한다.
이렇게 게임을 진행할 경우,
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 0, 1, 1, 1, 2, 1, 3, 1, 4, …
순으로 숫자를 말하면 된다.

한편 코딩 동아리 일원들은 컴퓨터를 다루는 사람답게 이진수로 이 게임을 진행하기도 하는데, 이 경우에는
0, 1, 1, 0, 1, 1, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, …
순으로 숫자를 말하면 된다.

이진수로 진행하는 게임에 익숙해져 질려가던 사람들은 좀 더 난이도를 높이기 위해 이진법에서 십육진법까지 모든 진법으로 게임을 진행해보기로 했다. 숫자 게임이 익숙하지 않은 튜브는 게임에 져서 벌칙을 받는 굴욕을 피하기 위해, 자신이 말해야 하는 숫자를 스마트폰에 미리 출력해주는 프로그램을 만들려고 한다. 튜브의 프로그램을 구현하라.

🌠 입력 형식

  • 진법 n, 미리 구할 숫자의 갯수 t, 게임에 참가하는 인원 m, 튜브의 순서 p 가 주어진다.
    2 ≦ n ≦ 16
    0 < t ≦ 1000
    2 ≦ m ≦ 100
    1 ≦ p ≦ m

🌠 출력 형식

튜브가 말해야 하는 숫자 t개를 공백 없이 차례대로 나타낸 문자열. 단, 10~15는 각각 대문자 A~F로 출력한다.

🌠 입출력 예 설명

n t m p result
2 4 2 1 "0111"
16 16 2 1 "02468ACE11111111"
16 16 2 2 "13579BDF01234567"

🧞 풀이

/*
n = 진법
t = 미리 구할 숫자의 갯수
m = 게임에 참가하는 인원
p = 튜브의 순서
*/

/*
2, 4, 2, 1일 때,
0 1 1 1 0
1 0 1 0
*/

function solution(n, t, m, p) {
    let i = 0;
    let turn = 1;
    let answer = [];
    while (answer.length !== t) {
        let convertedValue = i.toString(n).toUpperCase().split("");
        for (let e of convertedValue) {
            if (answer.length == t) {
                break;
            }
            if (turn === p) {
                answer.push(e);
            }
            turn += 1;
            if (turn > m) {
                turn = 1;
            }
        }
        i ++;
    }
    return answer.join("");
}

💡 알게 된 점

  • N진법을 표현하기 위한 메소드 - toString(N)
  • 해당 문자열을 모두 대문자로 바꾸는 함수 - toUpperCase()
  • 배열의 각 원소를 돌기 위한 반복문 - for (let element of array)
  • 해당 로직으로 구현했을 때, n진법 수로 변환하고, 이를 하나씩 쪼개서 반복문을 돌 때, 도는 와중에 answer array의 원소가 t만큼 차버리는 경우가 있음. 따라서 이중 반복문 안에서 반복을 할 때도, t 갯수를 도달하면 break를 통해, 반복문을 종료할 수 있도록 할 것

 

HTML과 CSS를 활용한 티스토리 스킨 편집

 

완성된 반응형의 썸네일 글 목록

 


기존에 직접 HTML, CSS 코드 짜서 만들었던,
티스토리 스킨이 너무 조잡하고 촌스러워서,
다시 기본 스킨 Square로 돌아왔습니다.

 

이전 스킨도 Square 기본 스킨을 수정해서 만들었는데,

해당 스킨과 관련해서 제가 느낀 개인적인 불편함을 개선하는 방향으로 바꿨었죠.

 

이번에는 기본 스킨을 그대로 쓰되, 잘 보였으면 하는 부분만
살짝 살짝 바꿔보려 합니다.
잘 만들어진 스킨 써도 되지만, 나는 자급자족하는 개발자니까..


 

전체 글 목록에서 썸네일이 보이게는 할 수 없을까?

제목과 날짜만 보이는 글 목록... 나는 썸네일 잘 만들었는데!

 

그 중에서 가장 시급했던 저의 니즈는 바로 글 목록이었습니다.

저는 모든 게시글에 썸네일 사진을 열심히 만드는 편인데,

해당 썸네일이 잘 드러나는 글 목록을 만들 수 있었으면 했습니다.

따라서 기본 티스토리 스킨인 Square 스킨을 살짝 수정해서,

글 목록이 인스타그램 그리드처럼 썸네일로 나올 수 있게 해보도록 하겠습니다.

이런 식으로 글 목록이 떠서 누를 수 있다면!

 

참고로 저는 모든 게시글의 썸네일을 정방형 사이즈로 만들고 있어서,
그리드 역시 정방형으로 만든다는 점 참고 바랍니다!


1. 티스토리 치환자 개념 이해하기

스킨 커스터마이징과 관련해서, 알아야 할 필수적인 부분은 HTML, CSS도 있겠지만,

티스토리 스킨 편집과 관련해서는 치환자라는 개념을 또 새롭게 알아야 합니다.

 

최대한 쉽게 설명하자면,
티스토리 치환자는 블로그 내에서 보여지는 다양한 값들을 담는 변수라 생각할 수 있습니다.

블로그 제목을 담는 변수, 게시글의 제목을 담는 변수, 게시글 작성 날짜를 담는 변수 등인 것이죠.

치환자를 HTML에서 원하는 위치의 태그에 넣으면, 실제 블로그에서는 해당 데이터로 자동으로 변환되어 표시됩니다.

 

티스토리 치환자는 정말 다양하게 존재하기 때문에 자세한 내용은 게시글을 별도로 만들어 정리할 수 있도록 하겠습니다.

 


2. 수정할 영역 (글 목록 치환자) 확인하기

그렇다면 글 목록을 수정하기 위해 다뤄야 하는 치환자는 무엇일까요?
바로 리스트 그룹 치환자에 해당하는 <s_list>입니다.


<s_list> 치환자 관련해서는 다음 링크에서 자세하게 확인할 수 있습니다.

https://tistory.github.io/document-tistory-skin/list/list.html

 

 

이렇게 스킨 편집에서 s_list를 검색하면, 전체 글에 해당하는 태그 부분을 확인할 수 있습니다.

저희는 s_list_rep 부분, 그러니 목록에서 반복되는 부분을 수정하면 되는 것이죠.

<s_list>
<div id="head">
  <h2></h2>
</div>

<div id="body" class="list">
  <ul>
    <s_list_rep>
      <li>
        <a href=""></a> // 글 목록의 게시글의 제목
        <span class="date"></span> // 글 목록의 게시글의 작성일
        <span class="cnt"></span> // 글 목록의 게시글의 댓글 수
        <div class="clear"></div>
      </li>
    </s_list_rep>
  </ul>
</div>
</s_list>

 

지금 보면 게시글의 제목, 작성일, 댓글 수는 적혀 있지만 썸네일과 관련된 치환자는 새롭게 넣어줘야 합니다.

썸네일과 관련된 치환자를 찾아서, 넣어주고 다른 내용들은 지워주도록 합시다.

 


3. 글 목록 썸네일 치환자 추가하고 변경하기

          <s_list>
            <div id="head">
              <h2></h2>
            </div>

            <div id="body" class="list">
              <ul>
                <s_list_rep>
                    <li>
                        <a href="">
                            <div class="thumb">
                                <img src="" alt="Thumbnail" style="width: 100%; height: auto; object-fit: cover;">
                            </div>
                        </a>
                    </li>
                </s_list_rep>
              </ul>
            </div>
          </s_list>

 

썸네일을 누르면 해당 게시글로 넘어갈 수 있게, <a></a> 태그 안에
<img> 태그를 삽입합니다.
src에는 ##_list_rep_thumbnail_## 치환자를 넣고,
style은 width: 100%; height: auto; object-fit: cover;로 설정합니다.
이미지가 부모 요소의 전체 너비에 맞춰지고, 높이는 너비와 비율을 자동으로 유지하게 됩니다.

이미지가 부모 요소보다 클 경우에, object-fit: cover로 인해, 자동으로 조절되며, 잘리는 부분이 없도록 합니다.

 


 

4. CSS 설정하여, 그리드 레이아웃으로 만들고 반응형 설정하기

/*
 * list
 */

.list ul {
    display: grid;
    gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3);
}

/* 태블릿 - 3x3 그리드 */
@media (min-width: 641px) and (max-width: 1024px) {
    .list ul {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3);
    }
}

/* 모바일 - 2x2 그리드 */
@media (max-width: 640px) {
    .list ul {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2);
        overflow: hidden;
        max-height: 480px; /* 2행만 보이도록 높이 제한 */
    }
    .list ul li:nth-child(n+5) {
        display: none; /* 첫 4개 항목만 표시 */
    }
}

.list ul li {
    border: 1px solid #ddd; /* 각 항목 주위에 경계선을 추가 */
    padding: 10px; /* 패딩을 추가하여 내용과 경계선 사이에 공간 여백 생성 */
    background-color: #fff; /* 배경색의 경우, 흰색으로 설정 */
}

 

다음으로는 서식을 수정해줘야 합니다.

CSS에서 리스트 클래스를 수정할 수 있도록 .list의 요소를 찾아 다음과 같이 수정합니다.

@media는 미디어 쿼리 규칙으로 다양한 디스플레이 환경 (모바일, 태블릿, PC) 등에 따라 웹 페이지 스타일을 수정할 때, 활용하는 규칙입니다.

 

저는 모바일 환경에서는 2*2 그리드 형태로, 태블릿과 PC에서는 3*3의 그리드 형태로 보여지도록 했는데, 태블릿은 PC와 동일하므로 넣지 않아도 됩니다.

태블릿에서도 2*2로 할까 확인했는데, 3*3이 나은 것 같아서 그대로 뒀습니다.

 


5. 목록 글 수 설정

 

마지막으로 홈 설정과 기본 설정의 글 수를 9개로 설정합니다.

모바일 환경에서는 9개로 해놓았더라도, CSS 스타일링을 통해, 4개 이후의 슬라이드는 보여지지 않도록 잘 설정했습니다.

 


 

이렇게 티스토리 스킨 편집에 관하여 알아 보았습니다.

티스토리 스킨은 치환자 때문이라도 만드는데 조금 버벅이는 게 있는데, 그래도 계속 공부하고, 수정하면서 익숙해지지 않을까 생각합니다.
궁금한 점은 댓글로 남겨주시면, 같이 고민해서 도와드릴 수 있도록 하겠습니다.

감사합니다. (꾸벅)

+ Recent posts