모스부호 (1)

머쓱이는 친구에게 모스부호를 이용한 편지를 받았습니다. 그냥은 읽을 수 없어 이를 해독하는 프로그램을 만들려고 합니다. 문자열 letter가 매개변수로 주어질 때, letter를 영어 소문자로 바꾼 문자열을 return 하도록 solution 함수를 완성해보세요. 모스부호는 다음과 같습니다.

우테코 프리코스에 집중하느라 코딩 테스트 연습을 잘 못하고 있다. 우테코 끝나고 나면 열심히 해야지! 💪

최댓값 만들기 (2)

정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소 중 두 개를 곱해 만들 수 있는 최댓값을 return하도록 solution 함수를 완성해주세요.

깃 커밋 메시지 수정하기

가장 최근 커밋한 커밋 메시지 수정

git commit --amend

서울에서 김서방 찾기

String형 배열 seoul의 element중 “Kim”의 위치 x를 찾아, “김서방은 x에 있다”는 String을 반환하는 함수, solution을 완성하세요. seoul에 “Kim”은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다.

주사위의 개수

머쓱이는 직육면체 모양의 상자를 하나 가지고 있는데 이 상자에 정육면체 모양의 주사위를 최대한 많이 채우고 싶습니다. 상자의 가로, 세로, 높이가 저장되어있는 배열 box와 주사위 모서리의 길이 정수 n이 매개변수로 주어졌을 때, 상자에 들어갈 수 있는 주사위의 최대 개수를 return 하도록 solution 함수를 완성해주세요.

promise는 콜백(callback) 지옥에 빠지지 않게 도와주는 유용한 자바스크립트 object이다. (=코드를 간결하게 작성할 수 있도록 도와준다.) 미래의 어떤 시점에 결과를 제공하겠다는 ‘약속’을 한다. promise를 사용하면 state(상태)는 잠시 대기(pending)되었다가 성공하면 fulfilled, 실패하면 rejected로 바뀐다.

1주차는 코딩 테스트를 한다는 생각으로 임했는데 2주차는… 진짜 어떻게 해야할 지 감도 안 왔다. 일단 class라는 것을 처음봤다. 테스트 코드도 처음 보고 eslint도 처음 들어봤다. 유틸 라이브러리를 사용하라고 하는데 이것도 역시 처음 사용해본다 😭 처음인 게 너무 많아서 일단은 class 강의를 듣기로 했다.

외계행성의 나이

PROGRAMMERS-962 행성에서는 나이를 알파벳으로 말하고 있습니다. a는 0, b는 1, c는 2, …, j는 9입니다. 예를 들어 23살은 cd, 51살은 fb로 표현합니다. 나이 age가 매개변수로 주어질 때 PROGRAMMER-962식 나이를 return하도록 solution 함수를 완성해주세요.

영어 챌린지는 30일 안에 전화영어 수업(20분)을 총 100회 들으면 되는 것이다. 아무 생각 없이 도전했다가 우테코 프리코스랑 딱 겹치고 말았다. 😂 그래도 3, 4주차에 안 겹쳐서 다행이다…!

알고리즘

배우는 게 정~말 많다. 적응하라는 의미로 가벼운(?) 문제를 냈다고 했는데… 쉽지 않다. 😂 1 ~ 2주 전부터 코딩 테스트 대비 공부를 하지 않았다면 큰일날 뻔했다. 프로그래머스에서 문제를 조금이라도 풀었던 게 많은 도움이 되었다.

깃

그리고 기능 별로 깃 커밋하는 것도 신기했다. 기능 별로 커밋하면 유지 보수, 협업하기 편하겠다는 생각이 들었다. 생각 없이 냅다 커밋했던 지난 달들이여…😅 앞으로는 혼자 깃허브 쓸 때도 신경써야겠다. 좋은 습관을 만들기 위해! 💪

나머지가 1이 되는 수 찾기

