꿈을 현실로

2023년 10월 회고 (프론트엔드 데브코스 회고)

sukvvon — Thu, 9 Nov 2023 23:45:56 +0900

백엔드와 함께하는 첫 프로젝트

기획과 디자인

10월에는 백엔드와 함께하는 최종 프로젝트가 시작되는 달이었다. 백엔드와 소통을 한 번도 해보지 않아서 어떻게 소통을 해야 잘 할 수 있을까 개발 외적으로 고민을 했던 것 같다. 기획자와 디자이너 없이 프론트엔드와 백엔드가 해야해서 막막했다... 그래서 기획도 엎어지고 다시 하는 경험도 하면서 처음 하는 것이기에 당연하지만 쉽지 않았다.

기획과 디자인을 할 수 있는 경험을 가질 수 있다는 생각으로 긍정적으로 임했다. 거기에다가 프론트엔드 팀장을 맡아서 어깨가 좀 무거웠지만 팀의 분위기를 쳐지지 않고 증진시킬 수 있도록 노력을 했다. 다행히 팀원들과 지향점도 일치하고 잘 맞아서 힘들었지만 즐거웠다. 어떻게든 기획도 괜찮게 만들어진 것 같아서 여기서 기능도 기능이지만 어떻게 하면 모두가 얻어갈 수 있는 프로젝트를 만들 수 있을까를 고민했던 것 같다.

프론트엔드 팀원들 모두가 함께 디자인을 피그마로 만들었다. 기획이 엎어지는 과정을 반복해서 팀 내부적으로 지치기도 했고, 시간도 촉박했지만 2-3일만에 완전하게 완성하였다. 개인적으로 피그마로 만드러진 것을 보기만 했지 스스로 피그마를 활용하여 디자인을 만들어본 경험은 없었다. 개발하는 것과 비슷하게 컴포넌트 단위로 잘게 쪼개서 디자인을 하고 쪼개진 다자인을 붙이는 과정을 하면서 재미있었다. 또한 피그마에 대해 일가견이 있는 팀원이 있어서 많이 배우고 배우 것을 활용도 잘 한 것 같고, 최종적으로 피그마에 대해 전문가까지는 아니지만 활용법를 얻어간 것 같아서 힘들었지만 만족하였다. 나중에 다자이너와 소통할 때 큰 도움이 될 것 같아. 평소 피그마 더 나아가 디자인에 관심이 있기도 했고 만들어보고 싶었어서 너무 좋은 경험이었다.

얻어가고 싶은 점

tanstack-react-query를 제대로 깊게 활용을 못해본 것 같아서 이번 기회에 집중해서 파보려고 한다. css가 많이 부족하다고 생각하고 있었는데 러닝커브가 적기도 하니깐 이번 기회에 제대로 잡고싶다. msw를 들어는 봤지 써보지는 않았다. 현업에서 정말 많이 사용한다고 하니깐 잘 활용하고 싶다. suspense, error-boundary를 알고는 있지만 넣어보지는 않아서 잘 잡고 가고싶다. 구현은 내가 원하는 것을 다 구현해내고 싶다. 마지막으로 팀원들과 소통을 끝까지 잘 해내고 싶다.

2023년 9월 회고 (프론트엔드 데브코스 회고)

sukvvon — Sun, 1 Oct 2023 16:32:46 +0900

https://github.com/prgrms-fe-devcourse/FEDC4_Campers_Jaeho

9월은 팀 프로젝트를 하는 달이었다. 인생을 살면서 첫 프로젝트이기도 하고, 팀장도 처음으로 맡아서 하게 되었다. 개발 더 나아가 인생을 살면서 잊지 못하는 순간 중 하나라는 생각이 든다. 다사다난했던 한 달이었기 때문이다. 기술적인 측면보다는 경험적인 측면에서 회고를 해보려고 한다.

개발에 대한 회고

좋았던 점

초기 설정 (husky, prettier, eslint, lint-staged, commitlint, github)
axios (auth)
auth page 및 회원가입
컴포넌트 공통화, alert-dialog 창, tabs 창
context API (userInfo)

크게 위와 같이 나누어진 task를 수행했다. 맡은 부분에서 책임지고 해내고 싶었는데 그 기대에 맞게 잘 동작하게 해낸 것 같아 다행이었다.

아쉬웠던 점

추가 구현사항인 채팅 기능을 구현하고 싶었는데 일정상 하지 못했던 것이 아쉽다.

협업 방식에 대한 회고

좋았던 점

github의 칸반보드를 잘 활용하고 issue, PR, git commit message를 생성하는데 필요한 convention을 팀원들과 회의를 통해 만들었고, 개인적으로 앞에서 명시된 사항들을 잘 지켰다.

아쉬웠던 점

팀원들 간의 역량 편차로 인해 개인적으로 코어 타임에는 주로 코드 리뷰를 진행하고, 코어 타임이 끝난 후 기능을 구현하게 되었는데, 기능 구현보다 코드 리뷰에 치중된 것 같아 아쉬웠다.

비동기적인 소통이 강조되지만, 동기적인 소통이 필요한 상황이었다.

프로젝트 초기, git과 gitHub에 대한 충분한 설명과 문서를 제공했지만, 현실은 이와 다르게 진행되었다. 팀원 중에서는 이해를 했다고 의사를 표명했지만, 실제로는 반대인 경우가 있었다. 나아가 노트북 세팅 문제나 git에서의 오류 등 다양한 문제가 발생했다.

github 이슈 및 PR의 제목과 내용 형식에 대한 규칙을 정했지만, 이를 따르지 않는 팀원도 있었다. git commit message 또한 성의 없이 올린 팀원도 있어서, 충분한 설명과 이유를 포함해 규칙이 잘 지켜지지 못한 것에 대해 지키자는 이야기를 많이 했었다.

위 명시된 사항들을 팀원들에게 알려주고, 해결하기 위해 생각보다 많은 시간을 할애했다.

에러가 난 채로 PR이 올라와진 경우가 많이 있었고, 에러가 있는 채로 review가 진행되고 merge가 된 경우가 많이 있었다. 즉 에러가 있는 채로 main으로 merge가 되는 것이다. 이 점이 아쉬웠다.

앞으로는

프로젝트를 설정할 때 github actions를 활용해서 build 실패 시 merge가 되지 못하도록 하는 장치를 추가해야겠다. 더 나아가 husky의 pre-push 파일을 만들어 git push를 하기 전 build를 하도록 하고 실패하면 push가 되지 못하도록 해야겠다.

github wiki 혹은 notion에 프로젝트에 대한 것을 더 자세히 기록해야겠다. 누군가는 당연히 알고 있고 충분한 설명을 듣고 이해했다고 하더라도, 실제로는 그렇지 않은 사람이 존재할 것이고, 물어보기를 망설일수도 있을 것이다. 모든 사람이 말을 하기를 좋아하고 잘 하는 것은 아니기 때문이다. 그래서 모든 내용을 문서화할 필요성을 느꼈다.

전체적인 룰은 정하고, 태스크를 1차, 2차로 나누어 1차 태스크는 공통적으로 분배하고 2차 태스크는 개개인의 역량을 존중하기 위해 1차 태스크를 완료한 팀원이 가져가는 식으로 진행이 되었다. 예상했던 것과 다르게 1차 태스크가 마감에 근접했지만 완료되지 못하는 상황이 발생하기도 했다. 이에 대해 팀원간의 신뢰가 있고, 편차가 크지 않을 경우 가능하다는 생각을 하였다. 다음에는 상황에 맞게 일정을 계획하고 개인의 역량에 맞게 수시로 태스크를 재분배해 진행하면 좋겠다는 생각을 했다.

2023년 7월 회고 (프론트엔드 데브코스 회고)

sukvvon — Mon, 7 Aug 2023 16:14:18 +0900

데브코스를 시작하고 2달이 흘러버렸다. 지금까지 주요했던 것들을 위주로 회고를 작성해보려 한다.

유효성 검사(validation)

과제 내용들 중 validation을 구현해보라는 내용이 있었다. 평소 코딩을 할 때 유효성 검증에 대한 생각은 한 번도 해본적이 없었고, 실제로 해본적도 없었다. 과제를 하면서 그리고 한 후 유효성 검증을 어떤 식으로 해야하는지 알아보는 좋은 기회가 되었다. 멘토님의 하신 말씀을 정리하여 짧게 정리하고 복기하려고 한다.

유효성 검사, 얼마나, 어떻게 해야하는 것인가?

완벽과 잘 하는 것

유효성 검사를 완벽하게 하면 너무 좋지만 그럴 수 없기에 현실과 타협해서 우선순위를 정하고 하나씩 해결하는 방식을 추구하자 즉 하나씩 잘 해결해나가면서 자연스럽게 완벽을 추구하는 그림을 그리면 될 것 같다.

예를 들어 1년에 장애를 99프로 이하로 나게 하는 것은 비교적 쉬울 수 있으나 99.999프로로 나게 하는 것은 많은 비용과 시간이 들어간다. 99프로는 1년에 3일이지만 99.999프로는 1년에 5.2분이다.

누구를 위한 검사인가?

과제를 진행하면서 한 유효성 검사는 api로 들어가거나 들어오는 state에 대한 유효성 검사를 진행했었다. 이런 방식의 검사는 개발자들을 위한 검사이고, 유저는 어떻게 행해야하는지 모를 것이다. 개발자들을 위한 유효성 검사는 서버 API의 유효성 검사의 경우 프론트가 서버 응답 데이터를 가지고 재가공을 할 때에는 검사를 하는 것이 의미가 있을 수 있으나 서버에서 내려줄 때 이미 이루어졌어야한다. 서버나 프론트나 검사를 할 수 있지만 프론트에서는 쉽지 않기 때문이다. 유저를 유한 유효성 검사는 어떤 방식이 있을까? 검사 결과 에러가 발생했을 경우 간단한 try catch를 통해 에러 페이지를 띄우거나 재시도를 할 수 있도록 유도하는 정도로 하면 좋을 것 같다.

어떻게 해야하는가?

데이터를 사용하는 경우보다는 데이터가 새로 넣어질 때 하는 것이 좋다.(setState를 호출하는 쪽) (API를 호출하는 상황이라면 API가 데이터를 사용하는 쪽이고 API를 호출하는 상황은 데이터를 넣어주는 쪽이다.)

데이터를 넣어주는 곳은 한 곳일 수 있지만 데이터를 사용하는 곳은 여러 곳일 수 있기 때문이다. 데이터의 어떤 부분이 바뀌는 상황일 때 넣어주는 쪽에서 미리 검사를 해둔다면 미리 대비를 해두고 통과를 했기 때문에 사용하는 곳에서는 검사를 하는 작업을 더 할 필요가 없기 때문이다. 즉 한 번만 하면 되기 때문에 개발 용이성, 복잡도 모두 좋아진다.

스터디

새로운 사람을 만나는 것을 좋아하는 나에게 무리가 없는 스터디를 모집하고 진행하는 것은 자신이 있었다. 어떻게 운영할 것인지도 계획이 있었으니 말이다. 하지만 주변 지인들이 스터디를 진행하는 것을 보면서 효율적이지 못하고 서로가 서로에 대한 신뢰가 없이 시작하다보니 금방 깨지는 경우를 많이 보았다. 그리하여 스터디를 진행하더라도 서로 신뢰가 쌓여있는 환경만 조성된다면 바로 "진행시켜" 하고 싶었다.

그 때가 지금이라는 것을 인지하고 7월 초에 미루다가 흐지부지 되기 전에 바로 "진행시켜" 해버렸다. FEDC4_JSAlgorithm_study 이름과 같이 알고리즘 스터디이다. 스터디의 목적과 방식을 정리하면 아래와 같다.

스터디 구조

목적
- 알고리즘 문제들을 양으로 뿌수는 것이 아닌 하루하루 팀원들과 정한 문제(3 ~ 4)들을 푼다.
방식
- 리뷰어를 1:1로 지정한다.
  - 정해진 기간안에 코드리뷰를 해주어 서로가 놓친 부분은 수정해준다.
  - 자신보다 더 나은 코드가 있다면 억지로 보게 함으로써 효율적인 코드 풀이법을 뇌에 넣는다.

결과

다행히 팀원 모두가 위와 같은 시스템에 만족을 한다고 하였다. 이런 시스템을 제안한 나 또한 뿌듯해서 성공적으로 스터디가 진행이 되고 있다고 판단하였고, 정말 뿌듯하다. 본래 8월 전까지만 해보자라는 생각을 했는데, 이 기세를 몰아 12월 수료까지 혹은 그 이후에도 계속 이어가려고한다.

1차 팀 활동을 마무리하며

1차 팀 홛동에 대한 회고는 KPT(keep, Try, Problem) 회고론을 활용하여 정리해본다.
목적은 팀 활동을 통한 개인의 역량이다.

Keep

팀원과 함께

데브코스에 들어와 팀 활동을 하기 전, 1년동안 혼자서 공부해보자는 생각을 했다. 공부를 하는 동안 이런 생각이 들었다.

지금 이렇게 하는 것이 맞는건지 아닌건지 혼란스럽다.
너무 외롭다는 감정(공허함)에 휘둘려 공부에 집중이 안된다.

그 결과, 혼자 공부하는 것보다는 함께 공부하는 것이 나에게 효과적이라는 것을 깨달았다. 데브코스에 들어와 팀 활동을 한 후, 이런 생각들이 들었다.

로드맵(무조건 신뢰하는 것이 아닌)이 심리적으로 안정감을 준다.
함께하는 팀원들을 만나면서 외로움이 사라졌다!
혼자 고민을 하는 것이 아닌 팀원과 함께 고민하면서 혼자서 얻는 결과보다 함께하며 얻는 결과가 더 가치가 크고 스트레스를 덜 받는다.

위와 같은 생각을 유지한채로 다음 2차 팀 3차 팀에서도 꾸준히 이행해야겠다는 생각이 들었다. 너무 만족스럽다.

코드 리뷰

매주 과제가 주어지면 과제를 수행하고 팀원들끼리 서로에 대한 코드리뷰를 해주고, 후 멘토님이 각 멘티(팀원)들의 코드를 리뷰해주는 시스템을 가지고 있다. 코드리뷰라는 것이 어떤건지는 알고 있었지만 오픈소스 PR를 할 때 코드리뷰 아닌 코드리뷰(?)를 했던 기억이 있다. 이번 팀원들 간의 코드리뷰를 통해 다음과 같은 것들을 행했다.

팀원들의 코드리뷰를 통한 잘못된 나의 코드 습관을 수정했다.
팀원들을 코드리뷰를 해주기 위한 공부를 통한 나의 성장.

코드 리뷰를 왜 하는지 이유를 알았다. 조금 귀찮을 수 있지만 함께 성장할 수 밖에 없는 구조이기 때문이다.

Problem

목적 없는 스크럼

팀 프로젝트를 하지 않고 팀 단위 활동에서 스크럼을 진행하니 매일 회고를 진행한 결과가 같은 패턴을 가지는 것이 보여졌다. 각자 강의를 듣는 것이 주된 활동이고 과제들이 나오면 팀원들의 코드리뷰를 해주는 과정이었다보니 스크럼 형식이 따분해질 수 밖에 없다는 생각이 들면서 어쩔 수 없다는 식으로 방관하는 나의 모습을 보게 되었다.

Try

목적 없는 스크럼을 극복하기

분명히 더 나은 방식으로 할 수 있었는데 말이다. 같은 반복되는 내용이더라도 아 다르고 어 다르다는 말이 있는 것처럼 살을 더 붙여서 "무엇을 할 예정이다"라기 보다는 "무엇을 어떻게 할 예정이다"처럼 말을 했으면 어땟을까라는 생각을 해본다.

2023년 6월 회고

sukvvon — Fri, 30 Jun 2023 23:38:01 +0900

새로운 시작

말로만 듣고 온라인으로 github repository를 참고하기만 했던 프론트엔드 데브코스가 시작되어 버렸다...
지금 이 글을 쓰고 있는 지금도 내가 이 과정에 참여하고 있다는 것이 믿겨지지가 않는다.

만남

3기 tooooo1님과의 만남

약 1년 전부터 github 상기로 혼자 알고만 있던 tooooo1님과 프론트엔드 데브코스에서 운영중인 디스코드에서 이야기를 할 수 있는 기회를 가지게 되었다. 마치 연예인을 보는 듯한 기분이랄까...? 이야기를 하다보니 같은 동네에 살게 된다는 것을 알게되었고, 시간은 새벽 1시였지만 만나게 되었다.

그동안 github상으로 궁금한 코드들도 많았고, 평상시에 어떻게 생각하시는지, 막힐 때 어떻게 대처하는지, 어떻게 삽질(?)을 하시는지 물어보고 직접 하시는 것도 보다보니 새벽 5:30이 되어서 집에 오게 되었다.

소감

이야기를 나눈 후 많은 것을 깨달았다. 말씀하신 것과 다르게 이 정도로 노력했다고 이 정도로 삽질을 해 봤다고 스스로 말을 할 수 없었기 때문이다. 이야기를 하면서 앞으로 나아가야할 방향을 정하고, 어떻게 대처하는지 등 마인드를 세팅 할 수 있게 된 좋은 순간이었다.

팀원들간의 만남

비대면

이번 프로그래머스 4기는 총 60명으로 이루어져있고, 각 팀으로 해서 팀당 5-6명씩으로 이루어져있다. 그리고 정해진 일정이 있고, 코어 타임이 있고, 코어타임 기간 동안에는 디스코드에서 캠을 키고 서로 모니터링 하면서 공부를 하는 시스템이다. 이번달은 1시부터 7시였다.

소감

혼자서 공부하면서 방향성과 외로움에 허덕이던 나에게 더할 나위 없는 좋은 환경이었다. 혼자 했다면 "조금만 쉬었다 할까...?" 하면서 쉬곤 했던 나인데 함께 공부를 하니 눈치가 보여서 "안에 사람들이 있잖아" 라는 마인드로 계속 집중해서 할 수 있는 환경이 만들어지고 계속 해 나가는 나의 모습이 너무 좋았다.

대면

notion 클로닝 과제를 해야하는 일정이 있는데 그 일정을 할 겸 한 번도 서로 보지 못한 사이버 친구였으니 프로그래머스 일정으로 오프라인으로 2일 만나는 일정이 있었다.

소감

실제로 팀원 및 디스코드 상에서만 이야기를 하던 사람들을 만나니 너무 좋았다. 사람을 원체 만나는 것을 좋아하는 성격이라 더 뜻 깊게 와 닿은 것 같다. 만났으니 술과 노래가 빠지면 섭하지 않겠는가? 일정이 끝나고 아침까지 달려버렸다... ㅎㅎ 내가 가고자 하는 분야의 공통된 목적을 가지는 사람들과 만나서 일정이 끝나고 밥도 먹고 술도 먹고 야무지게 놀았더니 평소 놀 때보다 몇 배로 즐거웠던 같다. 동료들에게 민폐 안 끼치면서 이 과정을 잘 하고 프로젝트 또한 잘 완주하고 싶다는 다짐을 다시 한 번 했다.

코드 리뷰

혼자서 공부를 하기 전에 코드 리뷰를 해 본적이 한 번도 없었다. 약 1,2주일에 한 번씩 주어지는 과제가 있고, 그 과제를 해결한 후 멘티들 및 멘토님과 코드 리뷰를 진행하였다.

소감

코드 리뷰를 진행하면서 어떤 마음을 가지고 해야하는지 알 수 있었고, 나와 목적이 같지만 너무 다른 스타일의 코드를 가진 사람들이 생각한 것보다 많았다. "다른 사람이 짠 코드가 제일 어렵다" 라는 말을 몸소 체감한 순간이었다. 리뷰룰 할 때 가져야 하는 마음가짐 또한 배웠다. 말이 아 다르고 어 다르다고 하지 않았던가? 최대한 적을 때 상대방을 생각하면서 적는 연습을 할 수 있었다. 그리고 나의 부족한 점 즉 더 나아갸아할 점을 빠르게 알 수 있었다. 멘티들의 코드 리뷰도 좋았지만 멘토님이 달아주신 코드 리뷰 하나하나가 나도 모르는 잘못된 습관을 빠르게 알려주고 잡아주어서 너무 좋은 경험이었고, 앞으로 남은 기간동안 코드 리뷰 천국이라고 생각하니 너무 행복한 삶을 살고 있다고 말 할 수 있다.

프로그래머스 프론트엔드 데브코스 4기 합격 후기

sukvvon — Fri, 2 Jun 2023 20:16:59 +0900

지원동기

독학을 한다는 것은 쉬운 것이 아니었다. 내가 정한 이 길로 공부를 해야겠다라는 생각을 가지고 패기있게 시작하였으나 혼자서 하다보니 쓸데없는 생각이 많아지기도 하고, “이렇게 해야한다”, “저렇게 해야한다” 는 주변의 유혹도 뿌리치기 힘든 순간들이 많았다. 다시말해 공부를 해야하는 방향에 너무 많은 갈림길들이 내 머리속에 들어와 나를 헤집어놨다. 당연히 javascript에 대한 깊은 이해 없이 바로 어떤 사이트를 강의를 듣고 응용하여 만드려고 하니 막히는 순간이 많았다. 막히는 순간이 올때마다 나에 대한 신뢰가 점점 떨어지고, ‘이 길이 내 길이 아닌것인가?’ 라는 생각이 들어 자신감이 하락하는 와중에 엎친데 덮친격으로 맥북까지 망가져버렸었다. 기본기가 부족해서 그렇다는 것을 지금은 알지만 그 당시 코딩이 무서워졌다. 결국 번아웃이 와버렸다. 그렇게 공부를 놓아버렸다.

공부를 아예 놓고 일부러 몸을 쓰는 알바를 3-4개월 하면서 지내봤지만 개발이 자꾸 생각이 났었다. 그래서 마음을 다잡고 거금을 들여 다시 맥북을 사고 내가 막히는 원인이 javascript에 대한 무지, 사고력과 논리력 부족이라고 판단하여 두려움이 생겼던 웹 공부를 잠시 넣어두고 초심으로 돌아가 프로그래머스나 백준 플랫폼을 이용하여 "왜 해야하지?" 라고 생각했던 알고리즘 공부만 하면서 알고리즘 공부를 해야하는 이유도 깨닫고, 풀리는 맛이 좋아 자신감도 다시 얻었었다. 그리고 가끔씩 감을 잃지 않기 위해 ‘프로그래머스 데브코스’, ‘우아한테크코스’, ‘네이버 부스트캠프’ 와 같은 대표적인 부트캠프 과정들의 github organization의 여러 repository들을 보면서 어떻게 코드를 짯는지 봤었다. 독학을 했었을 때와 비교하며 다시 웹 공부를 해야겠다는 생각이 들었을 때 있으면 좋을 것 같은 요소들을 생각해봤다.

나를 잡아줄 방향이 잡힌 커리큘럼
올바른 방향으로 이끌어줄 멘토들
혼자가 아닌 함께 성장할 수 있는 동료들
동료들을 실망시키지 않겠다는 마음가짐으로 인한 부지런함

알고리즘도 꾸준히 풀면서 자신감과 자존감도 상승했겠다, 이왕 하는거 제대로 해보자라는 마인드로 평도 좋고, 괜찮은 커리큘럼을 지니고 있다고 생각한 알고리즘을 풀 때 메인으로 삼았던 플랫폼인 프로그래머스에서 운영하는 프로그래머스 프론트엔드 데브코스를 지원하기로 마음을 먹었다. 그리하여 지원을 했다.

서류

자기소개서

자기소개서 문항은 크게 6개로 나뉘어졌다.

데브코스를 지원하게 된 동기는 무엇인가요?
데브코스와 별개로 원래는 어떤 계획을 갖고 있었나요?
개발자가 되고 싶은 이유는 무엇인가요?
웹 프론트엔드 분야를 선택한 이유는 무엇인가요?
웹 프론트엔드 진로를 위해 그동안 어떤 노력을 하셨나요?
강도 높은 과정입니다. 데브코스에서 어떻게 학습을 이어갈 계획인가요?

합격 후기들을 보았을 때 자소서의 비중이 큰 것 같다는 내용을 공통적으로 보았다. 모든 문항이 “300자 내외 최대 500자 제한” 이라고 명시되어 있었다. 비중이 컸다는 것을 생각하며 지원동기에서 서술했던 나의 이야기 및 코딩을 하면서 기여를 했거나 노력했던 것 등등 코딩 관련 나의 모든 경험과 감정을 진심을 담아 이것이 아니면 안된다는 마인드로 500자를 꽉 채워 썻던 것 같다. 코딩을 하면서 우여곡절도 많았고, 번아웃도 겪었다보니 나도 모르게 500자를 넘어 1000자를 썻던 문항도 있었다.

그리고 서류 전형을 통과하였다.

실력 확인 테스트

실력 확인 테스트 문제는 주관식 3문제 객관식 18문제가 나왔다.

주관식

코딩을 해야하는 주관식 문제 체감은 프로그래머스와 백준으로 평가했을 때

Lv. 1 (bronze 2)
Lv. 1 (silver 4)
Lv. 2 (gold 2)

개인간에 편차가 있을 수 있지만 이 정도로 표현할 수 있을 것 같다. 평소 백준과 프로그래머스를 통해 약 4개월간 꾸준히 평균적으로 매일 3문제 이상씩 풀어온 나에게 1번과 2번 문제의 경우는 문제당 최소 5분에서 15분 정도 소요되며 어렵지 않게 풀 수 있었고, 3번 문제의 경우는 아쉽게도 풀지 못했다.

객관식

프로그래머스 데브코스 모집 홈페이지에서 "HTML/CSS, 브라우저" 관련 문제가 나온다고 명시가 되어있었는데 정말 평소에 기본적인 프론트엔드에 대한 지식이 있으면 풀 수 있을 정도로 나왔다. 5분만에 다 풀어버릴 정도로 말이다.

그리하여 복기를 한 결과 주관식 문제는 2/3솔을 하고 객관식 문제는 18/18 즉 다 맞아서 총 20/21을 한 것 같았다.

그리고 실력 확인 테스트 또한 합격을 하였다.

면접

면접을 일대다로 보았다. 원래 면접관 1 면접자 5이지만 우리 조는 면접자 한 분이 불참을 하셔서 4명이서 보게 되었다. 질문 내용은 생각보다 그렇게 깊고 어렵지는 않았던 것 같다. 자소서를 기반으로 한 질문들을 우선적으로 하면서 자소서의 내용과 면접자가 말하는 내용이 일치하는가와 면접자의 인성을 보는 것 같았다. 그리고 각 면접자들마다 자소서에 기술적인 내용들이 있다면 좀 깊게 물어보셨다. 그 후 공통적으로 프론트엔드 관련하여 기초적인 이론적인 질문을 하셨다. 그리 어렵지 않은 질문들이었지만 완성도 있게 말하지 못하였는데 좀 후회가 되고 미련이 남았다. 면접할 때 너무 말이 많아서 정리를 하지 못해 컷을 당한 질문은 많이 아쉬웠다. 평소에 면접 준비를 했었어야 했다.

예비를 받았다. 나보다 뛰어난 사람들이 많았다고 생각을 하였기 때문에 아쉽긴 하지만 면접까지 갔다는 것에 의의를 두었다.

그리고 다행스럽게도 추가 합격을 하였다.

결론

지원서 같은 경우 자신의 이야기를 풀어서 진심을 담아 쓴다면 합격을 하는 것이라고 생각이 든다. 그리고 자신이 왜 이 과정에 필요한지 어필을 할 수 있다면 통과할 수 있을 것이라고 생각했다. 나중에 알았지만 서류에서 떨어진 사람도 많았다고 한다.

객관식의 경우, 유튜브(ex. 생활코딩)나 인프런 같은 곳의 무료 인강을 듣고 이해를 하며 연습을 했다면 객관식 문제는 수월하게 다 풀 수 있다고 생각이 들고, 주관식의 경우 평소 알고리즘 공부를 꾸준히 하면 통과할 수 있다고 생각한다.

면접은 떨지 않고 자신이 하고 싶은 이야기를 짧고 강하게 이야기하는 연습이 되어 있으면 최초합을 할 수 있지 않을까(?)라는 생각을 하였다. "부족하기 때문에 부트캠프를 준비 하는 것이지 부족하지 않으면 왜 지원을 하겠는가? 바로 취업을 해버리지 ㅎㅎ" 라는 마음가짐을 가지고 비우고 "나를 보여주라" 라는 마인드로 준비를 했던 것이 합격할 수 있었던 요인이었던 것 같다.

[Nodejs][백준] 단계별로 풀어보기 - 5. 함수

sukvvon — Mon, 12 Sep 2022 11:12:59 +0900

2. 셀프 넘버

https://www.acmicpc.net/problem/4673

문제

셀프 넘버

문제
셀프 넘버는 1949년 인도 수학자 D.R. Kaprekar가 이름 붙였다. 양의 정수 n에 대해서 d(n)을 n과 n의 각 자리수를 더하는 함수라고 정의하자. 예를 들어, d(75) = 75+7+5 = 87이다.

양의 정수 n이 주어졌을 때, 이 수를 시작해서 n, d(n), d(d(n)), d(d(d(n))), ...과 같은 무한 수열을 만들 수 있다.

예를 들어, 33으로 시작한다면 다음 수는 33 + 3 + 3 = 39이고, 그 다음 수는 39 + 3 + 9 = 51, 다음 수는 51 + 5 + 1 = 57이다. 이런식으로 다음과 같은 수열을 만들 수 있다.

33, 39, 51, 57, 69, 84, 96, 111, 114, 120, 123, 129, 141, ...

n을 d(n)의 생성자라고 한다. 위의 수열에서 33은 39의 생성자이고, 39는 51의 생성자, 51은 57의 생성자이다. 생성자가 한 개보다 많은 경우도 있다. 예를 들어, 101은 생성자가 2개(91과 100) 있다.

생성자가 없는 숫자를 셀프 넘버라고 한다. 100보다 작은 셀프 넘버는 총 13개가 있다. 1, 3, 5, 7, 9, 20, 31, 42, 53, 64, 75, 86, 97

10000보다 작거나 같은 셀프 넘버를 한 줄에 하나씩 출력하는 프로그램을 작성하시오.

입력
입력은 없다.

출력
10,000보다 작거나 같은 셀프 넘버를 한 줄에 하나씩 증가하는 순서로 출력한다.

예제 입력 1

예제 출력 1
1
3
5
7
9
20
31
42
53
64
 |
 |       <-- a lot more numbers
 |
9903
9914
9925
9927
9938
9949
9960
9971
9982
9993

해답

function d(n) {
  let sum = n;

  while (n > 0) {
    sum += n % 10;
    n = Math.floor(n / 10);
  }

  return sum;
}

const selfNum = new Array(10000);
selfNum.fill(true);

for (let i = 1; i <= 10000; i++) {
  selfNum[d(i)] = false;

  if (selfNum[i]) {
    console.log(i);
  }
}

풀이

function d(n) (생성자를 구하는 함수)

function d(n) {
  let sum = n;

  while (n > 0) {
    sum += n % 10;
    n = Math.floor(n / 10);
  }

  return sum;
}

일정한 범위 내에서 생성자가 없는 숫자인 셀프 넘버를 구하기 위해서는 전체 범위에서 생성자를 빼주면 됩니다.

우선 생성자를 구하는 함수가 필요합니다.

sum (생성자)

let sum = n;

sum이라는 변수에 매개변수 양의 정수를 뜻하는 n을 할당합니다.

만약 n이 123인 경우 sum은 123이 됩니다.

while (생성자를 만드는 과정)

while (n > 0) {
  sum += n % 10;
  n = Math.floor(n / 10);
}

while (n > 0) {}

while문을 활용해 n > 0일 경우에만 진행을 하도록 합니다.

더하기 할당 (sum에 n의 나머지 값 더하기)

while (n > 0) {
  sum += n % 10;
}

더하기 할당을 통해 n 값을 할당한 변수 sum에 n의 10으로 나눈 나머지 즉 일의 자리 수를 더하여 줍니다.

예를 들어 숫자 123일 경우 3을 더하여 주는 것입니다.

Math.floor() (소수점 밑 버리기)

while (n > 0) {
  sum += n % 10;
  n = Math.floor(n / 10);
}

n을 10으로 나누면 소수점을 가진 실수가 되는데 Math.floor() 함수를 통해 정수화 해줍니다. 그리고 그 값을 n에 할당합니다.

예를 들어 123의 경우 n / 10을 하면 12.3이 되는데 Math.floor()을 통해 12가 됩니다.

위와 같은 과정을 while (n > 0) {} 즉 n이 0보다 큰 경우 반복하게 되어 두 자리 수든 세 자리 수든 모든 자리수를 더한 값을 구할 수 있습니다.

return (생성자 sum 반환하기)

function d(n) {
  let sum = n;

  while (n > 0) {
    sum += n % 10;
    n = Math.floor(n / 10);
  }

  return sum;
}

console.log(d(123)); // 129

return 명령문을 통해 함수 실행을 종료하고 sum 값을 반환합니다. 즉 n의 생성자 혹은 생성자들을 반환하게 되는 것입니다.

selfNum (셀프 넘버를 가지는 배열)

const selfNum = new Array(10000);
selfNum.fill(true);

Array() 생성자 (배열 생성하기)

const selfNum = new Array(10000);

Array()를 활용하여 10000개의 요소를 가지는 빈 배열을 생성하여 변수 selfNum에 할당합니다.

fill() (배열의 요소 모두 true)

selfNum.fill(true);

아직 셀프 넘버인지 생성자인지 추려내지 않았기 때문에 fill() 메서드를 활용하여 모두 true로 채웁니다.

for (selfNum 배열의 요소 추려내기)

for (let i = 1; i <= 10000; i++) {
  selfNum[d(i)] = false;

  if (selfNum[i]) {
    console.log(i);
  }
}

for (let i = 1; i <= 10000; i++) {}

selfNum 내의 요소들에 관한 반복문이므로 i의 범위를 1부터 10000까지로 합니다.

생성자인 경우 요소 false로

for (let i = 1; i <= 10000; i++) {
  selfNum[d(i)] = false;
}

d(i) 값과 일치하는 배열 selfNum의 요소인 경우 false로 할당합니다.

위의 과정을 통해 생성자인 요소는 false가 되는 것이고, 생성자가 아닌 셀프 넘버인 요소는 true 값을 가지게 됩니다.

if...else (selfNum의 요소가 true인 경우)

for (let i = 1; i <= 10000; i++) {
  selfNum[d(i)] = false;

  if (selfNum[i]) {
    console.log(i);
  }
}

if...else문에 의해 selfNum[i]가 true일 경우 셀프 넘버이므로 console.log() 메서드로 i 값을 출력해줍니다.

3. 한수

https://www.acmicpc.net/problem/1065

문제

한수

문제
어떤 양의 정수 X의 각 자리가 등차수열을 이룬다면, 그 수를 한수라고 한다. 등차수열은 연속된 두 개의 수의 차이가 일정한 수열을 말한다. N이 주어졌을 때, 1보다 크거나 같고, N보다 작거나 같은 한수의 개수를 출력하는 프로그램을 작성하시오.

입력
첫째 줄에 1,000보다 작거나 같은 자연수 N이 주어진다.

출력
첫째 줄에 1보다 크거나 같고, N보다 작거나 같은 한수의 개수를 출력한다.

예제 입력 1
110

예제 출력 1
99

예제 입력 2
1

예제 출력 2
1

예제 입력 3
210

예제 출력 3
105

예제 입력 4
1000

예제 출력 4
144

예제 입력 5
500

예제 출력 5
119

해답

const fs = require("fs");

const inputData = +fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

function arithmeticalSequence(n) {
  if (n < 100) {
    return true;
  } else if (n < 1000) {
    const number = n % 10;
    const tens = Math.floor(n / 10) % 10;
    const hundreds = Math.floor(n / 100);
    if (number - tens === tens - hundreds) {
      return true;
    } else {
      return false;
    }
  }
}

let count = 0;

for (let i = 1; i <= inputData; i++) {
  if (arithmeticalSequence(i)) {
    count++;
  }
}

console.log(count);

풀이

inputData (입력값)

readFileSync() (파일 읽어오기)

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 31 30 30 30>

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

process.platform (작동 시스템 구별)

process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt";

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

+ (숫자형으로 변환)

const inputData = +fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // 1000

Buffer 형식으로 출력된 inputData값을 숫자형으로 변환시킵니다.

arithmeticalSequence(n) (한수를 구하는 함수)

function arithmeticalSequence(n) {
  if (n < 100) {
    return true;
  } else if (n < 1000) {
    const number = n % 10;
    const tens = Math.floor(n / 10) % 10;
    const hundreds = Math.floor(n / 100);
    if (number - tens === tens - hundreds) {
      return true;
    } else {
      return false;
    }
  }
}

일정한 범위 내에서 한수의 개수를 출력을 해야합니다. 우선 특정한 수가 한수 즉 등차수열인지 아닌지를 가려내는 함수를 생성합니다.

if...else (범위마다 한수 추려내기)

if (n < 100) {
  return true;
} else if (n < 1000) {
  const number = n % 10;
  const tens = Math.floor(n / 10) % 10;
  const hundreds = Math.floor(n / 100);
  if (number - tens === tens - hundreds) {
    return true;
  } else {
    return false;
  }
}

1000 보다 작거나 같은 자연수에 중에 한수를 찾아내는 것이기 때문에 if...else문을 활용하여 범위마다 구분합니다.

n < 100 (n이 100보다 작을 때)

if (n < 100) {
  return true;
}

n 값이 100보다 작을 경우 각 자리의 수가 모두 등차수열을 이루기 때문에 true 값을 반환합니다.

n < 1000 (n 100 이상이면서 1000보다 작을 경우)

if (n < 100) {
  return true;
} else if (n < 1000) {
  const number = n % 10;
  const tens = Math.floor(n / 10) % 10;
  const hundreds = Math.floor(n / 100);
  if (number - tens === tens - hundreds) {
    return true;
  } else {
    return false;
  }
}

등차수열: 연속하는 두 항의 차이가 모두 일정한 수열

모두 true인 100미만의 경우를 제외하고 100이상 1000 미만일 경우 즉 세 자리 수부터는 각 자리수가 등차수열이 될 수 없는 경우가 존재합니다.

그 존재를 가려내기 위해서 number, tens, hundreds와 같이 각각 일의 자리 수, 십의 자리 수, 백의 자리 수를 의미하는 변수를 만들고,

등차수열의 특징에 따라 연속하는 두 항의 차이가 모두 일정해야하므로 number - tens === tens - hundreds 즉 일의 자리 수와 십의 자리 수의 차이가 십의 자리 수와 백의 자리 수의 차이와 같다면 true를 반환하고, 그것이 아니라면 false를 반환하게 합니다.

count (한수의 개수)

let count = 0;

한수의 개수를 의미하는 변수 count를 선언하고 0으로 초기화합니다.

for (inputData 값 이하의 수 한수 판단)

for (let i = 1; i <= inputData; i++) {
  if (arithmeticalSequence(i)) {
    count++;
  }
}

for문을 통해 i의 범위를 1부터 주어진 자연수인 inputData만큼으로 하여 이하의 식을 수행하게 합니다.

if...else (한수일 경우 count 값 증가)

if (arithmeticalSequence(i)) {
  count++;
}

위에서 정의한 한수를 판별하는 함수인 arithmeticalSequence(i)를 통해 i의 값이 한수이면 즉 반환하는 값이 true이면 증가 연산자를 통해 증가시킵니다.

console.log() (한수의 개수 출력하기)

console.log(count); // 144

console.log() 메서드를 활용해 한수의 개수를 의미하는 변수 count를 출력합니다.

[Nodejs][백준] 단계별로 풀어보기 - 4. 1차원 배열

sukvvon — Wed, 27 Jul 2022 19:14:31 +0900

1. 최소,최대

https://www.acmicpc.net/problem/10818

문제

최소, 최대

문제
N개의 정수가 주어진다. 이때, 최솟값과 최댓값을 구하는 프로그램을 작성하시오.

입력
첫째 줄에 정수의 개수 N (1 ≤ N ≤ 1,000,000)이 주어진다. 둘째 줄에는 N개의 정수를 공백으로 구분해서 주어진다. 모든 정수는 -1,000,000보다 크거나 같고, 1,000,000보다 작거나 같은 정수이다.

출력
첫째 줄에 주어진 정수 N개의 최솟값과 최댓값을 공백으로 구분해 출력한다.

예제 입력 1
5
20 10 35 30 7

예제 출력 1
7 35

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n");

const data = inputData[1].split(" ").map((value) => +value);
const maximum = Math.max(...data);
const minimum = Math.min(...data);

console.log(minimum, maximum);

풀이

inputData (입력값)

파일 읽어오기

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 35 0a 32 30 20 31 30 20 33 35 20 33 30 20 37>

readFileSync()

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

작동 시스템 구별

process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt";

process.platform

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

문자열 형식으로 변환

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData);
// 5
// 20 10 35 30 7

toString()

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

배열 생성

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .trim()
  .split("\n");

console.log(inputData); // [ '5', '20 10 35 30 7' ]

split()

split()을 활용하여 매개변수에 다음줄을 의미하는 "\n"를 넣어 배열을 만듭니다.

data (N개의 정수에 대한 배열)

const data = inputData[1].split(" ").map((value) => +value);

N개의 정수에 대한 배열 생성

const data = inputData[1].split(" ");

console.log(data); // [ '20', '10', '35', '30', '7' ]

split()

N개의 정수에 해당하는 요소인 inputData[1]에 split()에 공백을 의미하는 " "을 매개변수로 넣어 N개의 정수에 대한 배열을 생성합니다.

배열 형식 숫자로 변환

const data = inputData[1].split(" ").map((value) => +value);

console.log(data); // [ 20, 10, 35, 30, 7 ]

map()

생성된 배열의 형식은 문자열입니다. 배열의 형식을 숫자 형식으로 변환하기 위해 map() 메서드를 활용하여 매개변수 callback 함수를 (value) => +value로 하여 모든 배열내의 요소가 숫자 형식으로 변환되게 합니다.

maximun (최댓값)

const maximum = Math.max(...data);

console.log(maximun); // 35

최댓값 반환

Math.max()

Math.max() 함수를 통해 최댓값을 반환합니다.

전개 구문

const maximum1 = Math.max(...data);
console.log(maximum1); // 35

const maximum2 = Math.max(20, 10, 35, 30, 7);
console.log(maximum2); // 35

// maximum1과 maximum2 모두 같다.

Math.max() 함수 내에 매개변수로 전개 구문을 활용해 배열 내 요소를 ...data로 넣습니다.

minimum (최솟값)

const minimum = Math.min(...data);

console.log(minimum); // 7

최솟값 반환

Math.min()

Math.min() 함수를 통해 최솟값을 반환합니다.

전개 구문

const minimum1 = Math.min(...data);
console.log(minimum1); // 7

const minimum2 = Math.max(20, 10, 35, 30, 7);
console.log(minimum2); // 7

// minimum1과 minimum2 모두 같다.

Math.min() 함수 내에 매개변수로 전개 구문을 활용해 배열 내 요소를 ...data로 넣습니다.

결과값 출력하기

console.log(minimum, maximum); // 7 35

console.log()

console.log() 메서드를 통해 minimum과 maximum을 출력합니다.

2. 최댓값

https://www.acmicpc.net/problem/2562

문제

최댓값

문제
9개의 서로 다른 자연수가 주어질 때, 이들 중 최댓값을 찾고 그 최댓값이 몇 번째 수인지를 구하는 프로그램을 작성하시오.

예를 들어, 서로 다른 9개의 자연수

3, 29, 38, 12, 57, 74, 40, 85, 61

이 주어지면, 이들 중 최댓값은 85이고, 이 값은 8번째 수이다.

입력
첫째 줄부터 아홉 번째 줄까지 한 줄에 하나의 자연수가 주어진다. 주어지는 자연수는 100 보다 작다.

출력
첫째 줄에 최댓값을 출력하고, 둘째 줄에 최댓값이 몇 번째 수인지를 출력한다.

예제 입력 1
3
29
38
12
57
74
40
85
61

예제 출력 1
85
8

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(process.platform === "linux" ? "/dev/stdin" : "src/index.txt")
  .toString()
  .split("\n")
  .map((value) => +value);

const maximum = Math.max(...inputData);
const index = inputData.findIndex((value) => value === maximum) + 1;

console.log(`${maximum}
${index}`);

풀이

inputData (입력값)

파일 읽어오기

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 33 0a 32 39 0a 33 38 0a 31 32 0a 35 37 0a 37 34 0a 34 30 0a 38 35 0a 36 31>

readFileSync()

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

작동 시스템 구별

process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt";

process.platform

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

문자열 형식으로 변환

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData);
// 3
// 29
// 38
// 12
// 57
// 74
// 40
// 85
// 61

toString()

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

배열 생성

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n");

console.log(inputData);
// [
//   '3',  '29', '38',
//   '12', '57', '74',
//   '40', '85', '61'
// ]

split()

split()을 활용하여 매개변수에 다음줄을 의미하는 "\n"를 넣어 배열을 만듭니다.

배열 형식 변환

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n")
  .map((value) => +value);

console.log(inputData);
// [
//    3, 29, 38, 12, 57,
//   74, 40, 85, 61
// ]

map()

생성된 배열의 형식은 문자열입니다. 배열의 형식을 숫자 형식으로 변환하기 위해 map() 메서드를 활용하여 매개변수 callback 함수를 (value) => +value로 하여 모든 배열 내부의 요소가 숫자 형식으로 변환되게 합니다.

maximun (최댓값)

const maximum = Math.max(...inputData);

console.log(maximun); // 85

최댓값 반환

Math.max()

Math.max() 함수를 통해 최댓값을 반환합니다.

전개 구문

const maximum1 = Math.max(...inputData);
console.log(maximum1); // 85

const maximum2 = Math.max(3, 29, 38, 12, 57, 74, 40, 85, 61);
console.log(maximum2); // 85

// maximum1과 maximum2 모두 같다.

Math.max() 함수 내에 매개변수로 전개 구문을 활용해 배열 내 요소를 inputData로 넣습니다.

index (최댓값 배열의 위치)

const index = inputData.findIndex((value) => value === maximum) + 1;

console.log(index); // 8

배열에서 최댓값 index 위치 찾기

findIndex

inputData 배열에서 매개변수로 (value) => value === maximum 즉 배열의 각 요소를 순환하며 최댓값과 일치하는 요소를 찾는 callback 함수를 가지는 findIndex 메서드를 통해 최댓값에 해당하는 index를 찾습니다.

배열의 요소들은 처음 시작할 떄 index를 0을 가집니다. 시작하는 배열의 index가 1 이어야함으로 1을 더해줍니다.

결과값 출력하기

console.log(`${maximum}
${index}`);
// 85
// 8

console.log()

console.log() 메서드를 통해 Templete literals을 활용하여 maximum과 index를 줄바꿈을 하여 출력합니다.

3. 숫자의 개수

https://www.acmicpc.net/problem/2577

문제

숫자의 개수

문제
세 개의 자연수 A, B, C가 주어질 때 A × B × C를 계산한 결과에 0부터 9까지 각각의 숫자가 몇 번씩 쓰였는지를 구하는 프로그램을 작성하시오.

예를 들어 A = 150, B = 266, C = 427 이라면 A × B × C = 150 × 266 × 427 = 17037300 이 되고, 계산한 결과 17037300 에는 0이 3번, 1이 1번, 3이 2번, 7이 2번 쓰였다.

입력
첫째 줄에 A, 둘째 줄에 B, 셋째 줄에 C가 주어진다. A, B, C는 모두 100보다 크거나 같고, 1,000보다 작은 자연수이다.

출력
첫째 줄에는 A × B × C의 결과에 0 이 몇 번 쓰였는지 출력한다. 마찬가지로 둘째 줄부터 열 번째 줄까지 A × B × C의 결과에 1부터 9까지의 숫자가 각각 몇 번 쓰였는지 차례로 한 줄에 하나씩 출력한다.

예제 입력 1
150
266
427

예제 출력 1
3
1
0
2
0
0
0
2
0
0

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n")
  .map((value) => +value);

const [A, B, C] = inputData;
const multiplied = A * B * C;

for (let i = 0; i < 10; i++) {
  const countOfEachDigit = String(multiplied)
    .split("")
    .filter((value) => +value === i).length;

  console.log(countOfEachDigit);
}

풀이

inputData (입력값)

파일 읽어오기

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 31 35 30 0a 32 36 36 0a 34 32 37>

readFileSync()

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

작동 시스템 구별

process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt";

process.platform

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

문자열 형식으로 변환

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData);
// 150
// 266
// 427

toString()

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

배열 생성

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n");

console.log(inputData); // [ '150', '266', '427' ]

split()

split()을 활용하여 매개변수에 다음줄을 의미하는 "\n"를 넣어 배열을 만듭니다.

배열 형식 변환

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n")
  .map((value) => +value);

console.log(inputData); // [ 150, 266, 427 ]

map()

A, B, C (세 개의 자연수)

const [A, B, C] = inputData;

console.log(A, B, C); // 160 266 427

배열 구조 분해

구조 분해 할당의 배열 구조 분해를 통해 배열 inputData의 세 가지 요소를 각각 A, B, C에 할당합니다.

multiplied (A, B, C를 곱한 값)

const multiplied = A * B * C;

console.log(multiplied); // 17037300

A, B, C를 곱한 값을 multiplied라는 변수로 할당합니다.

for

for (let i = 0; i < 10; i++) {
  const countOfEachDigit = String(multiplied)
    .split("")
    .filter((value) => +value === i).length;

  console.log(countOfEachDigit);
}

for (let i = 0; i < 10; i++) {}

for문을 활용하여 i의 범위를 0부터 9까지 하여 multiplied의 각 자리의 숫자가 몇 번씩 쓰였는지 구합니다.

countOfEachDigit (각각의 숫자가 쓰인 횟수)

for (let i = 0; i < 10; i++) {
  const countOfEachDigit = String(multiplied)
    .split("")
    .filter((value) => +value === i).length;
}

String() (문자열 형식으로 변환)

const countOfEachDigit = String(multiplied);

console.log(countOfEachDigit); // 17037300

String()을 활용하여 숫자 형식으로 된 multiplied를 문자열 형식으로 변환합니다.

split() (각 자리의 숫자로 이루어진 요소로 배열화)

const countOfEachDigit = String(multiplied).split("");

console.log(countOfEachDigit);
// [
//   '1', '7', '0',
//   '3', '7', '3',
//   '0', '0'
// ]

매개변수가 ""가 포함된 split() 메서드를 활용해 문자열 형식으로 변환된 multiplied를 각 문자를 요소로 가지는 문자열 형식의 배열로 만듭니다.

filter() (일치하는 값이 포함된 새로운 배열)

for (let i = 0; i < 10; i++) {
  const countOfEachDigit = String(multiplied)
    .split("")
    .filter((value) => +value === i);

  console.log(countOfEachDigit);
  // [ '0', '0', '0' ]
  // [ '1' ]
  // []
  // [ '3', '3' ]
  // []
  // []
  // []
  // [ '7', '7' ]
  // []
  // []
}

매개변수로 각 배열의 요소가 i와 일치하면 반환하는 (value) => +value === i인 callback 함수를 가지는 filter() 메서드를 활용해 i와 일치하는 값이 반환된 새로운 배열을 반환합니다.

length (배열의 길이)

for (let i = 0; i < 10; i++) {
  const countOfEachDigit = String(multiplied)
    .split("")
    .filter((value) => +value === i).length;

  console.log(countOfEachDigit);
  // 3
  // 1
  // 0
  // 2
  // 0
  // 0
  // 0
  // 2
  // 0
  // 0
}

그 후 length 속성으로 배열마다의 길이를 구합니다.

console.log (개수 출력)

마지막으로 console.log()을 활용하여 출력하면 각각의 숫자가 몇 번씩 쓰였는지 개수를 알 수 있습니다.

4. 나머지

https://www.acmicpc.net/problem/3052

문제

나머지

문제
두 자연수 A와 B가 있을 때, A%B는 A를 B로 나눈 나머지 이다. 예를 들어, 7, 14, 27, 38을 3으로 나눈 나머지는 1, 2, 0, 2이다.

수 10개를 입력받은 뒤, 이를 42로 나눈 나머지를 구한다. 그 다음 서로 다른 값이 몇 개 있는지 출력하는 프로그램을 작성하시오.

입력
첫째 줄부터 열번째 줄 까지 숫자가 한 줄에 하나씩 주어진다. 이 숫자는 1,000보다 작거나 같고, 음이 아닌 정수이다.

출력
첫째 줄에, 42로 나누었을 때, 서로 다른 나머지가 몇 개 있는지 출력한다.

예제 입력 1
1
2
3
4
5
6
7
8
9
10

예제 출력 1
10

각 수를 42로 나눈 나머지는 1, 2, 3, 4, 5, 6, 7, 8, 9, 10이다.

예제 입력 2
42
84
252
420
840
126
42
84
420
126

예제 출력 2
1

모든 수를 42로 나눈 나머지는 0이다.

예제 입력 3
39
40
41
42
43
44
82
83
84
85

예제 출력 3
6

각 수를 42로 나눈 나머지는 39, 40, 41, 0, 1, 2, 40, 41, 0, 1이다.

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .trim()
  .split("\n");

const remainder = inputData.map((value) => +value % 42);

const deduplication = remainder.filter(
  (value, index) => remainder.indexOf(value) === index
);

console.log(deduplication.length);

풀이

inputData (입력값)

파일 읽어오기

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 33 39 0a 34 30 0a 34 31 0a 34 32 0a 34 33 0a 34 34 0a 38 32 0a 38 33 0a 38 34 0a 38 35>

readFileSync()

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

작동 시스템 구별

process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt";

process.platform

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

문자열 형식으로 변환

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData);
// 39
// 40
// 41
// 42
// 43
// 44
// 82
// 83
// 84
// 85

toString()

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

공백 제거

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .trim();

console.log(inputData);
// 39
// 40
// 41
// 42
// 43
// 44
// 82
// 83
// 84
// 85

trim()

trim() 메서드를 활용하여 문자열 양 끝의 공백을 제거합니다.

배열 생성

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n");

console.log(inputData);
// [
//   '39', '40', '41',
//   '42', '43', '44',
//   '82', '83', '84',
//   '85'
// ]

split()

split()을 활용하여 매개변수에 다음줄을 의미하는 "\n"를 넣어 배열을 만듭니다.

remainder (나머지)

const remainder = inputData.map((value) => +value % 42);

console.log(remainder);
// [
//   39, 40, 41, 0, 1,
//    2, 40, 41, 0, 1
// ]

42로 나눈 나머지로 이루어진 배열

map()

각 수를 42로 나눈 나머지를 구하기 위해서 map() 메서드를 활용하여 매개변수 callback 함수를 (value) => +value % 42로 하여 모든 배열 내부의 요소를 문자열에서 숫자 형식으로 바꾼 후 42로 나눈 나머지를 반환합니다.

deduplication (중복 제거)

const deduplication = remainder.filter(
  (value, index) => remainder.indexOf(value) === index
);

console.log(deduplication); // [ 39, 40, 41, 0, 1, 2 ]

배열 내 중복 요소 제거

filter()

매개변수로 indexOf(value)가 index와 일치하면 반환하는 (value, index) => reaminder.indexOf(value) === index인 callback 함수를 가지는 filter() 메서드를 활용합니다.

indexOf()

`indexOf(value)`	`index`	`value`
`0`	`0`	`39`
`1`	`1`	`40`
`2`	`2`	`41`
`3`	`3`	`0`
`4`	`4`	`1`
`5`	`5`	`2`
`1`	`6`	`40`
`2`	`7`	`41`
`0`	`8`	`39`
`1`	`9`	`40`

위 표와 같이 indexOf 메서드를 활용하여 배열에서 지정된 요소를 찾을 수 있는 첫 번째에만 인덱스를 부여합니다.

따라서 fliter()의 callback 함수인 (value, index) => reaminder.indexOf(value) === index에 의한 새로운 배열은 index(value)의 값과 index의 값이 일치하는 것만 반환하므로 [ 39, 40, 41, 0, 1, 2 ]가 됩니다.

중복 제거된 배열의 길이 출력

console.log(deduplication.length); // 6

console.log(), length

마지막으로 console.log()와 length 속성을 활용하여 deduplication.length 즉 중복을 제거한 배열의 길이를 출력합니다.

5. 평균

https://www.acmicpc.net/problem/1546

문제

평균

문제
세준이는 기말고사를 망쳤다. 세준이는 점수를 조작해서 집에 가져가기로 했다. 일단 세준이는 자기 점수 중에 최댓값을 골랐다. 이 값을 M이라고 한다. 그리고 나서 모든 점수를 점수/M*100으로 고쳤다.

예를 들어, 세준이의 최고점이 70이고, 수학점수가 50이었으면 수학점수는 50/70*100이 되어 71.43점이 된다.

세준이의 성적을 위의 방법대로 새로 계산했을 때, 새로운 평균을 구하는 프로그램을 작성하시오.

입력
첫째 줄에 시험 본 과목의 개수 N이 주어진다. 이 값은 1000보다 작거나 같다. 둘째 줄에 세준이의 현재 성적이 주어진다. 이 값은 100보다 작거나 같은 음이 아닌 정수이고, 적어도 하나의 값은 0보다 크다.

출력
첫째 줄에 새로운 평균을 출력한다. 실제 정답과 출력값의 절대오차 또는 상대오차가 10-2 이하이면 정답이다.

예제 입력 1
3
40 80 60

예제 출력 1
75.0

예제 입력 2
3
10 20 30

예제 출력 2
66.666667
10-2 이하의 오차를 허용한다는 말은 정확히 소수 2번째 자리까지 출력하라는 뜻이 아니다.

예제 입력 3
4
1 100 100 100

예제 출력 3
75.25

예제 입력 4
5
1 2 4 8 16

예제 출력 4
38.75

예제 입력 5
2
3 10

예제 출력 5
65.0

예제 입력 6
4
10 20 0 100

예제 출력 6
32.5

예제 입력 7
1
50

예제 출력 7
100.0

예제 입력 8
9
10 20 30 40 50 60 70 80 90

예제 출력 8
55.55555555555556

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .trim()
  .split("\n");

const [N, inputDataScores] = inputData;
const scores = inputDataScores.split(" ");
const M = Math.max(...scores);
const newScores = scores.map((score) => (score / M) * 100);

let sum = 0;

for (let i = 0; i < N; i++) {
  sum += newScores[i];
}

console.log(sum / N);

풀이

inputData (입력값)

파일 읽어오기

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 33 0a 31 30 20 32 30 20 33 30>

readFileSync()

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

작동 시스템 구별

process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt";

process.platform

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

문자열 형식으로 변환

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData);
// 3
// 10 20 30

toString()

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

공백 제거

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .trim();

console.log(inputData);
// 3
// 10 20 30

trim()

trim() 메서드를 활용하여 문자열 양 끝의 공백을 제거합니다.

배열 생성

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n");

console.log(inputData); // [ '3', '10 20 30' ]

split()

split()을 활용하여 매개변수에 다음줄을 의미하는 "\n"를 넣어 배열을 만듭니다.

N, inputDataScores

const [N, inputDataScores] = inputData;

console.log(N, inputDataScores); // 3 10 20 30

시험 본 과목의 개수, 현재 성적

배열 구조 분해

구조 분해 할당의 배열 구조 분해를 통해 배열 inputData의 두 가지 요소들을 각각 시험 본 과목의 개수를 의미하는 N, 현재 성적을 의미하는 inputDataScores에 할당합니다.

scores

const scores = inputDataScores.split(" ");

console.log(scores); // [ '10', '20', '30' ]

성적에 대한 배열 생성

split()

성적에 대한 변수인 inputDataScores를 split()을 활용하여 매개변수에 공백을 의미하는 " "를 넣어 배열을 만듭니다.

M

const M = Math.max(...scores);

console.log(M); // 30

성적 중 최댓값

Math.max()

Math.max() 함수를 통해 성적 중 최댓값을 반환하여 M 변수에 할당합니다.

전개 구문

Math.max() 함수 내에 매개변수로 전개 구문을 활용해 배열 scores의 요소들을 넣습니다.

newScores

const newScores = scores.map((score) => (score / M) * 100);

console.log(newScores); // [ 33.33333333333333, 66.66666666666666, 100 ]

성적을 고친 값

일단 세준이는 자기 점수 중에 최댓값을 골랐다. 이 값을 M이라고 한다. 그리고 나서 모든 점수를 점수/M*100으로 고쳤다.

map()

기존의 점수인 scores에 map() 메서드를 활용하여 매개변수 callback 함수를 위 주석대로 (score) => (score / M) * 100로 하여 각 점수들을 최댓값으로 나눈 후 100을 곱하여 조작한 값들에 대한 새로운 배열을 반환하고 newScores 변수에 할당합니다.

sum

let sum = 0;

조작된 점수들의 합

조작된 점수들의 합을 위한 변수인 sum에 0으로 초기화합니다.

for

for (let i = 0; i < N; i++) {
  sum += newScores[i];
}

for (let i = 0; i < N; i++) {}

for문으로 조작된 점수들의 합을 구하기 위하여 i를 0부터 N이전까지로 반복문의 범위를 정합니다.

조작된 점수들 합하기

for (let i = 0; i < N; i++) {
  sum += newScores[i];

  console.log(sum);
  // 33.33333333333333
  // 99.99999999999999
  // 200
}

더하기 할당

newScore[0]부터 newScore[N-1]까지 sum에 더하기 할당합니다.

조작된 점수들의 합에 과목 개수 나누기

console.log(sum / N); // 66.66666666666667

console.log()

마지막으로 console.log()을 활용하여 sum / N 즉 조작된 과목들에 과목의 개수를 나눈 값을 출력합니다.

6. OX퀴즈

https://www.acmicpc.net/problem/8958

문제

OX퀴즈

문제
"OOXXOXXOOO"와 같은 OX퀴즈의 결과가 있다. O는 문제를 맞은 것이고, X는 문제를 틀린 것이다. 문제를 맞은 경우 그 문제의 점수는 그 문제까지 연속된 O의 개수가 된다. 예를 들어, 10번 문제의 점수는 3이 된다.

"OOXXOXXOOO"의 점수는 1+2+0+0+1+0+0+1+2+3 = 10점이다.

OX퀴즈의 결과가 주어졌을 때, 점수를 구하는 프로그램을 작성하시오.

입력
첫째 줄에 테스트 케이스의 개수가 주어진다. 각 테스트 케이스는 한 줄로 이루어져 있고, 길이가 0보다 크고 80보다 작은 문자열이 주어진다. 문자열은 O와 X만으로 이루어져 있다.

출력
각 테스트 케이스마다 점수를 출력한다.

예제 입력 1
5
OOXXOXXOOO
OOXXOOXXOO
OXOXOXOXOXOXOX
OOOOOOOOOO
OOOOXOOOOXOOOOX

예제 출력 1
10
9
7
55
30

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .trim()
  .split("\n");

const count = inputData[0];

for (let i = 1; i <= count; i++) {
  let value = 0;
  let sum = 0;

  const quizs = inputData[i].split("");
  const newQuizs = quizs.map((quiz) => {
    if (quiz === "O") {
      value += 1;
      return value;
    }
    if (quiz === "X") {
      value = 0;
      return value;
    }
    return quiz;
  });

  for (y = 0; y < newQuizs.length; y++) {
    sum += newQuizs[y];
  }

  console.log(sum);
}

풀이

inputData (입력값)

파일 읽어오기

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 35 0a 4f 4f 58 58 4f 58 58 4f 4f 4f 0a 4f 4f 58 58 4f 4f 58 58 4f 4f 0a 4f 58 4f 58 4f 58 4f 58 4f 58 4f 58 4f 58 0a 4f 4f 4f 4f 4f 4f 4f 4f 4f 4f 0a ... 15 more bytes>

readFileSync()

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

작동 시스템 구별

process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt";

process.platform

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

문자열 형식으로 변환

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData);
// 5
// OOXXOXXOOO
// OOXXOOXXOO
// OXOXOXOXOXOXOX
// OOOOOOOOOO
// OOOOXOOOOXOOOOX

toString()

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

공백 제거

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .trim();

console.log(inputData);
// 5
// OOXXOXXOOO
// OOXXOOXXOO
// OXOXOXOXOXOXOX
// OOOOOOOOOO
// OOOOXOOOOXOOOOX

trim()

trim() 메서드를 활용하여 문자열 양 끝의 공백을 제거합니다.

배열 생성

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n");

console.log(inputData);
// [
//   '5',
//   'OOXXOXXOOO',
//   'OOXXOOXXOO',
//   'OXOXOXOXOXOXOX',
//   'OOOOOOOOOO',
//   'OOOOXOOOOXOOOOX'
// ]

split()

split()을 활용하여 매개변수에 다음줄을 의미하는 "\n"를 넣어 배열을 만듭니다.

count

const count = inputData[0];

console.log(count); // 5

테스트 케이스의 개수

테스트 케이스의 개수를 뜻하는 inputData[0]을 변수 count에 할당합니다.

for (각 퀴즈 결과에 대한 반복문)

for (let i = 1; i <= count; i++) {
  let value = 0;
  let sum = 0;

  const quizs = inputData[i].split("");
  const newQuizs = quizs.map((quiz) => {
    if (quiz === "O") {
      value += 1;
      return value;
    }
    if (quiz === "X") {
      value = 0;
      return value;
    }
    return quiz;
  });

  for (y = 0; y < newQuizs.length; y++) {
    sum += newQuizs[y];
  }

  console.log(sum);
}

for (let i = 1; i <= count; i++) {}

for문으로 inputData[i]에 대한 반복문을 실행할 것이기 때문에 i의 범위를 테스트 케이스의 개수를 의미하는 0이 아닌 1부터 count까지로 합니다.

value (O, X에 대한 점수)

let value = 0;

O과 X에 대한 점수를 의미하는 변수 value를 선언하고 0으로 초기화합니다.

sum (점수들의 합)

let sum = 0;

점수들의 합산을 의미하는 변수 sum을 선언하고 0으로 초기화합니다.

quizs (각 OX퀴즈의 결과 배열화하기)

for (let i = 1; i <= count; i++) {
  let value = 0;
  let sum = 0;

  const quizs = inputData[i].split("");

  console.log(quizs);
}
// expected output:
// [
//   'O', 'O', 'X', 'X',
//   'O', 'X', 'X', 'O',
//   'O', 'O'
// ]
// [
//   'O', 'O', 'X', 'X',
//   'O', 'O', 'X', 'X',
//   'O', 'O'
// ]
// [
//   'O', 'X', 'O', 'X',
//   'O', 'X', 'O', 'X',
//   'O', 'X', 'O', 'X',
//   'O', 'X'
// ]
// [
//   'O', 'O', 'O', 'O',
//   'O', 'O', 'O', 'O',
//   'O', 'O'
// ]
// [
//   'O', 'O', 'O', 'O',
//   'X', 'O', 'O', 'O',
//   'O', 'X', 'O', 'O',
//   'O', 'O', 'X'
// ]

split()

매개변수 ""를 가지는 split() 메서드를 활용하여 문자열에 있는 각 문자들을 요소로 가지는 배열로 배열화한 후 quizs 변수에 할당합니다.

newQuizs (점수를 매긴 각 OX퀴즈들의 배열)

for (let i = 1; i <= count; i++) {
  let value = 0;
  let sum = 0;

  const quizs = inputData[i].split("");
  const newQuizs = quizs.map((quiz) => {
    if (quiz === "O") {
      value += 1;
      return value;
    }
    if (quiz === "X") {
      value = 0;
      return value;
    }
    return quiz;
  });

  console.log(newQuizs);
}
// expected output:
// [
//   1, 2, 0, 0, 1,
//   0, 0, 1, 2, 3
// ]
// [
//   1, 2, 0, 0, 1,
//   2, 0, 0, 1, 2
// ]
// [
//   1, 0, 1, 0, 1, 0,
//   1, 0, 1, 0, 1, 0,
//   1, 0
// ]
// [
//   1, 2, 3, 4,  5,
//   6, 7, 8, 9, 10
// ]
// [
//   1, 2, 3, 4, 0, 1,
//   2, 3, 4, 0, 1, 2,
//   3, 4, 0
// ]

map()

const newQuizs = quizs.map((quiz) => {
  if (quiz === "O") {
    value += 1;
    return value;
  }
  if (quiz === "X") {
    value = 0;
    return value;
  }
  return quiz;
});

map() 메서드를 활용하여 매개변수 callback 함수 내의 if...else문으로 O와 X별로 점수를 매깁니다. 그 후 과정이 끝나면 값을 newQuizs 변수에 할당합니다.

if...else

if (quiz === "O") {
  value += 1;
  return value;
}
if (quiz === "X") {
  value = 0;
  return value;
}
return quiz;

O는 문제를 맞은 것이고, X는 문제를 틀린 것이다. 문제를 맞은 경우 그 문제의 점수는 그 문제까지 연속된 O의 개수가 된다. 예를 들어, 10번 문제의 점수는 3이 된다.

"OOXXOXXOOO"의 점수는 1+2+0+0+1+0+0+1+2+3 = 10점이다.

퀴즈의 값이 O인 경우

점수는 연속된 O의 개수가 되기 때문에 X가 나오기 전까진 1씩 증가해야합니다. 따라서 더하기 할당을 통해 value += 1 즉 value 값이 0, 1, 2 이런식으로 할당시키고, 할당된 value 값을 배열 내 요소에 반환합니다.

퀴즈의 값이 X인 경우

배열의 요소가 X가 나오는 순간 점수는 0점이 됩니다. 그러므로 value = 0 즉 value 값을 0으로 초기화시킵니다. 그리고 그 값을 X인 배열의 요소에 반환합니다.

O, X 둘 다 아닌 경우

둘 다 아닌 경우는 문제상 존재하진 않지만 quiz 즉 배열의 요소 그대로 반환합니다.

for (점수 합하기)

for (y = 0; y < newQuizs.length; y++) {
  sum += newQuizs[y];
}

for (y = 0; y < newQuizs.length; y++) {}

배열 내의 모든 점수를 합해야하기 때문에 변수 y의 범위를 시작인 0부터 newQuizs 배열의 전체 길이를 의미하는 newQuizs.length 전까지 반복문을 수행하게 합니다.

더하기 할당

for (y = 0; y < newQuizs.length; y++) {
  sum += newQuizs[y];
}

더하기 할당을 통해 newQuize 배열 내의 모든 요소들을 합하여 sum에 할당합니다.

console.log()

console.log(sum);
// 10
// 9
// 7
// 55
// 30

마지막으로 console.log()을 활용하여 sum을 출력합니다.

7. 평균은 넘겠지

https://www.acmicpc.net/problem/4344

문제

평균은 넘겠지

문제
대학생 새내기들의 90%는 자신이 반에서 평균은 넘는다고 생각한다. 당신은 그들에게 슬픈 진실을 알려줘야 한다.

입력
첫째 줄에는 테스트 케이스의 개수 C가 주어진다.

둘째 줄부터 각 테스트 케이스마다 학생의 수 N(1 ≤ N ≤ 1000, N은 정수)이 첫 수로 주어지고, 이어서 N명의 점수가 주어진다. 점수는 0보다 크거나 같고, 100보다 작거나 같은 정수이다.

출력
각 케이스마다 한 줄씩 평균을 넘는 학생들의 비율을 반올림하여 소수점 셋째 자리까지 출력한다.

예제 입력 1
5
5 50 50 70 80 100
7 100 95 90 80 70 60 50
3 70 90 80
3 70 90 81
9 100 99 98 97 96 95 94 93 91

예제 출력 1
40.000%
57.143%
33.333%
66.667%
55.556%

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n");

const C = +inputData[0];

for (let i = 1; i <= C; i++) {
  let sum = 0;

  const testCase = inputData[i].split(" ").map((value) => +value);
  const N = testCase[0];

  for (let y = 1; y <= N; y++) {
    sum += testCase[y];
  }
  const avg = sum / N;

  let overStudent = 0;
  for (let z = 1; z <= N; z++) {
    if (testCase[z] > avg) {
      overStudent++;
    }
  }
  const overAvg = ((overStudent / N) * 100).toFixed(3);

  console.log(overAvg + "%");
}

풀이

inputData (입력값)

readFileSync() (파일 읽어오기)

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 35 0a 35 20 35 30 20 35 30 20 37 30 20 38 30 20 31 30 30 0a 37 20 31 30 30 20 39 35 20 39 30 20 38 30 20 37 30 20 36 30 20 35 30 0a 33 20 37 30 20 39 ... 45 more bytes>

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

process.platform (작동 시스템 구별)

process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt";

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

toString() (문자열 형식으로 변환)

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData);
// 5
// 5 50 50 70 80 100
// 7 100 95 90 80 70 60 50
// 3 70 90 80
// 3 70 90 81
// 9 100 99 98 97 96 95 94 93 91

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

split() (배열 생성)

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n");

console.log(inputData);
// [
//   '5',
//   '5 50 50 70 80 100',
//   '7 100 95 90 80 70 60 50',
//   '3 70 90 80',
//   '3 70 90 81',
//   '9 100 99 98 97 96 95 94 93 91'
// ]

split()을 활용하여 매개변수에 다음줄을 의미하는 "\n"를 넣어 배열을 만듭니다.

C (테스트 케이스의 개수)

const C = +inputData[0];

console.log(C); // 5

+ (숫자 형식으로 변환)

inputData의 테스트 케이스의 개수를 뜻하는 요소 inputData[0]에 숫자 형식으로 변환을 하여 +inputData[0]을 변수 C에 할당합니다.

for (각 테스트 케이스를 위한 반복문)

for (let i = 1; i <= C; i++) {
  let sum = 0;

  const testCase = inputData[i].split(" ").map((value) => +value);
  const N = testCase[0];

  for (let y = 1; y <= N; y++) {
    sum += testCase[y];
  }
  const avg = sum / N;

  let overStudent = 0;
  for (let z = 1; z <= N; z++) {
    if (testCase[z] > avg) {
      overStudent++;
    }
  }
  const overAvg = ((overStudent / N) * 100).toFixed(3);

  console.log(overAvg + "%");
}

for (let i = 1; i <= C; i++) {}

for문으로 각 테스트 케이스를 위한 즉 inputData[i]에 대한 반복문을 실행할 것이기 때문에 i의 범위를 테스트 케이스의 개수를 의미하는 0이 아닌 1부터 C까지로 합니다.

sum (점수들의 합)

let sum = 0;

점수들의 합산을 의미하는 변수 sum을 선언하고 0으로 초기화합니다.

testCase (각 테스트 케이스 내의 점수들의 배열)

for (let i = 1; i <= C; i++) {
  let sum = 0;

  const testCase = inputData[i].split(" ").map((value) => +value);

  console.log(testCase);
}
// expected output:
// [ 5, 50, 50, 70, 80, 100 ]
// [
//    7, 100, 95, 90,
//   80,  70, 60, 50
// ]
// [ 3, 70, 90, 80 ]
// [ 3, 70, 90, 81 ]
// [
//    9, 100, 99, 98, 97,
//   96,  95, 94, 93, 91
// ]

split() (배열 형식으로 변환)

학생의 수와 점수들을 의미하는 inputData[i]로부터 공백을 의미하는 매개변수 " "를 가지는 split() 메서드를 활용하여 공백을 기준으로 새로운 배열을 생성합니다.

map() (배열 내 요소 숫자 형식으로 변환)

map() 메서드를 활용하여 매개변수 callback 함수 (value) => +value)로 문자열 형식의 배열을 숫자 형식으로 변환한 후 testCase에 할당합니다.

N (학생들의 점수의 개수)

for (let i = 1; i <= C; i++) {
  let sum = 0;

  const testCase = inputData[i].split(" ").map((value) => +value);
  const N = testCase[0];

  cossole.log(N);
}
// expected output:
// 5
// 7
// 3
// 3
// 9

testCase의 첫 번째 인덱스인 testCase[0]에서 학생들의 점수의 수를 변수 N에 할당합니다.

for (testCase 내의 점수들에 대한 반복문)

for (let i = 1; i <= C; i++) {
  let sum = 0;

  const testCase = inputData[i].split(" ").map((value) => +value);
  const N = testCase[0];

  for (let y = 1; y <= N; y++) {
    sum += testCase[y];
  }
}

for (let y = 1; y <= N; y++) {}

testCase 내부 점수들에 관한 for문이기에 y의 범위를 점수의 개수를 의미하는 배열 인덱스인 0이 아닌 1부터 N까지로 합니다.

더하기 할당

for (let i = 1; i <= C; i++) {
  let sum = 0;

  const testCase = inputData[i].split(" ").map((value) => +value);
  const N = testCase[0];

  for (let y = 1; y <= N; y++) {
    sum += testCase[y];
  }
}

console.log(sum);
// 350
// 545
// 240
// 241
// 863

더하기 할당 연산자를 활용하여 testCase 배열 내의 모든 요소들을 합하여 sum에 할당합니다.

avg (점수들의 평균)

for (let i = 1; i <= C; i++) {
  let sum = 0;

  const testCase = inputData[i].split(" ").map((value) => +value);
  const N = testCase[0];

  for (let y = 1; y <= N; y++) {
    sum += testCase[y];
  }
  const avg = sum / N;

  console.log(avg);
}
// expected output:
// 70
// 77.85714285714286
// 80
// 80.33333333333333
// 95.88888888888889

sum에 점수의 개수를 의미하는 N을 나눠줘 평균을 구한 후 변수 avg에 할당합니다.

overStudent (평균을 넘긴 학생의 수)

let overStudent = 0;

평균을 넘은 학생들의 수를 뜻하는 변수 overStudent을 선언하고 0으로 초기화합니다.

for (평균을 넘은 학생들을 추려내는 반복문)

for (let z = 1; z <= N; z++) {
  if (testCase[z] > avg) {
    overStudent++;
  }
}

for (let z = 1; z <= N; z++) {}

y와 같이 testCase 내부 점수들에 관한 for문이기에 z의 범위를 개수를 의미하는 배열 인덱스인 0이 아닌 1부터 N까지로 합니다.

if...else

for (let i = 1; i <= C; i++) {
  let sum = 0;

  const testCase = inputData[i].split(" ").map((value) => +value);
  const N = testCase[0];

  for (let y = 1; y <= N; y++) {
    sum += testCase[y];
  }
  const avg = sum / N;

  let overStudent = 0;
  for (let z = 1; z <= N; z++) {
    if (testCase[z] > avg) {
      overStudent++;
    }
  }
}

console.log(overStudent);
// 2
// 4
// 1
// 2
// 5

if...else문을 통해 testCase 배열의 요소들 중 avg즉 평균보다 큰 요소일 경우 Increment (++)을 통해 overStudent++ 즉 overStudent를 하나씩 증가시켜줍니다.

overAvg (평균이 넘는 학생들의 비율)

const overAvg = ((overStudent / N) * 100).toFixed(3);

console.log(overAvg);
// 40.000
// 57.143
// 33.333
// 66.667
// 55.556

평균 점수를 넘는 학생들의 수인 변수 overStudent에 학생들의 점수의 수인 변수 N을 나눈 후 비율을 위해 100을 곱해줍니다.

toFixed() (숫자를 고정 소수점 표기법으로)

그 후 매개변수로 3을 가지는 toFixed() 메서드를 통해 소수점 셋째 자리까지 출력하도록 합니다.

결과값 출력하기

console.log(overAvg + "%");
// 40.000%
// 57.143%
// 33.333%
// 66.667%
// 55.556%

console.log()

마지막으로 console.log()을 활용하여 overAvg에 % 기호가 필요하기 때문에 overAvg + "%을 출력합니다.

[Nodejs][백준] 단계별로 풀어보기 - 3. 반복문

sukvvon — Fri, 22 Jul 2022 19:43:04 +0900

1. 구구단

https://www.acmicpc.net/problem/2739

문제

구구단

문제
N을 입력받은 뒤, 구구단 N단을 출력하는 프로그램을 작성하시오. 출력 형식에 맞춰서 출력하면 된다.

입력
첫째 줄에 N이 주어진다. N은 1보다 크거나 같고, 9보다 작거나 같다.

출력
출력형식과 같게 N*1부터 N*9까지 출력한다.

예제 입력 1
2

예제 출력 1
2 * 1 = 2
2 * 2 = 4
2 * 3 = 6
2 * 4 = 8
2 * 5 = 10
2 * 6 = 12
2 * 7 = 14
2 * 8 = 16
2 * 9 = 18

해답

const fs = require("fs");

const inputData = +fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

for (let i = 1; i < 10; i++) {
  console.log(`${inputData} * ${i} = ${inputData * i}`);
}

풀이

inputData

파일 읽어오기

readFileSync()

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 32>

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

작동 시스템 구별

process.platform

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

실수 형식으로 변환

+

const inputData = +fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // 2

Buffer 형식으로 출력된 값을 inputData로 정의하려는 식 앞에 +를 붙여 실수 형식으로 변환합니다.

구구단 구하기

for (let i = 1; i < 10; i++) {
  console.log(`${inputData} * ${i} = ${inputData * i}`);
}

for

for (let i = 1; i < 10; i++) {}

구구단을 출력하기 위해 for 문을 활용하여 inputData으로부터 1부터 9까지 곱한 값을 구할 수 있도록 합니다.

출력하기

console.log()

for (let i = 1; i < 10; i++) {
  console.log(`${inputData} * ${i} = ${inputData * i}`);
}

// 2 * 1 = 2
// 2 * 2 = 4
// 2 * 3 = 6
// 2 * 4 = 8
// 2 * 5 = 10
// 2 * 6 = 12
// 2 * 7 = 14
// 2 * 8 = 16
// 2 * 9 = 18

console.log()와 Template literals을 활용해 for문의 i값마다 2 * 1 = 2와 같은 형식으로 출력할 수 있도록 합니다.

2. A+B-3

https://www.acmicpc.net/problem/10950

문제

A+B-3

문제
두 정수 A와 B를 입력받은 다음, A+B를 출력하는 프로그램을 작성하시오.

입력
첫째 줄에 테스트 케이스의 개수 T가 주어진다.

각 테스트 케이스는 한 줄로 이루어져 있으며, 각 줄에 A와 B가 주어진다. (0 < A, B < 10)

출력
각 테스트 케이스마다 A+B를 출력한다.

예제 입력 1
5
1 1
2 3
3 4
9 8
5 28

예제 출력 1
2
5
7
17
7

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n");

const [count] = inputData;

for (let i = 1; i <= +count; i++) {
  const arrayOfValue = inputData[i].split(" ").map((value) => +value);
  const [a, b] = arrayOfValue;
  console.log(a + b);
}

풀이

inputData

파일 읽어오기

readFileSync()

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 35 0a 31 20 31 0a 32 20 33 0a 33 20 34 0a 39 20 38 0a 35 20 32>

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

작동 시스템 구별

process.platform

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

문자열 형식으로 변환

toString()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData);
// 5
// 1 1
// 2 3
// 3 4
// 9 8
// 5 2

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

배열 생성

split()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n");

console.log(inputData); // [ '5', '1 1', '2 3', '3 4', '9 8', '5 2' ]

split()를 활용하여 매개변수에 다음줄을 의미하는 "\n"를 넣어 배열을 만듭니다.

count

테스트 케이스의 개수

배열 구조 분해

const [count] = inputData;

console.log(count); // 5

구조 분해 할당의 배열 구조 분해을 통해 inputData로부터 count라는 이름의 변수로 테스트 케이스의 개수를 구합니다.

A + B 구하기

for (let i = 1; i <= +count; i++) {
  const arrayOfValue = inputData[i].split(" ").map((value) => +value);
  const [a, b] = arrayOfValue;
  console.log(a + b);
}

for

for (let i = 1; i <= +count; i++) {}

for 문을 활용합니다.

처음 테스트 케이스의 개수를 의미하는 값을 제외해야 하기 때문에 i값을 0이 아닌 1로 초기화합니다.

문자열 형식의 count를 +를 통해 실수 형식으로 바꿔 for문이 동작하도록 합니다.

값의 배열

arrayOfValue

for (let i = 1; i <= +count; i++) {
  const arrayOfValue = inputData[i].split(" ").map((value) => +value);
  // expexted output: [ 1, 1 ], ..., [ 5, 2 ]
}

값의 배열을 의미하는 arrayOfValue라는 변수를 만듭니다.

split() 메서드를 통해 매개변수 " " 즉 공백에 의한 배열을 생성합니다.

그 후 map() 메서드를 통해 문자열 형식인 배열 값들을 실수 형식으로 변환합니다.

배열 구조 분해

[a, b]

for (let i = 1; i <= +count; i++) {
  const arrayOfValue = inputData[i].split(" ").map((value) => +value);
  const [a, b] = arrayOfValue;

  console.log(a, b);
  // 1 1
  // 2 3
  // 3 4
  // 9 8
  // 5 2
}

구조 분해 할당의 배열 구조 분해을 통해 arrayOfValue를 a, b에 할당합니다.

a + b 출력

console.log()

for (let i = 1; i <= +count; i++) {
  const arrayOfValue = inputData[i].split(" ").map((value) => +value);
  const [a, b] = arrayOfValue;
  console.log(a + b);
  // 2
  // 5
  // 7
  // 17
  // 7
}

console.log() 메서드를 활용하여 a + b값을 i값마다 출력합니다.

3. 합

https://www.acmicpc.net/problem/8393

문제

합

문제
n이 주어졌을 때, 1부터 n까지 합을 구하는 프로그램을 작성하시오.

입력
첫째 줄에 n (1 ≤ n ≤ 10,000)이 주어진다.

출력
1부터 n까지 합을 출력한다.

예제 입력 1
3

예제 출력 1
6

해답

const fs = require("fs");

const inputData = +fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

let result = 0;

for (let i = 0; i <= inputData; i++) {
  result += i;
}

console.log(result);

풀이

inputData

파일 읽어오기

readFileSync()

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 33>

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

작동 시스템 구별

process.platform

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

실수 형식으로 변환

+

const fs = require("fs");

const inputData = +fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // 3

Buffer 형식으로 출력된 값을 inputData로 정의하려는 식 앞에 +를 붙여 실수 형식으로 변환합니다.

result

결과값 선언 및 초기화

let result = 0;

1부터 n까지 합을 담을 변수 result를 0으로 초기화하여 선언합니다.

결과값 구하기

for

for (let i = 0; i <= inputData; i++) {}

for 문을 통해 i를 0으로 초기화하여 i 값을 1씩 증가시키면서 inputData까지 증가하여 inputData + 1번 반복하게끔 합니다.

모든 i 값 더하기

더하기 할당

for (let i = 0; i <= inputData; i++) {
  result += i;
}
// ex) inputData = 3
// 1 time: 0 = 0 + 0
// 2 time: 1 = 0 + 1
// 3 time: 3 = 1 + 2
// 4 time: 6 = 3 + 3

할당 연산자의 더하기 할당을 통해 반복문을 통해 순환되는 모든 i값을 result에 더합니다.

결과값 출력

console.log()

console.log(result);

console.log() 메서드를 통해 result값을 출력합니다.

4. 빠른 A+B

https://www.acmicpc.net/problem/15552

문제

빠른 A+B

문제
본격적으로 for문 문제를 풀기 전에 주의해야 할 점이 있다. 입출력 방식이 느리면 여러 줄을 입력받거나 출력할 때 시간초과가 날 수 있다는 점이다.

C++을 사용하고 있고 cin/cout을 사용하고자 한다면, cin.tie(NULL)과 sync_with_stdio(false)를 둘 다 적용해 주고, endl 대신 개행문자(\n)를 쓰자. 단, 이렇게 하면 더 이상 scanf/printf/puts/getchar/putchar 등 C의 입출력 방식을 사용하면 안 된다.

Java를 사용하고 있다면, Scanner와 System.out.println 대신 BufferedReader와 BufferedWriter를 사용할 수 있다. BufferedWriter.flush는 맨 마지막에 한 번만 하면 된다.

Python을 사용하고 있다면, input 대신 sys.stdin.readline을 사용할 수 있다. 단, 이때는 맨 끝의 개행문자까지 같이 입력받기 때문에 문자열을 저장하고 싶을 경우 .rstrip()을 추가로 해 주는 것이 좋다.

또한 입력과 출력 스트림은 별개이므로, 테스트케이스를 전부 입력받아서 저장한 뒤 전부 출력할 필요는 없다. 테스트케이스를 하나 받은 뒤 하나 출력해도 된다.

자세한 설명 및 다른 언어의 경우는 이 글에 설명되어 있다.

이 블로그 글에서 BOJ의 기타 여러 가지 팁을 볼 수 있다.

입력
첫 줄에 테스트케이스의 개수 T가 주어진다. T는 최대 1,000,000이다. 다음 T줄에는 각각 두 정수 A와 B가 주어진다. A와 B는 1 이상, 1,000 이하이다.

출력
각 테스트케이스마다 A+B를 한 줄에 하나씩 순서대로 출력한다.

예제 입력 1
5
1 1
12 34
5 500
40 60
1000 1000

예제 출력 1
2
46
505
100
2000

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .trim()
  .split("\n");

const count = inputData.length;

let result = "";

for (let i = 1; i < count; i++) {
  const data = inputData[i].split(" ").map((value) => +value);

  if (i < count - 1) {
    result += `${data[0] + data[1]}\n`;
  } else if (i < count) {
    result += `${data[0] + data[1]}`;
  }
}

console.log(result);

풀이

inputData

파일 읽어오기

readFileSync()

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 35 0a 31 20 31 0a 31 32 20 33 34 0a 35 20 35 30 30 0a 34 30 20 36 30 0a 31 30 30 30 20 31 30 30 30>

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

작동 시스템 구별

process.platform

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

문자열 형식으로 변환

toString()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData);
// 5
// 1 1
// 12 34
// 5 500
// 40 60
// 1000 1000

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

문자열 공백 제거

trim()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .trim();

console.log(inputData);
// 5
// 1 1
// 12 34
// 5 500
// 40 60
// 1000 1000

공백이 존재한다고 생각하진 않았는데 백준에서 재출을 할 때 틀렸다고 하였습니다. 혹시나해서 trim() 메서드를 활용하였더니 성공하였습니다.

trim() 메서드를 활용하여 문자열 양 끝의 공백을 제거합니다.

배열 생성

split()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n");

console.log(inputData); // [ '5', '1 1', '12 34', '5 500', '40 60', '1000 1000' ]

split()을 활용하여 매개변수에 다음줄을 의미하는 "\n"를 넣어 배열을 만듭니다.

count

배열 inputData의 길이

length

const count = inputData.length;

각 줄에 해당하는 값들을 더해야하므로 length를 통해 배열인 inputData의 길이를 구합니다.

result

결과값 선언 및 초기화

let result = "";

각 줄에 해당하는 값들을 담은 변수 result를 "" 즉 문자열 형식의 빈 값으로 초기화하여 선언합니다.

결과값 구하기

for (let i = 1; i < count; i++) {
  const data = inputData[i].split(" ").map((value) => +value);

  if (i < count - 1) {
    result += `${data[0] + data[1]}\n`;
  } else if (i < count) {
    result += `${data[0] + data[1]}`;
  }
}

for

for (let i = 1; i <= count; i++) {}

for 문을 통해 첫 줄은 테스트케이스의 개수르르 의미하므로 0이 아닌 i를 1으로 초기화하여 i 값을 1씩 증가시키면서 count까지 증가하여 for문의 수행횟수를 count번 반복하게끔 합니다.

각 줄의 값 배열화 (data)

for (let i = 1; i < count; i++) {
  const data = inputData[i].split(" ").map((value) => +value);
}
// expected output :
// [ '1', '1' ]
// [ '12', '34' ]
// [ '5', '500' ]
// [ '40', '60' ]
// [ '1000', '1000' ]

split()

각 줄의 번호를 의미하는 inputData[i]로부터 태스트 케이스 값들을 받아 공백을 의미하는 매개변수 " "이 포함된 split() 메서드를 실행하여 각 줄에 값들에 대한 각각의 배열을 만듭니다.

map()

그 후 (value) => +value가 포함된 callback 함수를 가지는 map() 메서드를 통해 문자열 형식을 실수 형식으로 바꾸게 하여 연산이 가능하도록 합니다.

if...else

if (i < count - 1) {
  result += `${data[0] + data[1]}\n`;
} else if (i < count) {
  result += `${data[0] + data[1]}`;
}

if...else을 통하여 result에 담을 값에 대한 경우를 나누어야합니다.

i < count - 1 의 경우

if (i < count - 1) {
  result += `${data[0] + data[1]}\n`;
}

count의 값이 1부터 count - 2까지의 경우 연산이 끝난 후 다음줄로 출력되어야 하기 때문에 \n을 써줍니다.

값을 더하기 할당 연산자를 활용하여 순서대로 더해줍니다.

i < count 의 경우

else if (i < count) {
  result += `${data[0] + data[1]}`;
}

else if를 통해 i < count - 1 의 경우를 제외한 i < count 즉 count - 1에 대한 경우는 \n을 제외해 다음줄까지 함께 출력되는 것을 방지합니다.

마찬가지로 값을 더하기 할당 연산자를 활용하여 더해줍니다.

결과값 출력

console.log()

console.log(result);
// 2
// 46
// 505
// 100
// 2000

console.log() 메서드를 통해 result값을 출력합니다.

5. N 찍기

https://www.acmicpc.net/problem/2741

문제

N 찍기

문제
자연수 N이 주어졌을 때, 1부터 N까지 한 줄에 하나씩 출력하는 프로그램을 작성하시오.

입력
첫째 줄에 100,000보다 작거나 같은 자연수 N이 주어진다.

출력
첫째 줄부터 N번째 줄 까지 차례대로 출력한다.

예제 입력 1
5

예제 출력 1
1
2
3
4
5

해답

const fs = require("fs");

const inputData = +fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

let result = "";

for (let i = 1; i <= inputData; i++) {
  result += `${i}\n`;
}

console.log(result);

풀이

inputData

파일 읽어오기

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 35>

readFileSync()

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

작동 시스템 구별

process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt";

process.platform

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

문자열 형식으로 변환

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData); // 5

toString()

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

숫자 형식으로 변환

const inputData = +fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData); // 5

+

String 형식으로 출력된 값을 + 을 통해 문자열 형식에서 숫자 형식으로 바꿉니다.

result

결과값들을 담을 변수

let result = "";

결과값이 담길 변수 result을 선언하고, "" 즉 빈 값으로 초기화합니다.

for

for (let i = 1; i <= inputData; i++) {}

inputData 값이 예제에서 5이므로 1의 경우부터 5의 경우까지 반복합니다.

1부터 inputData 까지의 값을 출력해야하기 때문에

i값을 1로 선언하고 1부터 inputData까지 for문을 반복하게 합니다.

result에 i 값 줄바꿈하여 넣기

for (let i = 1; i <= inputData; i++) {
  result += `${i}\n`;
}
// expected output:
// 1
// 2
// 3
// 4
// 5

Templete literals

Templete literals를 통해 자연수인 i 값이 연산이 되지 않도록 문자열 형식이 되게 합니다.

더하기 할당

더하기 할당 연산자를 활용하여 \n을 통해 오른쪽 피연산자의 값인 i 값이 result으로 더해져도 다음줄에서 더해지게 합니다.

출력하기

console.log(result);
// 1
// 2
// 3
// 4
// 5

console.log()

console.log()를 통해 result 값을 출력합니다.

6. 기찍 N

https://www.acmicpc.net/problem/2742

문제

기찍 N

문제
자연수 N이 주어졌을 때, N부터 1까지 한 줄에 하나씩 출력하는 프로그램을 작성하시오.

입력
첫째 줄에 100,000보다 작거나 같은 자연수 N이 주어진다.

출력
첫째 줄부터 N번째 줄 까지 차례대로 출력한다.

예제 입력 1
5

예제 출력 1
5
4
3
2
1

해답

const fs = require("fs");

const inputData = +fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

let result = "";

for (let i = 1; i <= inputData; i++) {
  result += `${i}\n`;
}

console.log(result);

풀이

inputData

파일 읽어오기

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 35>

readFileSync()

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

작동 시스템 구별

process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt";

process.platform

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

문자열 형식으로 변환

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData); // 5

toString()

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

숫자 형식으로 변환

const inputData = +fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData); // 5

+

String 형식으로 출력된 값을 + 을 통해 문자열 형식에서 숫자 형식으로 바꿉니다.

result

결과값들을 담을 변수

let result = "";

결과값이 담길 변수 result을 선언하고, "" 즉 빈 값으로 초기화합니다.

for

for (let i = inputData; i >= 1; i--) {}

inputData 값이 예제에서 5이므로 5의 경우부터 1의 경우까지 반복합니다.

inputData부터 1까지의 값을 출력해야하기 때문에

i값을 inputData로 선언하고 inputData부터 1까지 for문을 반복하게 합니다.

result에 i 값 줄바꿈하여 넣기

for (let i = inputData; i >= 1; i--) {
  result += `${i}\n`;
}
// expected output:
// 5
// 4
// 3
// 2
// 1

Templete literals

Templete literals를 통해 자연수인 i 값이 연산이 되지 않도록 문자열 형식이 되게 합니다.

더하기 할당

더하기 할당 연산자를 활용하여 \n을 통해 오른쪽 피연산자의 값인 i 값이 result으로 더해져도 다음줄에서 더해지게 합니다.

출력하기

console.log(result);
// 5
// 4
// 3
// 2
// 1

console.log()

console.log()를 통해 result 값을 출력합니다.

7. A+B-7

https://www.acmicpc.net/problem/11021

문제

A+B-7

문제
두 정수 A와 B를 입력받은 다음, A+B를 출력하는 프로그램을 작성하시오.

입력
첫째 줄에 테스트 케이스의 개수 T가 주어진다.

각 테스트 케이스는 한 줄로 이루어져 있으며, 각 줄에 A와 B가 주어진다. (0 < A, B < 10)

출력
각 테스트 케이스마다 "Case #x: "를 출력한 다음, A+B를 출력한다. 테스트 케이스 번호는 1부터 시작한다.

예제 입력 1
5
1 1
2 3
3 4
9 8
5 2

예제 출력 1
Case #1: 2
Case #2: 5
Case #3: 7
Case #4: 17
Case #5: 7

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n");

const [count] = inputData;

for (let i = 1; i <= +count; i++) {
  const testCase = inputData[i].split(" ").map((value) => +value);
  const [a, b] = testCase;

  console.log(`Case #${i}: ${a + b}`);
}

풀이

inputData

파일 읽어오기

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 35 0a 31 20 31 0a 32 20 33 0a 33 20 34 0a 39 20 38 0a 35 20 32 0a>

readFileSync()

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

작동 시스템 구별

process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt";

process.platform

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

문자열 형식으로 변환

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData);
// 5
// 1 1
// 2 3
// 3 4
// 9 8
// 5 2

toString()

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

배열 생성

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n");

console.log(inputData); // [ '5', '1 1', '2 3', '3 4', '9 8', '5 2' ]

split()

split()을 활용하여 매개변수에 다음줄을 의미하는 "\n"를 넣어 배열을 만듭니다.

count

테스트 케이스 개수

const [count] = inputData;

console.log(count); // 5

배열 구조 분해

구조 분해 할당의 배열 구조 분해을 활용해 inputData배열의 첫 번째 인덱스에 해당하는 값 즉 inputData[0]을 변수 count에 할당합니다.

for

for (let i = 1; i <= +count; i++) {
  const testCase = inputData[i].split(" ").map((value) => +value);
  const [a, b] = testCase;

  console.log(`Case #${i}: ${a + b}`);
}

for (let i = 1; i <= +count; i++) {}

count 값이 예제에서 5이므로 1의 경우부터 5의 경우까지 반복합니다.

1부터 count 까지의 값을 출력해야하기 때문에

i값을 1로 선언하고 1부터 count까지 for문을 반복하게 합니다.

+count

count 값은 문자열 형식이기 때문에 +를 통해 숫자로 형식을 바꿔줍니다.

testCase

for (let i = 1; i <= +count; i++) {
  const testCase = inputData[i].split(" ").map((value) => +value);

  console.log(testCase);
  // [ 1, 1 ]
  // [ 2, 3 ]
  // [ 3, 4 ]
  // [ 9, 8 ]
  // [ 5, 2 ]
}

split()

const testCase = inputData[i].split(" ");

testCase내에 있는 변수들을 모두 더하는 연산을 하기 위해서 testCase 내에 있는 변수들을 모두 각각의 배열로 분해해야합니다.

split()을 활용하여 매개변수에 공백을 의미하는 " "를 넣어 배열을 만듭니다.

map()

const testCase = inputData[i].split(" ").map((value) => +value);

그 후 (value) => +value가 포함된 callback 함수를 가지는 map() 메서드를 통해 문자열 형식을 실수 형식으로 바꾸게 하여 연산이 가능하도록 합니다.

[a, b]

for (let i = 1; i <= +count; i++) {
  const testCase = inputData[i].split(" ").map((value) => +value);
  const [a, b] = testCase;

  console.log(a, b);
  // 1 1
  // 2 3
  // 3 4
  // 9 8
  // 5 2
}

배열 구조 분해

const [a, b] = testCase;

구조 분해 할당의 배열 구조 분해을 활용해 testCase배열의 변수들을 각각 a, b에 할당합니다.

출력하기

for (let i = 1; i <= +count; i++) {
  const testCase = inputData[i].split(" ").map((value) => +value);
  const [a, b] = testCase;

  console.log(`Case #${i}: ${a + b}`);
  // Case #1: 2
  // Case #2: 5
  // Case #3: 7
  // Case #4: 17
  // Case #5: 7
}

Templete literals

`Case #${i}: ${a + b}`;

Templete literals을 활용해

${i}로 하여금 i값을 반복문이 실행되는 경우마다 넣도록 합니다.

그리고 ${a + b}를 통해 연산된 값을 나타내도록 합니다.

console.log()

console.log(`Case #${i}: ${a + b}`);
// Case #1: 2
// Case #2: 5
// Case #3: 7
// Case #4: 17
// Case #5: 7

console.log() 메서드를 통해 테스트 케이스마다 Templete literals 로 이루어진 값을 출력합니다.

8. A+B-8

https://www.acmicpc.net/problem/11022

문제

A+B-8

문제
두 정수 A와 B를 입력받은 다음, A+B를 출력하는 프로그램을 작성하시오.

입력
첫째 줄에 테스트 케이스의 개수 T가 주어진다.

각 테스트 케이스는 한 줄로 이루어져 있으며, 각 줄에 A와 B가 주어진다. (0 < A, B < 10)

출력
각 테스트 케이스마다 "Case #x: A + B = C" 형식으로 출력한다. x는 테스트 케이스 번호이고 1부터 시작하며, C는 A+B이다.

예제 입력 1
5
1 1
2 3
3 4
9 8
5 2

예제 출력 1
Case #1: 1 + 1 = 2
Case #2: 2 + 3 = 5
Case #3: 3 + 4 = 7
Case #4: 9 + 8 = 17
Case #5: 5 + 2 = 7

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n");

const [count] = inputData;

for (let i = 1; i <= +count; i++) {
  const testCase = inputData[i].split(" ").map((value) => +value);
  const [a, b] = testCase;

  console.log(`Case #${i}: ${a} + ${b} = ${a + b}`);
}

풀이

inputData

파일 읽어오기

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 35 0a 31 20 31 0a 32 20 33 0a 33 20 34 0a 39 20 38 0a 35 20 32 0a>

readFileSync()

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

작동 시스템 구별

process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt";

process.platform

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

문자열 형식으로 변환

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData);
// 5
// 1 1
// 2 3
// 3 4
// 9 8
// 5 2

toString()

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

배열 생성

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n");

console.log(inputData); // [ '5', '1 1', '2 3', '3 4', '9 8', '5 2' ]

split()

split()을 활용하여 매개변수에 다음줄을 의미하는 "\n"를 넣어 배열을 만듭니다.

count

테스트 케이스 개수

const [count] = inputData;

console.log(count); // 5

배열 구조 분해

구조 분해 할당의 배열 구조 분해을 활용해 inputData배열의 첫 번째 인덱스에 해당하는 값 즉 inputData[0]을 변수 count에 할당합니다.

for

for (let i = 1; i <= +count; i++) {
  const testCase = inputData[i].split(" ").map((value) => +value);
  const [a, b] = testCase;

  console.log(`Case #${i}: ${a} + ${b} = ${a + b}`);
}

for (let i = 1; i <= +count; i++) {}

count 값이 예제에서 5이므로 1의 경우부터 5의 경우까지 반복합니다.

1부터 count 까지의 값을 출력해야하기 때문에

i값을 1로 선언하고 1부터 count까지 for문을 반복하게 합니다.

+count

count 값은 문자열 형식이기 때문에 +를 통해 숫자로 형식을 바꿔줍니다.

testCase

for (let i = 1; i <= +count; i++) {
  const testCase = inputData[i].split(" ").map((value) => +value);

  console.log(testCase);
  // [ 1, 1 ]
  // [ 2, 3 ]
  // [ 3, 4 ]
  // [ 9, 8 ]
  // [ 5, 2 ]
}

split()

const testCase = inputData[i].split(" ");

testCase내에 있는 변수들을 모두 더하는 연산을 하기 위해서 testCase 내에 있는 변수들을 모두 각각의 배열로 분해해야합니다.

split()을 활용하여 매개변수에 공백을 의미하는 " "를 넣어 배열을 만듭니다.

map()

const testCase = inputData[i].split(" ").map((value) => +value);

그 후 (value) => +value가 포함된 callback 함수를 가지는 map() 메서드를 통해 문자열 형식을 실수 형식으로 바꾸게 하여 연산이 가능하도록 합니다.

[a, b]

for (let i = 1; i <= +count; i++) {
  const testCase = inputData[i].split(" ").map((value) => +value);
  const [a, b] = testCase;

  console.log(a, b);
  // 1 1
  // 2 3
  // 3 4
  // 9 8
  // 5 2
}

배열 구조 분해

const [a, b] = testCase;

구조 분해 할당의 배열 구조 분해을 활용해 testCase배열의 변수들을 각각 a, b에 할당합니다.

출력하기

for (let i = 1; i <= +count; i++) {
  const testCase = inputData[i].split(" ").map((value) => +value);
  const [a, b] = testCase;

  console.log(`Case #${i}: ${a} + ${b} = ${a + b}`);
  // Case #1: 1 + 1 = 2
  // Case #2: 2 + 3 = 5
  // Case #3: 3 + 4 = 7
  // Case #4: 9 + 8 = 17
  // Case #5: 5 + 2 = 7
}

Templete literals

`Case #${i}: ${a} + ${b} = ${a + b}`;

Templete literals을 활용해

${i}로 하여금 i값을 반복문이 실행되는 경우마다 넣도록 합니다.

그리고 ${a}, ${b}를 통해 a, b의 값을 나타내게 하고 ${a + b}를 통해 연산된 값을 나타내도록 합니다.

console.log()

console.log(`Case #${i}: ${a} + ${b} = ${a + b}`);
// Case #1: 1 + 1 = 2
// Case #2: 2 + 3 = 5
// Case #3: 3 + 4 = 7
// Case #4: 9 + 8 = 17
// Case #5: 5 + 2 = 7

console.log() 메서드를 통해 테스트 케이스마다 Templete literals 로 이루어진 값을 출력합니다.

9. 별 찍기 - 1

https://www.acmicpc.net/problem/2438

문제

별 찍기 - 1

문제
첫째 줄에는 별 1개, 둘째 줄에는 별 2개, N번째 줄에는 별 N개를 찍는 문제

입력
첫째 줄에 N(1 ≤ N ≤ 100)이 주어진다.

출력
첫째 줄부터 N번째 줄까지 차례대로 별을 출력한다.

예제 입력 1
5

예제 출력 1
*
**
***
****
*****

해답

const fs = require("fs");

const inputData = +fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

for (let i = 1; i <= inputData; i++) {
  let stars = "";

  for (let y = 1; y <= i; y++) {
    stars += "*";
  }

  console.log(stars);
}

풀이

inputData (입력값)

파일 읽어오기

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 35>

readFileSync()

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

작동 시스템 구별

process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt";

process.platform

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

문자열 형식으로 변환

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData); // 5

toString()

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

숫자 형식으로 변환

const inputData = +fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData); // 5

+

문자열 형식이었던 inputData에 +를 붙혀 숫자 형식으로 변환합니다.

for (별이 출력되는 줄의 개수)

for (let i = 1; i <= inputData; i++) {
  let stars = "";

  for (let y = 1; y <= i; y++) {
    stars += "*";
  }

  console.log(stars);
  // *
  // **
  // ***
  // ****
  // *****
}

for (let i = 1; i <= inputData; i++) {}

별이 출력되는 줄의 수와 관련된 for문입니다.

inputData 값이 예제에서 5이므로 1의 경우부터 5의 경우까지 반복합니다.

별을 출력되는 줄이 총 5줄이기 때문에

i값을 1로 선언하고 1부터 inputData까지 for문을 반복하게 합니다.

stars (별이 담기는 변수)

for (let i = 1; i <= inputData; i++) {
  let stars = "";
}

별이 담기는 변수 stars를 빈 값으로 선언합니다.

for문이 반복되어 stars값에 추후에 어떤 값이 들어와 새로운 값이 되어도 i값이 증가하면서 "" 빈 값으로 초기화됩니다.

for (각 줄에 담기는 별의 개수)

for (let i = 1; i <= inputData; i++) {
  let stars = "";

  for (let y = 1; y <= i; y++) {
    stars += "*";
  }
}

for (let y = 1; y <= i; y++) {}

두번째 for문입니다.

각 줄에 출력되는 별의 개수에 대한 for문입니다.

더하기 할당

for (let y = 1; y <= i; y++) {
  stars += "*";
}

// expected output:
// y가 1일 경우 *
// y가 2일 경우 **
// y가 3일 경우 ***
// y가 4일 경우 ****
// y가 5일 경우 *****

더하기 할당을 활용합니다.

반복문 for문에 의하여 i값이 1이라면 *가 출력될 것이고 2라면 **가 출력될 것입니다.

출력하기

for (let i = 1; i <= inputData; i++) {
  let stars = "";

  for (let y = 1; y <= i; y++) {
    stars += "*";
  }

  console.log(stars);
  // *
  // **
  // ***
  // ****
  // *****
}

console.log()

console.log(stars);
// *
// **
// ***
// ****
// *****

console.log() 메서드를 통해 stars 변수를 출력합니다.

10. 별 찍기 - 2

https://www.acmicpc.net/problem/2439

문제

별 찍기 - 2

문제
첫째 줄에는 별 1개, 둘째 줄에는 별 2개, N번째 줄에는 별 N개를 찍는 문제

하지만, 오른쪽을 기준으로 정렬한 별(예제 참고)을 출력하시오.

입력
첫째 줄에 N(1 ≤ N ≤ 100)이 주어진다.

출력
첫째 줄부터 N번째 줄까지 차례대로 별을 출력한다.

예제 입력 1
5

예제 출력 1
    *
   **
  ***
 ****
*****

해답

const fs = require("fs");

const inputData = +fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

for (let i = 1; i <= inputData; i++) {
  let stars = "";

  for (let y = inputData - 1; y >= i; y--) {
    stars += " ";
  }

  for (let z = 1; z <= i; z++) {
    stars += "*";
  }

  console.log(stars);
}

풀이

inputData (입력값)

파일 읽어오기

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 35>

readFileSync()

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

작동 시스템 구별

process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt";

process.platform

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

문자열 형식으로 변환

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData); // 5

toString()

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

숫자 형식으로 변환

const inputData = +fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData); // 5

+

문자열 형식이었던 inputData에 +를 붙혀 숫자 형식으로 변환합니다.

for (별이 출력되는 줄의 개수)

for (let i = 1; i <= inputData; i++) {
  let stars = "";

  for (let y = inputData - 1; y >= i; y--) {
    stars += " ";
  }

  for (let z = 1; z <= i; z++) {
    stars += "*";
  }

  console.log(stars);
}

for (let i = 1; i <= inputData; i++) {}

별이 출력되는 줄의 수와 관련된 for문입니다.

inputData 값이 예제에서 5이므로 1의 경우부터 5의 경우까지 반복합니다.

별을 출력되는 줄이 총 5줄이기 때문에

i값을 1로 선언하고 1부터 inputData까지 for문을 반복하게 합니다.

stars (별이 담기는 변수)

for (let i = 1; i <= inputData; i++) {
  let stars = "";
}

별이 담기는 변수 stars를 빈 값으로 선언합니다.

for문이 반복되어 stars값에 추후에 어떤 값이 들어와 새로운 값이 되어도 i값이 증가하면서 "" 빈 값으로 초기화됩니다.

for (각 줄에 담기는 공백의 개수)

for (let i = 1; i <= inputData; i++) {
  let stars = "";

  for (let y = inputData - 1; y >= i; y--) {
    stars += " ";
  }
}

for (let y = inputData - 1; y >= i; y--) {}

두번째 for문입니다.

각 줄에 출력되는 공백의 개수에 대한 for문입니다.

더하기 할당

for (let y = inputData - 1; y >= i; y--) {
  stars += " ";
}

// expected output:
// y가 1일 경우 공백 4개
// y가 2일 경우 공백 3개
// y가 3일 경우 공백 2개
// y가 4일 경우 공백 1개
// y가 5일 경우 공백 0개

더하기 할당을 활용합니다.

공백의 개수는 inputData에서 1을 뺀 수이기 때문에 공백의 개수에 해당하는 변수로 y를 선언하고 inputData - 1로 초기화합니다. 그리고 반복문이 진행될때마다 하나씩 y값이 감소하게 합니다.

for (각 줄에 담기는 별의 개수)

for (let i = 1; i <= inputData; i++) {
  let stars = "";

  for (let y = inputData - 1; y >= i; y--) {
    stars += " ";
  }

  for (let z = 1; z <= i; z++) {
    stars += "*";
  }
}

for (let z = 1; z <= i; z++) {}

세번째 for문입니다.

각 줄에 출력되는 별의 개수에 대한 for문입니다.

더하기 할당

for (let z = 1; z <= i; z++) {
  stars += "*";
}

// expected output:
// z가 1일 경우     *
// z가 2일 경우    **
// z가 3일 경우   ***
// z가 4일 경우  ****
// z가 5일 경우 *****

더하기 할당을 활용합니다.

공백을 넣은 이후의 과정이라서 반복문 for문에 의하여 i값이 1이라면 *가 출력될 것이고 2라면 **가 출력될 것입니다.

출력하기

for (let i = 1; i <= inputData; i++) {
  let stars = "";

  for (let y = inputData - 1; y >= i; y--) {
    stars += " ";
  }

  for (let z = 1; z <= i; z++) {
    stars += "*";
  }

  console.log(stars);
}

console.log()

console.log(stars);
//     *
//    **
//   ***
//  ****
// *****

console.log() 메서드를 통해 stars 변수를 출력합니다.

11. X보다 작은 수

https://www.acmicpc.net/problem/10871

문제

X보다 작은 수

문제
정수 N개로 이루어진 수열 A와 정수 X가 주어진다. 이때, A에서 X보다 작은 수를 모두 출력하는 프로그램을 작성하시오.

입력
첫째 줄에 N과 X가 주어진다. (1 ≤ N, X ≤ 10,000)

둘째 줄에 수열 A를 이루는 정수 N개가 주어진다. 주어지는 정수는 모두 1보다 크거나 같고, 10,000보다 작거나 같은 정수이다.

출력
X보다 작은 수를 입력받은 순서대로 공백으로 구분해 출력한다. X보다 작은 수는 적어도 하나 존재한다.

예제 입력 1
10 5
1 10 4 9 2 3 8 5 7 6

예제 출력 1
1 4 2 3

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n");

const nx = inputData[0].split(" ").map((value) => +value);
const [n, x] = nx;

const a = inputData[1].split(" ").map((value) => +value);

let result = "";

for (let i = 0; i < n; i++) {
  if (a[i] < x) {
    result += `${a[i]} `;
  }
}

console.log(result);

풀이

inputData (입력값)

파일 읽어오기

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 31 30 20 35 0a 31 20 31 30 20 34 20 39 20 32 20 33 20 38 20 35 20 37 20 36>

readFileSync()

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

작동 시스템 구별

process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt";

process.platform

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

문자열 형식으로 변환

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData);
// 10 5
// 1 10 4 9 2 3 8 5 7 6

toString()

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

배열 생성

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n");

console.log(inputData); // [ '10 5', '1 10 4 9 2 3 8 5 7 6' ]

split()

split()을 활용하여 매개변수에 다음줄을 의미하는 "\n"를 넣어 배열을 만듭니다.

nx (정수 n개, 조건 x를 가지는 배열)

const nx = inputData[0].split(" ").map((value) => +value);

nx에 대한 배열 생성

const nx = inputData[0].split(" ");

console.log(nx); // [ '10', '5' ]

split()

inputData[0] 즉 inputData의 첫 번째 배열로부터 " " 공백을 매개변수로 가지는 split() 메서드를 통해 배열을 생성합니다.

nx에 대한 배열 형식 변환

const nx = inputData[0].split(" ").map((value) => +value);

console.log(nx); // [ 10, 5 ]

map()

생성한 배열을 map() 메서드를 활용하여 callback함수 (value) => +value)를 통해 문자열이였던 형식을 숫자 형식으로 바꿔줍니다.

n, x (정수 n개, 조건 x)

const nx = inputData[0].split(" ").map((value) => +value);
const [n, x] = nx;

배열 nx를 n, x에 할당

const [n, x] = nx;

console.log(n, x); // 10, 5

배열 구조 분해

구조 분해 할당에서 배열 구조 분해를 통해 nx로부터 n, x에 값을 할당합니다.

a (n개로 이루어진 수열 a)

const a = inputData[1].split(" ").map((value) => +value);

수열 a에 대한 배열 생성

const a = inputData[1].split(" ");

console.log(a);
// [
//   '1', '10', '4',
//   '9', '2',  '3',
//   '8', '5',  '7',
//   '6'
// ]

split()

inputData[1] 즉 inputData의 두 번째 배열로부터 매개변수 " "을 포함한 split() 메서드를 통해 배열을 생성합니다.

a에 대한 배열 형식 변환

const a = inputData[1].split(" ").map((value) => +value);

console.log(a);
// [
//   1, 10, 4, 9, 2,
//   3,  8, 5, 7, 6
// ]

map()

생성한 배열을 map() 메서드를 활용하여 callback함수 (value) => +value)를 통해 문자열이였던 형식을 숫자 형식으로 바꿔줍니다.

result (x보다 작은 수를 담는 변수)

let result = "";

x보다 작은 수를 담는 변수 result를 let 명령문으로 선언하여 초기화가 가능하게끔 합니다.

for (a 수열 내 배열 각각에 대한 반복문)

for (let i = 0; i < n; i++) {
  if (a[i] < x) {
    result += `${a[i]} `;
  }
}

n 값이 예제에서 10이므로 0의 경우부터 9의 경우까지 반복합니다.

i값을 0으로 선언하고 0부터 9인 n까지 for문을 반복하게 합니다.

a[i]가 x 보다 작은 경우 선별

if (a[i] < x) {
  result += `${a[i]} `;
}

if...else

if (a[i] < x) {
}

수열 a[i]의 값이 x보다 작은 값들을 선별해야합니다.

if...else문을 활용해서 a[i] < x인 조건을 만족하는 값들만 다음 내부에 오는 연산을 수행하도록 합니다.

더하기 할당

if (a[i] < x) {
  result += `${a[i]} `;
}
// expected output: 1 4 2 3

더하기 할당을 활용해 if...else문을 통과한 수들을 result += `${a[i]} `를 통해 result값에 할당하도록 합니다.

결과값 출력하기

console.log(result); // 1 4 2 3

console.log()

console.log() 메서드를 통해 결과값을 출력합니다.

12. A+B-5

https://www.acmicpc.net/problem/10952

문제

A+B-5

문제
두 정수 A와 B를 입력받은 다음, A+B를 출력하는 프로그램을 작성하시오.

입력
입력은 여러 개의 테스트 케이스로 이루어져 있다.

각 테스트 케이스는 한 줄로 이루어져 있으며, 각 줄에 A와 B가 주어진다. (0 < A, B < 10)

입력의 마지막에는 0 두 개가 들어온다.

출력
각 테스트 케이스마다 A+B를 출력한다.

예제 입력 1
1 1
2 3
3 4
9 8
5 2
0 0

예제 출력 1
2
5
7
17
7

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .trim()
  .split("\n");

const count = inputData.length - 1;

for (let i = 0; i < count; i++) {
  const testCase = inputData[i].split(" ").map((value) => +value);

  console.log(testCase[0] + testCase[1]);
}

풀이

inputData (입력값)

파일 읽어오기

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 31 20 31 0a 32 20 33 0a 33 20 34 0a 39 20 38 0a 35 20 32 0a 30 20 30>

readFileSync()

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

작동 시스템 구별

process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt";

process.platform

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

문자열 형식으로 변환

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData);
// 1 1
// 2 3
// 3 4
// 9 8
// 5 2
// 0 0

toString()

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

공백 제거

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .trim();

console.log(inputData);
// 1 1
// 2 3
// 3 4
// 9 8
// 5 2
// 0 0

trim()

trim()을 활용하여 문자열 양 끝의 공백을 제거합니다.

배열 생성

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .trim()
  .split("\n");

console.log(inputData); // [ '1 1', '2 3', '3 4', '9 8', '5 2', '0 0' ]

split()

split()을 활용하여 매개변수에 다음줄을 의미하는 "\n"를 넣어 배열을 만듭니다.

count

const count = inputData.length - 1;

console.log(count); // 5

테스트 케이스의 개수

length

length 속성을 활용하여 inputData의 길이를 구하여 테스트 케이스의 개수를 구합니다.

입력의 마지막에는 0 두 개가 들어온다.

입력의 마지막에 0 두 개가 들어오므로 1을 빼줍니다. 그러므로 예제 입력에 따라서 count를 5로 만들어줍니다.

for (각 테스트 케이스에 대한 반복문)

for (let i = 0; i < count; i++) {
  const testCase = inputData[i].split(" ").map((value) => +value);

  console.log(testCase[0] + testCase[1]);
}

for (let i = 0; i < count; i++) {}

예제에서 count의 값은 5입니다. 마지막 입력 0 두 개를 제외하면 테스트 케이스들에 해당하는 인덱스는 0,1,2,3,4 총 5가지입니다.

이것을 활용하여 뒤에 나오는 연산을 진행합니다.

testCase

for (let i = 0; i < count; i++) {
  const testCase = inputData[i].split(" ").map((value) => +value);
}

각각의 테스트 케이스들을 의미하는 testCase라는 변수를 생성하고 이하에 나오는 과정을 testCase라는 변수에 정의합니다.

split() (각 testCase에 대한 배열 생성)

for (let i = 0; i < count; i++) {
  const testCase = inputData[i].split(" ");

  console.log(testCase);
  // [ '1', '1' ]
  // [ '2', '3' ]
  // [ '3', '4' ]
  // [ '9', '8' ]
  // [ '5', '2' ]
}

// i = 0 의 경우 [ '1', '1' ]
// i = 1 의 경우 [ '2', '3' ]
// i = 2 의 경우 [ '3', '4' ]
// i = 3 의 경우 [ '9', '8' ]
// i = 4 의 경우 [ '5', '2' ]

testCase라는 변수에 inputData[i] 즉 inputData의 각 인덱스로부터 " " 즉 공백을 매개변수로 가지는 split() 메서드를 통해 각 테스트 케이스에 대한 배열을 생성합니다.

map() (각 testCase에 대한 배열의 형식 변환)

for (let i = 0; i < count; i++) {
  const testCase = inputData[i].split(" ").map((value) => +value);

  console.log(testCase);
  //  [ 1, 1 ]
  //  [ 2, 3 ]
  //  [ 3, 4 ]
  //  [ 9, 8 ]
  //  [ 5, 2 ]
}
// i = 0 의 경우 [ 1, 1 ]
// i = 1 의 경우 [ 2, 3 ]
// i = 2 의 경우 [ 3, 4 ]
// i = 3 의 경우 [ 9, 8 ]
// i = 4 의 경우 [ 5, 2 ]

생성한 배열을 map() 메서드를 활용하여 callback함수 (value) => +value)를 통해 문자열이였던 형식을 숫자 형식으로 바꿔줍니다.

결과값 출력하기

console.log(testCase[0] + testCase[1]);
// 2
// 5
// 7
// 17
// 7

console.log()

console.log() 메서드를 통해 testCase[0] + testCase[1] 즉 testCase의 인덱스 0과 1의 값을 합한 결과값을 출력합니다.

13. A+B-4

https://www.acmicpc.net/problem/10951

문제

A+B-4

문제
두 정수 A와 B를 입력받은 다음, A+B를 출력하는 프로그램을 작성하시오.

입력
입력은 여러 개의 테스트 케이스로 이루어져 있다.

각 테스트 케이스는 한 줄로 이루어져 있으며, 각 줄에 A와 B가 주어진다. (0 < A, B < 10)

출력
각 테스트 케이스마다 A+B를 출력한다.

예제 입력 1
1 1
2 3
3 4
9 8
5 2

예제 출력 1
2
5
7
17
7

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .trim()
  .split("\n");

const count = inputData.length;

for (let i = 0; i < count; i++) {
  const testCase = inputData[i].split(" ").map((value) => +value);

  console.log(testCase[0] + testCase[1]);
}

풀이

inputData (입력값)

파일 읽어오기

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 31 20 31 0a 32 20 33 0a 33 20 34 0a 39 20 38 0a 35 20 32>

readFileSync()

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

작동 시스템 구별

process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt";

process.platform

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

문자열 형식으로 변환

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData);
// 1 1
// 2 3
// 3 4
// 9 8
// 5 2

toString()

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

공백 제거

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .trim();

console.log(inputData);
// 1 1
// 2 3
// 3 4
// 9 8
// 5 2

trim()

trim()을 활용하여 문자열 양 끝의 공백을 제거합니다.

배열 생성

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .trim()
  .split("\n");

console.log(inputData); // [ '1 1', '2 3', '3 4', '9 8', '5 2' ]

split()

split()을 활용하여 매개변수에 다음줄을 의미하는 "\n"를 넣어 배열을 만듭니다.

count

const count = inputData.length;

console.log(count); // 5

테스트 케이스의 개수

length

length 속성을 활용하여 inputData의 길이를 구하여 테스트 케이스의 개수를 구합니다.

for (각 테스트 케이스에 대한 반복문)

for (let i = 0; i < count; i++) {
  const testCase = inputData[i].split(" ").map((value) => +value);

  console.log(testCase[0] + testCase[1]);
}

for (let i = 0; i < count; i++) {}

count의 값은 5입니다. 테스트 케이스들에 해당하는 인덱스는 0,1,2,3,4 총 5가지입니다.

이것을 활용하여 뒤에 나오는 연산을 진행합니다.

testCase

for (let i = 0; i < count; i++) {
  const testCase = inputData[i].split(" ").map((value) => +value);
}

각각의 테스트 케이스들을 의미하는 testCase라는 변수를 생성하고 이하에 나오는 과정을 testCase라는 변수에 정의합니다.

split() (각 testCase에 대한 배열 생성)

for (let i = 0; i < count; i++) {
  const testCase = inputData[i].split(" ");

  console.log(testCase);
  // [ '1', '1' ]
  // [ '2', '3' ]
  // [ '3', '4' ]
  // [ '9', '8' ]
  // [ '5', '2' ]
}

// i = 0 의 경우 [ '1', '1' ]
// i = 1 의 경우 [ '2', '3' ]
// i = 2 의 경우 [ '3', '4' ]
// i = 3 의 경우 [ '9', '8' ]
// i = 4 의 경우 [ '5', '2' ]

map() (각 testCase에 대한 배열의 형식 변환)

for (let i = 0; i < count; i++) {
  const testCase = inputData[i].split(" ").map((value) => +value);

  console.log(testCase);
  //  [ 1, 1 ]
  //  [ 2, 3 ]
  //  [ 3, 4 ]
  //  [ 9, 8 ]
  //  [ 5, 2 ]
}
// i = 0 의 경우 [ 1, 1 ]
// i = 1 의 경우 [ 2, 3 ]
// i = 2 의 경우 [ 3, 4 ]
// i = 3 의 경우 [ 9, 8 ]
// i = 4 의 경우 [ 5, 2 ]

생성한 배열을 map() 메서드를 활용하여 callback함수 (value) => +value)를 통해 문자열이였던 형식을 숫자 형식으로 바꿔줍니다.

결과값 출력하기

console.log(testCase[0] + testCase[1]);
// 2
// 5
// 7
// 17
// 7

console.log()

console.log() 메서드를 통해 testCase[0] + testCase[1] 즉 testCase의 인덱스 0과 1의 값을 합한 결과값을 출력합니다.

14. 더하기 사이클

https://www.acmicpc.net/problem/1110

문제

더하기 사이클

문제
0보다 크거나 같고, 99보다 작거나 같은 정수가 주어질 때 다음과 같은 연산을 할 수 있다. 먼저 주어진 수가 10보다 작다면 앞에 0을 붙여 두 자리 수로 만들고, 각 자리의 숫자를 더한다. 그 다음, 주어진 수의 가장 오른쪽 자리 수와 앞에서 구한 합의 가장 오른쪽 자리 수를 이어 붙이면 새로운 수를 만들 수 있다. 다음 예를 보자.

26부터 시작한다. 2+6 = 8이다. 새로운 수는 68이다. 6+8 = 14이다. 새로운 수는 84이다. 8+4 = 12이다. 새로운 수는 42이다. 4+2 = 6이다. 새로운 수는 26이다.

위의 예는 4번만에 원래 수로 돌아올 수 있다. 따라서 26의 사이클의 길이는 4이다.

N이 주어졌을 때, N의 사이클의 길이를 구하는 프로그램을 작성하시오.

입력
첫째 줄에 N이 주어진다. N은 0보다 크거나 같고, 99보다 작거나 같은 정수이다.

출력
첫째 줄에 N의 사이클 길이를 출력한다.

예제 입력 1
26

예제 출력 1
4

예제 입력 2
55

예제 출력 2
3

예제 입력 3
1

예제 출력 3
60

예제 입력 4
0

예제 출력 4
1

예제 입력 5
71

예제 출력 5
12

해답

const fs = require("fs");

const inputData = +fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

let value = inputData;
let sum;
let cycle = 0;

do {
  cycle++;
  sum = Math.floor(value / 10) + (value % 10);
  value = (value % 10) * 10 + (sum % 10);
} while (inputData !== value);

console.log(cycle);

풀이

inputData (입력값)

const inputData = +fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

파일 읽어오기

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 32 36>

readFileSync()

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

작동 시스템 구별

process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt";

process.platform

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

숫자 형식으로 변환

const inputData = +fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // 26

+

+를 통해 버퍼 형식이었던 값을 숫자 형식으로 변환해줍니다.

value

let value = inputData;

console.log(value); // 26

value로 inputData 값 선언

let

inputData의 값을 value라는 변수로 let 명령문을 활용하여 선언해줍니다.

let 명령문으로 value 값은 수정 가능한 값이 됩니다.

sum

let sum;

console.log(sum); // undefined

value 값의 일의 자리와 십의 자리의 합

let

sum 변수는 value값의 십의 자리와 일의 자리를 합한 수를 담는 변수입니다.

let 명령문을 활용하여 선언해줘 sum은 수정 가능한 값이 됩니다.

cycle

let cycle = 0;

console.log(cycle); // 0

사이클의 길이

let

let 명령문을 활용하여 사이클의 길이를 의미하는 변수 cycle을 0으로 선언합니다.

초기 사이클의 값은 0이고 cycle은 수정 가능한 값이 됩니다.

do...while

do {
  cycle++;
  sum = Math.floor(value / 10) + (value % 10);
  value = (value % 10) * 10 + (sum % 10);
} while (inputData !== value);

do...while을 활용해 사이클의 값을 구합니다.

cycle++ (cycle값 1개씩 증가)

do {
  cycle++
} while ();

++

증가(++)를 통해 cycle은 과정이 한 번 시작되었기 때문에 do...while문이 시작함과 동시에 증가하게 합니다.

sum (value의 일의 자리 십의 자리 합)

do {
  cycle++;
  sum = Math.floor(value / 10) + (value % 10);
} while ();

// expected output:
// 2 + 6 = 8

Math.floor

Math.floor 함수를 통해 주어진 수 이하의 가장 큰 정수를 반환합니다.

즉 예제값 26을 value / 10의 과정을 거치면 2.6이 됩니다. 여기서 Math.floor를 통해 반환한 값은 2입니다. 값의 십의 자리를 반환하는 것입니다.

이렇게 반환한 값과 value % 10 나머지 즉 일의 자리 값, 예제로 따지면 6을 합합니다.

그리하여 sum의 값은 8이 됩니다.

value

do {
  cycle++;
  sum = Math.floor(value / 10) + (value % 10);
  value = (value % 10) * 10 + (sum % 10);
} while ();

// expected output:
// 60 + 8 = 68

value는 초기값으로 inputData를 가지는 값을 가지고 있습니다.

주어진 수의 가장 오른쪽 자리 수와 앞에서 구한 합의 가장 오른쪽 자리 수를 이어 붙이면 새로운 수를 만들 수 있다.

위 블록주석대로 (value % 10) * 10 연산을 통해 주어진 수의 가장 오른쪽 자리 수, 즉 value를 10으로 나눈 나머지를 구하고 10을 곱하고,

sum % 10 연산을 통해 합의 가장 오른쪽 자리 수, 즉 sum을 10으로 나눈 나머지를 구하여 둘을 합합니다.

합한 값을 value 값으로 초기화합니다.

while 내의 조건식

do {
  cycle++;
  sum = Math.floor(value / 10) + (value % 10);
  value = (value % 10) * 10 + (sum % 10);
} while (inputData !== value);

초기값인 inputData와 다시 초기화가 된 value 값이 일치하지 않으면 즉 true면 do...while 문을 빠져나오지 않고 계속 일치할때까지 진행하고, 일치하면 즉 false라면 빠져나옵니다.

결과값 출력하기

console.log(cycle); // 4

cycle 출력

console.log()

console.log() 메서드를 통해 cycle 값을 출력합니다.

[Nodejs][백준] 단계별로 풀어보기 - 2. 조건문

sukvvon — Thu, 7 Jul 2022 20:27:20 +0900

1. 두 수 비교하기

https://www.acmicpc.net/problem/1330

문제

두 수 비교하기

문제
두 정수 A와 B가 주어졌을 때, A와 B를 비교하는 프로그램을 작성하시오.

입력
첫째 줄에 A와 B가 주어진다. A와 B는 공백 한 칸으로 구분되어져 있다.

출력
첫째 줄에 다음 세 가지 중 하나를 출력한다.

A가 B보다 큰 경우에는 '>'를 출력한다.
A가 B보다 작은 경우에는 '<'를 출력한다.
A와 B가 같은 경우에는 '=='를 출력한다.

제한
-10,000 ≤ A, B ≤ 10,000

예제 입력 1
1 2

예제 출력 1
<

예제 입력 2
10 2

예제 출력 2
>

예제 입력 3
5 5

예제 출력 3
==

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ")
  .map((value) => +value);

const [a, b] = inputData;

function compare(a, b) {
  if (a > b) {
    return ">";
  } else if (a < b) {
    return "<";
  } else if (a == b) {
    return "==";
  }
}

console.log(compare(a, b));

풀이

inputData

readFileSync()

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 31 20 32>

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

process.platform

백준의 파일 경로는 "/dev/stdin"입니다.

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

toString()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData); // 1 2

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

split()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ");

console.log(inputData); // [ '1', '2' ]

split()를 활용하여 매개변수에 공백을 의미하는 " "를 넣어 배열을 만듭니다.

map()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ")
  .map((value) => +value);

console.log(inputData); // [ 1, 2 ]

map() 메서드의 callback 함수를 활용하여 string 형식이었던 배열의 각 값을 number 형식으로 바꿉니다.

배열 구조 분해

const [a, b] = inputData;
console.log(a); // 1
console.log(b); // 2

구조 분해 할당의 배열 구조 분해을 통해 배열 속의 a, b에 값을 할당합니다.

compare()

function compare(a, b) {
  if (a > b) {
    return ">";
  } else if (a < b) {
    return "<";
  } else if (a == b) {
    return "==";
  }
}

if...else

매개변수 a,b를 받는 함수 compare()을 생성하여 if...else를 활용하여

a가 b보다 큰 경우 ">"을,
a가 b보다 작은 경우 "<"을,
a와 b가 같은 경우 "=="을

return 명령문을 통해 반환하게 합니다.

console.log()

console.log(compare(a, b)); // <

1과 2를 대입하였을 경우 < 가 출력되고,
10, 2를 대입하였을 경우 >가 출력되고,
5, 5를 대입하였을 경우 ==가 출력되는 것을 알 수 있습니다.

2. 시험 성적

https://www.acmicpc.net/problem/9498

문제

시험 성적

문제
시험 점수를 입력받아 90 ~ 100점은 A, 80 ~ 89점은 B, 70 ~ 79점은 C, 60 ~ 69점은 D, 나머지 점수는 F를 출력하는 프로그램을 작성하시오.

입력
첫째 줄에 시험 점수가 주어진다. 시험 점수는 0보다 크거나 같고, 100보다 작거나 같은 정수이다.

출력
시험 성적을 출력한다.

예제 입력 1
100

예제 출력 1
A

해답

const fs = require("fs");

const inputData = +fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

function grade(score) {
  if (score >= 90 && score <= 100) {
    return "A";
  } else if (score >= 80 && score < 90) {
    return "B";
  } else if (score >= 70 && score < 80) {
    return "C";
  } else if (score >= 60 && score < 70) {
    return "D";
  } else {
    return "F";
  }
}

console.log(grade(inputData));

풀이

inputData

readFileSync()

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 31 30 30>

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

process.platform

백준의 파일 경로는 "/dev/stdin"입니다.

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

+

const inputData = +fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // 100

Buffer 형식으로 출력된 값을 inputData로 정의하려는 식 앞에 +를 붙여 실수 형식으로 변환합니다.

grade()

function grade(score) {
  if (score >= 90 && score <= 100) {
    return "A";
  } else if (score >= 80 && score < 90) {
    return "B";
  } else if (score >= 70 && score < 80) {
    return "C";
  } else if (score >= 60 && score < 70) {
    return "D";
  } else {
    return "F";
  }
}

if...else

매개변수 score를 받는 함수 grade()를 생성하여 if...else를 활용하여

score가 90이상 100 이하이면 "A"를,
80이상 90 미만이면 "B"를,
70이상 80 미만이면 "C"를,
60이상 70 미만이면 "D"를,
위의 조건을 충족하지 못하는 나머지의 경우 "F"를

return 명령문을 통해 반환하게 합니다.

console.log()

console.log(grade(inputData)); // A

console.log 메서드를 통해 A가 정상적으로 출력되는 것을 알 수 있습니다.

3. 윤년

https://www.acmicpc.net/problem/2753

문제

윤년

문제
연도가 주어졌을 때, 윤년이면 1, 아니면 0을 출력하는 프로그램을 작성하시오.

윤년은 연도가 4의 배수이면서, 100의 배수가 아닐 때 또는 400의 배수일 때이다.

예를 들어, 2012년은 4의 배수이면서 100의 배수가 아니라서 윤년이다. 1900년은 100의 배수이고 400의 배수는 아니기 때문에 윤년이 아니다. 하지만, 2000년은 400의 배수이기 때문에 윤년이다.

입력
첫째 줄에 연도가 주어진다. 연도는 1보다 크거나 같고, 4000보다 작거나 같은 자연수이다.

출력
첫째 줄에 윤년이면 1, 아니면 0을 출력한다.

예제 입력 1
2000

예제 출력 1
1

예제 입력 2
1999

예제 출력 2
0

해답

const fs = require("fs");

const inputData = +fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

(inputData % 4 === 0 && inputData % 100 !== 0) ||
(inputData % 4 === 0 && inputData % 400 === 0)
  ? console.log(1)
  : console.log(0);

풀이

inputData

readFileSync()

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 32 30 30 30>

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

process.platform

백준의 파일 경로는 "/dev/stdin"입니다.

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

+

const inputData = +fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // 2000

Buffer 형식으로 출력된 값을 inputData로 정의하려는 식 앞에 +를 붙여 실수 형식으로 변환합니다.

윤년

삼항연산자

if...else문으로 할 수 있지만 간단하게 표현하기 위해 삼항연산자를 활용해보았습니다.

(inputData % 4 === 0 && inputData % 100 !== 0) ||
  (inputData % 4 === 0 && inputData % 400 === 0);

윤년은 연도가 4의 배수이면서, 100의 배수가 아닐 때 또는 400의 배수일 때이다.

4의 배수이면서 100의 배수가 아닐 때이거나 4의 배수이면서 400의 배수일 때를 비교연산자와 논리연산자와 산술연산자를 활용하여 조건에 맞게 구현합니다.

console.log()

(inputData % 4 === 0 && inputData % 100 !== 0) ||
(inputData % 4 === 0 && inputData % 400 === 0)
  ? console.log(1)
  : console.log(0); // 1

console.log 메서드를 통해 2000년은 윤년이므로 1이 정상적으로 출력되는 것을 알 수 있습니다.

4. 사분면 고르기

https://www.acmicpc.net/problem/14681

문제

사분면 고르기

문제
흔한 수학 문제 중 하나는 주어진 점이 어느 사분면에 속하는지 알아내는 것이다. 사분면은 아래 그림처럼 1부터 4까지 번호를 갖는다. "Quadrant n"은 "제n사분면"이라는 뜻이다.


예를 들어, 좌표가 (12, 5)인 점 A는 x좌표와 y좌표가 모두 양수이므로 제1사분면에 속한다. 점 B는 x좌표가 음수이고 y좌표가 양수이므로 제2사분면에 속한다.

점의 좌표를 입력받아 그 점이 어느 사분면에 속하는지 알아내는 프로그램을 작성하시오. 단, x좌표와 y좌표는 모두 양수나 음수라고 가정한다.

입력
첫 줄에는 정수 x가 주어진다. (−1000 ≤ x ≤ 1000; x ≠ 0) 다음 줄에는 정수 y가 주어진다. (−1000 ≤ y ≤ 1000; y ≠ 0)

출력
점 (x, y)의 사분면 번호(1, 2, 3, 4 중 하나)를 출력한다.

예제 입력 1
12
5

예제 출력 1
1

예제 입력 2
9
-13

예제 출력 2
4

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(process.platform === "linux" ? 0 : "../../../../index.txt")
  .toString()
  .split("\n")
  .map((value) => +value);

const [a, b] = inputData;

function quadrant(a, b) {
  if (a > 0 && b > 0) {
    return 1;
  } else if (a < 0 && b > 0) {
    return 2;
  } else if (a < 0 && b < 0) {
    return 3;
  } else if (a > 0 && b < 0) {
    return 4;
  }
}

console.log(quadrant(a, b));

풀이

inputData

readFileSync()

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? 0 : "../../../../index.txt"
);

console.log(inputData); // <Buffer 31 32 0a 35>

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

process.platform

백준의 파일 경로는 "/dev/stdin"입니다. 하지만 이 문제에서만큼은 이유를 잘 모르겠지만 백준에서 런타임 에러가 납니다. 다른 분들이 하신 것을 참고해보니, "/dev/stdin" 대신에 0을 넣었더니 문제가 풀렸습니다.

process.platform이 "linux"인 경우 경로를 0으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

toString()

const inputData = fs
  .readFileSync(process.platform === "linux" ? 0 : "../../../../index.txt")
  .toString();

console.log(inputData);
// 12
// 5

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

split()

const inputData = fs
  .readFileSync(process.platform === "linux" ? 0 : "../../../../index.txt")
  .toString()
  .split("\n");

console.log(inputData); // [ '12', '5' ]

split()를 활용하여 매개변수에 다음줄을 의미하는 "\n"를 넣어 배열을 만듭니다.

map()

const inputData = fs
  .readFileSync(process.platform === "linux" ? 0 : "../../../../index.txt")
  .toString()
  .split(" ")
  .map((value) => +value);

console.log(inputData); // [ 12, 5 ]

map() 메서드의 callback 함수를 활용하여 string 형식이었던 배열의 각 값을 number 형식으로 바꿉니다.

배열 구조 분해

const [a, b] = inputData;
console.log(a); // 12
console.log(b); // 5

구조 분해 할당의 배열 구조 분해을 통해 배열 속의 a, b에 값을 할당합니다.

quadrant(a,b)

function quadrant(a, b) {
  if (a > 0 && b > 0) {
    return 1;
  } else if (a < 0 && b > 0) {
    return 2;
  } else if (a < 0 && b < 0) {
    return 3;
  } else if (a > 0 && b < 0) {
    return 4;
  }
}

사분면을 구별할 수 있는 매개변수 a, b를 요구하는 quadrant() 함수를 만듭니다.

if...else

if...else문과 비교연산자와 논리연산자을 활용하여

return

a, b가 모두 양수일 경우 1사분면을 의미하는 1을 반환하고,
a는 음수이고, b는 양수일 2사분면을 의미하는 경우 2를 반환하고,
a, b가 모두 음수일 경우 3사분면을 의미하는 3을 반환하고,
a는 양수이고, b는 음수일 경우 4사분면을 의미하는 4를 반환하게 합니다.

console.log()

console.log(quadrant(a, b)); // 1

console.log() 메서드를 통해 quadrant(a,b)를 출력하면 12, 5인 경우 1이 출력되고 9, -13일 경우 4가 출력되는 것을 알 수 있습니다.

5. 알람 시계

https://www.acmicpc.net/problem/2884

문제

알람 시계

문제
상근이는 매일 아침 알람을 듣고 일어난다. 알람을 듣고 바로 일어나면 다행이겠지만, 항상 조금만 더 자려는 마음 때문에 매일 학교를 지각하고 있다.

상근이는 모든 방법을 동원해보았지만, 조금만 더 자려는 마음은 그 어떤 것도 없앨 수가 없었다.

이런 상근이를 불쌍하게 보던, 창영이는 자신이 사용하는 방법을 추천해 주었다.

바로 "45분 일찍 알람 설정하기"이다.

이 방법은 단순하다. 원래 설정되어 있는 알람을 45분 앞서는 시간으로 바꾸는 것이다. 어차피 알람 소리를 들으면, 알람을 끄고 조금 더 잘 것이기 때문이다. 이 방법을 사용하면, 매일 아침 더 잤다는 기분을 느낄 수 있고, 학교도 지각하지 않게 된다.

현재 상근이가 설정한 알람 시각이 주어졌을 때, 창영이의 방법을 사용한다면, 이를 언제로 고쳐야 하는지 구하는 프로그램을 작성하시오.

입력
첫째 줄에 두 정수 H와 M이 주어진다. (0 ≤ H ≤ 23, 0 ≤ M ≤ 59) 그리고 이것은 현재 상근이가 설정한 놓은 알람 시간 H시 M분을 의미한다.

입력 시간은 24시간 표현을 사용한다. 24시간 표현에서 하루의 시작은 0:0(자정)이고, 끝은 23:59(다음날 자정 1분 전)이다. 시간을 나타낼 때, 불필요한 0은 사용하지 않는다.

출력
첫째 줄에 상근이가 창영이의 방법을 사용할 때, 설정해야 하는 알람 시간을 출력한다. (입력과 같은 형태로 출력하면 된다.)

예제 입력 1
10 10

예제 출력 1
9 25

예제 입력 2
0 30

예제 출력 2
23 45

예제 입력 3
23 40

예제 출력 3
22 55

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ")
  .map((value) => +value);

const [hour, minute] = inputData;

function alarm(hour, minute) {
  minute -= 45;
  if (minute < 0) {
    minute += 60;
    hour -= 1;
    if (hour < 0) {
      hour = 23;
    }
  }
  return [hour, minute];
}

const [newHour, newMinute] = alarm(hour, minute);

console.log(newHour, newMinute);

풀이

inputData

readFileSync()

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 30 20 33 30>

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

process.platform

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

toString()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData); // 0 30

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

split()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ");

console.log(inputData); // [ '0', '30' ]

split()를 활용하여 매개변수에 공백을 의미하는 " "를 넣어 배열을 만듭니다.

map()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ")
  .map((value) => +value);

console.log(inputData); // [ 0, 30 ]

map() 메서드의 callback 함수를 활용하여 string 형식이었던 배열의 각 값을 number 형식으로 바꿉니다.

배열 구조 분해

const [hours, minutes] = inputData;
console.log(a); // 0
console.log(b); // 30

구조 분해 할당의 배열 구조 분해을 통해 배열 속의 a, b에 값을 할당합니다.

alarm()

function alarm(hour, minute) {
  minute -= 45;
  if (minute < 0) {
    minute += 60;
    hour -= 1;
    if (hour < 0) {
      hour = 23;
    }
  }
  return [hour, minute];
}

사분면을 구별할 수 있는 매개변수 a, b를 요구하는 alarm() 함수를 만듭니다.

if...else

if...else문과 할당연산자를 활용하여

function alarm(hour, minute) {
  minute -= 45; // expected output: 0 -15
}

45분 일찍 알람 설정하기로 인해 minute -= 45의 과정을 거치면 결과는 0 -15가 됩니다.

function alarm(hour, minute) {
  minute -= 45;
  if (minute < 0) {
    minute += 60; // expected output: 0 45
    hour -= 1; // expected output: -1 45
  }
}

음수인 분단위는 존재하지가 않으므로 0 -15에서 minute += 60을 해줍니다. 결과값은 0 45 이 되고,

60분을 시간에서 빼서 더하였기 때문에 시간을 1만큼 빼줘 hour -= 1 를 거쳐 -1 45가 되게 합니다.

function alarm(hour, minute) {
  minute -= 45;
  if (minute < 0) {
    minute += 60;
    hour -= 1;
    if (hour < 0) {
      hour = 23; // expected output: 23 45
    }
  }
}

시간에서 0은 자정을 의미하기 때문에 만약 시간을 의미하는 매개변수 hour이 0보다 작으면 hour은 23이라고 설정해줍니다.

return

function alarm(hour, minute) {
  minute -= 45;
  if (minute < 0) {
    minute += 60;
    hour -= 1;
    if (hour < 0) {
      hour = 23;
    }
  }
  return [hour, minute];
}

if...else문을 통해서 계산된 hour과 minute를 return 명령문을 통해 배열로 반환해줍니다.

배열 구조 분해

const [newHour, nweMinute] = alarm(hour, minute);
console.log(newHour); // 23
console.log(newMinute); // 45

구조 분해 할당의 배열 구조 분해을 통해 alarm(hour, minute)을 통해 반환된 배열 [hour, minute]로부터 newHour, newMinute에 값을 할당합니다.

console.log()

console.log(newHour, newMinute); // 23 45

console.log() 메서드를 통해 newHour, newMinute을 출력하면 10 10인 경우 9 25가 출력되고 0, 30일 경우 23 45가 출력되고 23 40은 22 55가 출력되는 것을 알 수 있습니다.

6. 오븐 시계

https://www.acmicpc.net/problem/2525

문제

오븐 시계

문제
KOI 전자에서는 건강에 좋고 맛있는 훈제오리구이 요리를 간편하게 만드는 인공지능 오븐을 개발하려고 한다. 인공지능 오븐을 사용하는 방법은 적당한 양의 오리 훈제 재료를 인공지능 오븐에 넣으면 된다. 그러면 인공지능 오븐은 오븐구이가 끝나는 시간을 분 단위로 자동적으로 계산한다.

또한, KOI 전자의 인공지능 오븐 앞면에는 사용자에게 훈제오리구이 요리가 끝나는 시각을 알려 주는 디지털 시계가 있다.

훈제오리구이를 시작하는 시각과 오븐구이를 하는 데 필요한 시간이 분단위로 주어졌을 때, 오븐구이가 끝나는 시각을 계산하는 프로그램을 작성하시오.

입력
첫째 줄에는 현재 시각이 나온다. 현재 시각은 시 A (0 ≤ A ≤ 23) 와 분 B (0 ≤ B ≤ 59)가 정수로 빈칸을 사이에 두고 순서대로 주어진다. 두 번째 줄에는 요리하는 데 필요한 시간 C (0 ≤ C ≤ 1,000)가 분 단위로 주어진다.

출력
첫째 줄에 종료되는 시각의 시와 분을 공백을 사이에 두고 출력한다. (단, 시는 0부터 23까지의 정수, 분은 0부터 59까지의 정수이다. 디지털 시계는 23시 59분에서 1분이 지나면 0시 0분이 된다.)

예제 입력 1
14 30
20

예제 출력 1
14 50

예제 입력 2
17 40
80

예제 출력 2
19 0

예제 입력 3
23 48
25

예제 출력 3
0 13

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n");

const [timeData, plusMinuteData] = inputData;

const plusMinute = +plusMinuteData;

const time = timeData.split(" ").map((value) => +value);
const [hour, minute] = time;

function ovenClock(hour, minute, plusMinute) {
  minute += plusMinute;
  while (minute >= 60) {
    minute -= 60;
    hour += 1;
  }
  if (hour >= 24) {
    hour -= 24;
  }
  return [hour, minute];
}

[resultHour, resultMinute] = ovenClock(hour, minute, plusMinute);

console.log(resultHour, resultMinute);

풀이

inputData

파일 부르기

readFileSync()

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 31 37 20 34 30 0a 38 30>

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

작동 시스템 구별

process.platform

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

문자열 형식으로 변환

toString()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData);
// 17 40
// 80

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

배열 생성

split()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n");

console.log(inputData); // [ '17 40', '80' ]

split()를 활용하여 매개변수에 다음줄을 의미하는 "\n"를 넣어 배열을 만듭니다.

배열 구조 분해

const [timeData, plusMinuteData] = inputData;
console.log(timeData, plusMinuteData); // 17 40 80

구조 분해 할당의 배열 구조 분해을 통해 inputData를 배열 속의 현재 시간을 의미하는 timeData, 추가되는 시간을 의미하는 plusMinuteData에 값을 할당합니다.

plusMinute

문자열을 실수로 변한

+

const plusMinute = +plusMinuteData;
console.log(plusMinute); // 80

문자열 형식인 추가되는 시간을 의미하는 plusMinuteData를 연산을 하기 위해 실수 형태로 변환시켜줍니다.

time

const time = timeData.split(" ").map((value) => +value);
const [hour, minute] = time;

배열 생성

split()

const time = timeData.split(" ");
console.log(time); // [ '17', '40' ]

현재 시간을 의미하는 timeData에서 split() 메서드를 활용하여 공백을 의미하는 " "을 매개변수로 하여 배열을 생성합니다.

문자열 배열에서 실수 배열로 변환

map()

const time = timeData.split(" ").map((value) => +value);
console.log(time); // [ 17, 40 ]

map() 메서드의 callback 함수를 활용하여 string 형식이었던 배열의 각 값을 number 형식으로 바꿉니다.

배열 구조 분해

const [hour, minute] = time;
console.log(hour, minute); // 17 40

구조 분해 할당의 배열 구조 분해을 통해 time을 배열 속의 현재 시간의 시를 의미하는 hour, 현재 시간을 분 의미하는 minute에 값을 할당합니다.

ovenClock()

function ovenClock(hour, minute, plusMinute) {
  minute += plusMinute;
  while (minute >= 60) {
    minute -= 60;
    hour += 1;
  }
  if (hour >= 24) {
    hour -= 24;
  }
  return [hour, minute];
}

오븐 시간을 계산하며 매개변수 hour, minute, plusMinute을 요구하는 ovenClock() 함수를 만듭니다.

if...else문과, while문과 할당연산자를 활용하여

현재 시간에 추가할 시간 더하기

+=

function ovenClock(hour, minute, plusMinute) {
  minute += plusMinute; // expected output: 17 120
}

우선 현재 시간에서 추가할 시간을 더해야 하므로 minute += plusMinute의 과정을 거치면 결과는 17 120이 됩니다.

60분을 초과한 경우

while

function ovenClock(hour, minute, plusMinute) {
  minute += plusMinute;
  while (minute >= 60) {
    minute -= 60; // expected output: 60 => 0
    hour += 1; // expected output: 18 => 19
  }
}

17 120에서 while문을 만나 조건인 minute >= 60에 만족하지 않을 때까지 minute -= 60과 hour += 1을 수행합니다.

첫번째 사이클의 결과는 18 60입니다. 조건 minute >= 60에 만족하므로 한 번 더 진행합니다.

두번째 사이클의 결과는 19 0입니다. 조건 minute >= 60에 만족하지 않으므로 while문을 빠져나옵니다.

24시를 초과한 경우

if...else

function ovenClock(hour, minute, plusMinute) {
  minute += plusMinute;
  while (minute >= 60) {
    minute -= 60;
    hour += 1;
  }
  if (hour >= 24) {
    hour -= 24; // expected output: 19
  }
}

만약 시가 24를 초과하여 25, 26과 같이 될 경우를 대비하여

hour >= 24 조건을 만족시킨다면 hour -= 24를 통해 24시간을 빼줍니다.

return

function ovenClock(hour, minute, plusMinute) {
  minute += plusMinute;
  while (minute >= 60) {
    minute -= 60;
    hour += 1;
  }
  if (hour >= 24) {
    hour -= 24;
  }
  return [hour, minute];
}

위의 과정들을 통해 계산된 hour과 minute를 return 명령문을 통해 배열로 반환해줍니다.

배열 구조 분해

[resultHour, resultMinute] = ovenClock(hour, minute, plusMinute);
console.log(resultHour); // 19
console.log(resultMinute); // 0

구조 분해 할당의 배열 구조 분해을 통해 ovenClock(hour, minute, plusMinute)을 통해 반환된 배열 [hour, minute]로부터 resultHour, resultMinute에 값을 할당합니다.

결과 출력

console.log()

console.log(resultHour, resultMinute); // 19 0

console.log() 메서드를 통해 resultHour, resultMinute을 출력하면 14 30 그리고 20인 경우 14 50이 출력되고 17 40 그리고 80인 경우 19 0이 출력되고 23 48 그리고 25인 경우 0 13이 출력되는 것을 알 수 있습니다.

7. 주사위 세개

https://www.acmicpc.net/problem/2480

문제

주사위 세개

문제
1에서부터 6까지의 눈을 가진 3개의 주사위를 던져서 다음과 같은 규칙에 따라 상금을 받는 게임이 있다.

같은 눈이 3개가 나오면 10,000원+(같은 눈)×1,000원의 상금을 받게 된다.
같은 눈이 2개만 나오는 경우에는 1,000원+(같은 눈)×100원의 상금을 받게 된다.
모두 다른 눈이 나오는 경우에는 (그 중 가장 큰 눈)×100원의 상금을 받게 된다.
예를 들어, 3개의 눈 3, 3, 6이 주어지면 상금은 1,000+3×100으로 계산되어 1,300원을 받게 된다. 또 3개의 눈이 2, 2, 2로 주어지면 10,000+2×1,000 으로 계산되어 12,000원을 받게 된다. 3개의 눈이 6, 2, 5로 주어지면 그중 가장 큰 값이 6이므로 6×100으로 계산되어 600원을 상금으로 받게 된다.

3개 주사위의 나온 눈이 주어질 때, 상금을 계산하는 프로그램을 작성 하시오.

입력
첫째 줄에 3개의 눈이 빈칸을 사이에 두고 각각 주어진다.

출력
첫째 줄에 게임의 상금을 출력 한다.

예제 입력 1
3 3 6

예제 출력 1
1300

예제 입력 2
2 2 2

예제 출력 2
12000

예제 입력 3
6 2 5

예제 출력 3
600

해답

const fs = require("fs");

const inputdata = fs
  .readfilesync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ")
  .map((value) => +value);

const [a, b, c] = inputData;

function threeDice(first, second, third) {
  function twoSameDice(first, second, third) {
    if (first === second && first !== third) {
      return first;
    } else if (first === third && first !== second) {
      return first;
    } else if (second === third && second !== first) {
      return second;
    }
  }

  function theBiggestDice(first, second, third) {
    if (
      (first > second && second > third) ||
      (first > third && third > second)
    ) {
      return first;
    } else if (
      (second > first && first > third) ||
      (second > third && third > first)
    ) {
      return second;
    } else if (
      (third > first && first > second) ||
      (third > second && second > first)
    ) {
      return third;
    }
  }

  if (first === second && first === third && second === third) {
    return 10000 + first * 1000;
  } else if (first === second || first === third || second === third) {
    return 1000 + twoSameDice(first, second, third) * 100;
  } else if (first !== second && first !== third && second !== third) {
    return theBiggestDice(first, second, third) * 100;
  }
}

console.log(threeDice(a, b, c));

풀이

inputData

파일 읽어오기

readFileSync()

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 36 20 32 20 35>

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

작동 시스템 구별

process.platform

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

문자열 형식으로 변환

toString()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData); // 6 2 5

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

배열 생성

split()

first

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ");

console.log(inputData); // [ '6', '2`, '5' ]

split()를 활용하여 매개변수에 공백을 의미하는 " "를 넣어 배열을 만듭니다.

문자열 배열에서 실수 배열로 변환

map()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ")
  .map((value) => +value);

console.log(inputData); // [ 6, 2, 5 ]

map() 메서드의 callback 함수를 활용하여 string 형식이었던 배열의 각 값을 number 형식으로 바꿉니다.

배열 구조 분해

const [a, b, c] = inputData;
console.log(a, b, c); // 6 2 5

구조 분해 할당의 배열 구조 분해을 통해 inputData를 각각 세 숫자를 의미하는 a, b, c에 할당합니다.

threeDice()

function threeDice(first, second, third) {
  function twoSameDice(first, second, third) {
    if (first === second && first !== third) {
      return first;
    } else if (first === third && first !== second) {
      return first;
    } else if (second === third && second !== first) {
      return second;
    }
  }

  function theBiggestDice(first, second, third) {
    if (
      (first > second && second > third) ||
      (first > third && third > second)
    ) {
      return first;
    } else if (
      (second > first && first > third) ||
      (second > third && third > first)
    ) {
      return second;
    } else if (
      (third > first && first > second) ||
      (third > second && second > first)
    ) {
      return third;
    }
  }

  if (first === second && first === third && second === third) {
    return 10000 + first * 1000;
  } else if (first === second || first === third || second === third) {
    return 1000 + twoSameDice(first, second, third) * 100;
  } else if (first !== second && first !== third && second !== third) {
    return theBiggestDice(first, second, third) * 100;
  }
}

같은 눈이 3개가 나오면 10,000원+(같은 눈)×1,000원의 상금을 받게 된다.

같은 눈이 2개만 나오는 경우에는 1,000원+(같은 눈)×100원의 상금을 받게 된다.

모두 다른 눈이 나오는 경우에는 (그 중 가장 큰 눈)×100원의 상금을 받게 된다.

세 주사위를 의미하는 매개변수 first, second, third를 요구하는 threeDice() 함수를 만듭니다.

그리고 매개변수 first, second, third를 요구하며 같은 눈이 2개만 나오는 경우를 위해 두 눈만 같은 주사위일때 그 눈의 값을 얻는 함수와, 모두 다른 눈이 나오는 경우일 때 제일 큰 눈의 주사위 값을 얻는 함수를 만듭니다.

두 눈만 같은 주사위 값 구하기

twoSameDice()

function twoSameDice(first, second, third) {
  if (first === second && first !== third) {
    return first;
  } else if (first === third && first !== second) {
    return first;
  } else if (second === third && second !== first) {
    return second;
  }
}

두 눈만 같은 주사위 값을 얻어야하므로 if...else문과 return 명령문을 활용하여

1번 다이스와 2번 다이스와 같은 수이면서, 1번 다이스는 3번 다이스와 다른 수이면 1번 다이스 반환

같은 다이스이기 떄문에 1번과 2번, 둘 중에 뭘 반환하든 상관이 없다.
1번 다이스와 3번 다이스와 같은 수이면서, 1번 다이스는 2번 다이스와 다른 수이면 1번 다이스 반환
2번 다이스와 3번 다이스와 같은 수이면서, 2번 다이스는 1번 다이스와 다른 수이면 2번 다이스 반환

위 세 가지 조건을 가지는 함수를 만듭니다.

제일 큰 수의 주사위 값 구하기

theBiggestDice()

function theBiggestDice(first, second, third) {
  if ((first > second && second > third) || (first > third && third > second)) {
    return first;
  } else if (
    (second > first && first > third) ||
    (second > third && third > first)
  ) {
    return second;
  } else if (
    (third > first && first > second) ||
    (third > second && second > first)
  ) {
    return third;
  }
}

제일 큰 수의 주사위 값을 얻어야 하므로 if...else문과 return 명령문을 활용하여

1번 다이스의 수 > 2번 다이스 수 > 3번 다이스 수 혹은 1번 다이스의 수 > 3번 다이스 수 > 2번 다이스 수의 경우 1번 다이스 수 반환
2번 다이스의 수 > 1번 다이스 수 > 3번 다이스 수 혹은 2번 다이스의 수 > 3번 다이스 수 > 1번 다이스 수의 경우 2번 다이스 수 반환
3번 다이스의 수 > 2번 다이스 수 > 1번 다이스 수 혹은 3번 다이스의 수 > 1번 다이스 수 > 2번 다이스 수의 경우 3번 다이스 수 반환

위 세 가지 조건을 가지는 함수를 만듭니다.

상금 계산

if (first === second && first === third && second === third) {
  return 10000 + first * 1000;
} else if (first === second || first === third || second === third) {
  return 1000 + twoSameDice(first, second, third) * 100;
} else if (first !== second && first !== third && second !== third) {
  return theBiggestDice(first, second, third) * 100;
}

같은 눈이 3개가 나오면 10,000원+(같은 눈)×1,000원의 상금을 받게 된다.

같은 눈이 2개만 나오는 경우에는 1,000원+(같은 눈)×100원의 상금을 받게 된다.

모두 다른 눈이 나오는 경우에는 (그 중 가장 큰 눈)×100원의 상금을 받게 된다.

세 주사위 수가 모두 같은 경우

if (first === second && first === third && second === third) {
  return 10000 + first * 1000;
}

주사위 수들이 모두 같은 경우 10000 + first * 1000 을 반환합니다.

두 수의 주사위 수만 같은 경우

else if (first === second || first === third || second === third) {
  return 1000 + twoSameDice(first, second, third) * 100;
}

두 수의 주사위만 같은 경우 1000 + twoSameDice(first, second, third) * 100를 반환합니다.

모든 주사위 수가 다른 경우

else if (first !== second && first !== third && second !== third) {
  return theBiggestDice(first, second, third) * 100;
}

모든 주사위 수가 다른 경우 theBiggestDice(first, second, third) * 100를 반환합니다.

결과 출력

console.log()

console.log(threeDice(a, b, c)); // 600

console.log() 메서드를 통해 threeDice(a, b, c)를 출력하면 3 3 6일 경우 1300이 출력되고, 2 2 2인 경우 12000이 출력되고 6 2 5인 경우 600이 출력되는 것을 알 수 있습니다.

[Nodejs][백준] 단계별로 풀어보기 - 1. 입출력과 사칙연산

sukvvon — Sun, 3 Jul 2022 09:21:21 +0900

1. Hello World

https://www.acmicpc.net/problem/2557

Hello World

문제
Hello World!를 출력하시오.

입력
없음

출력
Hello World!를 출력하시오.

예제 입력 1

예제 출력 1
Hello World!

해답

console.log("Hello World!");

웹 콘솔에 메세지를 출력하는 console.log()을 활용하여 풀 수 있습니다.

2. We love Kriii

https://www.acmicpc.net/problem/10718

We love kriii

문제
ACM-ICPC 인터넷 예선, Regional, 그리고 World Finals까지 이미 2회씩 진출해버린 kriii는 미련을 버리지 못하고 왠지 모르게 올해에도 파주 World Finals 준비 캠프에 참여했다.

대회를 뜰 줄 모르는 지박령 kriii를 위해서 격려의 문구를 출력해주자.

입력
본 문제는 입력이 없다.

출력
두 줄에 걸쳐 "강한친구 대한육군"을 한 줄에 한 번씩 출력한다.

예제 입력 1

예제 출력 1
강한친구 대한육군
강한친구 대한육군

해답

for (let i = 0; i <= 1; i++) {
  console.log("강한친구 대한육군");
}

console.log()의 개념을 알면 풀 수 있는 문제입니다.

console.log("강한친구 대한육군")을 두 번 출력하여 문제를 해결할 수 있지만 for문을 활용하여 해결해보았습니다.

3. 고양이

https://www.acmicpc.net/problem/10171

고양이

문제
아래 예제와 같이 고양이를 출력하시오.

입력
없음.

출력
고양이를 출력한다.

예제 입력 1

예제 출력 1
\    /\
 )  ( ')
(  /  )
 \(__)|

해답

console.log(`\\    /\\
 )  ( ')
(  /  )
 \\(__)|`);

Template literals 즉 백틱키를 활용하여 출력을 해주는데 특정 문자를 나타내야하므로 이스케이프 시퀀스를 활용하여 코드를 작성합니다.

종류	내용
\n	return
\'	`'` 표시
\"	`"` 표시
\\	`\` 표시

4. 개

https://www.acmicpc.net/problem/10172

개

문제
아래 예제와 같이 개를 출력하시오.

입력
없음.

출력
개를 출력한다.

예제 입력 1

예제 출력 1
|\_/|
|q p|   /}
( 0 )"""\
|"^"`    |
||_/=\\__|

해답

console.log(`|\\_/|
|q p|   /}
( 0 )\"\"\"\\
|\"^"\`    |
||_/=\\\\__|`);

Template literals 즉 백틱키를 활용하여 출력을 해주는데 특정 문자를 나타내야하므로 이스케이프 시퀀스를 활용하여 코드를 작성합니다.

종류	내용
\n	return
\'	`'` 표시
\"	`"` 표시
\\	`\` 표시

5. A+B

https://www.acmicpc.net/problem/1000

문제

A+B

문제
두 정수 A와 B를 입력받은 다음, A+B를 출력하는 프로그램을 작성하시오.

입력
첫째 줄에 A와 B가 주어진다. (0 < A, B < 10)

출력
첫째 줄에 A+B를 출력한다.

예제 입력 1
1 2

예제 출력 1
3

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ")
  .map((value) => +value);

const [a, b] = inputData;

console.log(a + b);

풀이

readFileSync()

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 31 20 32>

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

process.platform

백준의 파일 경로는 "/dev/stdin"입니다.

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

toString()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData); // 1 2

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

split()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ");

console.log(inputData); // [ '1', '2' ]

split()를 활용하여 매개변수에 공백을 의미하는 " "를 넣어 배열을 만듭니다.

map()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ")
  .map((value) => +value);

console.log(inputData); // [ 1, 2 ]

map() 메서드의 callback 함수를 활용하여 string 형식이었던 배열의 각 값을 number 형식으로 바꿉니다.

배열 구조 분해

const [a, b] = inputData;
console.log(a); // 1
console.log(b); // 2

구조 분해 할당의 배열 구조 분해을 통해 배열 속의 a, b에 값을 할당합니다.

console.log(a + b); //3

그 후 a와 b의 값을 더하여 최종적으로 출력값이 요구하는대로 나오는 것을 알 수 있습니다.

6. A-B

https://www.acmicpc.net/problem/1001

문제

A-B

문제
두 정수 A와 B를 입력받은 다음, A-B를 출력하는 프로그램을 작성하시오.

입력
첫째 줄에 A와 B가 주어진다. (0 < A, B < 10)

출력
첫째 줄에 A-B를 출력한다.

예제 입력 1
3 2

예제 출력 1
1

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ")
  .map((value) => +value);

const [a, b] = inputData;

console.log(a - b);

풀이

readFileSync()

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 33 20 32>

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

process.platform

백준의 파일 경로는 "/dev/stdin"입니다.

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

toString()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData); // 3 2

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

split()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ");

console.log(inputData); // [ '3', '2' ]

split()를 활용하여 매개변수에 공백을 의미하는 " "를 넣어 배열을 만듭니다.

map()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ")
  .map((value) => +value);

console.log(inputData); // [ 3, 2 ]

map() 메서드의 callback 함수를 활용하여 string 형식이었던 배열의 각 값을 number 형식으로 바꿉니다.

배열 구조 분해

const [a, b] = inputData;
console.log(a); // 3
console.log(b); // 2

구조 분해 할당의 배열 구조 분해을 통해 배열 속의 a, b에 값을 할당합니다.

console.log(a - b); // 1

그 후 a와 b의 값을 빼 최종적으로 출력값이 요구하는대로 나오는 것을 알 수 있습니다.

7. AxB

https://www.acmicpc.net/problem/10998

문제

AxB

문제
두 정수 A와 B를 입력받은 다음, A×B를 출력하는 프로그램을 작성하시오.

입력
첫째 줄에 A와 B가 주어진다. (0 < A, B < 10)

출력
첫째 줄에 A×B를 출력한다.

예제 입력 1
1 2

예제 출력 1
2

예제 입력 2
3 4

예제 출력 2
12

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ")
  .map((value) => +value);

const [a, b] = inputData;

console.log(a * b);

풀이

readFileSync()

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 33 20 34>

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

process.platform

백준의 파일 경로는 "/dev/stdin"입니다.

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

toString()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData); // 3 4

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

split()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ");

console.log(inputData); // [ '3', '4' ]

split()를 활용하여 매개변수에 공백을 의미하는 " "를 넣어 배열을 만듭니다.

map()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ")
  .map((value) => +value);

console.log(inputData); // [ 3, 4 ]

map() 메서드의 callback 함수를 활용하여 string 형식이었던 배열의 각 값을 number 형식으로 바꿉니다.

배열 구조 분해

const [a, b] = inputData;
console.log(a); // 3
console.log(b); // 4

구조 분해 할당의 배열 구조 분해을 통해 배열 속의 a, b에 값을 할당합니다.

console.log(a * b); // 12

그 후 a와 b의 값을 곱해 최종적으로 출력값이 요구하는대로 나오는 것을 알 수 있습니다.

8. A/B

https://www.acmicpc.net/problem/1008

문제

A/B

문제
두 정수 A와 B를 입력받은 다음, A/B를 출력하는 프로그램을 작성하시오.

입력
첫째 줄에 A와 B가 주어진다. (0 < A, B < 10)

출력
첫째 줄에 A/B를 출력한다. 실제 정답과 출력값의 절대오차 또는 상대오차가 10-9 이하이면 정답이다.

예제 입력 1
1 3

예제 출력 1
0.33333333333333333333333333333333

10-9 이하의 오차를 허용한다는 말은 꼭 소수 9번째 자리까지만 출력하라는 뜻이 아니다.

예제 입력 2
4 5

예제 출력 2
0.8

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ")
  .map((value) => +value);

const [a, b] = inputData;

console.log(a / b);

풀이

readFileSync()

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 31 20 33>

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

process.platform

백준의 파일 경로는 "/dev/stdin"입니다.

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

toString()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData); // 1 3

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

split()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ");

console.log(inputData); // [ '1', '3' ]

split()를 활용하여 매개변수에 공백을 의미하는 " "를 넣어 배열을 만듭니다.

map()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ")
  .map((value) => +value);

console.log(inputData); // [ 1, 3 ]

map() 메서드의 callback 함수를 활용하여 string 형식이었던 배열의 각 값을 number 형식으로 바꿉니다.

배열 구조 분해

const [a, b] = inputData;
console.log(a); // 1
console.log(b); // 3

구조 분해 할당의 배열 구조 분해을 통해 배열 속의 a, b에 값을 할당합니다.

console.log(a / b); // 0.3333333333333333

그 후 a와 b의 값을 나누어 최종적으로 출력값이 요구하는대로 나오는 것을 알 수 있습니다.

9. 사칙연산

https://www.acmicpc.net/problem/10869

문제

사칙연산

문제
두 자연수 A와 B가 주어진다. 이때, A+B, A-B, A*B, A/B(몫), A%B(나머지)를 출력하는 프로그램을 작성하시오.

입력
두 자연수 A와 B가 주어진다. (1 ≤ A, B ≤ 10,000)

출력
첫째 줄에 A+B, 둘째 줄에 A-B, 셋째 줄에 A*B, 넷째 줄에 A/B, 다섯째 줄에 A%B를 출력한다.

예제 입력 1
7 3

예제 출력 1
10
4
21
2
1

해답

const fs = require("fs");
const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ")
  .map((value) => +value);

const [a, b] = inputData;

console.log(`${a + b}
${a - b}
${a * b}
${parseInt(a / b)}
${a % b}`);

풀이

readFileSync()

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 37 20 33>

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

process.platform

백준의 파일 경로는 "/dev/stdin"입니다.

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

toString()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData); // 7 3

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

split()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ");

console.log(inputData); // [ '7', '3' ]

split()를 활용하여 매개변수에 공백을 의미하는 " "를 넣어 배열을 만듭니다.

map()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ")
  .map((value) => +value);

console.log(inputData); // [ 7, 3 ]

map() 메서드의 callback 함수를 활용하여 string 형식이었던 배열의 각 값을 number 형식으로 바꿉니다.

배열 구조 분해

const [a, b] = inputData;
console.log(a); // 7
console.log(b); // 3

구조 분해 할당의 배열 구조 분해을 통해 배열 속의 a, b에 값을 할당합니다.

Template literals

console.log(`${a + b}
${a - b}
${a * b}
${parseInt(a / b)}
${a % b}`);
// 10
// 4
// 21
// 2
// 1

Template literals의 Multi-line strings와 Expression interpolation(표현식 삽입법)으로 문제에서 요구한 사칙연산을 간편하게 표현합니다.

parseInt()

a/b에는 parseInt() 함수를 사용하여 실수인 값을 정수로 반환합니다.

최종적으로 출력값이 요구하는대로 나오는 것을 알 수 있습니다.

10. ??!

https://www.acmicpc.net/problem/10926

문제

??!

문제
준하는 사이트에 회원가입을 하다가 joonas라는 아이디가 이미 존재하는 것을 보고 놀랐다. 준하는 놀람을 ??!로 표현한다. 준하가 가입하려고 하는 사이트에 이미 존재하는 아이디가 주어졌을 때, 놀람을 표현하는 프로그램을 작성하시오.

입력
첫째 줄에 준하가 가입하려고 하는 사이트에 이미 존재하는 아이디가 주어진다. 아이디는 알파벳 소문자로만 이루어져 있으며, 길이는 50자를 넘지 않는다.

출력
첫째 줄에 준하의 놀람을 출력한다. 놀람은 아이디 뒤에 ??!를 붙여서 나타낸다.

예제 입력 1
joonas

예제 출력 1
joonas??!

예제 입력 2
baekjoon

예제 출력 2
baekjoon??!

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .trim();

console.log(`${inputData}??!`);

풀이

readFileSync()

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 62 61 65 6b 6a 6f 6f 6e>

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

process.platform

백준의 파일 경로는 "/dev/stdin"입니다.

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

toString()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData); // baekjoon

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

trim()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .trim();

console.log(inputData); // baekjoon

trim() 메서드를 통해 공백 존재 유무를 고려하여 문자열 양 끝 공백을 제거하도록 합니다.

Template literals

console.log(`${inputData}??!`); // baekjoon??!

그 후 Template literals의 Expression interpolation(표현식 삽입법)으로 inputData값에 ??!를 이어 적어 출력합니다.

11. 1998년생인 내가 태국에서는 2541년생?!

https://www.acmicpc.net/problem/18108

문제

1998년생인 내가 태국에서는 2541년생?!

문제
ICPC Bangkok Regional에 참가하기 위해 수완나품 국제공항에 막 도착한 팀 레드시프트 일행은 눈을 믿을 수 없었다. 공항의 대형 스크린에 올해가 2562년이라고 적혀 있던 것이었다.

불교 국가인 태국은 불멸기원(佛滅紀元), 즉 석가모니가 열반한 해를 기준으로 연도를 세는 불기를 사용한다. 반면, 우리나라는 서기 연도를 사용하고 있다. 불기 연도가 주어질 때 이를 서기 연도로 바꿔 주는 프로그램을 작성하시오.

입력
서기 연도를 알아보고 싶은 불기 연도 y가 주어진다. (1000 ≤ y ≤ 3000)

출력
불기 연도를 서기 연도로 변환한 결과를 출력한다.

예제 입력 1
2541

예제 출력 1
1998

해답

const fs = require("fs");

const inputData = +fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData - 543);

풀이

readFileSync()

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 32 35 34 31>

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

process.platform

백준의 파일 경로는 "/dev/stdin"입니다.

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

+

const inputData = +fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // 2541

Buffer 형식으로 출력된 값을 inputData로 정의하려는 식 앞에 +를 붙여 실수 형식으로 변환하여 불멸기원을 구합니다.

console.log(inputData - 543); // 1998

그리고 543을 뺄셈해 서기 연도를 출력합니다.

12. 나머지

https://www.acmicpc.net/problem/10430

문제

나머지

문제
(A+B)%C는 ((A%C) + (B%C))%C 와 같을까?

(A×B)%C는 ((A%C) × (B%C))%C 와 같을까?

세 수 A, B, C가 주어졌을 때, 위의 네 가지 값을 구하는 프로그램을 작성하시오.

입력
첫째 줄에 A, B, C가 순서대로 주어진다. (2 ≤ A, B, C ≤ 10000)

출력
첫째 줄에 (A+B)%C, 둘째 줄에 ((A%C) + (B%C))%C, 셋째 줄에 (A×B)%C, 넷째 줄에 ((A%C) × (B%C))%C를 출력한다.

예제 입력 1
5 8 4

예제 출력 1
1
1
0
0

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ")
  .map((value) => +value);

const [A, B, C] = inputData;

console.log(`${(A + B) % C}
${((A % C) + (B % C)) % C}
${(A * B) % C}
${((A % C) * (B % C)) % C}`);

풀이

readFileSync()

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 35 20 38 20 34>

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

process.platform

백준의 파일 경로는 "/dev/stdin"입니다.

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

toString()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData); // 5 8 4

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

split()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ");

console.log(inputData); // [ '5', '8', '4' ]

split()를 활용하여 매개변수에 공백을 의미하는 " "를 넣어 배열을 만듭니다.

map()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split(" ")
  .map((value) => +value);

console.log(inputData); // [ 5, 8, 4 ]

map() 메서드의 callback 함수를 활용하여 string 형식이었던 배열의 각 값을 number 형식으로 바꿉니다.

배열 구조 분해

const [A, B, C] = inputData;
console.log(A); // 5
console.log(B); // 8
console.log(C); // 4

구조 분해 할당의 배열 구조 분해을 통해 배열 속의 A, B, C에 값을 할당합니다.

Template literals

console.log(`${(A + B) % C}
${((A % C) + (B % C)) % C}
${(A * B) % C}
${((A % C) * (B % C)) % C}`);
// 1
// 1
// 0
// 0

Template literals의 Multi-line strings와 Expression interpolation(표현식 삽입법)을 활용합니다.

최종적으로 출력값이 요구하는대로 나오는 것을 알 수 있습니다.

13. 곱셈

https://www.acmicpc.net/problem/2588

문제

곱셈

문제
(세 자리 수) × (세 자리 수)는 다음과 같은 과정을 통하여 이루어진다.

(1)과 (2)위치에 들어갈 세 자리 자연수가 주어질 때 (3), (4), (5), (6)위치에 들어갈 값을 구하는 프로그램을 작성하시오.

입력
첫째 줄에 (1)의 위치에 들어갈 세 자리 자연수가, 둘째 줄에 (2)의 위치에 들어갈 세자리 자연수가 주어진다.

출력
첫째 줄부터 넷째 줄까지 차례대로 (3), (4), (5), (6)에 들어갈 값을 출력한다.

예제 입력 1
472
385

예제 출력 1
2360
3776
1416
181720

해답

const fs = require("fs");

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n")
  .map((value) => +value);

const [a, b] = inputData;

const [hundredsB, tensB, unitsB] = String(b)
  .split("")
  .map((value) => +value);

console.log(`${a * unitsB}
${a * tensB}
${a * hundredsB}
${a * b}`);

풀이

inputData

readFileSync()

const fs = require("fs");

const inputData = fs.readFileSync(
  process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
);

console.log(inputData); // <Buffer 34 37 32 0a 33 38 35>

백준에서 추천하는 방식은 node.js에서 fs 모듈의 readFileSync()를 이용하는 것입니다.

process.platform

백준의 파일 경로는 "/dev/stdin"입니다.

process.platform이 "linux"인 경우 경로를 "/dev/stdin"으로 향하게 하고 그것이 아니면 사용자가 지정한 파일을 향하게 합니다.

toString()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString();

console.log(inputData);
// 472
// 385

Buffer 형식으로 출력된 값을 toString()을 통해 기본값인 "utf8" 형식으로 출력합니다.

split()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n");

console.log(inputData); // [ '472', '385' ]

split()를 활용하여 매개변수에 줄바꿈을 의미하는 "\n"를 넣어 배열을 만듭니다.

map()

const inputData = fs
  .readFileSync(
    process.platform === "linux" ? "/dev/stdin" : "../../../../index.txt"
  )
  .toString()
  .split("\n")
  .map((value) => +value);

console.log(inputData); // [ 472, 385 ]

map() 메서드의 callback 함수를 활용하여 string 형식이었던 배열의 각 값을 number 형식으로 바꿉니다.

배열 구조 분해

const [a, b] = inputData;
console.log(a); // 472
console.log(b); // 385

구조 분해 할당의 배열 구조 분해을 통해 배열 속의 a, b에 값을 할당합니다.

hundredsB, tensB, unitsB

(3), (4), (5)의 값을 구하기 위해서는 b값의 백의 자리 수, 십의 자리 수, 일의 자리 수를 구하여 a값에 각각 곱해줘야 합니다.

String()

const B = String(b);
console.log(B); // 385

number 형식인 b 값을 String()을 통해 문자열로 변환해줍니다.

split()

const B = String(b).split("");
console.log(B); // [ '3', '8', '5' ]

그 후 split() 메서드를 통해 매개변수 ""를 통하여 각 자리 수를 나라태는 배열(백의 자리, 십의 자리, 일의 자리)를 생성합니다.

map()

const B = String(b)
  .split("")
  .map((value) => +value);
console.log(B); // [ 3, 8, 5 ]

map() 메서드의 callback 함수를 활용하여 string 형식이었던 배열의 각 값을 number 형식으로 바꿔 연산이 가능하도록 합니다.

배열 구조 분해

const [hundredsOfB, tensOfB, unitsOfB] = String(b)
  .split("")
  .map((value) => +value);
console.log(hundredsOfB); // 3
console.log(tensOfB); // 8
console.log(unitsOfB); // 5

구조 분해 할당의 배열 구조 분해을 통해 b로부터 각 자리 수를 의미하는 숫자를 배열 속의 hundredsB, tensB, unitsB에 값을 할당합니다.

Template literals

console.log(`${a * unitsOfB}
${a * tensOfB}
${a * hundredsOfB}
${a * b}`);
// 2360
// 3776
// 1416
// 181720

Template literals의 Multi-line strings와 Expression interpolation(표현식 삽입법)으로 문제에서 요구한 사칙연산을 간편하게 표현합니다.

문제에서 요구하는 값이 정상적으로 출력되는 것을 볼 수 있습니다.

Tistory(#1) 스크롤시 상단바 숨기고 보이게 하기

sukvvon — Sat, 12 Mar 2022 13:52:21 +0900

이 포스팅은 tistory 스킨 #1을 기준으로 작성된 것입니다.

계기

현재 Tistory에서 제공하는 #1 스킨을 사용중입니다.

평소 모니터를 3대를 사용중인데 이 스킨을 사용하면서 피벗 모니터에서 블로그 글을 보았을 때는 세로가 길어 가독성이 괜찮아 보였다가 반대로 피벗이 아닌 평범한 16:9 비율의 환경에서 글을 보았을 때 글의 내용이 상단바에 가려져 가독성이 좋지 않아 글을 읽기가 불편한 것 같다라는 생각을 하게 되었습니다.

'글을 읽을 경우 상단바를 없애면 읽기 편하지 않을까?' 라는 호기심에 이 기능을 만들어보게 되었습니다. :)

github 저장소는 아래에 있습니다! :)

sukvvon/tistory-top-bar-visible

css

.hidden {
  animation: hide 0.1s linear forwards;
}

@keyframes hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.shown {
  animation: show 0.1s linear forwards;
}

@keyframes show {
  from {
    visibility: hidden;
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hidden, .shown

.hidden {
  animation: hide 0.1s linear forwards;
}

.shown {
  animation: show 0.1s linear forwards;
}

숨김과 보임을 의미하는 hidden과 shown 으로 class 이름을 지었습니다.

animation을 활용하였습니다. hidden에서는 hide라는 이름의 애니메이션을, shown에서는 show라는 이름의 애니메이션 효과를 주고,

hidden과 shown에서 animation-duration은 0.1초로 설정하여 0.1초동안 애니메이션이 실행되도록 하고, animation-timing-funcion은 linear로 설정하여 균일한 속도로 진행되게 하며, animation-fill-mode는 forwards로 설정하여 실행 된 애니메이션의 마지막 @keyframes에 의해 설정된 계산 된 값을 유지하도록 합니다.

@keyframe hide and show

@keyframes hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes show {
  from {
    visibility: hidden;
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes hide

@keyframes hide에서 전형적인 오프셋 from과 to를 기준으로 opacity: 1로부터 opacity: 0과 visibiliy: hidden 속성으로 가게끔 하여,

opacity 즉 요소의 불투명도를 1에서 0으로 하여 완전히 불투명하였다가 완전히 투명하도록 하고,

visibility 즉 요소의 보임을 hidden 즉 숨겨지게 하여 opacity에 의해서 투명해졌지만 물리적으로 존재했던 요소를 숨김처리를 하여 물리적으로 존재하지 않고 레이아웃 상으로만 존재하게 합니다.

@keyframes show

@keyframes show에서는 @keyframes hide와 반대가 되도록 합니다.

js

const HIDDEN_CLASSNAME = "hidden";
const SHOWN_CLASSNAME = "shown";

const dkHead = document.getElementById("dkHead");
const areaMenu = document.querySelector(".area_menu");
const areaTitle = document.querySelector(".area_title");

let beforeScrollY = [];

const handleTopBar = (useClassName, unuseClassName) => {
  dkHead.classList.add(useClassName);
  dkHead.classList.remove(unuseClassName);
  areaMenu.classList.add(useClassName);
  areaMenu.classList.remove(unuseClassName);
};

window.addEventListener("scroll", () => {
  if (window.scrollY > areaTitle.offsetHeight) {
    if (beforeScrollY.pop() < window.scrollY) {
      handleTopBar(HIDDEN_CLASSNAME, SHOWN_CLASSNAME);
    } else {
      handleTopBar(SHOWN_CLASSNAME, HIDDEN_CLASSNAME);
    }
    beforeScrollY.push(window.scrollY);
  }
});

자주 쓰이는 변수 선언

const HIDDEN_CLASSNAME = "hidden";
const SHOWN_CLASSNAME = "shown";

2번 이상 쓰이는 String은 오타가 날 수 있기 때문에 변수 선언을 꼭 해주는 편입니다.

class의 역활을 가지고 있는 "hidden", "shown"을 HIDDEN_CLASSNAME과 SHOWN_CLASSNAME으로 대문자만으로 이름을 지어 변수를 선언해줍니다.

id 혹은 class 요소를 찾아 변수 선언

const dkHead = document.getElementById("dkHead");
const areaMenu = document.querySelector(".area_menu");
const areaTitle = document.querySelector(".area_title");

dkHead

const dkHead = document.getElementById("dkHead");

getElementById 메서드를 활용하여 상단바 전체를 의미하는 id 속성을 가진 요소 #dkHead를 찾아서 호출한 후 dkHead로 변수를 선언합니다.

areaMenu

const areaMenu = document.querySelector(".area_menu");

querySelector 메서드를 활용하여 상단바 전체를 의미하는 dkHead와 달리 상단바에 독립적으로 위치한 요소인 .area_menu를 호출한 후 areaMenu로 변수를 선언합니다.

areaTitle

const areaTitle = document.querySelector(".area_title");

querySelector 메서드를 활용하여
글의 제목을 의미하지만 여기서는 상단바를 숨기는 기준이 되는 요소인 .area_title을 호출한 후 areaTitle로 변수를 선언합니다.

handleTopBar()

const handleTopBar = (useClassName, unuseClassName) => {
  dkHead.classList.add(useClassName);
  dkHead.classList.remove(unuseClassName);
  areaMenu.classList.add(useClassName);
  areaMenu.classList.remove(unuseClassName);
};

상단바를 숨기고 보이게 하는 함수입니다.

추가하여 사용할 예정이라는 의미인 useClassName, 삭제하여 사용하지 않을 예정이라는 의미인 unuseClassName 라고 이름지은 두 개의 매개변수를 포함하는 함수로 구성합니다.

handelTopBar 함수가 실행되면 classList가 사용되며 add와 remove를 통해 dkHead와 areaMenu의 class 목록에서 useClassName을 추가하고 unuseClassName를 삭제시킵니다.

beforeScrollY

let beforeScrollY = [];

언제든 새로운 값이 들어올 수 있도록 const가 아닌 let으로 이전의 window.scrollY 값을 받는다는 뜻의 beforeScrollY로 배열을 선언합니다.

addEventListener("scroll", () => {})

window.addEventListener("scroll", () => {
  if (window.scrollY > areaTitle.offsetHeight) {
    if (beforeScrollY.pop() < window.scrollY) {
      handleTopBar(HIDDEN_CLASSNAME, SHOWN_CLASSNAME);
    } else {
      handleTopBar(SHOWN_CLASSNAME, HIDDEN_CLASSNAME);
    }
    beforeScrollY.push(window.scrollY);
  }
});

addEventListener()

addEventListener()을 통해 scroll이벤트가 발생할 경우 화살표 함수가 실행되도록 합니다.

if else

window.scrollY가 areaTitle.offsetHeight보다 클 경우 즉 화면 전체의 세로 방향으로 스크롤된 값이 전체 글의 제목 높이보다 크다는 조건에서

beforeScrollY.pop()이 window.scrollY 보다 작을 경우 즉 페이지가 아래로 스크롤 되면서 beforeScrollY 배열의 마지막 값이 화면 전체의 높이보다 작을 경우 handleTopBar(HIDDEN_CLASSNAME, SHOWN_CLASSNAME) 함수가 실행되며 상단바를 보이지 않게 하고

아닐 경우 즉 반대로 페이지가 위로 스크롤 되면서 beforeScrollY 배열의 마지막 값이 화면 전체의 높이보다 클 경우 handleTopBar(SHOWN_CLASSNAME, HIDDEN_CLASSNAME) 함수가 실행되며 상단바를 보이게 합니다.

push()

위의 과정이 끝난 후 beforeScrollY.push(window.scrollY) 로 인하여 조건문에서 사용되었던 window.scrollY 값이 beforeScrollY 배열에 추가됩니다.

그리고 scroll 이벤트가 발생될 때마다 모든 과정이 반복됩니다.

Tistory(#1) icon들을 CSS로 구현하기

sukvvon — Sat, 5 Mar 2022 14:44:00 +0900

이 Tistory(#1) 아이콘 CSS로 구현하기 포스팅은 Tistory(#1) theme toggle 구현기의 내용을 일부 공유합니다.

계기

theme toggle을 구현하고 나니 기존 tistory에서 제공하는 아이콘이 깨지는 것을 알았습니다. 미관상 좋지 않다고 판단하여 fontawesome을 쓸 수 있지만 간단하여 직접 CSS를 활용하여 구현해보기로 하였습니다.

돋보기 아이콘

html

<!--reading-glasses-->
<span class="reading-glasses">
  <span class="reading-glasses__circle"></span>
  <span class="reading-glasses__line"></span>
</span>
<!--reading glasses-->

css의 이름은 BEM을 참고하여 정해보았습니다. 모두 <span> 태그를 사용하여 reading-glasses 클래스를 부모 요소로 하여 자식 요소로 돋보기 모양의 원인 reading-glasses__circle, 그리고 돋보기 모양의 선에 해당하는 부분인 reading-glasses__line을 둡니다.

css

.reading-glasses {
  display: flex;
  flex-direction: column;
  width: 16px;
  height: 16px;
  margin: auto;
}

.reading-glasses__circle {
  width: 8px;
  height: 8px;
  border: 2px solid var(--color-a);
  border-radius: 50%;
}

.reading-glasses__line {
  width: 6px;
  border: 1px solid var(--color-a);
  border-radius: 1px;
  transform: translate3d(8px, -1px, 0) rotate(45deg);
  background-color: var(--color-a);
}

.reading-glasses

.reading-glasses {
  display: flex;
  flex-direction: column;
  width: 16px;
  height: 16px;
  margin: auto;

display를 flex로 설정하여 flexible 속성을 부여합니다. 또한 flex-direction을 column으로 설정하여 행이 아닌 열을 기준으로 자식 요소들이 나열되게 합니다.

width, height 즉 너비와 높이 또한 16px로 기존에 tistory #1 스킨에서 설정해준 초기 설정값을 지향합니다.

margin은 auto로 하여 여백을 페이지에서 자동으로 적절하게 설정해주도록 합니다. 즉 돋보기 아이콘이 중앙으로 오게 합니다.

.reading-glasses__circle

.reading-glasses__circle {
  width: 8px;
  height: 8px;
  border: 2px solid var(--color-a);
  border-radius: 50%;
}

돋보기 아이콘의 거울입니다. 부모 요소의 클래스인 reading-glasses의 display: flex이므로 <span> 태그여서 display: inline인 속성은 모두 display: block가 되어 높이가 존재할 수 있게 됩니다.

돋보기의 원 모양을 담당하는 클래스이므로 width와 height 즉 너비와 높이는 모두 8px로 설정해주고 border의 굵기는 2px, solid 즉 직선, themes.css에서 이어지는 var(--color-a) 즉 #8b949e, 57606a의 색을 가지게 됩니다. border-radius 즉 border 테두리 경계를 50% 둥글게 하여 완전한 원이 되게 합니다.

.reading-glasses__line

.reading-glasses__line {
  width: 6px;
  border: 1px solid var(--color-a);
  border-radius: 1px;
  transform: translate3d(8px, -1px, 0) rotate(45deg);
  background-color: var(--color-a);
}

돋보기 아이콘의 손잡이입니다. reading-glasses__line 클래스를 가진 <span> 태그 또한 display: block가 되어 높이를 가질 수 있게 됩니다. 하지만 이 클래스는 높이가 필요가 없는 클래스입니다. 다만 존재함으로서 부모 요소의 display: flex 속성에 의한 위치를 지켜줍니다.

직선 형태의 손잡이이므로 width: 6px 즉 너비를 6px로 설정합니다. border의 굵기는 1px, solid 직선, var(--color-a)의 색상으로 설정합니다.

transform로 위치를 이동시킵니다. translate3d(8px, -1px, 0)으로 설정하여 x축의 오른쪽 방향으로 8px만큼 이동하고, y축으로 위로 1px만큼 이동하여 돋보기의 거울 부분과 연결시킵니다.

돋보기 직선안에 빈 공간이 생기게 되는데 이 부분은 background-color: var(--color-a) 속성을 주어 빈 공간을 직선 색상과 동일하게 해주어 없애줍니다.

이전, 이후 아이콘 〈〉

html

<!-- prev -->
<span class="prev"></span>
<!-- prev -->

<!-- next -->
<span class="next"></span>
<!-- next -->

이전 아이콘은 prev, 다음 아이콘은 next라고 클래스 이름을 지었습니다.

css

.prev {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 2px solid var(--color-a);
  border-top: none;
  border-right: none;
  transform: rotate(45deg);
  margin: 0 0 1px 3px;
}

.next {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 2px solid var(--color-a);
  border-bottom: none;
  border-left: none;
  transform: rotate(45deg);
  margin: 0 3px 1px 0;
}

이전을 의미하는 클래스인 prev입니다. 높이를 가지는 block 속성과 한 줄로 늘어서 보이는 속성을 가지는 inline 합한 display: inline-block 으로 설정하여 다음 번호들과 일렬로 나열되게 합니다.

prev와 같은 경우 border-top, border-left를 none으로 설정하여 상단과 좌측 부분 선을 없앱니다. next의 경우는 반대로 border-bottom, border-right를 none으로 설정하여 하단과 우측 부분 선을 없앱니다. 그리고 transform: rotate(45deg)]로 중심을 기준으로 시계방향으로 45도 회전시킵니다.

마지막으로 margin: 0 3px 1px 0, 우측 여백을 3px, 하단 여백을 1px으로 설정해 기준축과 교차축에 대하여 중앙으로 온 것처럼 보이게끔 합니다.

[Git] Fork repository 최신화하기

sukvvon — Wed, 2 Mar 2022 23:53:12 +0900

github에서 fork 후 PR(pull requset)

Tistory #1 스킨을 사용하던 중 TOC의 필요성을 느꼈습니다. wbluke 님의 tistory-table-of-contents 프로젝트를 발견하여 감사하며 사용하던 중 추가하고 싶은 사항이 생각나 fork 후 pull request 하였습니다.

다행히 wbluke님께서 저의 PR을 merge 해 주셔습니다. 감사합니다.

그리고 fork된 repo에 원본으로부터 오늘까지 업데이트된 최신 사항을 반영해야하는데 처음 해보는 과정이어서 한 번 정리해 보았습니다.

git remote -v

git remote add upstream https://github.com/wbluke/tistory-table-of-contents.git 가 이미 된 상태입니다.

 sukvvon  ~/Desktop/tistory-table-of-contents   master  git remote -v
origin  https://github.com/sukvvon/tistory-table-of-contents.git (fetch)
origin  https://github.com/sukvvon/tistory-table-of-contents.git (push)
upstream        https://github.com/wbluke/tistory-table-of-contents.git (fetch)
upstream        https://github.com/wbluke/tistory-table-of-contents.git (push)

git romote -v를 통해 현재 remote 된 주소를 확인합니다. 여기서 origin은 fork된 자신의 원격 repo의 주소이고 upstream은 fork하기 전 원본 원격 repo의 주소입니다.

origin = fork된 자신의 원격 repo의 주소
upstream = fork하기 전 원본 원격 repo의 주소

git fetch upstream

 sukvvon  ~/Desktop/tistory-table-of-contents   master  git fetch upstream
remote: Enumerating objects: 17, done.
remote: Counting objects: 100% (15/15), done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 9 (delta 3), reused 8 (delta 3), pack-reused 0
Unpacking objects: 100% (9/9), 1.65 KiB | 112.00 KiB/s, done.
From https://github.com/wbluke/tistory-table-of-contents
 * [new branch]      develop         -> upstream/develop
 * [new branch]      initial-feature -> upstream/initial-feature
 * [new branch]      master          -> upstream/master
 * [new tag]         v0.1.8          -> v0.1.8

git fetch upstream을 통해 upstream의 최신 커밋까지 내용을 가져오기만 합니다.(fetch)

이력을 받아오기만 한 것이므로 fetch 한 내용을 적용하기 위해선 merge를 해야합니다.

git checkout master

 sukvvon  ~/Desktop/tistory-table-of-contents   develop  git checkout master
Switched to branch 'master'

현재 brnach가 master가 아닌 다른 branch라면 git checkout master를 통해 master로 branch를 변경해야합니다.

master로 merge를 할 예정이기 때문입니다.

git merge upstream/master

 sukvvon  ~/Desktop/tistory-table-of-contents   master  git merge upstream/master
Updating e34391e..14b04ed
Fast-forward
 .gitignore      | 1 +
 README.md       | 6 +++++-
 dev/dev-toc.css | 1 +
 dev/dev-toc.js  | 4 ++--
 toc.css         | 1 +
 toc.js          | 6 +++---
 6 files changed, 13 insertions(+), 6 deletions(-)
 create mode 100644 .gitignore

fetch를 통해 가져오기만 한 내용을 git merge upstream/master를 통해 upstream/master에 merge 즉 병합합니다.

fetch한 내용을 그대로 local repo에 반영하는 것을 볼 수 있습니다.

git push origin master

 sukvvon  ~/Desktop/tistory-table-of-contents   master  git push origin master
Total 0 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/sukvvon/tistory-table-of-contents.git
   e34391e..14b04ed  master -> master

fetch와 merge한 것은 현재 local repo에서 일어난 일입니다. local repo에서 한 과정을 git push origin master를 통해 remote repo에 적용시켜주도록 합니다.

전에는 뒤쳐저 있다고 나왔었는데 현재는 원본 repo와 현재 fork된 repo의 커밋 위치가 동일하게 된 것을 알 수 있어 성공적으로 최신화가 이루어진 것을 알 수 있습니다.

참고

Tistory(#1) 간단하게 로딩 창 구현하기

sukvvon — Sat, 26 Feb 2022 21:44:24 +0900

이 TisTory(#1) 간단하게 로딩 창 구현하기 포스팅은 Tistory(#1) theme toggle 구현하기를 일부 공유합니다.

html

<!--loading-->
<div id="loading">
  <div id="loading-circle">
    <div id="loading-empty"></div>
  </div>
</div>
<!--loading-->

html 코드는 크게 3개의 요소로 이루어집니다.

#loading → loading 화면 전체
#loading-circle → loading을 의미하는 원
#loading-empty → #loading-circle에서 원의 미완성 부분

loading.css

#loading {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 32;
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--background-color-body);
  animation: hideLoadingScreen 0.3s linear forwards;
  animation-delay: 0.7s;
}

@keyframes hideLoadingScreen {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

#loading-circle {
  position: relative;
  width: 2rem;
  height: 2rem;
  border: 0.3rem solid var(--color-a);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  animation: loadingCircle 1s ease-in-out infinite;
}

@keyframes loadingCircle {
  from {
    transform: none;
  }
  to {
    transform: rotate(360deg);
  }
}

#loading-empty {
  position: absolute;
  background-color: var(--background-color-body);
  width: 1rem;
  height: 2rem;
  top: -1rem;
}

#loading

#loading {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 32;
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--background-color-body);
  animation: hideLoadingScreen 0.3s linear forwards;
  animation-delay: 0.7s;
}

#loading의 역활은 loading 전체화면입니다.

width, height

#loading {
  width: 100vw;
  height: 100vh;
}

너비(width)와 높이(height)를 각각 100vw 100vh로 설정하여 화면 전체가 해당되게 합니다.

display

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

display를 flexible하게 만듭니다. 기본 축(justify-content)과 교차 축(align-items) center로 해 자식 요소가 화면의 정중앙에 오도록 합니다.

z-index

#loading {
  z-index: 32;
}

z-index 속성을 32로 하여 현재 레이어 층이 32층이며 가장 최상위 층이라고 설정합니다. 최상위 층이라는 것은 곧 이 loading 창 위에 아무것도 없다는 것입니다.

position

#loading {
  position: fixed;
  top: 0;
}

position을 fixed로 하여 요소를 일반적인 흐름에서 제거하고, 공간 또한 배정하지 않게 한 후 top: 0을 통해 전체 화면의 최상단에 위치하게 합니다.

animation

#loading {
  animation: hideLoadingScreen 0.3s linear forwards;
  animation-delay: 0.7s;
}

hideLoadingScreen 애니메이션을 0.3초(animation-duration)동안 실행하고 애니메이션 진행 방식(animation-timing-function)을 linear 즉 선형성 직선적으로 바르게 진행하도록 합니다. 그리고 forwards 속성을 줌으로(animation-fill-mode) 애니메이션이 끝난 후에도 지속되게 합니다.

또한 애니메이션 지연(animation-delay)을 0.7초로 하여 애니메이션이 0.7초 뒤에 실행하도록 합니다.

hideLoadingScreen animation

@keyframes hideLoadingScreen {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes 규칙을 생성합니다. 애니메이션 이름(animation-name)을 hideLoadingScreen으로 정합니다. opacity를 통해 불투명 정도를 완전히 없음(1) 에서 완전히 있음(0) 으로 합니다. 하지만 불투명할 뿐이지 존재하므로 요소의 보임(visibility)을 hidden으로 숨김처리 하여 loading 창이 없는 효과를 줘 loading 창 밑 층에 있는 요소들을 제어 할 수 있게 합니다.

#loading-circle

#loading-circle {
  position: relative;
  width: 2rem;
  height: 2rem;
  border: 0.3rem solid var(--color-a);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  animation: loadingCircle 1s ease-in-out infinite;
}

#loading-circle 원에 관한 요소입니다.

position

#loading-circle {
  position: relative;

position을 relative로 설정하여 #loading-empty 의 기준이 되는 조상은 #loading-circle 인 것이라고 지정합니다.

width, height

#loading-circle {
  width: 2rem;
  height: 2rem;
}

width와 height를 2rem으로 하여 px과 같은 절대적인 길이가 아닌 상대적인 길이 설정을 통해 웹과 모바일을 모두 호환이 가능하게끔 합니다.

border

#loading-circle {
  border: 0.3rem solid var(--color-a);
  border-radius: 50%;
}

마찬가지로 border의 굵기 또한 상대적인 척도인 rem을 사용합니다. 색상은 dataTheme.css의 --color-a인 #8b949e와 #57606a를 사용합니다. 그리고 border-radius는 원이 되어야 하므로 50% 로 합니다.

display

#loading-circle {
  display: flex;
  justify-content: center;
}

display는 flexible 속성을 주고 justify-content을 center로 설정해 자식 요소인 #loading-empty 가 중앙으로 오게 합니다.

animation

#loading-circle {
  animation: loadingCircle 1s ease-in-out infinite;
}

loadingCircle 애니메이션을 1초(animation-duration)동안 실행하고 애니메이션 진행 방식(animation-timing-function)을 ease-in-out 즉 시작과 끝의 속도를 천천히 진행하도록 합니다. 그리고 infinite 속성을 줌으로(animation-fill-mode) 애니메이션이 끝나고도 계속 무한으로 반복되게 합니다.

loadingCircle animation

@keyframes loadingCircle {
  from {
    transform: none;
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes 규칙을 생성합니다. 애니메이션 이름(animation-name)을 loadingCircle로 정합니다. transform을 none으로 설정하여 효과가 없는 상태에서 시작하여 rotate(360deg) 즉 360도로 시계방향으로 회전하게 합니다.

#loading-empty

#loading-empty {
  position: absolute;
  background-color: var(--background-color-body);
  width: 1rem;
  height: 2rem;
  top: -1rem;
}

width, height

#loading-empty {
  width: 1rem;
  height: 2rem;
}

너비(width)와 높이(height)를 1rem, 2rem으로 여유롭게 설정하여 원 상단의 일부분을 가리게 합니다.

position

#loading-empty {
  position: absolute;
  top: -1rem;
}

position을 absolute로 설정하여 가장 가까운 위치의 조상인 #loading-circle을 기준으로부터 top: -1rem 즉 1rem만큼 상단으로 위치가 이동합니다.

background-color

#loading-empty {
  background-color: var(--background-color-body);
}

background-color 즉 배경색은 themes.css의 --background-color-body인 #0d1117과 #57606a를 사용합니다.

Tistory(#1) theme toggle 구현기

sukvvon — Tue, 22 Feb 2022 23:20:04 +0900

나만 없는 다크모드,,,

본 포스팅은 티스토리 #1을 기준으로 합니다.

velog나 notion 그리고 github.io를 이용하는 블로거분들의 페이지를 방문할 때가 있습니다. 그리고 이 분들과 저의 차이점, 그리고 부러운 점이 하나 있었습니다. 바로 다크모드 테마가 있다는 것이었습니다...

평소 tistory에서 제공하는 #1 스킨을 사용하는 저는 다크모드 그리고 다크모드와 라이트모드를 사용자 기호에 맞게 사용할 수 있는 토글도 없었습니다.

그래서 저의 티스토리 블로그 테마에 다크모드와 라이트모드 토글을 구현하였습니다.

FOCU 현상

문제

<body>
  <div>
    <!-- 블로그 컨텐츠 내용 -->
    ...
  </div>
  <!-- 테마 및 토글 관련 코드 -->
  <script src="themeToggle.js"></script>
</body>

처음에 구현할 때 theme.js와 themeToggle.js의 내용을 모두 합하여 코드를 작성하고 <body>태그 제일 하단에 <srcipt>태그를 추가하고 테스트를 하였습니다.

그랬더니 lihgt 테마와 dark 테마에서 페이지를 로딩할 때 화면이 번쩍이는 현상을 발견했습니다. 알고보니 이 현상은 FOCU(Flash Of Unstyled Content)였습니다.

테마 및 토글 관련 제어 코드를 담은 <srcipt>태그가 마지막에 실행되어서 화면이 반짝이는 것이었습니다.

해결

<body>
  <!-- body 태그 생성 이후 블로그 컨텐츠 내용을 받기 전에 삽입 -->
  <script src="theme.js"></script>
  <div>
    <!-- 블로그 컨텐츠 내용 -->
    ...
  </div>
  <script src="themeToggle.js"></script>
</body>

문제를 해결하기 위해 통합된 코드를 테마 관련 코드인 theme.js, 테마 토글 관련 코드인 themeToggle.js로 나누어 리펙토링하였습니다. 그리고 위와 같이 script 태그들을 삽입하였습니다.

브라우저 랜더링 과정은 간단하게 설명하면 다음과 같습니다.

<body> 태그가 생성되자마자 theme.js가 포함된 스크립트를 삽입하여 html 파싱을 중지하고 제어권을 js엔진에 넘긴 후 js엔진이 파싱합니다. js엔진이 파싱을 마친 후 html 파싱은 다시 시작되고 모두 끝난 후 마지막에 themeToggle.js가 포함된 스크립트 코드를 만나 js엔진이 파싱을 처리하게 됩니다.

위와 같은 과정으로 테마 관련 스크립트를 중간에 미리 처리하였기 때문에 화면 깜빡임 현상(FOCU)은 발생하지 않게 되었습니다.

구성

theme 파트

themes.css
theme.js

toggle 파트

html
theme-toggle.css
themeToggle.js

크게 theme에 대한 코드와 toggle에 대한 코드로 구성하였습니다.

light, dark 테마에 대한 css 설정을 다룬 themes.css, 사용자나 브라우저가 설정한 것에 의하여 light, dark 테마 중 하나를 적용시키는 theme.js.

toggle을 구현하는 html 코드, toggle을 구현하는 html 코드를 꾸민 css인 theme-toggle.css, 마지막으로 light, dark 테마에 따른 toggle의 반응을 나타낸 themeToggle.js입니다.

themes.css

html[theme="dark"] {
  --background-color-body: #0d1117;
  --background-color-head-foot: #161b22;
  --border-bottom-h2: 1px solid #21262d;
  --color: #c9d1d9;
  --color-accent: #58a6ff;
  --blockquote-border-left: 5px solid #30363d !important;
  --tag-background-color: #222;
  --color-a: #8b949e;
  --background-color-inline-code: rgba(110, 118, 129, 0.4);
}

html[theme="light"] {
  --background-color-body: #fff;
  --background-color-head-foot: #f6f8fa;
  --border-bottom-h2: 1px solid #d8dee4;
  --color: #24292f;
  --color-accent: #0969da;
  --blockquote-border-left: 5px solid #d0d7de !important;
  --tag-background-color: #f0f0f0;
  --color-a: #57606a;
  --background-color-inline-code: rgba(175, 184, 193, 0.2);
}

/* utterance */
html[theme="dark"] .utterance-light {
  display: none;
}

html[theme="light"] .utterance-dark {
  display: none;
}

/* scrollbar */
html,
.skin_view .area_view pre code.hljs {
  scrollbar-width: thin;
  scrollbar-color: var(--color-a) var(--background-color-body);
}

.skin_view .area_view pre code.hljs::-webkit-scrollbar {
  background-color: var(--background-color-body);
  height: 6px;
}

body::-webkit-scrollbar {
  background-color: var(--background-color-body);
  width: 6px;
}

body::-webkit-scrollbar-thumb,
.skin_view .area_view pre code.hljs::-webkit-scrollbar-thumb {
  background-color: var(--color-a);
  border-radius: 6px;
}

html[theme="COLOR"]

html[theme="dark"] {
  --background-color-body: #0d1117;
  --background-color-head-foot: #161b22;
  --border-bottom-h2: 1px solid #21262d;
  --color: #c9d1d9;
  --color-accent: #58a6ff;
  --blockquote-border-left: 5px solid #30363d !important;
  --tag-background-color: #222;
  --color-a: #8b949e;
  --background-color-inline-code: rgba(110, 118, 129, 0.4);
}

html[theme="light"] {
  --background-color-body: #fff;
  --background-color-head-foot: #f6f8fa;
  --border-bottom-h2: 1px solid #d8dee4;
  --color: #24292f;
  --color-accent: #0969da;
  --blockquote-border-left: 5px solid #d0d7de !important;
  --tag-background-color: #f0f0f0;
  --color-a: #57606a;
  --background-color-inline-code: rgba(175, 184, 193, 0.2);
}

dark 테마와 light 테마에서 적용하기 원하는 색상을 예를 들어 --color: #c9d1d9, --color: #24292f와 같이 정의 한 후 var(--color)로 css에서 사용합니다.

자세한 사항은 Custom properties (--*): CSS variables에서 확인할 수 있습니다.

댓글(utterances) 테마 설정

선택사항입니다. 만약 utterances를 사용중이라면 참고하시면 되겠습니다.

utterances html and css code

html

<div class="utterance-light">
  <script
    src="https://utteranc.es/client.js"
    repo="sukvvon/blog-comments"
    issue-term="pathname"
    theme="github-light"
    crossorigin="anonymous"
    async
  ></script>
</div>

<div class="utterance-dark">
  <script
    src="https://utteranc.es/client.js"
    repo="sukvvon/blog-comments"
    issue-term="pathname"
    theme="dark-blue"
    crossorigin="anonymous"
    async
  ></script>
</div>

만약 utterances를 사용중이라면 간단하게 light, dark 테마별로 적용시킬 수 있습니다.

<div class="area_reply "> 태그 밑에 위와 같은 html 코드를 추가합니다.

theme="github-light"가 포함된 항목은 utterance-light 클래스가 포함된 div 태그로 감싸주고, "theme="dark-blue"가 포함된 항목은 utterance-dark 클래스가 포함된 div 태그로 감싸주면 테마 별로 댓글 창을 테마별로 구현할 수 있습니다.

css

/* utterance */
html[theme="dark"] .utterance-light {
  display: none;
}

html[theme="light"] .utterance-dark {
  display: none;
}

display: none 속성을 부여하여 dark 테마일 경우엔 light utterances 테마가 보이지 않게 하고 light 테마일 경우 dark utterances 테마가 보이지 않게 합니다.

scrollbar

/* scrollbar */
html,
.skin_view .area_view pre code.hljs {
  scrollbar-width: thin;
  scrollbar-color: var(--color-a) var(--background-color-body);
}

.skin_view .area_view pre code.hljs::-webkit-scrollbar {
  background-color: var(--background-color-body);
  height: 6px;
}

body::-webkit-scrollbar {
  background-color: var(--background-color-body);
  width: 6px;
}

body::-webkit-scrollbar-thumb,
.skin_view .area_view pre code.hljs::-webkit-scrollbar-thumb {
  background-color: var(--color-a);
  border-radius: 6px;
}

dark 테마와 light 테마에 맞게 scrollbar 또한 테마를 적용하였습니다.

firefox(gaeko)

html,
.skin_view .area_view pre code.hljs {
  scrollbar-width: thin;
  scrollbar-color: var(--color-a) var(--background-color-body);
}

.skin_view .area_view pre code.hljs::-webkit-scrollbar {
  background-color: var(--background-color-body);
  height: 6px;
}

영향을 받는 대상인 전체 화면을 의미하는 html과 블로그 내 코드블럭코드 .skin_view .area_view pre code.hljs를 기준으로

scrollbar-width: thin으로 설정하여 스크롤바가 두껍지 않게 하여 가독성을 높여주도록 하고

scrollbar-color: var(--color-a) var(--background-color-body)으로 설정하여 light, dark 테마에 따라서 firefox(gaeko) 브라우저에서 동작할 수 있도록 합니다.

chrome, safari, edge, etc...(webkit)

body::-webkit-scrollbar {
  background-color: var(--background-color-body);
  width: 6px;
}

body::-webkit-scrollbar-thumb,
.skin_view .area_view pre code.hljs::-webkit-scrollbar-thumb {
  background-color: var(--color-a);
  border-radius: 6px;
}

firefox(gaeko)와는 다르게 chrome, safari, edge 등 webkit 기반의 엔진을 기반으로 삼는 브라우저는 html이 아닌 body 태그를 중심으로 ::-webkit-scrollbar 선택자를 활용하여 width: 6px, background-color: var(--color-a)

즉 전체 스크롤바의 너비는 6px, 배경색상은 var(--background-color-body)로 설정합니다.

body뿐만이 아닌 .skin_view .area_view pre code.hljs도 포함해 ::-webkit-scrollbar-thumb 선택자를 활용하여 background-color: var(--color-a), border-radius: 6px

즉 스크롤 핸들의 배경 색상을 var(--color-a)로 설정하고, border-radius를 6px로 설정해 꼭짓점을 6px 정도 둥글게 합니다.

theme.js

const DARK = "dark";
const LIGHT = "light";
const THEME_KEY = "theme";

const userTheme = sessionStorage.getItem(THEME_KEY);
const osTheme = window.matchMedia("(prefers-color-scheme: light)").matches
  ? LIGHT
  : DARK;

const getTheme = () => {
  const Theme = userTheme ? userTheme : osTheme;
  return Theme;
};

const setTheme = (color) => {
  sessionStorage.setItem(THEME_KEY, color);
  document.documentElement.setAttribute(THEME_KEY, color);
};

if (getTheme() === DARK) {
  setTheme(DARK);
} else {
  setTheme(LIGHT);
}

페이지에 접속했을 때 light 테마와 dark 테마 중 컴퓨터나 사용자가 선호하는 색상 테마를 적용하는 코드입니다.

자주 쓰이는 변수 선언

const DARK = "dark";
const LIGHT = "light";
const THEME_KEY = "theme";

dark, light, theme와 같은 자주 사용하는 단어들을 DARK, LIGHT, THEME_KEY로 선언하여 코드를 적을 때 오타를 방지합니다.

현재 설정된 theme 확인

const userTheme = sessionStorage.getItem(THEME_KEY);
const osTheme = window.matchMedia("(prefers-color-scheme: light)").matches
  ? LIGHT
  : DARK;

userTheme

const userTheme = sessionStorage.getItem(THEME_KEY);

sessionStorage에 THEME_KEY 즉 "theme"에 저장된 값이 있는지 확인합니다. 그리고 그 값을 userTheme 변수로 선언합니다.

osTheme

const osTheme = window.matchMedia("(prefers-color-scheme: light)").matches
  ? LIGHT
  : DARK;

prefer-colors-scheme

"(prefers-color-scheme: light)" css 요소를 통하여 현재 사용자가 시스템에 light 테마를 사용하는 것을 선호하는지를 window.matchMedia().matches를 통해 확인합니다.

dark 테마를 페이지의 기본 설정으로 할 것이므로 prefers-color-scheme: light을 기준으로 삼항연산자를 활용하여 true라면 LIGHT 즉 "light"를,

false라면 DARK 즉 "dark"와 선호하는 테마가 없는 경우인 no-preference을 osTheme에 넣으며 변수로 선언합니다.

getTheme()

const getTheme = () => {
  const theme = userTheme ? userTheme : osTheme;
  return theme;
};

삼항연산자를 활용하여 theme을 기준으로 userTheme이 참(true), 존재한다면 userTheme을

반대로 거짓(false), 존재하지 않는다면 osTheme를 택하게 하여 theme 변수를 선언합니다.

getTheme()의 순환 과정을 자세히 정리하자면 다음과 같습니다.

처음 사이트에 들어오게 되어 theme.js가 실행이 되어 getTheme() 함수를 호출하면 theme 값을 반환(return)하게 되는데 sessionStorage의 키 값은 없어 userTheme 값은 존재하지 않으므로 삼항연산자에 의하여 theme = osTheme이 됩니다.

블로그 내에 페이지를 이동하는 등 새로고침이 되었을 때 sessionStorage 값은 존재하므로 getTheme() 함수 내의 theme = userTheme이 되어 getTheme() 함수는 userTheme을 반환하게 됩니다.

페이지를 빠져 나갈 경우 session은 초기화가 됩니다.

setTheme()

const setTheme = (color) => {
  sessionStorage.setItem(THEME_KEY, color);
  document.documentElement.setAttribute(THEME_KEY, color);
};

sessionStorage.setItem을 통해 키 이름과 키 값을 THEME_KEY 즉 "theme"와 매개변수인 color로 초기화합니다.

document.documentElement가 가리키는 <html>태그에 setAttribute을 통해 THEME_KEY 즉 theme 속성 이름과 color라는 매개 변수로 값을 초기화합니다.

함수를 사용할 때 color라는 매개변수를 통해 DARK 나 LIGHT로 값을 입력합니다.

if else

if (getTheme() === DARK) {
  setTheme(DARK);
} else {
  setTheme(LIGHT);
}

getTheme()가 DARK 즉 "dark"일 경우와 선호하는 테마가 없는 경우인 no-preferece인 경우 setTheme(DARK) 함수를 실행하고,

반대로 LIGHT 즉 "lignt"일 경우 setTheme(LIGNT) 함수를 실행합니다.

theme toggle에 해당하는 html

<!--toggle button-->
<label class="switch-button">
  <input class="check" type="checkbox" />
  <span class="onoff-switch"></span>
</label>
<!--toggle button-->

label 태그를 통해 토글 버튼 관련 항목의 공간을 만듭니다. 그 안에 checkbox type의 <input>, 그리고 토글 버튼의 역활을 하는 <span> 태그를 추가합니다.

<label> 태그의 특성에 의해서 <label> 태그 안에 있는 부분에 이벤트가 발생하였을 때 <input> 태그에 이벤트가 발생한 것과 같은 효과를 볼 수 있습니다.

theme-toggle.css

.switch-button {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 38px;
  bottom: 5.22px;
  margin: 0 2px;
}

.switch-button input {
  opacity: 0;
}

.onoff-switch {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px;
  background-color: #ddd;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.onoff-switch::before {
  position: absolute;
  content: "";
  height: 24px;
  width: 22px;
  top: 7px;
  left: 4px;
  border-radius: 20px;
  background-color: #fff;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.switch-button input:checked + .onoff-switch {
  background-color: #238636;
}

.switch-button input:checked + .onoff-switch::before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

@media only screen and (max-width: 820px) {
  .switch-button {
    margin: 21px 0 -6px 15px;
  }
}

theme에 대한 toggle 버튼에 관한 css입니다.

.swich-button input

.switch-button input {
  opacity: 0;
}

opacity: 0 을 통해서 checkbox가 표시되지 않게 합니다.

.onoff-switch

.onoff-switch {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px;
  background-color: #ddd;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.switch-button input:checked + .onoff-switch {
  background-color: #238636;
}

-webkit-transition: 0.4s, transition: 0.4s을 통해 input이 checked 즉 체크박스가 체크가 된 경우 토글 버튼의 바탕화면 색상이 #ddd에서 #238636으로 바뀔 때 0.4초가 걸리는 효과를 줍니다.

.onoff-switch::before

.onoff-switch::before {
  position: absolute;
  content: "";
  height: 24px;
  width: 22px;
  top: 7px;
  left: 4px;
  border-radius: 20px;
  background-color: #fff;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.switch-button input:checked + .onoff-switch::before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

마찬가지로 -webkit-transition: 0.5s, transition: 0.5s을 통해 switch-button class의 input이 checked 즉 체크박스가 체크가 된 경우 토글 버튼의 위치가 -webkit-transform: translateX(26px), -ms-transform: translateX(26px), transform: translateX(26px)에 의해서 26px만큼 우로 이동하고 이동 할 때 0.5초가 걸리는 효과를 줍니다.

@media

@media only screen and (max-width: 820px) {
  .switch-button {
    margin: 21px 0 -6px 15px;
  }
}

max-width: 820px으로 820px로 최대 너비를 설정하여 모바일 환경에서의 토글 버튼의 위치를 설정합니다.

themeToggle.js

const checkbox = document.querySelector(".check");

const themeToggle = (event) => {
  if (event.target.checked) {
    setTheme(DARK);
  } else {
    setTheme(LIGHT);
  }
};

checkbox.addEventListener("click", themeToggle);

if (getTheme() === DARK) {
  checkbox.setAttribute("checked", "");
}

theme에 관한 toggle 버튼에 대한 js 코드 설명입니다.

checkbox

const checkbox = document.querySelector(".check");

checkbox.addEventListener("click", themeToggle);

check 클래스가 포함된 태그를 선택하여 checkbox로 선언합니다. 그리고 addEventListener() 메서드를 통해서 click 이벤트 발생 시 themeToggle 함수를 실행하도록 합니다.

themeToggle()

const themeToggle = (event) => {
  if (event.target.checked) {
    setTheme(DARK);
  } else {
    setTheme(LIGHT);
  }
};

toggle 버튼에 관한 함수입니다. event 매개변수를 통하여 event.target.checked 즉 html 코드가 <input type="checkbox" checked>라면 setTheme(DARK)를

반대로 <input type="checkbox">라면 setTheme(LIGHT)를 호출하도록 합니다.

if

if (getTheme() === DARK) {
  checkbox.setAttribute("checked", "");
}

getTheme()가 DARK 즉 "dark"일 경우와 선호하는 테마가 없는 경우인 no-preferece인 경우 토글은 checked가 되게 합니다.

참고

[React] React에서 Firebase 연동 오류 해결하기(v8 -> v9)

sukvvon — Wed, 3 Nov 2021 19:55:36 +0900

firebase 연동 오류

오류 발생 코드

import firebase from "firebase/app";
import 'firebase/auth';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_APT_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID
};

firebase.initializeApp(firebaseConfig);

export const authService = firebase.auth();

노마드코더의 클론코딩 트위터(nwitter) 책을 보면서 공부를 하다가 React 기반의 환경에서 firebase를 연동하는 과정이 있었는데 정상적으로 진행이 되지 않았습니다. 혹시 실수를 해 오타가 존재하나 살펴보았더니 그런 부분은 존재하지 않았습니다.

Failed to compile

./src/fbase.js
Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase').

Failed to compile을 살펴보자면 firebase/app 은 firebase 라는 명칭으로 export 할 수가 없다는 것이었습니다.

해결 방안 탐색

Nomad corders

다행히 nwitter - React + Firebase Setup(issue)에서 해결방안을 찾을 수 있었습니다.

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

serranoarevalo 님께선 v9을 사용하고 있으니 위와 같은 코드로 기존에 있던 코드에서 사이에 compat 를 추가하라고 코멘트를 남기셨습니다.

firebase 공식 홈페이지

// Before: version 8
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

// After: version 9 compat
// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

In order to keep your code functioning after updating your dependency from v8 to v9 beta, change your import statements to use the "compat" version of each import.

더 나아가 공식적으로 알기 위해 firebase Update imports to v9 compat를 접속했더니 v8에서 v9으로 업데이트를 한 경우 import를 할 때 compat 를 사용해야한다고 명시하고 있었습니다.

firebase 연동 완료

코드 수정

import firebase from "firebase/compat/app";
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_APT_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID
};

export default firebase.initializeApp(firebaseConfig);

export const authService = firebase.auth();

nomad corders의 serranoarevalo 그리고 nwitter - React + Firebase Setup(issue)에서 설명한대로 수정을 하고 npm run start 를 하였습니다.

결과

console.log(authService.currentUser); 의 결과대로 다행히 null 값이 출력되어 정상적으로 실행되는 것을 확인할 수 있었습니다.

참고

Tistory 블로그에 github-markdown-css 적용하기

sukvvon — Mon, 1 Nov 2021 16:47:45 +0900

적용하게 된 계기

Tistory 플랫폼을 이용하면서 markdown 문법을 이용하여 포스팅을 합니다. 하지만 뭔가 필자에겐 tistory 블로그에서 기존에 제공해주는 css가 부자연스럽고 가독성을 해친다는 생각이 들었습니다. 그리하여 수정을 해야겠다는 생각을 하였습니다.

직접 css 파일을 수정할 수 있지만 더 쉽고 간단하게 편하게 적용할 수 있는 방법이 뭐가 있을까 생각을 하였더니 github-markdown-css 프로젝트를 알게 되었습니다. github를 이용하는 필자에게도 매우 친숙한 css 스타일이기에 최종적으로 github-markdown-css 양식을 tistory 블로그에 적용하기로 마음을 먹었습니다.

github-markdown-css

GitHub 사이트 접속

github-markdown-css 에 접속합니다.

CDNJS 접속

npm install github-markdown-css 를 작성하여 node의 node package manager를 활용하여 이 github-markdown-css 를 활용할 수 있고 CDNJS를 이용하여 link를 걸 수도 있습니다.

필자는 기존에 있던 html 양식에 link를 걸어 불러올 것이기 때문에 CDNJS를 활용할 것입니다. 그러므로 CDNJS를 클릭합니다.

CDNJS 선택

https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.0.0/github-markdown-light.min.css

github-markdown-light.min.css 가 포함되어 있는 cdnjs를 선택합니다. 필자는 light 테마를 사용할 예정이어서 light 테마를 선택했지만 dark 테마 사용을 원하신다면 github-markdown-dark.min.css 를 사용하시면 됩니다.

Tistory의 HTML에 적용할 예정입니다.

.markdown-body

Import the github-markdown.css file and add a markdown-body class to the container of your rendered Markdown and set a width for it. GitHub uses 980px width and 45px padding, and 15px padding for mobile.

cdnjs 링크를 적용한다고 github-markdown-css를 사용할 수 있는 것이 아닙니다. markdown-body 클래스 또한 적용해야지만 사용할 수 있습니다.

.markdown-body {
        box-sizing: border-box;
        min-width: 200px;
        max-width: 980px;
        margin: 0 auto;
        padding: 45px;
    }

    @media (max-width: 767px) {
        .markdown-body {
            padding: 15px;
        }
    }

위의 코드를 tistory 블로그 css에 삽입을 할 예정입니다.

Tistory 블로그에 적용

꾸미기 -> 스킨 편집

Tistory 블로그를 예시로 설명합니다.

사용자의 티스토리 블로그의 관리에서 꾸미기의 스킨 편집을 클릭합니다.

html 편집

html 편집을 클릭합니다.

CDNJS 삽입

https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.0.0/github-markdown-light.min.css

위와 같은 코드를 HTML에 삽입합니다.

markdown-body 삽입

.markdown-body {
        box-sizing: border-box;
        min-width: 200px;
        max-width: 980px;
        margin: 0 auto;
        padding: 0px;
    }

    @media (max-width: 767px) {
        .markdown-body {
            padding: 15px;
        }
    }

CSS에 markdown-body 클래스를 삽입합니다. 필자는 공간을 전부 활용하기를 원하기 때문에 padding: 45px가 아닌 0px으로 수정하여 적용하였습니다.

markdown-body 적용

마크다운에서 글 작성 후 완성 X

기존처럼 마크다운에서 작성한 글을 그대로 완성하는 것이 아닌

마크다운 -> HTML

<div class="markdown-body">
  . 
  .
  .
  .
  .
  .
</div>

HTML 로 이동하여 첫 번째 줄에 <div class="markdown-body"> 그리고 마지막 줄에 </div> 를 작성합니다.

결과

before

after

기존 티스토리 스킨인 #1에서 제공했던 css와 비교를 해 보니 다음과 같이 github-markdown-css가 적용되어 전보다 가독성이 좋아진 것을 확인 할 수 있습니다.

블로그에 코드 하이라이트 적용하기(highlight.js)

sukvvon — Thu, 28 Oct 2021 12:27:16 +0900

수동으로 적용하게 된 계기

포스팅을 하면서 github-markdown.css를 활용하여 작성을 해 오고, syntax highlight는 tistory에서 제공하는 플러그인을 활용하였습니다.

하지만 블로그 테마를 Book Club에서 #1으로 변경하니 syntax highlight의 첫 줄에서 공백이 일어나는 현상이 발생했습니다.

기술 블로그를 운영하는 입장에서 code highlight는 매우 중요한 요소이므로 자동으로 적용이 잘 되지 않는 이 현상을 수동으로 적용시켜 해결하고, 기본적으로 tistory에서 제공하는 것 외에 다양한 syntax highlight을 선택해 적용해야겠다고 생각하였습니다.

highlight.js 설정

highlight.org 접속

highlight.org 공식사이트로 이동합니다.

Get version 11.3.1

현재 가장 최신 버전인 Get version 11.3.1 버튼을 클릭합니다.

con.js 코드 복사

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>

cdnjs, jsdelivr, uppkg이렇게 3가지 방법이 있지만 cdnjs 를 활용할 것이므로 cdnjs 코드를 복사합니다.

하지만 이 코드만 있다고 실행이 되는 것이 아닙니다. 링크를 받아오기만 한 것이므로 이 코드를 실행시기기 위한 javaScript 코드 또한 필요합니다.

highlight.js GitHub 접속

highlight.js GitHub 사이트에 접속한 후 highlight.js repository에 접속합니다.

highlightAll()

repository를 접속한 후 하단으로 화면을 내리다보면 Basic Usage 가 나옵니다.

The bare minimum for using highlight.js on a web page is linking to the library along with one of the themes and calling highlightAll:

웹 페이지에서 highlight.js을 사용하려면 highlightAll 코드를 사용해야한다고 명시하고 있습니다.

This will find and highlight code inside of <pre><code> tags; it tries to detect the language automatically. If automatic detection doesn’t work for you, or you simply prefer to be explicit, you can specify the language manually in the using the class attribute:

<pre><code> 태그 안의 hightlight code를 찾아주고 자동으로 언어를 감지하여 설정해주고 만약 적용되지 않았다면 사용자가 원하는 언어를 class 속성에 추가를 하면 된다고 합니다.

highlight.js 코드 완성

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

highlight.org의 복사한 cdnjs 코드를 실행시키기 위해서 <script>hljs.highlightAll();</script> 를 추가하여 위와 같은 형태의 코드를 만듭니다.

사용자가 원하는 css 선택

highlight.js -> src -> styles

src 파일을 클릭합니다.

그리고 styles 파일을 클릭합니다.

css 파일 종류 파악

highlight.js/src/styles/ 혹은 highlight.js/src/styles/base16 에서 다양한 css 파일들을 볼 수 있습니다.

블로그에 highlight.js 적용

css 바꾸는 예시

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

위와 같은 코드에서 css가 default 로 되어있습니다. 기본 설정을 사용하는 것이 아니기 때문에 css를 바꿔서 적용을 하여야 합니다.

적용을 할 때 GitHub에 올라와 있는 파일명이 default.css 파일이더라도 코드에 작성을 할 땐 min을 추가하여서 default.min.css 라고 써야 합니다.

highlight.js/src/styles/

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/vs.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

vs.css를 적용하는 예시입니다.

앞에서 보았던 highlight.js/src/styles/ 에서 사용자가 원하는 css를 선택해 styles/default.min.css 라고 되어있는 부분을 예를 들어 styles/vs.min.css 로 바꿉니다.

highlight.js/src/styles/base16

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/base16/github.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

base16/github.css를 적용하는 예시입니다.

마찬가지로 highlight.js/src/styles/base16 에서 사용자가 원하는 css 파일을 적용하고 싶다면 styles/default.min.css 라고 되어있는 부분을 예를 들어 styles/base16/github.min.css 로 바꿉니다.

필자는 base16/github.css 를 선택했습니다.

꾸미기 -> 스킨 편집

Tistory 블로그를 예시로 설명합니다.

사용자의 티스토리 블로그의 관리에서 꾸미기의 스킨 편집을 클릭합니다.

html 편집

html 편집을 클릭합니다.

highlight.js script 삽입

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/base16/github.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

HTML 내에 삽입을 합니다. 그리고 적용 버튼을 누릅니다.

결과

초반에 발생 했던 들여쓰기 즉 공백 현상이 일어나지 않고 잘 적용된 모습을 볼 수 있습니다.

블로그에 GitHub 댓글 적용하기(utterances)

sukvvon — Sun, 24 Oct 2021 16:00:35 +0900

utterances를 적용하게 된 계기

이미지 출처: utterances

여러 개발자들의 기술 블로그들을 보니 댓글창이 저와 다르다는 것을 느꼈습니다. 타 플랫폼의 기술 블로그라면 그려려니 했지만 같은 티스토리 기반의 기술 블로그여도 기본 댓글창을 사용하는 것이 아닌 GitHub와 관련된 어떤 무언가를 쓰는 것 같다고 생각했습니다.

대다수의 기술 블로그 개발자분들이 utterances를 쓴다는 것을 알아냈습니다. 또한 이 utterances가 markdown 형식까지 지원한다고 하여 코멘트를 하더라도 markdown 형식으로 하면 틀에 억압되지 않고 좀 더 편하게 표현하며 소통할 수 있겠다고 생각하여 기존의 티스토리 기본 댓글을 비활성화하고 utterances을 적용하자는 생각을 했습니다.

GitHub에 repository 생성

보통 생성을 할 때 blog-comments 라는 이름으로 생성을 많이 하십니다. 필자는 낙타법 표기가 편하여서 낙타법으로 생성하였습니다. 이렇게 꼭 지정된 이름이 아니고 각자 자신이 원하는 임의의 이름을 짓습니다.

Repository에 utterance.json 파일 생성

creating a new file

Repository를 생성하면 위의 이미지와 같은 화면이 바로 처음에 보입니다. 여기서 creating a new file 을 클릭합니다.

utterances.json

{
  "origins": ["https://sukvvon.tistory.com"]
}

utterance.json 파일이라고 이름을 짓고, 위의 코드를 내용에 기입합니다. 그리고 Commit new file 버튼을 클릭하여 파일을 생성합니다.

Repository에 utterances 설치

utterances 설치

github.com/apps/utterances 로 이동하여 utterance를 설치하는 install 버튼을 클릭합니다.

Only select repositories

utterances를 설치하는데 All repositorty가 아닌 Only select reposotories를 선택해 필자 기준 생성한 repository인 sukvvon/blogComments만 해당되게 합니다.

utterances script code 생성

Repo에 사용자 repository 주소 작성

repo라고 되어있는 부분에 사용자의 repo 이름 즉 필자 기준으로 sukvvon/blogComments를 기입합니다.

Theme 선택

Theme list

Github Light
Github Dark
Preferred Color Scheme
GitHub Dark Orange
Icy Dark
Dark Blue
Photon Dark
Boxy Light

Theme list에서 자신이 원하는 스타일의 테마를 선택합니다.

Mapping 방식 선택 및 script 복사

<script src="https://utteranc.es/client.js"
        repo="sukvvon/blogComments"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

각자 맞는 mapping 방식을 설정하면 됩니다. 필자는 포스팅 주소가 각각 존재하기 때문에 Issue title contains page pathname을 그대로 선택했습니다.

그리고 완성된 Enable Utterances의 script를 복사합니다.

블로그에 utterance 설정

꾸미기 -> 스킨 편집

티스토리 블로그를 예시로 설명합니다.

사용자의 티스토리 블로그의 관리에서 꾸미기의 스킨 편집을 클릭합니다.

html 편집

html 편집을 클릭합니다.

복사한 utterances script 삽입

<script src="https://utteranc.es/client.js"
        repo="sukvvon/blogComments"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

스킨마다 다르지만 티스토리의 Book Club 스킨을 기준으로 commend + F 키를 통해 댓글을 검색하거나 comment를 검색하여 댓글 창 관련 div 태그를 찾습니다.

그 후 복사한 script를 해당하는 div 태그 안에 붙여넣기 합니다.

utterances width 제한 푸는 script 삽입

.utterances {
    max-width: 100% !important;
}

기본적으로 utterances의 max-width: 760px가 설정되어 가로가 최대 760px만 보여지게 되어 있습니다. max-width: 100% !important로 설정하는 script를 블로그 css 파일 맨 하단 혹은 자신이 기억할 수 있는 위치에 작성하여 너비 제한을 우선적으로 해제하여 너비를 100% 활용하도록 합니다. 100%가 아니더라도 자신의 블로그에 맞게 width를 설정합니다.

utterances 적용 확인

적용한 utterances가 잘 작동하는지 가장 최근 포스팅한 게시물에 들어가서 태스트 댓글을 남겨보았습니다.

댓글이 달리는대로 utterances bot이 이를 실시간으로 파악해 메일로 보내어 사용자에게 통보하고

GitHub에서 또한 sukvvon/blogComments repository의 issues에 댓글이 달리는 것을 확인할 수 있었습니다.

참고

utterances를 블로그 댓글로 적용하기

[Git] GitHub Personal access token 생성 및 사용하기

sukvvon — Thu, 21 Oct 2021 13:45:44 +0900

Warning

Warning: Error searching on GitHub: GitHub API Error: Bad credentials
The GitHub credentials in the macOS keychain may be invalid.
Clear them with:
  printf "protocol=https\nhost=github.com\n" | git credential-osxkeychain erase
Create a GitHub personal access token:
    https://github.com/settings/tokens/new?scopes=gist,public_repo,workflow&description=Homebrew
  echo 'export HOMEBREW_GITHUB_API_TOKEN=your_token_here' >> ~/.zshrc

평상시처럼 Homebrew를 사용하여 search 명령어를 사용하였더니 위와 같은 경고 문구가 나타났습니다. 해당하는 정보들은 무리 없이 출력되었으나 서두에 나오는 경고 문구를 해결하기 위해 알아보기 시작하였습니다.

Warning: Error searching on GitHub: GitHub API Error: Bad credentials
The GitHub credentials in the macOS keychain may be invalid.

다음 문구에서 GitHub API가 에러가 발생했는데 증명이 되지 않는다. GitHub 증명에 관련된 masOS의 키체인이 유효하지 않은 것 같다라고 합니다.

키체인 그리고 토큰이라고 해서 2021.07.05 Github로부터 메일이 하나 왔던 것이 생각나 메일에서 명시한 링크를 타고 들어가보니 github에서 자사 블로그를 통해 공지한 사항이 보였습니다.

In July 2020, we announced our intent to require the use of token-based authentication (for example, a personal access, OAuth, or GitHub App installation token) for all authenticated Git operations. Beginning August 13, 2021, we will no longer accept account passwords when authenticating Git operations on GitHub.com.

GitHub 블로그에서 공지한 내용은 2021.08.13 일자로 git 관련 작업을 할 경우 계정 암호를 사용하지 않고 토큰을 기반으로 사용한다는 것이었습니다.

그리고 전에 2021.08.14 일에 만들어 놓은 personal access token이 만료가 되었다는 것을 깨닫고

Clear them with:
  printf "protocol=https\nhost=github.com\n" | git credential-osxkeychain erase
Create a GitHub personal access token:
    https://github.com/settings/tokens/new?scopes=gist,public_repo,workflow&description=Homebrew
  echo 'export HOMEBREW_GITHUB_API_TOKEN=your_token_here' >> ~/.zshrc

위 경고문구에서 지향하는 메뉴얼대로 진행하여 Homebrew 토큰을 따로 설정하는 것이 아닌 기존에 있던 personal access token의 기간을 갱신하면 되겠다고 생각했습니다.

Github 접속 및 로그인

Settings 접근

GitHub 에 들어간 후 로그인을 하고 우측 상단의 빨간색 네모 박스 아이콘을 클릭한 후 Setting을 클릭합니다.

Developer Settings 접근

그 후 Developer settings를 클릭합니다.

Personal access tokens -> Generate new token

Personal access tokens를 클릭한 후 Generate new token을 클릭합니다.

Access token 생성

Note에 자신이 원하는 토큰의 명칭을 적고, Expiration 즉 만료기간을 7, 30, 60, 90 등의 기간으로 설정합니다. repo, workflow, gist 항목을 체크 한 후 Generate token을 클릭하여 토큰을 생성합니다.

Warning: Error searching on GitHub: GitHub API Error: Bad credentials
The GitHub credentials in the macOS keychain may be invalid.
Clear them with:
  printf "protocol=https\nhost=github.com\n" | git credential-osxkeychain erase
Create a GitHub personal access token:
    https://github.com/settings/tokens/new?scopes=gist,public_repo,workflow&description=Homebrew
  echo 'export HOMEBREW_GITHUB_API_TOKEN=your_token_here' >> ~/.zshrc

물론 Homebrew에서 경고한 문구에서

https://github.com/settings/tokens/new?scopes=gist,public_repo,workflow&description=Homebrew

이 주소를 들어가도 똑같이 설정을 할 수 있습니다.

Token 복사 및 기억하기

다음과 같이 토큰이 생성이 됩니다. 이 토큰 값은 초기 생성하였을 경우에만 값이 나타나고 그 후 접속하였을 경우 제가 평상시 사용하고 있는 defaultToken 처럼 나타나지 않습니다. 그러므로 토큰 값을 복사하여 자신의 메모장 같은 기억하기 쉬운 곳에 붙여넣기하여 기억합니다.

다시 접속하였을 경우 토큰 값이 나타나지 않는 것을 알 수 있습니다.

github.com 키체인 수정

키체인 접근 애플리케이션 실행

macOS 기준입니다.

macOS 기본 어플인 키체인 접근 애플리케이션을 실행합니다.

github.com 항목 접근

github를 검색한 후 이름은 github.com이고 종류는 인터넷 암호이며 키체인은 로그인으로 된 항목을 클릭합니다.

암호 보기 체크 상자 설정

암호 보기 항목을 체크한 후 암호를 입력하여 허용 버튼 클릭합니다.

Token 입력 후 저장

Token 을 입력한 후 변경사항 저장 버튼을 클릭합니다.

Result

다시 brew search zsh 입력해보니 경고 문구가 뜨지 않고 깔끔하게 출력되는 것을 확인할 수 있습니다.

CSR(Clinet-Side Rendering) vs SSR(Server-Side Rendering)

sukvvon — Sun, 3 Oct 2021 12:37:35 +0900

SPA

SPA : Single Page Application

하나의 HTML파일을 기반으로 JavaScript를 이용해 동적으로 재작성하는 최초 한 번 페이지 전체를 로딩하고, 그 속에 있는데 데이터만 변경해서 사용하는 애플리케이션입니다.

Gmail, Google Maps, AirBNB, Netflix, Paypal 등의 기업에서 SPA를 사용하여 만듭니다.

CSR

이미지 출처

CSR: Client Side Rendering

브라우저가 HTML과 JS 파일을 요청을 하고 로드가 되면 그 후 사용자의 기호에 따라 동적으로 렌더링을 시키는 것입니다.

실생활 예로 들자면 서점에 방문하여 필요한 책을 구입하는데 1시간을 소요하고 집에서 필요한 책이 있을 때 책장에서 꺼내서 보는 것입니다.

장점

필요한 데이터만 받으므로 트래픽이 감소합니다.
새로고침을 할 필요가 없어 사용자 경험(UX)이 좋아져 네이티브 앱과 같은 느낌의 경험을 할 수 있습니다.

단점

검색 봇의 크롤러가 데이터 수집에 어려움을 겪어 검색엔진 최적화(SEO)에 문제가 될 수 있습니다.
해당하는 모든 스크립트 파일들이 로드가 될 때까지 기다려야 합니다.

SSR

이미지 출처

SSR: Server Side Rendering

브라우저가 페이지를 요청할 때마다 해당 페이지에 맞는 HTML, CSS, JS 파일 그리고 데이터를 받아와서 렌더링을 시킵니다.

실생활 예로 들자면 필요한 책이 있을 때마다 서점을 수시로 방문하는 것과 같습니다.

장점

렌더링을 이용한 것이 아니므로 검색엔진을 최적화(SEO)시킵니다.
초기로딩의 성능을 개선하기 때문에 컨텐츠를 빨리 볼 수 있습니다.

단점

라우터를 사용하여 프로젝트가 복잡해집니다.
서버에 요청을 수시로 하기 때문에 성능이 악화될 수 있습니다.

참고

[주니어탈출기] 서버사이드렌더링(SSR) & 클라이언트사이드렌더링(CSR)

Client-side rendering vs. server-side rendering

Must-Know-About-Frontend

[Nodejs] nvm으로 Nodejs 버전 관리하기

sukvvon — Wed, 29 Sep 2021 22:48:08 +0900

nvm이란?

nvm은 node version manager의 줄임말입니다. Node.js을 비공식적으로 여러 버전을 하나의 컴퓨터에 설치할 수 있도록 도와주며 사용자는 손쉽게 여러 개의 버전을 제약 없이 사용할 수 있습니다. POSIX-compliant shell (sh, dash, ksh, zsh, bash)에서 호환되며 unix, macOS, 그리고 windows WSL 플랫폼에서 작동합니다.

nvm 설치

brew install nvm

macOS 기준으로 nvm을 설치하기 가장 간단한 방법은 homebrew를 통하여 설치하는 것입니다. 위 명령어 brew install nvm 을 통해서 nvm을 설치합니다.

nvm 설치 후 초기 설정

Please note that upstream has asked us to make explicit managing
nvm via Homebrew is unsupported by them and you should check any
problems against the standard nvm install method prior to reporting.

You should create NVM's working directory if it doesn't exist:

  mkdir ~/.nvm

Add the following to ~/.zshrc or your desired shell
configuration file:

  export NVM_DIR="$HOME/.nvm"
  [ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  # This loads nvm
  [ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

You can set $NVM_DIR to any location, but leaving it unchanged from
/usr/local/opt/nvm will destroy any nvm-installed Node installations
upon upgrade/reinstall.

Type `nvm help` for further information.

homebrew를 통해 nvm을 설치하게 되면 위와 같은 주의 사항 및 안내 문구가 나옵니다.

.nvm 디렉토리 생성

mkdir ~/.nvm

make directory를 의미하는 mkdir 명령어를 사용하여 ~ 즉 home directory에 .nvm 파일을 만듭니다. .nvm 파일은 nvm's working directory 즉 nvm을 활용하여 이루어진 모든 것이 존재하게 되는 곳이므로 이 .nvm 파일이 없다면 우선적으로 만들어야만합니다.

.zshrc에 환경변수 추가

vi ~/.zshrc

.zshrc 파일을 vim 에디터를 활용하여 연 후

#nvm
export NVM_DIR="$HOME/.nvm"
  [ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  # This loads nvm
  [ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

위의 코드를 제일 끝 줄에 붙여넣기 하여 :wq 를 하여 저장 후 빠져나옵니다.

source ~/.zshrc

그리고 source ~/.zhsrc 를 통해서 쉘을 재시작 해줍니다.

vim 관련해서 생소하시다면 아래 간단하게 정리된 설명을 보시기 바랍니다.

vim 간단 사용법

i, a, o는 명령모드에서 삽입모드로 전환하는 대표적인 키입니다.

i : 현재 커서 앞에 삽입합니다.
a : 현재 커서 뒤에 삽입합니다.
o : 현재 커서 행 아래에 새 행을 삽입합니다.

삽입모드가 끝나고 난 후 명령모드로 전환을 합니다.

ESC : 편집모드에서 명령모드로 전환합니다.
h, j, k, l : 좌, 아래, 위, 우로 한 칸씩 움직일 수 있습니다. 기존 화살표로도 사용할 수 있으나 권장하지 않습니다.

$ nvm --version
0.38.0

nvm --version 을 하였을 경우 버전 정보가 출력된다면 정상적으로 환경변수가 적용이 완료되고 nvm을 사용할 수 있는 것입니다.

nvm을 활용하여 lts 버전 설치하기

nvm ls | list

우선 nvm ls 을 통하여 목록을 확인해봅니다. 당연히 nvm 설치 후 아무것도 설치를 하지 않았으니 목록에 N/A 가 뜨면서 아직 node가 어떤 버전도 설치가 되지 않았음을 알 수 있습니다.

만약 nvm을 이용하지 않는다면 공식 홈페이지에서는 LTS버전 즉 Long Term Support인 14.17.6 와 현재 버전인 16.10.0 두 가지를 쉽게 다운 받을 수 있습니다.

가장 최신 버전인 16.10.0은 기능이 불안정하거나 일부 모듈이 작동하지 않을 수 있지만 최신14.17.6 LTS 버전은 앞에 14와 같이 4, 6, 8, 10, 12, 14 즉 앞이 짝수 단위 숫자의 버전이 지정되며 보다 더 안정적이고 오랜 기간 지원합니다.

그러므로 필자는 LTS 버전을 nvm을 이용하여 설치를 할 것입니다.

nvm install --lts

nvm으로 가장 최근 LTS 버전을 설치합니다. 즉 14.17.6 버전을 설치합니다.

nvm list-remote

nvm list-remote 명령어를 통해서 설치 가능한 node 목록을 확인할 수 있습니다. 꼭 최신 LTS 버전이 아니더라도 자신이 원하는 버전을 예를 들어 nvm install 12.13.0 처럼 찾아서 설치를 할 수 있습니다.

그 후 nvm ls 을 통해서 확인하면 다음과 같이 확인하면 최신 LTS 버전이 설치가 되고 v14.17.6 버전을 사용중이라는 것을 알 수 있습니다.

nvm 명령어 간단한 예시

Example:
  nvm install 8.0.0                     Install a specific version number
  nvm use 8.0                           Use the latest available 8.0.x release
  nvm run 6.10.3 app.js                 Run app.js using node 6.10.3
  nvm exec 4.8.3 node app.js            Run `node app.js` with the PATH pointing to node 4.8.3
  nvm alias default 8.1.0               Set default node version on a shell
  nvm alias default node                Always default to the latest available node version on a shell

  nvm install node                      Install the latest available version
  nvm use node                          Use the latest version
  nvm install --lts                     Install the latest LTS version
  nvm use --lts                         Use the latest LTS version

  nvm set-colors cgYmW                  Set text colors to cyan, green, bold yellow, magenta, and white

Note:
  to remove, delete, or uninstall nvm - just remove the `$NVM_DIR` folder (usually `~/.nvm`)

위 코드는 nvm help 에서 설명하는 예입니다.

nvm install 8.0.0                     Install a specific version number

nvm으로 사용자가 원하는 버전을 지정하여 설치하는 것입니다.

nvm use 8.0                           Use the latest available 8.0.x release

nvm으로 8버전 중 가장 최신의 버전을 사용하는 것입니다.

nvm run 6.10.3 app.js                 Run app.js using node 6.10.3

nvm을 활용하여 6.10.3 버전으로 app.js 파일을 실행하는 것입니다.

nvm exec 4.8.3 node app.js            Run `node app.js` with the PATH pointing to node 4.8.3

nvm을 활용하여 node app.js 를 4.8.3 버전을 사용하여 실행하는 것입니다.

nvm alias default 8.1.0               Set default node version on a shell

nvm을 활용하여 shell에 8.1.0 버전을 기본으로 설정하는 것입니다.

nvm alias default node                Always default to the latest available node version on a shell

nvm을 활용하여 항상 최신의 node 버전을 shell에 기본으로 설정하는 것입니다.

nvm install node                      Install the latest available version

nvm을 활용하여 최신 node 버전을 설치하는 것입니다.

nvm use node                          Use the latest version

설치한 최신 버전의 node를 사용하는 것입니다.

nvm install --lts                     Install the latest LTS version

nvm을 활용하여 최신 버전의 LTS를 설치하는 것입니다.

nvm use --lts                         Use the latest LTS version

설치한 최신 버전의 LTS를 사용하는 것입니다.

nvm set-colors cgYmW                  Set text colors to cyan, green, bold yellow, magenta, and white

nvm의 텍스트 색상을 cgYmw 즉 청록, 녹, 볼드체 노랑, 마젠타, 흰색으로 지정하는 것입니다.

[Git] 이전 commit message 수정하기(reword)

sukvvon — Mon, 9 Aug 2021 20:14:08 +0900

계기

전에 commit 하였던 message가 다시 보니 마음에 들지 않아 수정을 해야겠다는 생각을 하였습니다. 가장 최근에 commit을 했다면 git commit --amend 를 통해 수정을 할 수 있었겠지만 가장 최근에 한 것이 아니어서 다른 방법을 통해 수정을 해야만 했습니다.

git rebase -i HEAD~[number]

git rebase -i HEAD~10

git rebase -i HEAD~10 명령어를 입력하면 위 이미지와 같은 창이 나옵니다.

HEAD는 첫 번째를 의미하고 10은 HEAD를 포함하여 시작하여 10번째 commit 항목을 의미합니다. 여기서 2,3,7번째 항목의 commit message를 바꾸기 위하여 pick 을 reword 으로 수정을 하였습니다.

pick -> reword

pick 에서 reword 으로 수정을 마친후 vim 에디터를 사용 중이므로 :wq 를 통해서 저장 후 빠져나옵니다.

빠져나온다면 바로 pick 을 reword 로 바꾼 항목에 해당하는 창이 나옵니다. 수정 후 :wq 를 하여 빠져나오면 차례대로 reword 로 바꾼 항목들에 해당하는 창이 순차적으로 나옵니다. 즉 reword 로 바꾼 항목의 수만큼 창이 연달아 나옵니다.

git push --force origin master

git log --online --decoreate --graph | glog

glog 명령어를 통하여 log를 확인해보니 수정된 항목들이 새로 commit이 되어있는 것을 알 수 있습니다.

git push --force origin master

명령어 실행 후 glog 를 실행해 log를 확인해보니 깔끔하게 수정한대로 정리가 되어 올라가있는 것을 알 수 있습니다.

conclusion

git rebase -i HEAD~[number] 실행 후 pick -> edit 으로 바꾸는 것과 과정을 비교해보니 pick -> reword 로 하는 것은 위 이미지와 같이 pick -> edit 의 과정인 git commit --amend 와 git rebase --continue 명령어를 실행시킬 필요가 없이 간단하였습니다.

edit의 stop for amending 즉 개정하기 위해 멈추는 것이고, reword의 edit the commit message 즉 커밋 메시지를 편집하는 것의 차이여서 edit을 할 때는 git commit --amend 와 git rebase --continue 와 같은 과정을 거쳐야 하는 것이고, reword 는 그렇지 않다는 생각을 하였습니다.

[Git] 이전 commit message 수정하기(edit)

sukvvon — Sun, 11 Jul 2021 14:16:12 +0900

Introduction

전에 commit 하였던 message가 다시 보니 마음에 들지 않아 수정을 해야겠다는 생각을 하였습니다. 가장 최근에 commit을 했다면 git commit --amend 를 통해 수정을 할 수 있었겠지만 가장 최근에 한 것이 아닌 HEAD로부터 3번째 항목이이서 다른 방법을 통해 수정을 해야만 했습니다.

git rebase -i HEAD~[number]

git rebase -i HEAD~5

git rebase -i HEAD~5 명령어를 입력하면 위 사진과 같은 화면이 나옵니다.

HEAD는 첫 번째를 의미하고 5는 HEAD를 포함하여 시작하여 5번째 commit 항목을 의미합니다. 여기서 3번째 항목의 commit message를 바꾸기 위하여 pick 을 edit 으로 수정을 합니다.

pick -> edit

pick 에서 edit 으로 수정을 마친후 vim 에디터를 사용 중이므로 :wq 를 통해서 저장 후 빠져나옵니다.

빠져나온다면 위와 같은 화면을 보실 수 있습니다. master가 - 87760db >R> 로 바뀐 것을 볼 수 있습니다. 그리고 git commit --amend 를 통해 edit 한 항목에 대해 수정을 하고 git rebase --continue 를 하면 된다는 것 또한 알 수 있습니다.

git commit --amend

git commit --amend

기존에는 가장 최근 commit message를 수정할 때 사용하였으나 git rebase -i HEAD~5 를 통해 pick 을 edit 으로 수정하였으므로 이에 대해 수정을 할 수 있습니다. 자신이 수정하고 싶은 message를 입력하고 :wq를 통해 저장후 빠져나옵니다.

git rebase --continue

git rebase --continue

git rebase --continue 를 통해 커밋을 적용시킵니다. 다른 항목을 수정하고 싶다면 위와 같은 과정을 반복하면 됩니다.

git log --stat

git log --stat | gst

git log --stat 즉 gst를 통해 log를 확인해보니 정상적으로 수정을 완료하였다는 것을 알 수 있습니다.

git push --force origin master

git push --force origin master

이미 github에 push한 상태로 commit message를 수정한 것이므로 git push --force origin master를 통해 다시 push를 함으로써 재정렬해줍니다.

conclusion

해당하는 github repository로 이동을 해보니 제가 원하는대로 commit message가 변경된 것을 알 수 있었습니다.

참고 : git-scm

[Homebrew] SHA256 mismatch

sukvvon — Thu, 1 Jul 2021 13:01:01 +0900

brew install IntelliJ-idea

Intellij-idea가 새로운 버전이 나와서 brew upgrade 를 한 후 brew upgrade --greedy 명령어를 통해 IntelliJ-idea 및 다른 formula 및 cask 들을 업데이트 하려고 하였습니다. 하지만 위 사진과 같이 Error: SHA256 mismatch 문구가 뜨면서 업데이트를 실패했습니다.

오류인가 싶어서 brew rm Intellij-idea 명령어를 통해 기존 intellij-idea를 삭제하고 다시 설치를 시도 하였으나 다음과 같이 설치에 실패했습니다.

github's IntelliJ-idea.rb

https://github.com/Homebrew/homebrew-cask/blob/HEAD/Casks/intellij-idea.rb

github에 올라온 intellij-idea.rb 파일을 일부 발췌하여 보니 필자는 인텔맥을 사용하므로 기준으로 말씀드리자면 sha256 값이 제가 brew 를 통해서 다운 받은 sha256 값과 다른 860c712fdd645229375ec3d091eeb98f8f9ea9b955a2e5cfc4e8f5c276485e46 를 요구한다는 것을 알 수 있었습니다.

다르기 때문에 dmg 파일을 다운 받더라도 dismatch 현상이 일어나서 설치가 되지 않았다는 것을 확인하였습니다.

Expected: 860c712fdd645229375ec3d091eeb98f8f9ea9b955a2e5cfc4e8f5c276485e46 // github에서 요구하는 sha256 값
  Actual: 156f5f12ae5c45b6d3c0b72af9105cdb6a610b0e7dfb32f26686f74b9bcf5ed4 // 필자가 요구하는 sha256 값

다음과 같이 다르다는 것을 알고 이것을 수정해야겠다는 생각을 했습니다.

brew edit intellij-idea

brew edit intellij-idea

brew edit 명령어를 입력하니 vim 에디터가 호출되어 vim을 이용하여 기존 sha256 값 860c712fdd645229375ec3d091eeb98f8f9ea9b955a2e5cfc4e8f5c276485e46 을 빨간 박스와 같이 156f5f12ae5c45b6d3c0b72af9105cdb6a610b0e7dfb32f26686f74b9bcf5ed4 로 수정하고 저장하였습니다.

brew install Intellij-idea

brew install intellij-idea

brew install intellij-idea 명령어를 실행하였더니 정상적으로 설치가 되었습니다.

[Git] commit message 효율적으로 작성하기

sukvvon — Mon, 17 May 2021 13:42:00 +0900

https://blog.ull.im/engineering/2019/03/10/logs-on-git.html

ull.im

울려 퍼지다.
반향하다.
공명하다.

blog.ull.im

git을 사용하면서 commit message를 형식에 맞게 사용해야 한다는 필요성을 느꼈다.

위 글을 작성해주신 작성자분께 감사하고 연습하면서 commit message를 작성을 해야겠다.

[Vim] vim 명령어 모음집

sukvvon — Sun, 16 May 2021 23:31:51 +0900

일반

:h[elp] keyword - 도움말 열기
:sav[eas] file - 다른 이름으로 저장
:clo[se] - 현재 창 닫기
:ter[minal] - 터미널 열기
K - 커서가 가리키는 단어의 설명글 열기

커서이동

h - 왼쪽으로 한 칸 이동
j - 아래로 한 칸 이동
k - 위로 한 칸 이동
l - 오른쪽으로 한 칸 이동
H - 현재화면 상단으로 점프
M - 현재화면 중단으로 점프
L - 현재화면 하단으로 점프
w - 다음 단어 시작으로 점프
W - 다음 단어 시작으로 점프 (특수문자 포함)
e - 다음 단어 끝으로 점프
E - 다음 단어 끝으로 점프 (특수문자 포함)
b - 이전 단어 시작으로 점프
B - 이전 단어 시작으로 점프 (특수문자 포함)
% - 현재 괄호의 짝으로 점프 (:h matchpairs를 통해 더 많은 정보를 얻을 수 있습니다.)
0 - 현재 행 시작으로 점프 (공백 포함)
^ - 현재 행 시작으로 점프
$ - 현재 행 끝으로 점프 (공백 포함)
g_ - 현재 행 끝으로 점프
gg - 문서 첫 줄 시작으로 점프
G - 문서 끝 줄 시작으로 점프
5gg or 5G - 5번째 행 시작으로 점프
gd - 지역변수 선언위치로 점프
gD - 전역변수 선언위치로 점프
fx - 다음 검색 문자 x로 점프
tx - 다음 검색 문자 x 앞에 점프
Fx - 이전 검색 문자 x로 점프
Tx - 이전 검색 문자 x 뒤에 점프
; - 최근 f/t/F/T 명령어 실행
, - 최근 F/T/f/t 명령어 실행
} - 다음 단락으로 점프
{ - 이전 단락으로 점프
zz - 화면 위치 중간으로 조정
Ctrl + e - 한 줄 아래로 화면 조정
Ctrl + y - 한 줄 위로 화면 조정
Ctrl + b - 한 화면 위로 조정
Ctrl + f - 한 화면 아래로 조정
Ctrl + d - 반 화면 아래로 조정
Ctrl + u - 반 화면 위로 조정

이동 명령 앞에 숫자를 붙이면 그 수만큼 반복합니다.

4j는 4행 아래로 이동할 수 있습니다.

삽입 모드

i - 현재 커서 앞에 삽입
I - 현재 커서 행 시작에 삽입
a - 현재 커서 뒤에 삽입
A - 현재 커서 행 끝에 삽입
o - 현재 커서 행 아래에 새 행을 삽입
O - 현재 커서 행 위에 새 행을 삽입
ea - 단어 끝 뒤에 삽입
Ctrl + h - 이전 문자 제거
Ctrl + w - 이전 단어 제거
Ctrl + j - 한 줄 바꿈
Ctrl + t - 한 탭 들여쓰기
Ctrl + d - 한 탭 내어쓰기
Ctrl + n - 다음 단어 탐색 (자동완성)
Ctrl + p - 이전 단어 탐색 (자동완성)
Ctrl + rx - 레지스터 x의 내용 삽입
Esc - 삽입모드 종료

편집 모드

r - 한 글자 바꾸기
J - 현재 행과 다음 행 연결
gJ - 현재 행과 다음 행 연결 (공백무시)
gwip - 단락 리플로우
g~ - 커서 이동으로 대·소문자 전환
gu - 커서 이동으로 소문자 전환
gU - 커서 이동으로 대문자 전환
cc - 한 행 전체 새로 쓰기
C - 한 행 끝까지 새로 쓰기
c$ - 한 행 끝까지 새로 쓰기
ciw - 한 단어 전체 새로 쓰기
cw - 한 단어 끝까지 새로 쓰기
s - 한 문자 새로 쓰기
S - 한 행 전체 새로 쓰기 (cc와 동일)
xp - 잘라내고 붙여넣기
u - 실행취소
U - 최근 수정한 줄 복원(실행취소)
Ctrl + r - 다시실행
. - 최근 명령어 반복

선택 모드 (비주얼 모드)

v - 비주얼 모드
V - 비주얼 라인
o - 선택 영역 반대쪽 끝으로 점프
Ctrl + v - 비주얼 블록
O - 블록의 반대쪽 모서리로 이동
aw - 단어 선택
ab - 소괄호() 구간 선택
aB - 중괄호{} 구간 선택
at - 태그<> 구간 선택
ib - 소괄호() 내부 선택
iB - 중괄호{} 내부 선택
it - 태그<> 내부 선택
Esc - 선택 모드 종료

b 또는 B 대신에 ( 또는 { 사용가능.

선택 모드 명령

> - 선택 행 들여쓰기
< - 선택 행 내어쓰기
y - 선택 구간 복사
d - 선택 구간 삭제
~ - 대소문자 반전
u - 선택 구간 소문자 전환
U - 선택 구간 대문자 전환

레지스터

:reg[isters] - 레지스터 내용 확인
"xy - 레지스터 x 복사
"xp - 레지스터 x 붙여넣기
"+y - 클립보드 복사
"+p - 클립보드 붙여넣기

레지스터는 ./viminfo에 저장되고, 다음 Vim 재시작 때 다시 읽어들입니다.

특수 레지스터:

0 - 최근 복사 레지스터
" - 최근 사용 레지스터
% - 현재 파일명
# - 대체 파일명
* - 클립보드 (X11 primary)
+ - 클립보드 (X11 clipboard)
/ - 최근 검색 패턴
: - 최근 Vim 명령줄
. - 최근 삽입 텍스트
- - 최근 제거 문자
= - 표현식 레지스터
_ - 블랙홀 레지스터

마킹

:marks - 마킹 항목 표시
ma - 현재 위치를 a로 마킹
`a - 마크 a로 점프
y`a - 마크 a까지 복사
`0 - 종료 전 커서위치로 점프
`" - 최근 편집한 커서 위치로 점프
`. - 최근 변경한 커서 위치로 점프
`` - 최근 점프 전 위치로 점프
:ju[mps] - 점프목록
Ctrl + i - 이전 점프목록 위치로 점프
Ctrl + o - 다음 점프목록 위치로 점프
:changes - 변경목록
g, - 이전 변경목록 위치로 점프
g; - 다음 변경목록 위치로 점프
Ctrl + ] - 커서가 가리키는 태그로 점프

마킹한 곳으로 점프 시 그레이브 액센트 (`) 또는 아포스트로피 (') 모두 사용가능합니다. 아포스트로피 사용 시, 마킹한 곳의 줄 머리로 이동합니다. (공백 미포함)

매크로

qa - 매크로 a 기록 시작
q - 매크로 기록 중지
@a - 매크로 a 실행
@@ - 최근 매크로 재실행

잘라내기와 붙여넣기

yy - 한 행 복사하기
2yy - 2줄 복사하기
yw - 다음 단어까지 복사하기
y$ - 한 행 끝까지 복사하기
p - 커서 뒤에 붙여넣기
P - 커서 앞에 붙여넣기
dd - 한 행 잘라내기
2dd - 2줄 잘라내기
dw - 다음 단어까지 잘라내기
D - 한 행 끝까지 잘라내기
d$ - 한 행 끝까지 잘라내기
x - 한 문자 잘라내기

문단모양

>> - 한 탭 들여쓰기
<< - 한 탭 내어쓰기
>% - 중·소괄호 구간 들여쓰기
>ib - 소괄호 내부 들여쓰기
>at - 태그 구간 들여쓰기
3== - 3줄 자동정렬
=% - 중·소괄호 구간 자동정렬
=iB - 중괄호 내부 자동정렬
gg=G - 전체 버퍼 자동정렬
]p - 붙여쓰고 현재 행 들여쓰기 조

나가기

:w - 저장하기
:w !sudo tee % - 관리자로 저장하기
:wq or :x or ZZ - 저장하고 나가기
:q - 나가기 (변경확인)
:q! or ZQ - 나가기 (변경무시)
:wqa - 모든 탭 저장하고 나가기

검색과 바꾸기

/pattern - 패턴 검색 (순방향)
?pattern - 패턴 검색 (역방향)
\vpattern - 특수 매직 패턴
n - 다음 검색항목으로 점프
N - 이전 검색항목으로 점프
:%s/old/new/g - 모든 old를 new로 바꾸기
:%s/old/new/gc - 모든 old를 new로 확인하며 바꾸기
:noh[lsearch] - 검색 하이라이트 제거

여러 파일 검색

:vim[grep] /pattern/ {`{file}`} - 여러 파일에서 패턴 검색

e.g. :vim[grep] /foo/ **/*

:cn[ext] - 다음 검색항목으로 점프
:cp[revious] - 이전 검색항목으로 점프
:cope[n] - 일치 목록을 새 창으로 열기
:ccl[ose] - 일치 목록 창 닫기

탭

:tabnew or :tabnew {page.words.file} - 새 탭에서 파일 열기
Ctrl + wT - 현재 분할 창을 새로운 탭으로 이동
gt or :tabn[ext] - 다음 탭으로 이동
gT or :tabp[revious] - 이전 탭으로 이동
#gt - #번째 탭으로 이동
:tabm[ove] # - 현재 탭을 #번째로 이동
:tabc[lose] - 현재 탭과 그 안의 창들 닫기
:tabo[nly] - 현재 탭 이외의 모든 탭 닫기
:tabdo command - 모든 탭에서 command 실행하기 (예를 들어, :tabdo q - 열린 모든 탭 닫기)

여러 파일 작업

:e[dit] file - 새 버퍼에서 파일 편집
:bn[ext] - 다음 버퍼로 이동
:bp[revious] - 이전 버퍼로 이동
:bd[elete] - 버퍼 삭제 (파일 닫기)
:b[uffer]# - #번째 버퍼로 이동
:b[uffer] file - 파일명 버퍼로 이동
:ls or :buffers - 열린 버퍼 모두 나열
:sp[lit] file - 새 버퍼에 파일 열고 상하로 창 분할
:vs[plit] file - 새 버퍼에 파일 열고 좌우로 창 분할
:vert[ical] ba[ll] - 모든 버퍼 열고 좌우로 창 분할
:tab ba[ll] - 모든 버퍼 열고 탭으로 창 분할
Ctrl + ws - 상하로 창 분할
Ctrl + wv - 좌우로 창 분할
Ctrl + ww - 창 전환
Ctrl + wq - 창 닫기
Ctrl + wx - 창 바꾸기
Ctrl + w= - 모든 창 크기 조정
Ctrl + wh - 왼쪽 창으로 이동
Ctrl + wl - 오른쪽 창으로 이동
Ctrl + wj - 아래 창으로 이동
Ctrl + wk - 위 창으로 이동

비교

zf - 폴딩 정의
zd - 폴드 제거
za - 폴드 설정
zo - 폴드 열기
zc - 폴드 닫기
zr - 한 단계씩 폴드 열기
zm - 한 단계씩 폴드 접기
zi - 스마트 폴딩
]c - 다음 수정으로 점프
[c - 이전 수정으로 점프
do or :diffg[et] - 다른 버퍼에서 차이점 얻기
dp or :diffpu[t] - 다른 버퍼로 차이점 보내기
:diffthis - 현재 창 비교모드 열기
:dif[fupdate] - 비교모드 새로고침
:diffo[ff] - 현재 창 비교모드 닫가

폴딩 명령어 (e.g. za)는 한 단계씩 작동합니다. 전체 단계에서 폴딩하기를 원하신다면 대문자 (e.g. zA)를 사용해야합니다.

Terminal에서 vimdiff로 실행하면, 비교모드로 Vim을 시작할 수 있습니다. 이것은 git difftool를 통해서도 확인하실 수 있습니다.

[Git] oh-my-zsh에서 활용할 수 있는 git 단축어 모음집

sukvvon — Sun, 16 May 2021 23:04:28 +0900

https://github.com/ohmyzsh/ohmyzsh/wiki/Cheatsheet

ohmyzsh/ohmyzsh

A delightful community-driven (with 1800+ contributors) framework for managing your zsh configuration. Includes nearly 300 optional plugins (rails, git, OSX, hub, docker, homebrew, node, php, p...

github.com

Git

g	git
ga	git add
gau	git add --update (Also: "git add -u")
gaa	git add --all
gapa	git add --patch
gb	git branch
gba	git branch -a
gbd	git branch -d
gbda	git branch --no-color --merged \| command grep -vE "^(+\|\|\s($(git_main_branch)\|development\|develop\|devel\|dev)\s*$)" \| command xargs -n 1 git branch -d
gbl	git blame -b -w
gbnm	git branch --no-merged
gbr	git branch --remote
gbs	git bisect
gbsb	git bisect bad
gbsg	git bisect good
gbsr	git bisect reset
gbss	git bisect start
gc	git commit -v
gc!	git commit -v --amend
gca	git commit -v -a
gca!	git commit -v -a --amend
gcan!	git commit -v -a --no-edit --amend
gcans!	git commit -v -a -s --no-edit --amend
gcam	git commit -a -m
gcsm	git commit -s -m
gcb	git checkout -b
gcf	git config --list
gcl	git clone --recurse-submodules
gclean	git clean -id
gpristine	git reset --hard && git clean -dffx
gcm	git checkout $(git_main_branch)
gcd	git checkout develop
gcmsg	git commit -m
gco	git checkout
gcount	git shortlog -sn
gcp	git cherry-pick
gcpa	git cherry-pick --abort
gcpc	git cherry-pick --continue
gcs	git commit -S
gd	git diff
gdca	git diff --cached
gdct	git describe --tags `git rev-list --tags --max-count=1`
gds	git diff --staged
gdt	git diff-tree --no-commit-id --name-only -r
gdw	git diff --word-diff
gf	git fetch
gfa	git fetch --all --prune
gfo	git fetch origin
gg	git gui citool
gga	git gui citool --amend
ggpnp	git pull origin $(current_branch) && git push origin $(current_branch)
ggpull	git pull origin $(current_branch)
ggl	git pull origin $(current_branch)
ggpur	git pull --rebase origin $(current_branch)
ggu	git pull --rebase origin $(current_branch)
glum	git pull upstream $(git_main_branch)
ggpush	git push origin $(current_branch)
ggp	git push origin $(current_branch)
ggfl	git push --force-with-lease origin <your_argument>/$(current_branch)
ggsup	git branch --set-upstream-to=origin/$(current_branch)
gpsup	git push --set-upstream origin $(current_branch)
ghh	git help
gignore	git update-index --assume-unchanged
gignored	git ls-files -v
git-svn-dcommit-push	git svn dcommit && git push github master:svntrunk
gk	\gitk --all --branches
gke	\gitk --all $(git log -g --pretty=%h)
gl	git pull
glg	git log --stat
glgg	git log --graph
glgga	git log --graph --decorate --all
glgm	git log --graph --max-count=10
glgp	git log --stat -p
glo	git log --oneline --decorate
glog	git log --oneline --decorate --graph
glol	git log --graph --pretty=\'%Cred%h%Creset -%C(auto)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset\'
glola	git log --graph --pretty=\'%Cred%h%Creset -%C(auto)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset\' --all
glp	_git_log_prettily (Also: "git log --pretty=$1")
gm	git merge
gma	git merge --abort
gmom	git merge origin/$(git_main_branch)
gmt	git mergetool --no-prompt
gmtvim	git mergetool --no-prompt --tool=vimdiff
gmum	git merge upstream/$(git_main_branch)
gp	git push
gpd	git push --dry-run
gpoat	git push origin --all && git push origin --tags
gpu	git push upstream
gpv	git push -v
gr	git remote
gra	git remote add
grb	git rebase
grba	git rebase --abort
grbc	git rebase --continue
grbd	git rebase develop
grbi	git rebase -i
grbm	git rebase $(git_main_branch)
grbs	git rebase --skip
grh	git reset (Also: "git reset HEAD")
grhh	git reset --hard (Also: "git reset HEAD --hard")
grmv	git remote rename
grrm	git remote remove
grs	git restore
grset	git remote set-url
grt	cd $(git rev-parse --show-toplevel \|\| echo ".")
gru	git reset --
grup	git remote update
grv	git remote -v
gsb	git status -sb
gsd	git svn dcommit
gsi	git submodule init
gsps	git show --pretty=short --show-signature
gsr	git svn rebase
gss	git status -s
gst	git status
gsta	git stash push
gstaa	git stash apply
gstd	git stash drop
gstl	git stash list
gstp	git stash pop
gstc	git stash clear
gsts	git stash show --text
gsu	git submodule update
gts	git tag -s
gunignore	git update-index --no-assume-unchanged
gunwip	git log -n 1 \| grep -q -c "--wip--" && git reset HEAD~1
gup	git pull --rebase
gupv	git pull --rebase -v
gvt	git verify-tag
gwch	git whatchanged -p --abbrev-commit --pretty=medium
gwip	git add -A; git rm $(git ls-files --deleted) 2> /dev/null; git commit --no-verify --no-gpg-sign -m "--wip-- [skip ci]"

존재한다는 것은 알고 있었지만 이렇게 많을 줄은 몰랐다.

활용해서 익숙해지도록 해야겠다.

[MacOS] Terminal을 예쁘게 사용하자 asciiquarium

sukvvon — Sun, 16 May 2021 10:19:43 +0900

asciiquarium 설치하기

brew install asciiquarium

brew install asciiquarium을 통해 asciiquarium을 설치합니다.

asciiquarium 실행하기

asciiquarium

Terminal에 asciiquarium을 입력합니다.

다음과 같이 이쁘게 실행되는 것을 볼 수 있습니다.

asciiquarium 명령어 모음

README.md 파일을 참고하자면 asciiquarium 명령어는 딱 세 가지가 있습니다.

q = quit -> 나가기
r = redraw (will recreate all entities) -> 새로고침
p = toggle pause -> 멈춤

참고해서 활용하면 작업하는 환경에서 심심하지 않고 좋을 것 같습니다.

[MacOS] Terminal을 예쁘게 사용하기 cowsay, fortune

sukvvon — Sat, 15 May 2021 13:44:23 +0900

cowsay

https://www.wikiwand.com/en/Cowsay

https://github.com/tnalpgge/rank-amateur-cowsay

brew home cowsay

Cowsay는 terminal에서 ASCII아트 메시지와 함께 소를 그린 그림을 출력하게 해주는 프로그램입니다.

cowsay 설치하기

brew install cowsay

우선 brew를 이용하여 cowsay를 설치합니다.

cowsay 출력하기

cowsay hello world!

다음과 같이 cowsay가 출력되는 모습을 볼 수 있습니다.

cowsay hello world | lolcat

lolcat을 활용한다면 색을 입혀서 이쁘게 할 수 있습니다.

fortune

https://www.ibiblio.org/pub/linux/games/amusements/fortune/!INDEX.html

brew home fortune

fortune은 전세계에 존재하는 명언을 모아놓은 프로그램입니다.

fortune 설치하기

brew install fortune

brew를 이용하여 fortune 설치를 합니다.

cowsay와 fortune 활용하기

fortune | cowsay | lolcat

fortune과 cowsay와 lolcat을 활용하면 다음과 같이 출력을 할 수 있습니다.

cowsay와 fortune 모두 다 많은 옵션이 있지만 그 중에서도 가장 활용도가 높은 것 위주로 설명을 하려고 합니다.

fortune -s

fortune -s | cowsay -f dragon-and-cow | lolcat

위와 같은 문장을 예로 들어보겠습니다.

fortune의 -s 는 여러 fortune 중 짧은 문장만 출력을 해주는 것입니다.

-s 옵션을 제거 한 경우

긴 문장 짧은 문장 무작위로 출력되지만 위 사진과 같이 긴 문장이 출력 될 수 있는 것을 볼 수 있습니다.

cowsay -f

-f 를 이용하면 cow 외에 다른 동물이나 형상으로 표현이 가능합니다.

cd /usr/local/share/cows

ls

사용 가능한 형상 리스트

위 사진과 같이 cd /usr/local/share/cows 를 하면 cow를 제외하고 대체 가능한 목록들이 나오는데 .cow 파일을 -f 뒤에 입력을 하면 그 형상이 나옵니다.

fortune -s | cowsay -f daemon | lolcat
fortune -s | cowsay -f bud-frogs | lolcat

daemon.cow 와 bud-frogs.cow

위 사진과 같이 다양하게 활용이 가능합니다.

fortune 원하는 종류만 출력하기

cd /usr/local/share/games/fortunes
ls

명령어를 사용하여 이동 후 .dat 파일이 아닌 확장자가 붙지 않은 파일 을 활용하면 됩니다.

fortune -s computers | cowsay -f daemon | lolcat

computers 옵션을 사용한 모습

computer 관련 fortune만 출력되는 것을 볼 수 있습니다.

terminal(iterm2) 를 키면 바로 나올 수 있게 하기

vi ~/.zshrc

Vim 에디터가 서툴다면 code ~/.zshrc 를 할 것을 추천합니다.

vi ~/.zshrc 를 하거나 vscode를 사용하는 경우 code ~/.zshrc 명령어를 입력하여 파일을 엽니다.

fortune -s | cowsay -f dragon-and-cow | lolcat

위와 같은 문장 혹은 자신이 원하는 설정을 포함한 문장을 ~/.zshrc 파일 하단에 추가합니다.

그리고 :wq 를 사용하여 저장 후 빠져나옵니다.

source ~/.zshrc

그 후 다음과 같은 명령어를 입력하여 변동사항이 있는 ~/.zhsrc 를 활성화합니다.

다시 터미널을 열면 자동적으로 출력되는 것을 확인할 수 있습니다.

[Vim] vim의 vimrc 기똥차게 설정하기

sukvvon — Wed, 12 May 2021 19:47:34 +0900

vimrc 란?

vimrc 파일은 vim 에디터의 설정을 사용자가 원하는대로 컨트롤 할 수 있는 파일입니다. 굳이 플러그인을 설치를 하지 않아도 ~/.vimrc 파일을 수정함으로써 멋지게 사용할 수 있습니다.

amix/vimrc

https://github.com/amix/vimrc

간단하게 vimrc를 사용자에 맞게 설정을 하나하나 작성하면서 할 수 있지만 vim은 워낙 유명한 에디터이기에 위 사이트와 같이 설정해 놓으신 분이 계십니다.

필자는 이 분의 사이트를 참고할 것입니다.

Awesome 버전

git clone --depth=1 https://github.com/amix/vimrc.git ~/.vim_runtime
sh ~/.vim_runtime/install_awesome_vimrc.sh

자신의 맥에서만 사용할 경우 이 코드를 입력하면 됩니다.

Basic 버전

git clone --depth=1 https://github.com/amix/vimrc.git ~/.vim_runtime
sh ~/.vim_runtime/install_basic_vimrc.sh

Awesome 버전까진 필요가 없고 기본적인 것만 원한다면 이 코드를 입력하면 됩니다.

basic.vim

The Basic: If you want something small just copy basic.vim into your ~/.vimrc and you will have a good basic setup

적은 효과만 원한다면 basic.vim을 복사한 후 붙여넣기를 하면 됩니다.

버전 업데이트

cd ~/.vim_runtime
git pull --rebase
python update_plugins.py

업데이트를 원한다면 다음과 같은 코드를 입력하면 됩니다.

amid/vimrc 삭제하기

다음 사진에서 하라는 대로 하면 삭제가 가능합니다.

basic.vim 복사하고 설정하기

필자는 vim을 통해서 코딩을 할 것까진 아니기 때문에 bascic.vim을 복사할 것입니다.

vi ~/.vimrc

우선 자신의 홈 디렉토리의 vimrc 파일로 이동을 합니다. 반드시 홈 디렉토리여야만 합니다.

"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Maintainer: 
"       Amir Salihefendic — @amix3k
"
" Awesome_version:
"       Get this config, nice color schemes and lots of plugins!
"
"       Install the awesome version from:
"
"           https://github.com/amix/vimrc
"
" Sections:
"    -> General
"    -> VIM user interface
"    -> Colors and Fonts
"    -> Files and backups
"    -> Text, tab and indent related
"    -> Visual mode related
"    -> Moving around, tabs and buffers
"    -> Status line
"    -> Editing mappings
"    -> vimgrep searching and cope displaying
"    -> Spell checking
"    -> Misc
"    -> Helper functions
"
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""


"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" => General
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Sets how many lines of history VIM has to remember
set history=500

" Enable filetype plugins
filetype plugin on
filetype indent on

" Set to auto read when a file is changed from the outside
set autoread
au FocusGained,BufEnter * checktime

" With a map leader it's possible to do extra key combinations
" like <leader>w saves the current file
let mapleader = ","

" Fast saving
nmap <leader>w :w!<cr>

" :W sudo saves the file 
" (useful for handling the permission-denied error)
command! W execute 'w !sudo tee % > /dev/null' <bar> edit!


"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" => VIM user interface
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Set 7 lines to the cursor - when moving vertically using j/k
set so=7

" Avoid garbled characters in Chinese language windows OS
let $LANG='en' 
set langmenu=en
source $VIMRUNTIME/delmenu.vim
source $VIMRUNTIME/menu.vim

" Turn on the Wild menu
set wildmenu

" Ignore compiled files
set wildignore=*.o,*~,*.pyc
if has("win16") || has("win32")
    set wildignore+=.git\*,.hg\*,.svn\*
else
    set wildignore+=*/.git/*,*/.hg/*,*/.svn/*,*/.DS_Store
endif

"Always show current position
set ruler

" Height of the command bar
set cmdheight=1

" A buffer becomes hidden when it is abandoned
set hid

" Configure backspace so it acts as it should act
set backspace=eol,start,indent
set whichwrap+=<,>,h,l

" Ignore case when searching
set ignorecase

" When searching try to be smart about cases 
set smartcase

" Highlight search results
set hlsearch

" Makes search act like search in modern browsers
set incsearch 

" Don't redraw while executing macros (good performance config)
set lazyredraw 

" For regular expressions turn magic on
set magic

" Show matching brackets when text indicator is over them
set showmatch 
" How many tenths of a second to blink when matching brackets
set mat=2

" No annoying sound on errors
set noerrorbells
set novisualbell
set t_vb=
set tm=500

" Properly disable sound on errors on MacVim
if has("gui_macvim")
    autocmd GUIEnter * set vb t_vb=
endif


" Add a bit extra margin to the left
set foldcolumn=1


"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" => Colors and Fonts
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Enable syntax highlighting
syntax enable 

" Enable 256 colors palette in Gnome Terminal
if $COLORTERM == 'gnome-terminal'
    set t_Co=256
endif

try
    colorscheme desert
catch
endtry

set background=dark

" Set extra options when running in GUI mode
if has("gui_running")
    set guioptions-=T
    set guioptions-=e
    set t_Co=256
    set guitablabel=%M\ %t
endif

" Set utf8 as standard encoding and en_US as the standard language
set encoding=utf8

" Use Unix as the standard file type
set ffs=unix,dos,mac


"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" => Files, backups and undo
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Turn backup off, since most stuff is in SVN, git etc. anyway...
set nobackup
set nowb
set noswapfile


"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" => Text, tab and indent related
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Use spaces instead of tabs
set expandtab

" Be smart when using tabs ;)
set smarttab

" 1 tab == 4 spaces
set shiftwidth=4
set tabstop=4

" Linebreak on 500 characters
set lbr
set tw=500

set ai "Auto indent
set si "Smart indent
set wrap "Wrap lines


""""""""""""""""""""""""""""""
" => Visual mode related
""""""""""""""""""""""""""""""
" Visual mode pressing * or # searches for the current selection
" Super useful! From an idea by Michael Naumann
vnoremap <silent> * :<C-u>call VisualSelection('', '')<CR>/<C-R>=@/<CR><CR>
vnoremap <silent> # :<C-u>call VisualSelection('', '')<CR>?<C-R>=@/<CR><CR>


"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" => Moving around, tabs, windows and buffers
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Map <Space> to / (search) and Ctrl-<Space> to ? (backwards search)
map <space> /
map <C-space> ?

" Disable highlight when <leader><cr> is pressed
map <silent> <leader><cr> :noh<cr>

" Smart way to move between windows
map <C-j> <C-W>j
map <C-k> <C-W>k
map <C-h> <C-W>h
map <C-l> <C-W>l

" Close the current buffer
map <leader>bd :Bclose<cr>:tabclose<cr>gT

" Close all the buffers
map <leader>ba :bufdo bd<cr>

map <leader>l :bnext<cr>
map <leader>h :bprevious<cr>

" Useful mappings for managing tabs
map <leader>tn :tabnew<cr>
map <leader>to :tabonly<cr>
map <leader>tc :tabclose<cr>
map <leader>tm :tabmove 
map <leader>t<leader> :tabnext 

" Let 'tl' toggle between this and the last accessed tab
let g:lasttab = 1
nmap <Leader>tl :exe "tabn ".g:lasttab<CR>
au TabLeave * let g:lasttab = tabpagenr()


" Opens a new tab with the current buffer's path
" Super useful when editing files in the same directory
map <leader>te :tabedit <C-r>=expand("%:p:h")<cr>/

" Switch CWD to the directory of the open buffer
map <leader>cd :cd %:p:h<cr>:pwd<cr>

" Specify the behavior when switching between buffers 
try
  set switchbuf=useopen,usetab,newtab
  set stal=2
catch
endtry

" Return to last edit position when opening files (You want this!)
au BufReadPost * if line("'\"") > 1 && line("'\"") <= line("$") | exe "normal! g'\"" | endif


""""""""""""""""""""""""""""""
" => Status line
""""""""""""""""""""""""""""""
" Always show the status line
set laststatus=2

" Format the status line
set statusline=\ %{HasPaste()}%F%m%r%h\ %w\ \ CWD:\ %r%{getcwd()}%h\ \ \ Line:\ %l\ \ Column:\ %c


"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" => Editing mappings
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Remap VIM 0 to first non-blank character
map 0 ^

" Move a line of text using ALT+[jk] or Command+[jk] on mac
nmap <M-j> mz:m+<cr>`z
nmap <M-k> mz:m-2<cr>`z
vmap <M-j> :m'>+<cr>`<my`>mzgv`yo`z
vmap <M-k> :m'<-2<cr>`>my`<mzgv`yo`z

if has("mac") || has("macunix")
  nmap <D-j> <M-j>
  nmap <D-k> <M-k>
  vmap <D-j> <M-j>
  vmap <D-k> <M-k>
endif

" Delete trailing white space on save, useful for some filetypes ;)
fun! CleanExtraSpaces()
    let save_cursor = getpos(".")
    let old_query = getreg('/')
    silent! %s/\s\+$//e
    call setpos('.', save_cursor)
    call setreg('/', old_query)
endfun

if has("autocmd")
    autocmd BufWritePre *.txt,*.js,*.py,*.wiki,*.sh,*.coffee :call CleanExtraSpaces()
endif


"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" => Spell checking
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Pressing ,ss will toggle and untoggle spell checking
map <leader>ss :setlocal spell!<cr>

" Shortcuts using <leader>
map <leader>sn ]s
map <leader>sp [s
map <leader>sa zg
map <leader>s? z=


"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" => Misc
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Remove the Windows ^M - when the encodings gets messed up
noremap <Leader>m mmHmt:%s/<C-V><cr>//ge<cr>'tzt'm

" Quickly open a buffer for scribble
map <leader>q :e ~/buffer<cr>

" Quickly open a markdown buffer for scribble
map <leader>x :e ~/buffer.md<cr>

" Toggle paste mode on and off
map <leader>pp :setlocal paste!<cr>


"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" => Helper functions
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Returns true if paste mode is enabled
function! HasPaste()
    if &paste
        return 'PASTE MODE  '
    endif
    return ''
endfunction

" Don't close window, when deleting a buffer
command! Bclose call <SID>BufcloseCloseIt()
function! <SID>BufcloseCloseIt()
    let l:currentBufNum = bufnr("%")
    let l:alternateBufNum = bufnr("#")

    if buflisted(l:alternateBufNum)
        buffer #
    else
        bnext
    endif

    if bufnr("%") == l:currentBufNum
        new
    endif

    if buflisted(l:currentBufNum)
        execute("bdelete! ".l:currentBufNum)
    endif
endfunction

function! CmdLine(str)
    call feedkeys(":" . a:str)
endfunction 

function! VisualSelection(direction, extra_filter) range
    let l:saved_reg = @"
    execute "normal! vgvy"

    let l:pattern = escape(@", "\\/.*'$^~[]")
    let l:pattern = substitute(l:pattern, "\n$", "", "")

    if a:direction == 'gv'
        call CmdLine("Ack '" . l:pattern . "' " )
    elseif a:direction == 'replace'
        call CmdLine("%s" . '/'. l:pattern . '/')
    endif

    let @/ = l:pattern
    let @" = l:saved_reg
endfunction

이 소스코드를 복사 한 후 자신의 vimrc에 붙여넣기 하고 :wq 를 통해 저장 후 빠져나오기를 합니다.

before

after

다음과 같이 이쁘게 바뀐 vim을 볼 수 있습니다.

[Homebrew] ilmbase deprecated

sukvvon — Sun, 9 May 2021 19:23:52 +0900

brew upgrade ilmbase

Warning: ilmbase has been deprecated because it is not supported upstream!

neofetch를 설치하면서 ilmbase가 더 이상 사용되지 않는다는 것을 알게 되었습니다.

brew upgrade openexr with imath

homebrew를 update하니 openexr이 업데이트 목록에 해당되는 것을 알았습니다.

==> Installing dependencies for openexr: imath
==> Installing openexr dependency: imath
==> Pouring imath--3.0.1.catalina.bottle.tar.gz
Error: The `brew link` step did not complete successfully
The formula built, but is not symlinked into /usr/local
Could not symlink lib/libImath.dylib
Target /usr/local/lib/libImath.dylib
is a symlink belonging to ilmbase. You can unlink it:
  brew unlink ilmbase

To force the link and overwrite all conflicting files:
  brew link --overwrite imath

To list all files that would be deleted:
  brew link --overwrite --dry-run imath

Possible conflicting files are:
/usr/local/lib/libImath.dylib -> /usr/local/Cellar/ilmbase/2.5.5/lib/libImath.dylib
==> Summary
   /usr/local/Cellar/imath/3.0.1: 49 files, 884.9KB

==> Installing openexr
==> Pouring openexr--3.0.1.catalina.bottle.tar.gz
Error: The `brew link` step did not complete successfully
The formula built, but is not symlinked into /usr/local
Could not symlink include/OpenEXR/Iex.h
Target /usr/local/include/OpenEXR/Iex.h
is a symlink belonging to ilmbase. You can unlink it:
  brew unlink ilmbase

To force the link and overwrite all conflicting files:
  brew link --overwrite openexr

To list all files that would be deleted:
  brew link --overwrite --dry-run openexr

//생략

==> Summary
   /usr/local/Cellar/openexr/3.0.1: 176 files, 5.3MB
Removing: /usr/local/Cellar/openexr/2.5.5... (152 files, 6.9MB)

openexr, imath 모두 업데이트는 완료하였으나 이제는 사용하지 않은 ilmbase와 중복이 되어 충돌이 일어납니다.

brew doctor

Warning: Some installed formulae are deprecated or disabled.
You should find replacements for the following formulae:
  ilmbase

Warning: You have unlinked kegs in your Cellar.
Leaving kegs unlinked can lead to build-trouble and cause formulae that depend on
those kegs to fail to run properly once built. Run `brew link` on these:
  imath
  openexr

brew doctor를 실행한 결과 ilmbase는 역시나 더 이상 사용되지 않고, math, openexr은 unlink가 되어있어 link를 시키라고 합니다.

ilmbase, openexr의 github 설치 코드

brew info ilmbase openexr을 통하여 홈페이지를 살펴보니 각 프로그램들이 모두 동일한 홈페이지를 사용한다는 것을 알았습니다.

limbase github site

https://github.com/Homebrew/homebrewcore/blob/HEAD/Formula/ilmbase.rb

openexr github site

https://github.com/Homebrew/homebrewcore/blob/HEAD/Formula/openexr.rb

keg_only "ilmbase conflicts with openexr and imath"

ilmbase github code

두 프로그램의 설치 github 코드룰 살펴보자면 openexr github에선 아무 이상이 없었으나, ilmbase github에서 역시나 ilmbase는 openexr과 imath와 충돌이 일어난다고 언급하였습니다.

brew link, unlink 실행

두 가지 안 중에 서두에 언급하였던 ilmbase는 deprecated 가 되었다는 것을 인지하고 brew unlink ilmbase, brew link --overwrite openexr, brew link --overwrite imath를 실행하였습니다.

brew unlink ilmbase 그리고 brew doctor 을 실행

brew link --overwrite openexr && brew link --overwrite imath 실행

Ilmbase를 unlink 그리고 openexr과 imath를 link --overwrite를 하니 위 사진처럼 ilmbase 경고만 남고 나머지는 다 사라지게 되었습니다.

[Linux] 리눅스 명령어 연습 사이트

sukvvon — Sat, 8 May 2021 15:25:14 +0900

bellard.org/jslinux/

JSLinux

JSLinux Run Linux or other Operating Systems in your browser! The following emulated systems are available: CPUOSUserInterfaceVFsyncaccessStartupLinkTEMUConfigComment x86Alpine Linux 3.12.0ConsoleYes click here url x86Alpine Linux 3.12.0X WindowYes click h

bellard.org

리눅스 명령어를 연습할 수 있는 사이트

설치 없이 할 수 있어 편한 것 같습니다.

Clich here 버튼을 눌러 자신이 원하는 환경으로 들어가서 실습을 할 수 있습니다.

약 10초에서 15초 정도 기다리시면 다음과 같은 화면이 나오면서 실습을 진행할 수 있습니다.

[MacOS] figlet과 lolcat을 활용하여 terminal 재밌게 사용하기

sukvvon — Fri, 7 May 2021 20:06:36 +0900

figlet 이란?

http://www.figlet.org/

"Frank, Ian 및 Glenn의 편지" 에서 따온 figlet은 Unix와 유사한 운영체제 대표적으로 Linux 나 MacOS 와 같은 시스템의 Terminal 환경에서 작동을 하여 ASCII 아트를 활용하여 나타내는 프로그램입니다.

figlet 설치하기

brew install figlet

homebrew 를 통하여 figlet을 설치합니다.

lolcat 이란?

https://github.com/busyloop/lolcat

lolcat은 MacOS나 Unix 계열 즉 대표적으로 Linux 계열 시스템의 Terminal에서 하얀색으로만 표현할 수 있는 코드에 색을 입혀주는 프로그램입니다.

lolcat 설치하기

brew install lolcat

homebrew 를 통하여 lolcat 설치합니다.

figlet과 lolcat를 terminal에 적용시키기

man figlet

man figlet 명령어를 통하여 figlet에 대해서 알아보니 정리하자면 이렇습니다.

-f = font 파일에서 선택
-d = 글꼴 디렉토리를 변경
-c = 출력을 중앙에 배치
-l = 출력을 왼쪽 정렬
-r = 출력을 오른쪽 정렬
-t = 출력 너비를 로 설정 (terminal 너비)
-w = 사용자 지정 출력 너비를 지정
-k = 활성화 커닝을 하여 메시지의 각 문자를 인접한 문자로 병합하는 대신 개별적으로 인쇄

font 종류 살펴보기

cd /usr/local/share/figlet/fonts

figlet 의 fonts 폴더로 이동합니다.

ls

ls를 통하여 목록 확인하여 여기에서 마음에 드는 .fif 를 선택하면 됩니다.

 figlet -f speed -c Hello ! sukvvon | lolcat

여러 font 를 테스트 해 본 결과 필자는 speed.fif 가 제일 마음에 들었습니다.

vim ~/.zshrc

vi ~/.zshrc
# or
code ~/.zshrc

필자는 zsh를 사용하므로 zsh 기준으로 설명을 하였습니다. vim 을 잘 모른다면 vscode 즉 code 또한 사용할 수 있습니다.

#FIGlet with lolcat
figlet -w 90 -f speed -c Hello | lolcat
figlet -w 90 -f speed -c sukvvon! | lolcat

figlet -w 90 -f speed -c Hello sukvvon? | lolcat 으로 할 수 있으나 너비 간격이 깨져서 따로따로 작성하였습니다.

필자는 여기서 -f 를 써서 마음에 드는 폰트를 확인하고 -c 를 통해서 센터에 위치하도록 하여 terminal 너비를 -w 를 통하여 90으로 지정하였습니다.

source ~/.zshrc

source ~/.zshrc

위 사진과 같이 깔끔하고 이쁘게 설정된 것을 확인할 수 있습니다.

[homebrew] brew upgrade 한 번에 하기

sukvvon — Thu, 6 May 2021 14:51:04 +0900

brew update & upgrade

많은 Mac을 사용하는 유저들이 brew의 brew update 란 명령어를 많이 사용할 것입니다.

brew update 명령어를 실행하면 새로 설치가 필요한 항목들이 위의 이미지와 같이 나타날 것입니다. 여기서 brew upgrade 란 명령어를 사용하여 upgrade를 하면 아직 익숙하지 않은 사용자들은

"모든 formula 그리고 cask 가 upgrade"

라고 생각할 것입니다. 하지만 이와 같은 경우엔

~~"모든 formula 그리고 cask 가 upgrade"~~

"모든 formula 만 upgrade"

위와 같이 실행되는 모습을 볼 수 있습니다.

사용자의 키체인 및 보안 관련하여 homebrew 에선 한 번에 모든 cask를 upgrade 하는 것을 허용하지 않습니다. 즉 각각 brew upgrade 'cask' 를 통해서 cask 를 upgrade 해야한다는 것입니다.

~~"모든 것이 업데이트가 될 것이다."~~

"모든 formula 만 update, brew upgrade 'cask' 일일히 따로 수행"

brew upgrade --greedy

greedy 란 우리말로 탐욕적 이라는 뜻입니다. greedy라는 option을 줌으로 brew update --greedy를 사용하여 일일히 특정 cask 항목을 upgrade 를 하는 수고를 덜 수 있습니다.

위 이미지와 같이 brew upgrade --greedy를 통하여 모든 formula 및 cask가 한 번에 업데이트가 된 것을 확인 할 수 있습니다.

[Git] git과 github 사용하기

sukvvon — Sat, 24 Apr 2021 20:25:22 +0900

[Git] git과 github 사용하기

git이란?

https://git-scm.com/

git은 리누스 토발즈가 개발한 분산형 버전 관리 시스템(VCS)입니다.

git의 장점

매우 빠른 속도와 분산형 저장소를 지원한다는 장점이 있기에 많은 개발자들이 Git을 사용하여 관리합니다. git을 대표적으로 github와 연동하여 개인 프로젝트를 혼자 관리할 수 있고, 혹은 다른 팀원들과 협업을 할 수도 있으며, 개인적으로 굳이 남들에게 공개하지 않고도 private 하게 이용할 수도 있습니다.

github란?

https://github.com/

GitHub is how people build software
GitHub는 사람들이 소프트웨어를 개발하는 방법입니다.

대표적인 무료 git 저장소로 2008년에 공개되었습니다. git의 호스팅 기능 덕분에 다른 유사 사이트와 다르게 크게 성장하고 유명해졌습니다. 그에 더해 마이크로소프트의 인수로 더욱 더 강력해지고 대부분의 유저가 사용하는 기능들은 모두 무료로 이용할 수 있기 떄문에 개발자들의 인스타그램이라고도 할 수 있습니다. 협업을 진행하기도 하고 개인 프로젝트를 진행하기도 하고 정말 많은 사람들이 수 많은 레파지토리를 올리며 공유하고 서로 소통하는 장이라고 할 수 있습니다.

install git

https://git-scm.com/

macOS 의 경우는 기본적으로 내장이 되어 있지만 window와 linux 시스템 같은 경우는 git을 다운받아야 합니다.

repository를 처음 만들었을 때 github에서의 메뉴얼입니다. 이 메뉴얼을 참고하여 명령어의 의미들을 바탕으로 설명을 하려고 합니다.

git echo "your project" and add README.md

echo "#your project" >>README.md
git add README.md

echo "#_your project_" >>README.md 명령어를 통해 README.md 파일을 생성하고 git add README.md 명령어를 통해 README.md 파일을 index(stage) 로 올리라고 메뉴얼에 나와있지만 굳이 처음부터 생성하고 add 하여 index(stage) 로 올릴 필요는 없습니다. 자신이 작업을 하다가 혹은 작업을 완료 한 후 등 자신이 원할 때 README.md 파일을 만드셔도 됩니다.

필자는 echo "#your project" >>README.md, git add README.md 과정을 생략하고 git add -A 명령어를 사용할 것입니다.

git config & init

git init

git init

git init 명령어를 통해서 자신의 파일을 git의 영역하에 들어오도록 합니다. 필수로 이 명령어를 실행해야지만 차후 모든 git 관련 명령어를 실행 할 수 있습니다.

git config --global

git config --global user.name "user name"
git config --global user.email "user email"

우선 먼저 자신의 Mac에 전역적으로 자신의 사용자 이름과 사용자 이메일을 전역적으로 설정을 합니다.

전역적으로 설정을 할 경우 git log를 보았을 때 자신이 commit한 항목은 자신의 사용자 이름과 사용자 이메일이 전역적으로 설정한 컴퓨터에 한하여 설정한 email과 name로 표시가 됩니다. 더 나아가 그룹으로 작업한 것일 경우 타인과 자신이 한 것을 구분할 수 있습니다.

git add & commit

git add -A

git add -A

git init을 한 후 git add -A 명령어를 통해서 모든 파일을 업로드를 한다는 의미입니다.

현업에서는 git add-A 명령어를 지양하고, git add . 혹은 git add * 를 많이 사용합니다. 우선 처음 올리는 것이기 때문에 git add-A 를 실행하여 현재 working dir 안에 있는 모든 파일을 index(stage) 로 올립니다.

git commit -m "first commit"

git commit -m "first commit"

git add -A 를 한 후 index(stage) 영역에 있는 파일을 ''처음 올린다'' 라는 뜻의 first commit 이라고 제목을 정하고 커밋을 함으로써 HEAD 영역으로 올립니다.

처음 올린다고 무조건 이름이 first commit 일 필요는 없습니다. 각자 기호에 맞게 자신이 식별할 수 있는 다른 명칭을 사용하셔도 됩니다.

git branch -M main

git branch -M main

branch 란 분기한다는 의미입니다. 처음 repository를 만드는데 굳이 main 으로 분기 할 필요가 없습니다. 생략하셔도 무방하다고 생각합니다.

git remote & push

git remote add origin https://~

git remote add origin https://github.com/your repository

자신의 git 내부 레파지토리와 github의 외부 레파지토리를 연결 하는 것입니다.

자신의 내부 레파지토리에서만 관리하던 것을 git remote add origin https://github.com/your repository 명령어를 통해서 github의 외부 레파지토리로 연결하여 자신의 프로젝트를 공개하거나 협업을 진행할 수 있습니다.

git push -u origin master

git push -u origin master

최초만 사용하고, 그 후 git push 명령어만 사용 가능합니다.

git remote add origin https://github.com/your repository 명령어를 통해 내부와 외부 레파지토리를 연동을 시킨 후 최초로 내부 레파지토리에서 외부 레파지토리로 commit하여 HEAD 에 있는 정보를 보낼때는 git push -u origin master를 사용하고, 그 후 push를 할 경우 이미 origin master로 push를 한 흔적이 있어 git push 만 사용해도 됩니다.

이미지에서는 main 을 사용하라고 github에서 명시를 해 놓은 것 같으나 저는 예전 표준으로 쓰이던 master 라는 명칭을 사용하도록 하겠습니다.

github 환경설정을 들어가시면 master , main 말고도 사용자가 원하는 명칭으로 설정을 하실 수 있습니다. github에서 저장한 그 명칭으로 자동 설정되는 것이지 꼭 설정한대로 해야 하는 것은 아닙니다.

[macOS] neofetch 를 활용하여 terminal 이쁘게 사용하기

sukvvon — Thu, 11 Feb 2021 12:20:11 +0900

neofetch란 무엇인가?

https://github.com/dylanaraps/neofetch

noefetch란 위 이미지와 같이 CLI에서 사용자의 정보를 알 수 있도록 하는 것입니다. 또한 사용자의 기호에 맞게 커스텀해서 사용 할 수 있습니다.

brew로 neofetch 설치하기

homebrew가 우선적으로 설치가 되어있어야 합니다.

brew install neofetch

<program> is keg-only, which means it was not symlinked into /usr/local,
because macOS already provides this software and installing another version in
parallel can cause all kinds of trouble.

위의 문구가 나와서 어떤 동작을 수행하라고 하는데 해석하자면

/usr/local 에 설치가 되어있고 이것은 심링크가 되어있지 않았다. 왜냐하면 macOS 에 이미 설치가 되어 있고 다른 버전이 있다면 모든 문제의 원인이 될 수 있다고 경고합니다. 즉 설치는 되어 있지만 시스템에 링크는 충돌과 같은 우려 때문에 되어 있지 않으므로 우리가 따로 설치한 프로그램을 사용하지 않은 이상 그 뒤에 나오는 동작을 수행하지 않아도 됩니다. neofetch 를 설치하면 다음과 같이 많은 파일들과 부속 formula를 설치할 것입니다. 이 프로그램을 사용하기 위해서 많은 프로그램들이 필요한 것이기 때문입니다.

Iterm2(Terminal) 을 열었을 때 자동으로 실행시키기

다음과 같이 Iterm2(Terminal)를 실행시켰을 때 neofetch 를 활성화 하기 위해서는 어떻게 해야 하는 것일까요?

code ~/.zshrc

code 말고도 vim이나 atom 과 같은 편집기를 이용 가능합니다.

code ~/.zshrc 를 입력하면 밑 사진과 같이 vscode가 열립니다.

neofetch

필자가 따로 설정해놓은 것들은 무시하고 제일 하단에 neofetch 를 작성합니다. 그리고 command + s 를 통해서 저장한 후 vscode 를 빠져나오도록 합니다.

source ~/.zshrc

다음과 같은 명령어를 통해 편집한 zshrc 파일을 최신화 시켜주시면

다음과 같이 Iterm2(Terminal) 을 열었을 때 자동적으로 neofetch 가 실행되어 이쁜 환경을 만들 수 있습니다.

[Homebrew] brew doctor (compinit:503:)

sukvvon — Tue, 26 Jan 2021 23:25:47 +0900

compinit:503: no such file or directory: /usr/local/share/zsh/site-functions/_brew_cask

~/.zshrc 파일을 수정한 후에 source ~/.zshrc 를 하였더니 위와 같은 오류가 발생하였다.

brew doctor를 실행한 모습

하지만 brew doctor 를 하여 검사를 한 결과 다행히 심볼릭 링크가 깨졌다는 것을 확인 할 수 있었다. 그리고 안내 사항에 나와있는대로 brew cleanup 을 실행 한 후 source ~/.zshrc 를 한 결과 이상 없이 실행된 것을 알 수 있었다.

[MacOS] 'wheel', 'admin', 'staff' 차이에 대해서

sukvvon — Mon, 11 Jan 2021 22:41:41 +0900

StackExchange에 따르면

보통 일반 OS X 사용자는 staff 그룹에 포함됩니다.

OS X 사용자를 관리자 그룹에 추가하려면 시스템 환경 설정-> 사용자 및 그룹 을 통해 해당 사용자를 관리자 로 지정해야합니다.

admin 는 admin 및 staff 그룹에 배치되는데 admin 그룹은 다른 사용자가 할 수 없는 일을 할 수 있습니다.

root는 wheel 그룹 의 유일한 구성원이며 유일한 구성원이어야 합니다. wheel이 필요한 작업을 수행해야하는 경우 sudo 명령을 사용해야합니다 .

또한 egloos에 의하면

staff 과 wheel 그룹의 차이

시스템의 모든 사용자들은 staff 그룹의 멤버가 됩니다.

관리자들은 wheel 과 admin 그룹에 대해서도 멤버가 됩니다.

wheel 그룹은 su 를 사용하여 root 사용자로 전환할 수 있는 사용자들을 콘트롤하기 위해 사용된다.

wheel 과 admin 그룹의 차이점

admin 그룹의 멤버만이 sudo 명령을 사용 할 수 있다.

wheel 그룹의 멤버만이 su 명령을 사용 할 수 있다.

Mac OS X 에 로그인해서 사용하는 계정은 staff 와 admin 그리고 다수의 다른 그룹에 포함되어 있다.

그래서 sudo 명령을 사용 할 수 있는 것이다.

Apple 커뮤니티에 의하면

staff 와 wheel 유저?

직원과 바퀴는 "Group"입니다.
Unix 권한은 사용자 (소유자), 그룹, 월드 (기타)로 구분되며 각 사용자 클래스에 대한 별도의 읽기, 쓰기, 실행 권한 설정이 있습니다. "Staff"과 "wheel"는 표준 그룹입니다.
- 일반적으로 모든 사용자 계정에는 "Staff" 멤버십도 부여됩니다.
- 따라서 시스템에 다른 사용자 계정을 만들면 고유 한 사용자 ID를 갖게되지만 "Staff"멤버십도 부여됩니다.
직원의 다른 구성원이 파일에 액세스 할 수 있도록 허용하지만 World / Other 액세스는 거부 할 수있는 권한이 할당 될 수 있습니다
(참고 : World는 실제로 행성 지구의 모든 구성원을 의미하는 것이 아니라 사용자가 아닌 구성원이 아닌 시스템의 다른 프로세스를 의미합니다. 이 용어는 컴퓨터가 네트워크에 연결되지 않았을 때 만들어졌고 그들 만의 작은 세계였습니다.)
"A Big wheel"에서와 같이 중요하고 권위있는 사람을 의미하는 "Wheel"은 관리자를 위한 그룹입니다. 많은 파일이 "Wheel" 그룹의 사용자가 액세스 할 수있는 권한을 가진 Wheel 그룹의 일부이지만 Wheel 그룹 액세스 권한이없는 다른 사용자는 허용하지 않습니다.
- "Staff"와 "wheel"은 Mac OS X 시스템에서 정상입니다. 그들을 건드리지 마십시오.

IT 공부중 에 의하면

사용자 그룹은 기본적으로 staff / admin 두 가지가 있습니다. 기본적으로 사용자를 추가하면 staff 로 추가됩니다. [사용자를 관리자로 허용] 체크박스를 클릭할 경우 admin으로 사용자 그룹을 변경할 수 있습니다. (서버 설정 시 사용자 그룹을 추가할 수 있습니다.)

[macOS] htop을 이용하여 mac을 관리하기

sukvvon — Sun, 10 Jan 2021 01:48:19 +0900

htop 이란?

htop은 Unix을 기반으로 한 Mac을 비롯한 Linux 시스템에서 CPU 사용량, Memory 사용량, Processor, SWP, 등을 GUI 화면으로 나타내 사용자가 보기 쉽게 하여 관리하도록 할 수 있는 프로그램입니다.

htop 설치

brew install htop

iTerm2(terminal) 을 실행 한 후 brew 명령어를 이용하여 htop을 설치를 합니다.

htop 실행

sudo htop

htop을 입력하여 실행할 수도 있지만 제어를 하기 위해선 관리자 모드로 실행해야하므로 sudo htop 을 입력합니다. 관리자 모드이기 때문에 비밀번호가 필요합니다. 비밀번호를 입력하면 htop이 실행됩니다.

htop 사용

각 프로세스 설명

프로세스명	프로세스 설명
PID	프로세스의 ID 번호
USER	프로세스의 소유자
PR	프로세스의 우선순위
NI	우선순위에 영향을 주는 프로세스의 nice 값
VIRT	프로세스가 사용중인 가상 메모리 양
RES	프로세스가 사용중인 물리 RAM의 양 (단위는 킬로바이트)
SHR	프로세스가 사용중인 공유 메모리 양
S	프로세스의 현재 상태(zombied, sleeping, running, uninterruptedly sleeping, traced)
%CPU	프로세스가 프로세서를 사용한 시간의 사용율
%MEM	프로세스가 사용중인 RAM의 사용율
TIMR+	프로세서를 사용한 시간
COMMAND	프로세스를 시작하도록 한 명령어

단축키 설명

F1(Help)

F1(Help) : htop을 사용하는데 필요한 키들 그리고 그 키의 용도를 설명해줍니다.

F1 혹은 h 를 입력하거나 Help 라고 명시되어있는 버튼을 클릭하면 실행됩니다.

F2(Setup)

F2(Setup) : htop을 설정합니다. 항목 배열 위치 및 테마 등등, 다양한 기능을 사용자가 원하는대로 설정 할 수 있습니다.

F2 , C 나 S 를 입력 혹은 Setup 이라고 명시된 버튼을 클릭하면 실행됩니다.

위 이미지와 같이 Setup 카테고리에서 Colors 를 선택하여 원하는 항목을 선택한 후 F10 을 입력하거나, Done 이라고 명시된 버튼을 클릭하면 설정되고,

또한 htop 상단에 보이는 항목들을 설정할 경우 Setup 카테고리의 Meters 에서 Available meters 목록에서 원하는 것을 선택하여 Enter 키를 누르거나 Add 라고 명시된 버튼을 클릭한 후 Left column 혹은 Right column 에 위치하게 하고 본인이 원하는 위치 또한 설정한 후, Enter 키를 누르거나 Lock 이라 명시된 버튼을 입력하면 저장할 수 있고, F10 혹은 Esc 를 입력하거나 Done 이라고 명시된 버튼을 클릭하면 저장하고 빠져나올 수 있습니다.

F3(Search)

F3(Search) : 원하는 프로세스를 검색합니다.

F3 혹은 / 를 입력하거나 Search 라고 명시된 버튼을 클릭하면 실행됩니다.

F4(Filter)

F4(Filter) : 원하는 프로세스를 필터링합니다.

F4 혹은 \ 를 입력하거나 Filter 라고 명시된 버튼을 클릭하면 실행됩니다. 또한 실행된 상태에서 Enter 키를 입력하거나 Done 이라고 명시된 버튼을 클릭하면 필터링이 설정되어 유지되는 것이고, Esc 키나 Clear 이라고 명시된 버튼을 클릭하면 필터링이 초기화가 되는 것입니다.

F5(Tree)

F5(Tree) : 프로세스의 항목들을 부모 자식 관계로 묶어 트리 형태로 나타내는 것입니다.

F5 혹은 t 를 입력하거나 Tree 라고 명시된 버튼을 클릭하면 실행됩니다. 다시 되돌리고 싶은 경우 똑같이 F5 혹은 t 를 입력하거나 Tree 라고 명시된 버튼을 클릭하면 됩니다.

F6(Sort)

F6(Sort) : PID, USER, PRIORITY, NICE 등 종류 별로 나누어서 프로세스들을 보여줍니다.

F6 혹은 > 나 . 을 입력하거나 Sortby 라고 명시된 버튼을 클릭하면 실행됩니다. 그 후 화살표로 sort를 하고 싶은 항목을 선택한 후 Enter 키를 입력하거나 Sort 라고 명시된 버튼을 클릭하면 sort가 되는 것이고, Esc 키를 입력하거나 Cancel 이라고 명시된 버튼을 클릭하면 취소가 됩니다.

F7, F8(Nice -, +)

F7, F8(Nice) : F7 은 실행중인 프로세스의 우선순위를 올리는 것이고, F8 은 프로세스의 우선순위를 내리는 것입니다. 각각 ] 키와 [ 키로 혹은 Nice -, Nice + 라고 명시된 버튼을 클릭하면 실행됩니다.

NICE 값을 [ 키와 ] 키를 활용하여 설정한 결과 /System/Applications/Music.app/Contents/MacOS/Music 프로세스는 NI 값이 3 으로 되어있고, /Applications/Kakaotalk.app/Contents/MacOS/Kakaotalk 은 NI 값이 -3 으로 되어있는 것을 알 수 있습니다.

F9(Kill)

F9(Kill) : 프로세스를 종료하는 것입니다.

종료하기를 원하는 프로세스를 선택한 후 F9 혹은 k 를 입력 혹은 F9(Kill) 이라고 명시된 부분을 클릭하면 위 이미지와 같은 화면이 출력이 되고, Enter 키를 입력하면 종료가 되며, 원치 않은 경우 Esc 키를 누르면 취소가 됩니다.

F10(Quit)

F10(Quit) : htop을 종료하는 것입니다.

F10 혹은 q 를 입력하거나 F10(Quit) 라고 된 버튼을 클릭하면 실행됩니다.

[Homebrew] brew 명령어 모음집

sukvvon — Mon, 4 Jan 2021 14:18:26 +0900

brew update

brew update

homebrew 를 최신 버전으로 update 합니다. tap 되어있는 모든 저장소를 업데이트합니다. 위 사진을 보면 필자와 같은 경우 homebrew/cask-versions, home-brew/core, homebrew/cask, homebrew/services가 update가 된 것을 알 수 있습니다. 우선 formula는 쉽게 말해서 java, python, mysql과 같이 CLI 환경에서 동작하는 것이고 cask는 vscode나 intellij-IDEA와 같이 GUI 환경에서 동작하는 것이라고 할 수 있습니다. 위 사진에서 현재 업데이트 된 formula는 libomp이고, cask는 visual-studio-code 인 것을 알 수 있습니다.

brew upgrade

brew upgrade

brew upgrade를 하게 되면 update가 되어 upgrade가 필요한 항목들을 upgrade 할 수 있습니다. 하지만 꼭 brew upgrade를 하기 위해서 brew update 명령어를 우선적으로 해야 하는 것은 아닙니다.

다음과 같이 정리할 수 있습니다.

brew upgrade = brew update + brew upgrade

upgrade 명령은 update 명령을 포함하고 있는 것입니다. 따라서 brew upgrade 를 brew update 를 생략하고 진행할 수 있는 것입니다. 그러나 생략을 하기 때문에 update가 된 항목이 어떤 것인지 확인하지 않고 upgrade를 진행한다는 것을 유의해야 합니다.

brew upgrade A
brew upgrade A B C ...

알파벳 A, B, C를 예시로 들어서 설명하자면

brew upgrade A 처럼 항목을 지정하여 그 지정한 항목만 최신 버전으로 upgrade 를 할 수 있고, brew upgrade A B C ... 처럼 여러 개의 항목을 동시에 지정하여 upgrade 가 가능합니다.

brew upgrade --greedy

brew upgrade --greedy

brew upgrade에 --greedy 옵션을 추가하면 formula만 아니라 cask까지 한 번에 upgrade가 가능합니다. 위 이미지를 참고하면 formula인 bat까지 upgrade 완료 후 바로 cask들을 upgrade하는 것을 알 수 있습니다.

brew search

brew search A

그래서 보통 자신이 설치하고자 혹은 궁금한 항목을 먼저 brew search A 와 같은 명령어를 통해 탐색 즉 search를 합니다.

brew install

brew install A

말 그래도 패키지를 설치하는 것입니다. homebrew를 사용하지 않는다면 설치할 때 마다 해당 홈페이지에 들어가서 .dmg 파일을 받아서 설치를 진행해야하는 번거로움을 겪겠지만 homebrew를 활용하면 python, java와 같은 언어 뿐만이 아닌 htop과 같은 도구 또한 쉽게 설치하고 삭제할 수 있습니다.

brew list, ls

brew list,ls [--formula | --cask]

brew list 를 통해 자신의 맥에 있는 모든 항목들을 볼 수 있습니다. 또한 --formula 혹은 --cask 옵션을 줌으로써 전체가 아닌 자신이 원하는 특성의 항목들을 볼 수 있습니다.

brew uninstall, remove, rm

brew uninstall | remove | rm

brew를 통해 설치한 것을 삭제하는 명령어입니다. python, java와 같은 formula의 경우 삭제하기 간단하고 수월하다고 할 수 있습니다.

brew cleanup

brew cleanup

homebrew로 설치한 패키지 중 brew upgrade 이후 최신 버전이 아닌 패키지 혹은 부속 파일들이 삭제되지 않고 찌꺼기처럼 쌓여있는 경우가 있습니다. 이 때 brew cleanup을 사용한다면 깔끔하게 청소할 수 있습니다. 잘 쌓여있지 않아서 필자도 자주 하진 않고 종종하는 경우가 있습니다.

brew outdated

brew outdated

brew outdated 명령어를 통해서 brew update를 하고 난 후 update 되어지지 않은 항목들을 확인할 수 있습니다. brew upgrade 를 하기 전 자신이 upgrade를 원하거나 원치 않는 항목들을 사전에 확인 할 수 있습니다.

brew outdated --greedy

brew outdated --greedy

brew outdated 명령어에 --greedy 옵션을 추가하면 cask의 목록들까지 함께 확인할 수 있습니다.

brew leaves

brew leaves

우선 brew ls 명령어를 통해 설치된 항목들을 확인 할 수 있었습니다. 이를 간단하게 볼 수 있는 명령어가 바로 brew leaves 명령어입니다. 이 명령어를 통해 자신이 설치한 formula 항목들에 한해서 부속적인 즉 dependencies 항목들을 제외한 brew ls --formula를 볼 수 있습니다.

brew deps --tree --installed

brew deps --tree --installed [formula | cask]

다음과 같이 종속 formula 항목들과 그에 속하는 dependencies 들을 쉽게 볼 수 있습니다. 또한 세부적으로 어떤 한 패키지에 대해서만 알고 싶다면 brew deps --tree --installed python 과 같이 formula 항목 이름을 붙히면 그 항목에 대해서만 알 수 있습니다.

brew doctor

brew doctor 를 통해 현재 내 맥의 homebrew와 관련된 것에 한해 문제가 있다면 이 명령어를 통해 진단을 할 수 있습니다. 지금은 문제가 없다고 판단할 수 있지만 종종 트러블이 일어나서 혼자 힘으로 해결하지 못하는 경우 brew doctor 명령어를 통해서 나온 추천 명령어들을 통해 손쉽게 해결할 수 있습니다.

[MacOS] zsh 주소 변경하기

sukvvon — Fri, 1 Jan 2021 22:08:05 +0900

shell 확인하기

echo $(which zsh)

처음에 brew를 통해서 zsh를 설치하신 후 echo $(which zsh) 명령어를 입력하면 /usr/bin/zsh 가 나올 것입니다. 설치 후 자동적으로 변경이 된 줄 알았으나 변경이 되지 않은 이유는 설치는 하였으나 아직 시스템에 추가하지 않았고 shell을 변경하는 동작을 취하지 않았기 때문입니다.

설치를 하였지만 사용하려고 하는 /usr/local/bin/zsh 가 아직 설정이 되지 않았습니다. 사용을 하기 위해선 설치한 /usr/local/bin/zsh 을 /etc/shells 에 추가해줘야 합니다. 또한 추가를 하기 위해선 root 권한이 필요해 앞에 sudo 명령어를 써야만 합니다.

etc/shells에 /usr/local/bin/zsh 추가하기

sudo sh -c 'echo $(which zsh) >> /etc/shells'

terminal에 위와 같이 입력 후 실행합니다.

cat /etc/shells

terminal에 cat /etc/shells 명령어를 입력하면 위 이미지와 같이 usr/local/bin/zsh가 추가된 모습을 볼 수 있습니다.

/usr/local/bin/zsh로 shell 변경하기

chsh -s $(which zsh)

which zsh 로 나오는 주소 즉 usr/local/bin/zsh 로 변경을 해야하므로 chsh -s $(which zsh) 을 입력 후 실행합니다.

echo $SHELL

echo $SHELL 을 입력하면 현재 나의 SHELL 주소를 확인 할 수 있습니다. usr/local/bin/zsh 로 변경된 것을 확인할 수 있습니다.

[macOS] 런치패드(launchpad) 배열 변경하기

sukvvon — Sat, 26 Dec 2020 20:47:06 +0900

계기

macOS 기존의 런치패드는 행이 5, 열이 7인 배열입니다. macOS를 사용하면서 하단 독의 아이콘 크기에 비해서 런치패드의 아이콘 크기가 너무 크기도 하고 깔린 앱들을 페이지를 넘기며 보는 것 또한 번거로워 배열을 조정할 수 있으면 편할 것 같다는 생각을 하였습니다.

설정하기

defaults write com.apple.dock springboard-columns -int 11 ##열 숫자
defaults write com.apple.dock springboard-rows -int 9 ##행 숫자
killall Dock

예를 들어 다음과 같이 행을 9 열을 11로 바꾼다고 가정하고 위 코드를 실행시킨다면 위 이미지와 같이 변경된 것을 볼 수 있습니다. 필자는 기존의 배열보다 보기 편하다는 생각을 하여 적용시키기로 결정했습니다.

초기화하기

defaults delete com.apple.dock springboard-columns
defaults delete com.apple.dock springboard-rows
killall Dock

만약 다시 원래대로 되돌리고 싶은 경우 위 코드를 실행하면 초기화 시킬 수 있습니다.