자연수 n이 매개변수로 주어집니다. n을 x로 나눈 나머지가 1이 되도록 하는 가장 작은 자연수 x를 return 하도록 solution 함수를 완성해주세요. 답이 항상 존재함은 증명될 수 있습니다.

3 ≤ n ≤ 1,000,000

하샤드 수 (Harshad number)

양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해주세요.

문자열 정렬하기(숫자만 골라 정렬)

문자열 my_string이 매개변수로 주어질 때, my_string 안에 있는 숫자만 골라 오름차순 정렬한 리스트를 return 하도록 solution 함수를 작성해보세요.

function solution(my_string) {;
    return my_string.match(/\d/g).map(n=>Number(n)).sort((a,b)=>a-b);
}

나는 match를 이용해 숫자만 골라낸 다음, Number로 문자형을 숫자형으로 바꾸고 sort로 오름차순 정렬을 해주었다.

왜… 레벨 0이 레벨 1보다 어렵지…? 안 풀리는 문제는 일단 건너뛰고 풀리는 문제부터 풀었다.

대문자와 소문자

문자열 my_string이 매개변수로 주어질 때, 대문자는 소문자로 소문자는 대문자로 변환한 문자열을 return하도록 solution 함수를 완성해주세요.

function solution(my_string) {
    return Array.from(my_string,x => x === x.toUpperCase() ? x.toLowerCase() : x.toUpperCase()).join("");
}

개미군단

개미 군단이 사냥을 나가려고 합니다. 개미군단은 사냥감의 체력에 딱 맞는 병력을 데리고 나가려고 합니다. 장군개미는 5의 공격력을, 병정개미는 3의 공격력을 일개미는 1의 공격력을 가지고 있습니다. 예를 들어 체력 23의 여치를 사냥하려고 할 때, 일개미 23마리를 데리고 가도 되지만, 장군개미 네 마리와 병정개미 한 마리를 데리고 간다면 더 적은 병력으로 사냥할 수 있습니다. 사냥감의 체력 hp가 매개변수로 주어질 때, 사냥감의 체력에 딱 맞게 최소한의 병력을 구성하려면 몇 마리의 개미가 필요한지를 return하도록 solution 함수를 완성해주세요.

= 정수 n을 만들 때 필요한 5, 3, 1의 최소 개수를 구하는 문제이다.

문자 반복 출력하기

문자열 my_string과 정수 n이 매개변수로 주어질 때, my_string에 들어있는 각 문자를 n만큼 반복한 문자열을 return 하도록 solution 함수를 완성해보세요.

function solution(my_string, n) {
    return my_string.split("").map((x)=>x.repeat(n)).join("");
}

리액트 스터디 1주 차 공부 완료에서 말한대로 ― “Class형 컴포넌트를 보수해야할 일이 생길 수도 있으니 Class형 컴포넌트를 함수형 컴포넌트로 바꾸는 것도 공부하면 좋을 것 같다.” ― 클래스 컴포넌트를 함수형 컴포넌트로 바꾸는 연습을 했다.

자릿수 더하기

자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다.

가장 큰 수 찾기

function solution(array) {
    const max = Math.max(...array);
    return [max, array.indexOf(max)];
}

Math.max로 가장 큰 수를 찾고, indexOf로 인덱스 번호를 찾았다.

옷가게 할인 받기

머쓱이네 옷가게는 10만 원 이상 사면 5%, 30만 원 이상 사면 10%, 50만 원 이상 사면 20%를 할인해줍니다. 구매한 옷의 가격 price가 주어질 때, 지불해야 할 금액을 return 하도록 solution 함수를 완성해보세요.

function solution(price) {
    return Math.floor(price >= 500000 ? price-price/5 : price >= 300000 ? price-price/10 : price >= 100000 ? price-price/20 : price);
}

점의 위치 구하기 (삼항연산자)

function solution(dot) {
    const x = dot[0];
    const y = dot[1];
    return x>0 && y>0 ? 1 : x<0 && y>0 ? 2 : x<0 && y<0 ? 3 : 4;
}

F12 > Experiments 탭 - overview 또는 설정 옆 점 3개 - more tools - css overview

— 홈페이지에 사용된 컬러, 폰트 등 간편하게 확인 가능

나도 이제 코딩 테스트 공부를 해봐야겠다는 생각이 들어 프로그래머스에 들어가 코딩 테스트를 하기 시작했다. 아직 입문이라 재밌고, 다른 사람 풀이 코드 보는 것도 흥미롭다. ‘어떻게 저렇게 코드를 작성할 생각을 했을까?’ 신기하기도 했다. 그리고 오늘 푼 코딩 테스트 중에 흥미로운 풀이를 블로그에 기록해 보기로 했다.

Doctype이란?

Document type의 약자, html이 어떤 버전으로 선언되었는지 웹 브라우저에게 알려주는 것.
이를 선언해주지 않으면 호환모드로 작동하는데 그러면 크로스 브라우징 이슈가 훨씬 심해진다.
(호환모드의 경우 각 브라우저마다 문서를 나타내는 방식이 다르기 때문)
요즘은 html5의 dtd(Document Type Definition)로 doctype을 선언 → < !Doctype html >

‘시맨틱 태그’는 의미가 있는 태그로, 보는 사람이 태그의 이름만 보고도 어떤 태그인지 알 수 있게 한다. 이러한 시맨틱 태그를 적절하게 사용해 문서를 작성하는 것을 시맨틱 마크업이라고 한다.

🤔 각각 어떤 속성을 사용하는가?

CSS : transition   animation
JS : setInterval()   requestAnimationFrame() 

CSS 애니메이션 장점

인프런에서 ‘처음 만난 리액트’ 강의 섹션 1부터 섹션 9까지 듣고 모든 실습을 끝내는 것이 리액트 스터디 1주 차 분량이었다. 리액트를 처음 공부하는 것이 아니니 ― 개발 환경 세팅, 리액트 소개, 리액트 연동 등의 내용인 ― 섹션 0부터 섹션 2까지는 그냥 넘어가기로 했다. (JSX에 대해 알려주는 섹션 3는 복습하는 마음으로 들었다.)

리액트 공부를 하면서 공식 문서를 읽다가 문득 한국어 번역이 궁금해서 한국어 버전을 눌렀다.
리액트-엘리먼트 렌더링 👈
어😮 그런데 한 문장이 번역이 안 되어 있었다. 이번 기회에 오픈 소스에 기여를 해보고자 오픈 소스 기여 방법을 검색했다.

주니어 개발자가 오픈 소스 기여하는 방법
위 블로그를 찾았고, 상세하게 잘 설명되어 있어 덕분에 첫 오픈 소스 기여를 성공적으로 마칠 수 있었다! 나는 블로그를 참고하여 아래와 같은 방식으로 기여를 했다.

리액트 기초에서 Component와 props, State는 정리한 적이 있는데 JSX와 Element에 대해서는 정리한 적이 없어 먼저 이론을 확실하게 이해하고 넘어가고자 한다.

JSX란?

JavaScript Syntax Extension의 약자로 JavaScript XML이라고도 불린다. 쉽게 말해 JSX는 자바스크립트와 HTML이 결합된 것이라고 할 수 있다. 브라우저 실행 전, 바벨(Babel)이 JSX로 작성된 코드를 자바스크립트 코드로 변환한다.
그럼 왜 자바스크립트가 아닌 JSX를 사용하는 것일까?
리액트에서 자바스크립트 문법 그대로 사용해 HTML을 생성할 경우, 가독성이 좋지 않고 코드가 길어지기 때문에 대부분 JSX를 이용하여 코드를 작성한다.

스터디원

자바스크립트 복습을 위해 노마드 코더의 바닐라 JS 챌린지에 참여했고, CS 지식과 프론트엔드 이론 공부를 위해 프론트엔드 개발자 스터디에 들어갔다! 프론트엔드 개발자 스터디는 매주 2회, 각자 준비한 질문을 서로에게 하면 대답하는 식으로 진행되었다.

확실히 스터디원은 부담이 없다. 잘 만들어진 스터디의 경우, 정해져 있는 방식을 그대로 잘 따라가기만 하면 된다. 매번 제시간에 출석하고, 대답 잘 하면 좋은 스터디원이고, 여기에다가 추가로 적극적으로 좋은 의견을 내면 완벽한 스터디원이다. 생각해 보니… 회사에서도 이런 팀원을 좋아할 것 같다.😂

8월 말부터 웹 퍼블리셔가 아닌 프론트엔드 개발자가 되기 위해 독학을 시작했다.

[드림코딩] 프론트엔드 입문 강의 → [노마드 코더] 바닐라 JS로 크롬 앱 만들기 → [노마드 코더] 바닐라 JS로 그림 앱 만들기 → [노마드 코더] 리액트 JS로 영화 웹 서비스 만들기

9월 간 이렇게 완강 + 프로젝트 만들기를 했는데 몰랐던 지식과 기술들을 많이 알게 돼서 보람찼다. 강의를 듣고 지식을 얻는 것만으로 끝내지 않고 배운 지식을 바탕으로 개인 프로젝트를 진행하니 엄청난 도움이 됐다. 무료 강의임에도 불구하고 양질의 강의라 코딩을 배우고 싶은 사람이 있다면 위의 강의들을 적극 추천해 주고 싶다. 이제 노마드 코더 강의 중에서 (내가 듣고 싶은) 무료 강의는 리액트 Hooks, 트위터 클론 코딩, TypeScript로 블록체인 만들기, 모두를 위한 깃+깃허브, Next.js, React Native, 총 6개의 강의가 남았다.

혼자 리액트 개인 프로젝트를 하면서 마주한 문제들 중에 가장 힘들었던 건 깃허브 배포였다. 예전에 리액트 연습하고 깃허브 배포를 쉽게 한 적이 있어서(링크-깃허브에 리액트 배포하기) 배포는 전혀 걱정하지 않았는데 이게 웬일. 배포 후 내가 마주한 것은 까만 화면뿐이었다…😢 뭐가 문젠가 싶어 구글링을 해봐도 마땅한 해결책이 안 나왔다. 하지만 명확하게 알게 된 것은 오류의 원인. 1) 리액트 폴더 재사용과 2) 리액트 라우터의 문제였다.

😌 마음가짐

초급 리액트 강의를 듣기 시작할 때, 리액트... 부숴주겠다는 마음으로 시작했지만 부서지는 건 나였다. 초급이라 만만하게 봤는데 만만하게 볼 만한 것이 못 되었다.😂 그래도 열심히 강의를 듣고 이해하니 점점 리액트를 이용해 개인 프로젝트를 만들고 싶어졌다. 개인 프로젝트를 만들면서 리액트 사용도 익숙해지고 싶었고, 리액트로 웹 사이트를 만들면서 필요한 기술은 무엇인지 알아내고 배우고 싶었다.

여러 라이브러리 중에 나는 Slick과 Swiper를 사용했다. 개인적으로 Slick 보다 Swiper가 훨씬 더 사용하기 편했다.

Slick 사용법

1. 터미널에 slick 설치

npm i react-slick slick-carousel

1. 터미널 열어서 리액트 아이콘 다운

npm i react-icons --save

2. 리액트 아이콘 사이트 접속

https://react-icons.github.io/react-icons/icons?name=bs

노마드 코드 강의를 듣고, 강의와 같은 api로 영화 앱을 만들어볼까 하다가 넣을 수 있는 기능이 별로 없을 것 같다는 이유와 한국어로 만들고 싶다는 이유로 다른 영화 api를 찾기로 했다. 어떤 api가 좋을까 검색해 보니 영화진흥위원회 오픈 API, 네이버 API, KMDb API 그리고 The movie DB API가 있었다. 사용하기 편해 보이고 내가 원하는 기능을 구현할 수 있을 것 같아 The movie DB API로 영화 추천 앱을 만들기로 했다. 영화를 보고 싶긴 한데 무슨 영화를 보면 좋을지 모르겠을 때, 영화 선택에 도움을 주는 앱을 만들어 보고 싶었다.

The movie DB

복습 겸 드림코딩 강의를 듣고 정리하면 좋을 것같은 CSS 관련 정보를 블로그에 남겨두기로 했다.

🎯 Position

기본값 static

• Relative : 원래 있던 위치가 기준

• Absolute : 가장 가까이에 위치한 조상이 기준 / 제일 바깥에 있는 박스가 기준

  ( 부모 박스에 position : relative 줄 것! )

  It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block.

• Fixed : 브라우저가 기준
• Sticky : 스크롤 해도 지정한 위치 그대로

— 열(columns) : grid-template-columns

| 행(rows) : grid-template-rows

이어서…

🤗 Component를 나눠서 사용하는 법과 리액트를 이용해 새로고침 없이 페이지 전환하는 방법을 배웠다.

🤗 리액트 기초를 복습하면서 map 메서드 사용과 api를 가져와서 필요한 정보를 사용하는 것에 좀 더 익숙해졌다. 그리고 then 대신 async-await를 사용하는 방법도 배웠다.

😳 느낀 점

코딩으로 그림판을 만들 수 있을 줄이야! 보기에는 간단해 보여도 코딩하는 건 정말 복잡했다. 세상에 나와있는 작은 애플리케이션 하나에 얼마나 많은 개발자들의 노고가 들어갔을지… 깊이 이해하게 됐다. 😂

🧐 기여도 100% 작업?

바닐라 자바스크립트로 만든 그림 앱에 여러 기능들을 추가하다가 생각보다 어려워서 머리도 식히고(?), 복습도 할 겸 프론트엔드 입문 강의를 듣고 반응형 헤더 만드는 것을 연습했다.

이어서…

운동하다가 허리를 심하게 다쳐서 오늘 코딩을 많이 하진 못했다. 완전히 완성하지 못해서 아쉽지만 부상은 내가 어떻게 할 수 있는 게 아니니까 어쩔 수 없지…😢 당분간은 잘 쉬면서 틈틈이 코딩하고, 허리가 많이 나아지면 열심히 코딩해야겠다. 그리고 디자인은 누워서도 할 수 있으니까 누워서 그림판 디자인하고 그대로 CSS로 적용해봐야지! 작은 프로젝트를 하나씩 만드니까 보람도 있고 재미도 있다. 이렇게 연습하다보면 나중에 내가 원하는 앱도 뚝딱 만들 수 있겠지…? 😂

1. 그림 앱 만들기

1. 우선 HTML 파일에 canvas 태그를 만든다.

<canvas></canvas>

2. ( CSS로 그림판을 생성한다. ) 생략 가능

canvas {
    width: 800px;
    height: 800px;
    border: 1px solid #000;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

👍 배운 것

막연하게만 알고 있었던 js를 확실하게 알게 되었다. 어떻게 진행되는지, event가 정확히 무엇인지, argument는 무엇이고 왜 사용하는지 등… 그리고 js파일을 1 기능 1 파일로 나눠서 저장하던데 이 습관은 관리하기도 좋을 것 같고 리액트 배울 때( 컴포넌트 분리 )도 좋을 것 같다.

노마드코더 강의를 보면서 같이 To-do list를 만들었고, 이를 만들면서 자바스크립트를 더 잘 이해할 수 있었다!

🤔 새로고침해도 생성한 할 일들이 그대로 남아있었으면 좋겠어

프론트엔드 단에서도 값을 기억하는 방법이 있다. 바로 localStorage를 이용하면 된다. key와 value만 준비하면 로컬스토리지에서도 값을 저장할 수 있다. 로컬스토리지를 이용한 다양한 메서드는 여기서 확인할 수 있다.

여러 number 메서드 중에 자주 사용되는 2가지 메서드

parseInt

string → number로 바꿔준다.

isNaN : is not a number?

number인지 아닌지 확인할 수 있다.

• boolean, 즉 true or false 값으로 알려준다.
• number ❌ : true
• number ⭕ : false

Toggle 진행 과정 이해하기

const h1 = document.querySelector("div.hello h1");

function click(){
	const clicked = "clicked";
	if (h1.classList.contains(clicked)) {
		h1.classList.remove(clicked);
	}else{
		h1.classList.add(clicked);
	}
}

👇 코드 간결화!

const h1 = document.querySelector("div.hello h1");

function click(){
	h1.classList.toggle("clicked");
}

-className : 모든 클래스를 바꿔버린다.
-classList : 클래스 list 중 하나를 선택해 바꿀 수 있다.

깃허브 블로그를 관리하고 방문자 수를 확인하기 위해 구글 애널리틱스를 적용하기로 했다. 구글 검색을 통해 구글 애널리틱스를 적용했는데, 바로 반영이 안되길래 ‘오래 걸리나?’ 생각했다. 하지만 오래 걸리는 것이 아니라 적용이 안 되어있었던 것😅 추적 ID가 아닌 측정 ID를 등록한 게 문제의 원인이었다.

구글 애널리틱스에 등록했는데 적용이 안 된다면?

1) 왼쪽 하단의 톱니바퀴 모양(관리, Admin) 클릭

단축키

Multi Selection
👍 Ctrl+d
한 단어를 선택하고 ctrl+d 반복적으로 눌러주면 중복 단어 자동으로 모두 선택됨 ⇒ 간단 삭제, 수정가능

Column (box) selection
👍 Ctrl+Shift+alt+↑ or ↓
해당 열에 커서 생성
( 코딩하다가 우연히 알게된 단축키인데 너무 편하다. 모르는 사람 없었으면… )

블럭으로 전체 선택-> Shift+alt+드래그
해당 블럭 끝에 커서 생성

JavaScript에 있는 Elements(요소)와 Events(이벤트)를 확인하고 싶다면?

MDN 사이트나 개발자 도구에서 많은 요소들과 이벤트들을 확인할 수 있다.

1. MDN

Element - Web APIs | MDN

2. console.dir();

console.dir(this);

Undefined: 값이 정의되어있지 않다.

변수는 인지 가능하지만 값이 정의되어 있지 않은 상태.

const something;

Null: 값이 없다.

const something = null;

자연적으로 발생하지 않음. ⇒ 값이 없다는 것을 확실히 알려주기 위해 일부러 사용!

• const   :   재선언 불가능, 재할당 불가능
• let        :   재선언 불가능, 재할당 가능
• var       :   재선언 가능, 재할당 가능

1. Array

• 하나의 변수 안에 데이터 list를 가지는 것.

변수명[index]
→ 배열 안에 있는 것을 index 번호로 불러올 수 있음. ❗️ 주의) 컴퓨터는 0부터 셈.

const food = ['pizza', 'chicken', 'burger', 'noodle']
console.log(food[2]);    //burger

리액트 설치하기 전에 먼저 Node.js가 설치되어 있어야 한다.
Node.js를 설치했다면 다음과 같은 순서로 진행하면 된다.

1. VS code 작업 영역에 폴더 추가 → 폴더 생성

 ❗  react라는 폴더명은 오동작 할 수 있으니 피할 것

2. 새 터미널 열기

 ❗  powershell은 오류가 날 수 있으니 cmd나 다른 거 사용하는 걸 추천

Why react?

왜 리액트를 사용해야 하는가?

JavaScript는 다른 부분도 업데이트되는 반면, React는 html 코드에서 “변하는 부분만” 업데이트된다.
⇒ 인터렉티브에 최적화
게다가 코드가 간결하고, 유지보수가 쉽다.

깃허브에 React 간단하게 배포하는 방법

1. package.json 파일에 코드 2줄 추가

"deploy" : "gh-pages -d build",
"predeploy" : "npm run build"

SEO란? 검색 엔진 최적화(search engine optimization)의 준말로
구글이나 네이버, 다음 등과 같은 검색 엔진에서 검색이 잘 되도록 하는 것을 말한다.
네이버 검색 엔진에 깃허브 블로그를 등록하다가 '웹 페이지 최적화'를 발견했다.
'검색 엔진이 요청한 페이지 콘텐츠를 잘 해석할 수 있는지'를 진단할 수 있는 좋은 기능이다.

네이버 웹마스터 도구에 들어가서

깃허브에 리액트를 배포하려고 하는데 흰 배경(빈 페이지)만 뜬다. 개발자 도구를 눌러 어떤 오류가 발생했는지 확인해보니
Manifest: Line: 1, column: 1, Syntax error.

net::ERR_ABORTED 404

깃허브 블로그를 만들고 나니 '댓글 기능도 있었으면 좋겠고, 구글 검색에도 걸렸으면 좋겠는데...'라는 생각이 들었다.
구글 검색을 해보니 많은 개발자들이 방법을 정리해둔 블로그들이 있었고, 많은 도움을 받았다.
블로그에 내가 실제로 도움을 받은 블로그 주소와 함께 블로그와 다르게 한 부분을 추가로 정리하기로 했다.

0. 사건의 발단

깃허브 블로그를 만들었는데 글을 작성해도(커밋을 해도) 잔디가 심어지지 않는 문제 발생. 잔디 심는 재미로 깃허브 블로그를 시작한 것도 있어서 원인과 문제 해결 방법을 찾으려고 열심히 검색을 했다. user.email이 일치하지 않거나 user.name이 일치하지 않으면 이런 문제가 발생할 수 있다고 한다. 하지만 나의 원인은 이게 아니었다. jekyll 테마 깃허브에서 Fork를 눌러 그냥 복사해왔기 때문이었다. Fork한 레파지토리는 아무리 커밋해도 잔디가 심어지지 않는다고…

❗ [번외] 잔디와 상관없이 편하게 깃허브 블로그를 사용하고, jekyll 테마를 사용하려면 원하는 jekyll 테마의 깃허브로 가서 Fork를 눌러 내 레파지토리에 들고온 뒤, 레파지토리 이름(Repository name)을 원하는 것으로 바꾸면 된다. (변경은 Settings>General에서 Repository name을 바꾸고 rename을 누르면 된다.) 보통은 “user-name.github.io”로 이름을 설정하는 듯하다.

결국 리액트(React)도 자바스크립트의 라이브러리 중 하나이다. 리액트를 잘 다루기 위해서는 자바스크립트(기본)를 잘 다루어야 한다. 리액트 공부를 하면서 자바스크립트 기본기를 복습하니 이해가 더 잘 되는 기분이다. 리액트 공부를 하면서 틈틈이 자바스크립트 공부도 해야겠다. 리액트를 이용해 자유자재로 내가 원하는 것을 만들 수 있다면 얼마나 좋을까, 얼마나 편리할까. 내가 바라는 미래의 모습을 기대하며 꾸준히 공부해 나가야지. 깃허브 블로그를 생성하고 1일 1커밋을 다짐하면서 쓰는 첫 글이 기본 자바스크립트라서 더 뜻깊은 것 같다. 이만 각설하고, 그동안 배웠던 자바스크립트를 보기 편하게 정리해야지.