10/17

이대로 가다간 학원에서 내준 클론 코딩 제출일까지 맞출 수 없을 것 같아 새벽 4시까지 메뉴 클릭, 이메일 형식 검사 기능, 스크롤 작업 모두 최대한 어느정도 마무리를 했다

오히려 이메일은 한큐에 빠르게 끝냈지만 스크롤했을 때 메뉴바가 자연스럽게 내려오지 않아서 결국 해결을 못하고 잤다

늦게까지 한 결과로 조금 지각을 하고 점심도 먹지 못하고 바로 작업을 시작했다

스크롤은 조원의 조언으로  어느정도 마무리가 되었지만 또 다른 문제가 생겼다

스크롤 메뉴바를 적용한 뒤 그 위에 메인 메뉴를 클릭해보면 메뉴바가 아예 사라져버리는 것이다

금방 끝내고 깔끔하게 코드를 정리하는 리팩토링을 하고 싶었으나 나의 계획이 무산되어 버렸다..

 

 

 

 

10/18

오늘은 꼭 어제 생긴 문제를 해결하려 이리저리 뜯어보고 이것저것 만져보며 개발자 검사도 확인해봤다

추측해보건데 메뉴바를 클릭했을 때 상단에 픽스되면서 스크롤 값에 변화가 생기고 그것이 스크롤 메뉴바 기능에도 영향을 주는 것 같았다

그래서 메뉴바를 클릭하면 나타나는 클래스를 검사해 그것이 있으면 스크롤 메뉴바 기능에 추가되는 클래스를 지우라고 조건을 추가하고 if 문 구조를 바꿔주자 해결이 되었다

어떤 것 때문에 이런 문제가 발생되었는지 정확히 알지 못해서 답답했다

좀 더 공부를 더 깊이 했다면 이런 문제를 정확히 알 수 있었을까 라는 고민을 하게 되었다

 

 

 

 

10/19

오늘은 과제 제출일이라 마무리로 리팩토링도 진행하고 어느정도 반응형도 추가했다

그런데 조원이 내가 스크롤 메뉴바 기능에 문제가 생겼던 것처럼 동일한 문제가 발생하여 그것을 해결해보려고 거의 3시간동안 붙잡고 있었다

나와 동일한 문제가 생겼으니 내가 해결해보고 싶어서 if 문 구조를 내 것과 비슷하게 한 뒤 for 문으로 각 메인 메뉴를 클릭해서 서브 메뉴가 나오는 클래스가 추가되면 true 를 출력하도록 만들었다

하지만 for 문에 문제가 있었던건지 첫번째 메인 메뉴를 클릭했을 때만 작동되고 나머지는 작동이 되지 않았다

결국 조원의 그 문제는 해결되지 못한 채 찝찝한 기분으로 끝내고 말았다

꼭 고쳐보고 싶었는데 너무나 아쉬운 마음이 들었다 나중에 시간이 될 때 꼭 해당 문제를 고쳐볼 것이다

해당 문제는 그렇게 끝내고 내 과제의 리팩토링과 반응형을 수행했다

리팩토링이라고 할 것도 없는 게 리팩토링이라는 것을 잘 알지 못해서 그냥 중복되는 코드들을 모아 함수로 만들고 해당 기능에 함수를 불러오는 것 밖에 하지 못했다

이 부분에 대해 피드백을 받아 효율적인 코드를 짜보고 싶다

반응형도 시간이 조금 부족해 세심한 부분은 신경쓰지 못했다

readme 파일과 pull request 코멘트에 들어갈 부분을 작성하고 다시 확인해보니 반응형이 어설프다는 생각을 지울 수 없었다 많이 신경쓰지 못한 것 같아 아까웠다

많이 미흡하긴 했던건지 readme 파일에 어려웠던 점, 개선하고 싶은 부분, 피드백 받고 싶은 부분에 대해 쓸 때 쓸 말이 많았다

솔직히 세세하게 더 쓰고 싶었지만 너무 길면 리뷰어들이 잘 살펴보지 않을 것 같아 최대한 꼭꼭 눌러담아 간소화하여 작성했다

처음 해보는 것이라 생소하긴 했지만 이런 경험을 해볼 수 있어서 실무에 들어갔을 때 활용할 수 있을 것 같아 재미있었다

 

 

 

 

10/20

2주간의 클론코딩 스터디 과제 겸 학원 클론코딩 과제를 끝내고 이제 새로운 과제를 해보기 위해 조원들의 생각을 모으고 긴 회의를 거쳐 알고리즘 문제를 푸는 것으로 정했다

아직은 실제로 코드를 작성할 때 큰 도움이 되는지는 잘 모르겠지만 꾸준히 하면 실력이 오를 것이라 생각해 1-2주간은 알고리즘 문제에 집중하기로 했다

기준에 백준에서 단계별로 3단계 중간까지 풀어봤지만 거의 한달이 지나기도 했고 다시 처음부터 해보면 좋을 것 같아 2시간 동안 solved.ac 에서 브론즈 5 중 처음 10문제를 풀어보기로 했다

확실히 백준 단계별 문제에서는 비슷한 문제가 계속해서 나와 연습하기는 편했는데 갑자기 어려워져서 풀기보단 외우기를 많이 했다

그러나 solve.ac 에서는 문제가 골고루 나와서 조금 더 시간이 오래 걸리고 어렵긴 했지만 풀기에는 나쁘지 않았던 것 같다

그래도 어려운 건 사실이라 8문제 밖에 풀지 못하고 시간이 끝나버렸다

벌써부터 헤매고 싶진 않았는데 실력이 다른 사람들보다 많이 부족한 것 같다

내 부족함을 인정하고 꾸준히 앞으로 나아가야지

 

 

 

 

10/21

오늘도 2시간 동안 브론즈 5 레벨의 9문제를 풀었다

행렬 덧셈, N 찍기, 학점 계산 문제가 어려워서 좀 헤맸는데 조원들의 도움으로 해결할 수 있었다

특히 행렬 덧셈은 문제 자체를 이해하지 못해서 아예 손도 못댔는데 조원이 친절하게 설명해줘서 이해하고 풀 수 있었다

 

 

 

 

10/23

오늘은 아침에 브론즈 5 레벨의 10문제를 풀었다

단순 출력 문제가 많아서 전체적으로 그렇게 어렵진 않았다

 

 

10/10

오늘까지 부족한 js 공부를 했다 집안일을 하다보니 시간이 많이 지나버려서 거의 하지 못했다

 

 

 

10/11

팀과제로 이솝 페이지 첫번째 섹션에 들어 있는 슬라이더를 swiper 로 구현하는 작업을 했다

여백 문제 때문에 이전, 다음 버튼 부분과 스크롤바 부분을 2시간 안에 만들지 못하고 얘기를 나눴다

회의 때 조원들에게 물어봐서 여러가지를 고쳐봤지만 해결하지 못했다

슬라이더가 끝나는 곳에 여백을 주면서 브라우저 양 끝에 슬라이더 내부는 잘리고 싶지 않았다

그래서 회의가 끝나고 여백을 줬던 것을 다 지우고 swiper 안에 padding을 주니 해결이 되었다

또 스크롤바 부분을 하면서 스크롤바가 커스텀이 되지 않아 회의 때 조원들에게 물어봤는데 해결한 분이 있어 조원분의 코드를 참고하여 해결했다

 

 

 

10/12

팀과제로 이솝 페이지 나머지 슬라이더 부분을 구현했다

어제 해본 슬라이더와 구조가 거의 비슷해서 어렵진 않았다

다만 loop 옵션을 사용하면서 슬라이드가 복제되어 스크롤바가 끊기는 오류가 있었는데 한 조원분이 loop 대신 rewind 를 이용하면 된다고 하셔서 해결했다

 

 

 

10/13

팀과제로 이솝 페이지 메뉴바 위를 누르면 나오는 모달창을 구현했다

이전에 해놨던 모달창 구조가 있어서 그것을 참고하여 구현했다

덕분에 두시간 안에 끝냈지만 조원 중 여백이 제대로 작동하지 않아 컨텐츠 상단이 딸려 올라가 가려지는 상황이 발생했다

이것 저것 고쳐봤는데도 해결이 되지 않아서 결국 찝찝하게 끝이 났다

 

 

 

10/14

팀과제로 메인 메뉴를 클릭하면 서브 메뉴들이 나오는 기능을 구현하는 것으로 정했다

그룹장 모임과 개발 블로그 제출이 겹쳐서 마크업을 반 정도밖에 하지 못했다

주말에는 많이 할 수 있을 것이라 기대해본다

 

 

 

10/15

어제 것에 못한 것을 이어서 하는 것으로 팀과제가 정해졌다

마크업할 것이 많아서 대략적으로 중복되는 요소만 마크업한 뒤 간단하게 스타일링 작업을 하고 클릭하면 나오는 기능을 먼저 구현하려고 했다

하지만 생각보다 레이아웃 작업이 복잡해서 기능 구현에 시간을 많이 할애했다

메인 메뉴에 클릭하면 해당되는 서브 메뉴가 나타나는 식이라 foreach 문으로 해결해보려고 했다가 해당 구문에 대한 이해가 부족하여 시간이 오래걸려서 일단 작동이라도 해라라는 생각으로 각각 줄 수 밖에 없었다

하지만 스크롤을 위로 했을 때 메뉴바가 viewport 에서 최상단에 fixed 되는 걸 구현한 것과 충돌이 나서 코드가 많이 더러워지고 말았다

아마 메뉴에 클릭했을 때의 기능도 그래서 안되는 것이 아닐까 추측해본다

 

 

 

10/16

오늘도 어제 발생한 문제들을 해결하기 위해 하루종일 붙잡고 있었다

기능이 마음대로 적용이 되지 않아 마크업도 스타일링도 하다 말아서 애매한 상태로 계속 냅둘 수 밖에 없었다

일의 우선 순위를 정해서 했어야 했는데 한가지만 붙잡고 있으면 환기가 되지 않을 것 같아 여러 가지를 건들였더니 동시다발적으로 문제가 터져버리고 말았다

오히려 빨리 뜯어 고칠 수 있어서 다행이라고 해야 하나 암튼 오늘도 해결을 거의 하지 못했다



 

 

10/3

오늘 팀과제와 블로그 작성을 하려고 했으나 어제 약속의 여파로 헤롱대다가 저녁즈음 정신을 차리고 공부를 시작했다

팀과제는 드림코딩 미니쇼핑몰 만들기였는데 급히 하느라 제대로 보질 못해서 다시 해봐야 할 것 같고 블로그 작성은 정리만 하다가 끝이 났다

자괴감에 빠져서 밍기적대다가 제대로 끝낸 것도 없어서 우울하게 하루를 마무리 했다

 

 

 

10/4

팀과제로 aesop 랜딩 페이지 메인 배너와 메인 섹션 첫번째 부분을 만들어보고 각자 얘기를 나눠보는 시간을 가졌다

aesop 페이지에서 svg 파일로 되어있던 아이콘을 그냥 복붙하면 되는데 svg 파일로 변환하려다가 시간을 보내버려서 약속했던 시간보다 넘겨버렸다

그 후 얘기를 나눠보는 시간을 가졌는데 나는 맨날 궁금한 게 생기면 내가 해결하거나 잊어버려서 나중에 후회하기도 했는데 다른 분들이 내가 궁금한 것을 물어봐주셔서 다행이라는 생각이 들었다

메모를 하는 습관을 가져야 하는데 당장 할 일에 급해서 매번 까먹어버린다 꼭 고쳐야지

 

 

 

10/5

팀과제로 이솝 랜딩 페이지 메인 섹션 나머지 부분을 만들어보고 각자 얘기를 나눠보는 시간을 가졌다

메인 섹션 부분에 비디오를 삽입하는 부분이 있었는데 비디오를 삽입해보는 건 두번째라 브라우저 상에 나타나질 않아서 조금 해맸다가 구글링을 해서 해결했다

완료 후 얘기를 나눠보는 시간을 가질 때 video 삽입에 대한 얘기가 나와서 다시 확인해보니 나도 동영상이 재생되지 않는 동일한 문제가 생겨 구글링을 해봤다

속성을 이것저것 넣다보니 해결이 돼서 구글링을 해보니 해당 문제에 대해 muted 를 삽입하면 재생이 된다고 하여 해결되었다

 

 

 

10/6

팀과제로 이솝 랜딩 페이지 footer 부분을 만들어보고 각자 얘기를 나눠보는 시간을 가졌다

grid 로 작업해보고 싶어서 했는데 생각보다 수월하게 했다

하지만 이메일 부분에서 체크박스들이 있었는데 커스텀이 마음대로 되지 않아 시간을 많이 들였다

하다가 잘 되지 않아서 체크되는 부분을 이미지로 넣었는데 나중에 회의에서 다른 조원분은 유니코드를 활용하여 content 부분에 체크 표시 유니코드를 삽입해서 간단하게 작업하셔서 놀랐다

나중에 리팩토링할 때 구글링으로 다른 방법이 있는지 알아봐야 겠다

 

 

 

10/7

어제 그룹 스터디 회의에서 이솝 페이지 js 부분 들어가기 전에 금요일부터 다음주 월요일까지 부족한 js 공부를 하기로 했다

그래서 7, 8, 9일에는 필수강의에 있는 스타벅스 예제를 복습하고 js 부분을 수강했다

개발은 아는 것도 다시 공부하면 또 새로운 것 같다

그래서 개발자들은 공부를 게을리하면 안된다고 하나보다

 

 

 

 

1. favicon

메인 폴더에 favicon.ico 놓고 title 태그 밑에 아래 코드 삽입

<link rel="icon" href="favicon.ico" />

 

 

 

2. 오픈 그래프, 트위터 카드

  • title 태그 밑에 차례로 삽입
  • seo : 검색 엔진에 노출되는 정보 최적화

 

  • 오픈 그래프
<meta property="og:type" content="website" /> 
<!-- 페이지의 유형 -->

<meta property="og:site_name" content="jane" />
<!-- 사이트 이름 -->

<meta property="og:title" content="jane coding" />
<!-- 페이지 이름 -->

<meta property="og:description" content="jane의 개발새발" />
<!-- 페이지에 대한 설명 -->

<meta property="og:image" content="../img/jane_seo.jpg" />
<!-- 페이지의 대표 이미지 -->

<meta property="og:url" content="https://jane-it-story-blog.tistory.com/" />
<!-- 페이지 주소 -->

 

  • 트위터 카드
<meta property="twitter:card" content="summary" />
<!-- 페이지의 유형 -->

<meta property="twitter:site" content="jane" />
<!-- 사이트 이름 -->

<meta property="twitter:title" content="jane coding" />
<!-- 페이지 이름 -->

<meta property="twitter:description" content="jane의 개발새발" />
<!-- 페이지에 대한 설명 -->

<meta property="twitter:image" content="../img/jane_seo.jpg" />
<!-- 페이지의 대표 이미지 -->

<meta property="twitter:url" content="https://jane-it-story-blog.tistory.com/" />
<!-- 페이지 주소 -->

 

3. google font

  • main.css 위에 link 삽입
  • main.css 에 font-family: ~ 복붙
  • 브라우저가 달라도 동일한 폰트가 나오게 할 필요 있음

 

 

 

4. 구글 material icon

  • 사이트 - 로고 - getting started - getting start 에 link 태그만 복붙
  • icons 에서 원하는 아이콘의 코드 복붙
  • 폰트 사이즈로 크기 조절

 

 

 

5. 로고

  • common - 공통 (공통으로 넣어야 할 스타일링에 적용)
  • 상하 가운데로 위치 시키기
.content{
	width: 300px;
    height: 300px;
    position: absolute;
    top: 0; 
    bottom: 0;
    left: 0; 
    right: 0; 
    margin: auto;
}

 

 

 

6. 서브 메뉴

  • a 태그로 다른 곳으로 이동할건데 링크가 준비되지 않았다면 href 에 # 이나 javascript:void(0) 해주면 이동하지 않고 작동하지 않겠다 라는 뜻, # 보다는 void 를 권장.
  • position 속성의 absolute 와 fixed 속성값은 기본적으로 요소가 display: block 처리

 

 

 

7. 검색

  • 부모 요소와 자식 요소를 같이 부르려면 document.querySelector 2개를 해주는 것이 아니라 부모요소를 부르고 부모요소 변수를 document 자리에 넣어주고 소괄호 안에는 자식요소만 적어주면 됨
  • input 에만 css 로 focus 를 줬기 때문에 검색 아이콘을 누르면 나오지 않음 이건 js 로 처리해줘야 함
  • 그래서 해당 영역을 누르면 focus 효과를 주도록 설정하려면 부모 영역에 이벤트를 추가하여 클릭하면 input 요소에 focus 되도록 설정
  • 그리고 input 요소에 focus 되면 이벤트를 추가하여 부모 영역에 focus 되면 아이콘이 사라지는 효과를 줄 css class 를 추가하고, input 에는 placeholder 에 통합검색이 뜨도록 속성을 추가.
  • 반대로 input 요소에 blur 되면 반대로 class 를 지우고, placeholder 에는 빈값이 뜨도록 속성을 추가.

 

 

 

8. 메인 메뉴

  • 메인 메뉴 이름에만 hover 했을 때 하위 컨텐츠가 뜨도록 하는 것이 아니라 하위 컨텐츠도 영향이 가기 때문에 이름과 하위 컨텐츠를 함께 감싸고 있는 부모 요소에 hover 를 적용해야 함
  • 하위 컨텐츠의 위치에 position fixed 를 지정, top 이나 bottom 같은 수직 위치 값이 없다면 요소의 원래 위치를 사용함. 만약 position absolute 를 사용한다면 부모 요소를 기준으로 하기 때문에 화면의 좌우 끝까지 늘어날 수 없게 됨
  • 컨텐츠의 좌우 넓이가 동일한 부분이 계속된다면 common 공통 부분에 .inner 라는 클래스를 가진 컨텐츠들은 모두 같은 위치에 있도록 설정

 

 

 

9. bem

  • html 클래스 속성의 작명법으로 block element modifier 의 약자
  • 요소__일부분 : underscore 기호로 요소의 일부분을 표시
  • 요소--상태 : hyphen 기호로 요소의 상태를 표시, ex) btn btn--error → 버튼인데 에러인 버튼을 뜻함

 

 

 

10. 전역 배지: 고정 배너

  • position absolute 와 fixed 는 block 으로 처리된다고 했는데 block 요소는 가로 넓이를 최대한 늘어나려고 시도하지만 absolute 와 fixed 의 경우 최소한으로 줄어들려고 시도함
  • 스크롤이 내려가면 배지는 사라지는데 이것은 js 로 구현
  • window 창에 scroll 이벤트를 추가할 건데 스크롤이 될 때마다 해당 함수가 실행되기 때문에 화면이 버벅일 수 있음 따라서 라이브러리를 사용할 것임
  • lodash cdn : lodash.js 페이지 맨 위에 있는 html 태그 를 복사해서 main. js 파일 위쪽에 붙여넣기
  • 이벤트 함수의 'scroll' 에 이은 두번째 매개변수로 _.throttle( ) 이라는 함수를 불러오고 소괄호 안의 첫번째 매개변수로는 실행할 함수를 두번째로 시간(ms)을 입력하면 그 시간만큼만 함수를 실행할 수 있음
  • 실행할 함수에는 if 문을 사용하여 window 의 scrollY 가 500 보다 커지면 배지를 지우고 아니면 나오게 하도록 설정
  • 하지만 저렇게만 하면 움직임이 부자연스럽기 때문에 gsap 의 애니메이션을 처리해주는 라이브러리를 사용할 것 gsap cdn 상단의 html 태그를 복사해서 main.js 파일 위쪽에 붙여넣기
  • 다시 if 안에 gsap 으로 애니메이션 효과를 줄건데 gsap.to( ) 를 이용하여 소괄호 안에는 차례대로 적용할 요소, 지속시간(s), 적용할 옵션을 적어주면 됨 → gsap.to(badgeEl, .6, { opacity: 0, display: 'none' })
  • 여기서 opacity 와 display 를 같이 주는 이유는 opacity 만 주면 해당 요소가 투명해져 없어져보이는 것이지 화면 상에는 남아 있어 display 값을 같이 주는 것이고, display 만 주면 해당 속성은 숫자가 아닌 속성이라 전후 상태의 중간갑이 존재하지 않아 자연스러운 전환 효과를 적용할 수 없어 opacity 값을 같이 주는 것

 

 

 

11. 전역 버튼 스타일

  • 비슷한 스타일의 버튼을 전역으로 쓸 것이기 때문에 common 에 btn 으로 css 동일하게 작성하고 hover, btn 과 동일한 구조지만 반대 스타일인 reverse 와 다른 색상의 버튼인 brown, gold, white 도 중복 클래스로 같이 작성. 이때 class 이름을 요소의 상태를 표시하는 bem 으로 작성할 것.

 

 

 

12. 순차적으로 요소 보이기

  • 배치한 이미지를 새로고침하면 순차적으로 이미지가 나타나도록 설정.
  • 해당 요소에 각 fade-in class 적용하고 css 에 opacity: 0 으로 화면에 안 보이게 설정.
  • js 에서 해당 요소를 모두 가져와서 변수(fadeEls)로 묶어서 적용하고 forEach 문으로 각각 하나씩 애니메이션이 돌면서 적용되도록 설정. 함수의 매개변수로는 각 요소의 이름(fadeEl)과 index 를 설정하고 함수 안에는 라이브러리로 gsap.to( ) 를 이용하여 fadeEl 에 1초의 지속시간으로 opacity: 1 로 요소가 나타나게 하고 delay 라는 옵션으로 index 당 하나씩 차례대로 나타나게 0.7초를 곱하게 설정. 이때 index 는 0번부터 시작하므로 0 곱하기 0.7초를 하면 0 이 되어 index 에 더하기 1을 해줄 것

 

 

 

13. 요소 슬라이드: 공지사항

  • html 구조로 좌우 배경과 inner 를 형제 요소로 둔 다음, css 로 각 배경을 height: 100% 로 하고 감싸는 부모 요소에는 height 를 적용하지 않으면 auto 로 설정이 되는데 inner 에 height 값을 지정해주면 부모 요소에 height 값이 없기 때문에 줄어들려고 하다가 값이 적용되어 있는 inner 에 맞춰 값이 부모 요소에도 동일하게 적용되고 absolute 로 설정되어 있는 각 배경에는 자연스럽게 부모 요소에 동일하게 적용된 inner 의 height 값이 적용.
  • 질문) css 로 inner 안에 자식 요소에게 배경색을 주고 값을 늘려줬는데 애초에 inner 의 형제 요소인 배경에게 값을 늘려주면 되는 거 아닌지? inner 안에서 작동해야 하기 때문에 그런 것인지?
  • display: flex 의 경우 별도의 높이 값을 주지 않아도 align-items: strectch, 즉 최대로 잡음. 단 정렬을 위해 다른 속성값을 적용하면 높이 값을 적용하지 않은 자식 요소가 잡아먹히기 때문에 해당 자식 요소에게 높이 값 부여해 줄 것

 

 

 

14. 요소 슬라이드: swiper.js, 수직 슬라이드

  • 6버전, 7/8 버전 다름 - 6버전은 html 구조에서 class 이름을 swiper-container 로, 7/8 버전은 swiper 로 설정.
  • swiper : get started → use swipter from cdn : min.css, min.js head 안에 복붙 → add swiper html layout : 복붙 (btn, pagination 은 선택)
  • new Swiper ( ) 로 생성자(class) 함수를 이용해 첫번째 인수로 해당 swiper 요소의 선택자를 작성하고 두번째 인수로 옵션을 작성. 옵션으로는 수직 슬라이드를 쓸 것이니 direction: 'vertical' , 자동으로 넘어가게 할 것이니 autoplay: true, 멈추지 않고 반복할 것이니 loop: true 를 적용.

 

 

 

15. 요소 슬라이드: 요소 가운데 배치

  • css 로 값 계산하기 : calc( ) 함수 - 예를 들어 자식 요소 세개가 각 819px 이고 그 사이 여백이 합쳐서 20px 일 때 계산해서 직접 값을 적용하는 것이 아니라 clac(819px * 3 + 20px) 로 작성해주면 css 에서 자동으로 계산이 가능
  • 화면 비율이 커져도 요소 가운데 배치 : position : absolute 로 적용 후 상위 요소(view port) 영역의 left: 50% 적용하여 중앙을 기준으로 오른쪽에 위치시키고, margin-left: clac( (819px * 3 + 20px) / -2 ) 적용하여 해당 요소 전체 넒이 값의 반만큼 여백을 없애서 요소를 가운데로 배치

 

 

 

16. 요소 슬라이드: 프로모션 이미지 슬라이드

  • new Swiper( ) 를 이용해 옵션으로 한번에 보여줄 슬라이드 개수가 3개이니 slidesPerView: 3, 슬라이드 사이 여백 10px 을 넣기 위해 spaceBetween: 10, 첫번째로 보일 슬라이드가 가운데에 보이기 위해 centeredSlides: ture, 이때 첫번째로 보일 슬라이드를 가운데로 설정했기 때문에 슬라이드 양 끝에 여백이 생기게 되는데 loop: true 로 적용
  • 이때 개발자 검사를 해보면 가운데 보이는 슬라이드의 class 이름에 swiper-slide-active 라고 추가가 되어 있는데 centeredSlides: ture 옵션 때문에 추가가 된 것임. 가운데 슬라이드를 제외하고 나머지는 반투명하게 해줄 것이기 때문에 css 로 전체 슬라이드에 opacity: .5 를 적용한 후 swiper-slide-active 에만 opacity: 1 을 적용

 

  • 페이지 매김과 다음, 이전 버튼을 적용하기 위해 html 구조에 swiper 안 slide 형제 요소로 pagination 과 next, prev 버튼 구조를 추가
  • 페이지 매김을 위해 swiper 옵션으로 pagination 을 적어주고 해당 옵션의 중괄호 안에 해당 옵션에 대한 옵션을 적용할 수 있는데 페이지 번호 요소 선택자를 지정해주는 el 에 해당 요소의 class 이름을 적어주고, 사용자가 시각적으로 페이지를 볼 수만 있는 것이 아니라 클릭도 가능하도록 clickable: true 적용
  • 다음, 이전 버튼을 위해 swiper 옵션으로 navigation 을 적어주고 해당 옵션의 옵션으로 페이지 번호 요소 선택자를 지정해주는 prevEl 과 nextEl 에 해당 요소의 class 이름을 적용
  • pagination 버튼에는 swiper 기본 css 스타일이 있는데 그 중 position: absolute 가 있어 따로 적용하지 않아도 됨
  • 다음, 이전 버튼 위치는 가운데 배치했을 때랑 비슷하게 right, margin-right 를 사용해서 적용

 

 

 

 

17. 요소 슬라이드: 슬라이드 영역 토글

  • 슬라이드 영역 부분과 토글 버튼을 가져와 변수로 적용하고 let 으로 해당 영역이 보이고 있으니 기본값으로 isHidePromotion 을 flase 로 할당.
  • 토글 버튼에 이벤트를 추가하여 클릭하면 isHidePromotion 을 true 로 변경한다는 뜻으로 ! 논리부정연산자를 사용하여 다시 할당해주고 if 문을 사용하여 isHidePromotion (true) 일 경우 슬라이드 영역에 hide class 를 추가, else 로 슬라이드 영역에 hide class 를 지우게 적용

 

 

18. 유튜브 영상 배경: Youtube iframe API

  • 16:9 비율 계산 - 부모 요소에 width 값만 지정하고 자식 요소에 width: 100%, height: 0, padding-top: 56.25% 를 지정해주면 부모 요소에 height 를 지정해주지 않아도 padding-top 에 56.25% 를 지정해주면 부모 요소의 width 값에 따라 크기가 맞춰짐(영상 출력할 때 많이 사용)
  • 유튜브 영상 배경 : html 구조를 youtube > youtube__area > id : player 로 할건데 youtube__area 밑에 16:9 비율을 위해 자식 요소가 필요한데 스타일을 위한 것이라면 ::before 로 조절. before 에 width: 100%, height: 0, padding-top: 56.25% 적용. 화면 좌우 가운데에, 부모 기준 상하 가운데에 위치해야 하기 때문에 요소 가운데 배치를 위해 left: 50%, top: 50% 적용 후 각각 margin-left: calc(1920px / -2), margin-top: calc(1920px * 9 / 16 / -2) 적용. 이때 margin-top 의 경우 before 의 padding-top 으로 16:9 비율로 조절되고 있기 때문에 1920px 의 16:9 비율로 맞춰진 높이값의 반을 끌어올리도록 적용한 것. 그리고 youtube 부분에서 적용한 높이에 넘쳐 위아래가 튀어나왔을텐데 overflow 로 숨김처리 적용.

 

  • youtube iframe api : 시작하기 부분에서 코드 복붙
  • 코드 설명 : document 에서 script 라는 요소를 만들어 가져와서 tag 라는 변수로 지정하고 tag 의 src 로 실제 유튜브의 영상을 재생할 수 있는 명령의 js 파일을 가져옴, 즉 script 태그 부분에 src 속성에 외부 js 라이브러리가 할당이 되는 것(라이브러리 사용할 때 script 코드 가져오는 것과 동일). 문서에서 script 라는 태그 이름을 가진 요소 중 0번째 를 firstScriptTag 로 할당. firstScriptTag 의 부모 요소의 이전 부분에 삽입할건데 해당 요소는 tag 이고 firstScriptTag 의 이전에 할 것. → 따라서 사용하는 script 중 첫번째 script 태그를 찾아서 그것보다 먼저 유튜브 api 를 사용할 수 있는 script 태그를 앞에다가 삽입해서 실행한다는 것.
  • 여기서 함수이름은 유튜브에서 설정한 것이기 때문에 수정하면 안 되며 var player, player =, width, height, events 는 지워주고 new YT.Player 는 YT 라는 유튜브 객체의 Player 라는 메소드가 실행되고 있는데 그 안의 'player' 는 html 구조에서 미리 만들어뒀던 player 라는 id 를 가진 요소를 선택한 것.
  • 이제 원하는 동영상을 가져와야 하는데 해당 유튜브 영상의 주소를 보면 watch?v= 다음으로 나오는 것이 최초 재생할 유튜브 영상 id 인 videoId 에 들어가는 부분임 복사해서 붙여넣고, 영상을 재생하기 위한 여러가지 변수들을 뜻하는 playersVars 에 옵션으로 자동 재생을 위한 autoplay: true, 반복 재생을 위한 loop: true, 반복 재생할 유튜브 영상 id 목록을 지정하기 위해 playlist: '영상 주소에서 복사한 것' 을 적용. events 라는 옵션을 적용할 것인데 그의 데이터로 onReady 라는 익명의 함수를 할당할 것, 여기서 객체 데이터 내부에 함수 데이터가 할당되면 메소드라고 부름, 익명 함수의 매개변수로 event 라는 사용하는데 이 동영상 플레이어가 준비되면 이때 익명 함수를 실행해주는데 실행할 때 그 인수로 이 동영상이 플레이되는 상황 자체를 데이터로 넘겨주게 됨. event 라는 매개변수에 재생되고 있는 영상 자체를 뜻하는 target 에 mute 라는 메소드를 실행하면 음소거가 적용. playersVars 에서는 지원이 되지 않아 events 로 따로 적용해줘야 함.
  • playersVars 에서 지원하는 여러가지 매개변수가 있으니 iframe player api 에서 확인.

 

 

 

19. 유튜브 영상 배경: 반복 애니메이션

  • floatingObject 라는 함수를 만들고 호출될 때 선택자를 받아서 실행되는 selector 를 매개변수로 지정, gsap.to ( ) 를 이용해서 css 선택자만 집어넣으면 실행될 수 있도록 selector 를 요소로 하고 시간은 1, 옵션으로는 세로를 기준으로 움직일 것이기 때문에 y: 20, 무한 반복되도록 repeat: -1, 20만큼 내려가는 것 뿐만 아니라 올라오는 것도 처리할 수 있도록 yoyo: true 를 적용. 여기까지 하면 부자연스럽기 때문에 easing 함수를 이용하여 처리할 것, gsap easing 에서 type: easeInOut 으로 설정하고 run 누른 뒤 power1 클릭하면 하단에 나오는 ease: Power1.easeInOut 을 복사하여 gsap.to 안에 붙여넣기, 다음 옵션으로 새로고침하고 지연 시간을 둔 뒤 재생하는 delay: 3 을 추가.
  • 랜덤한 숫자를 생성하는 함수 : random 이라는 이름의 함수를 설정하여 min 과 max 라는 매개변수로 받아서 Math.random( ) 을 이용해 랜덤 메소드에다가 (max-min)+min 에 소수의 자리수의 길이를 제한하며 문자를 반환하는 toFixed( ) 메소드를 곱한 것을 소수점을 가지는 숫자 데이터로 변환하는 parseFloat( ) 이라는 메서드를 반환.
  • random 함수를 이용해 floatingObject 함수 수정 : floatingObject 함수에 selector, delay, size 를 매개변수로 설정하고 floatingObject 함수를 호출할 때 인자로 각 반복 애니메이션을 적용할 각 요소의 선택자, 지연 시간, y축으로 움직일 크기를 지정. gsap.to 메소드 안의 옵션 부분에 y: size 로 수정, 1초로 되어있던 애니메이션 동작 시간 부분을 랜덤하게 적용하기 위해 random( ) 함수로 수정하고 인자로 1.5와 2.5 를 지정, 옵션의 delay 부분에 random( ) 함수를 적용하여 인자로 0, delay 를 지정.
  • gsap.to 메소드에 대한 여러가지 옵션이 있으니 라이브러리 사용법 확인해볼 것.

 

 

                                                                                                                       

 

 

 

9/26

강의장에 나가 git 강의를 듣고 하루종일 면접 준비를 했다
면접 준비로 집중이 되지 않아 공부를 거의 못했다
스터디 과제인 클론 코딩도 거의 손도 못댔다

 

 

9/27

아침 댓바람부터 면접 보러 가느라 피곤하지, 점심도 걸렀지.. 

집에 도착하자마자 스터디 과제를 하겠다는 포부는 쉽게 사라졌다 
스타벅스 강의 좀 듣고 밥 먹고 쉬다가 기절하듯 잤다

 


9/28

강의장에 나가 git 강의를 들었다
프로젝트 때는 맨날 간단하게 vscode 터미널로 git 을 써서 하던 것만 했는데 현업에서 사용하는 방식으로 배우니 차원이 달랐다 
확실히 3시간에 배운 것을 4일에 걸쳐 자세히 배우니 내가 한 것은 아무것도 아니었다는 생각이 들었다
끝에 가서는 프로젝트 때 팀장이 해야 할 절차를 배웠는데 새삼 이걸 세진님은 어떻게 했을까 라는 생각이 들었다
아직 많이 부족한 것 같다
일이 있어서 스터디 과제를 못하다가 동이 틀때까지 붙잡고 있었는데도 많이 하지 못했다
특히 slider 를 구현할 때 아무리 구글링을 해봐도 재생버튼이 잘 작동하지 않아서 시간을 많이 보냈다
분명 if 문도 잘 써주고 swiper.autoplay.start 와 swiper.autoplay.stop 을 잘 넣어주었는데도 작동할 생각을 안했다

 



9/29

오늘도 강의장에 나가 git 강의를 들었다
오늘은 작게 프로젝트를 진행하여 git 을 연습해보는 시간을 가졌는데 어제 열심히 필기를 했는데도 이건 뭐 보는 거랑 실제로 하는 거랑 완전 딴판이라 식은땀을 뻘뻘 흘렸다
팀장이 organization 을 따로 생성해 repogitory 와 set up 까지 하는 간단한 일이었는데도 불구하고 망칠까봐 두려워서 시간을 많이 할애했다
이럴거면 미리 해놓았으면 좋았을텐데 나 때문에 괜히 시간을 잡아먹은 것 같아 미안했다
그래도 다들 답답해하지 않고 격려까지 해주셔서 팀원들에게 너무 미안하고 고마웠다
맨날 누가 만들어놓은 것만 하다가 하나부터 열까지 진행해보려니 신경 쓰이는 게 많았다
그래도 팀장을 맡아 이런 경험도 해볼 수 있어서 정말 다행이라는 생각이 들었다
나를 포함해 다들 스터디 과제를 하기 버거워 해서 기한을 늘리고 매일매일 조금씩 하는 것으로 합의를 봤다
확실히 과제가 힘들어서 매번 해내지 못하는 것보다 매일 작은 과제라도 해내서 성취감을 느끼는 것이 더 중요하다는 생각이 들었다
부족한 팀장이 있더라도 능력있는 팀원들이 있어 다행이라는 생각이 들었다

 


9/30

오늘 오후에는 팀 과제로 aesop 랜딩 페이지 작업한 후 저녁을 먹고 컴퓨터 공학의 이해 강의를 들었다
역사와 전문 용어들이 많아 오랜만에 전공 수업을 듣는 듯이 너무 어렵고 지루했다
그래도 컴퓨터 공학에 대해 이해할 수 있는 시간이 되었다

 


10/1

일요일에 일이 있어서 토, 일 과제를 함께 끝냈다
각각 flex flog, grid gardon 게임을 풀어보고 완성본을 올리는 것이었다
전에 한번 풀어봤던 것이라 어렵진 않았지만 다시 풀어보니 처음엔 되는대로 풀었던 것보다 이해가 훨씬 잘 되는 느낌이었다
확실히 공부는 끊임없이, 반복해서 하는 것이 중요하다고 느꼈다

 

 

 

 

 

1. CLI / Vim

  • 맥은 터미널, 윈도우는 git bash 키기

 

1) 명령어

  • ls : 파일과 폴더를 보여줌 
  • pwd : 현재 위치를 말해줌
  • ls 의 flag : 옵션을 뜻함. -a 는 all 로 숨김 파일까지 탐색, -l 은 line by line 로 한 줄로 깔끔하게 출력
  • cd : 파일 이동 / ex) cd Documents/
  • mkdir : 폴더 생성 / ex) mkdir foldername
  • touch : 파일 생성 / ex) touch filename.txt
  • mv : 파일 이동 / ex) mv filename.txt foldername/
  • cp : 복사 / ex) cp filename.txt filename2.txt
  • rm : 파일 삭제 / ex) rm filename.txt
  • rm -rf : 폴더 삭제 / ex) rm -rf foldername/
  • mv : 이름 수정 / ex) mv filename.txt filename2.txt
  • cat : 작성한 내용 확인 / ex) cat filename.txt
  • vi : vim 창 열기 / ex) vi filename.txt
  • code . : vscode 로 넘어가기

 

2) Vim 으로 마크다운 작성 방법

  • vi README.md 입력 후 들어가자마자 i 누르면 insert 모드 시작, 작성할 수 있게 됨
  • 1. 2. 3. : 순서 있는 리스트
  • - , * , + : 순서 없는 리스트
  • ``` <div></div> ``` : 코드 블럭 삽입
  • **bold** : 볼드체 입력
  • # : 제목, # 이 많아질수록 작아짐
  • <!-- 주석 --> : 주석
  • [링크 텍스트] (링크 url) : 링크 삽입
  • ![이미지텍스트] (이미지 url) : 이미지 삽입
  • *** , ----- : 구분선
  • 줄바꿈으로 공백을 표현하고 싶으면 enter 두번해야 공백이 됨. 한번만 하면 붙어버림.
  • esc 누르고 :wq 하면 저장하고 나가기, :w 하면 저장, q 저장하지 않고 종료, e! 수정한 것 무시하고 편집 상태

 

 

 

 

 

 

 

2. Branching Models

 

1)  flow

  • git flow : 각 단계가 명확히 구분되어 주로 사용. 
  • github flow : 주로 라이브러리(react) 에 쓰임. release 단계가 없어 바로 넘어감

 

2) git flow strategy

  • feature - develop - release(줄이는 작업), version - main

 

3) git flow cheatsheet

    • 이 프로그램을 이용하면 위 작업을 쉽게 할 수 있음
    • window 의 경우, git bash 에서 git flow init 입력해주고 enter 키를 눌러주면 구조를 자동으로 만들어줌
    • git flow feature start featurename : feature 시작
    • git flow feature finish featurename : feature 끝
    • feature 이름은 작업하는 내용에 따라 명확히, 작업 후 사용중인 브랜치가 아니라면 바로바로 지워주는 것이 좋음
    • git flow release start v0.1 : 버전 릴리즈
    • tagging 작업 labeling : commit vim 창, release note vim 창, 다시 commit vim 창
    • git push -u origin develop : remote 에 없는 develop 으로 push 할 때, -u 는 upstream
    • git checkout main : main branch 로 이동
    • git push origin main : main 으로 push
    • git push --tags : tag 를 push
    • remote(원격저장소) 로 가서 tag create release → Existing tag : Initial Release → 본문에 My first release → This is a pre-release 체크(베타버전이라는 소리) → publish release 누르면 끝

 

 

 

 

 

3. Revert

 

1) Rename : 이름 수정

  • 그냥 이름을 수정해버리면 원래 파일은 deleted 가 뜸, 이럴 때는 staging 전까지 다시 이름을 돌려놓으면 됨
  • git mv README.md unread.txt : git 으로 알려주면서 수정하면 renamed 가 뜸, 다만 물리량 변화없이 트리가 변경된 것이기 때문에 comitted 가 뜸

 

2)  Undoing

  • 지금까지 작업한 것을 취소하고 싶을 때, 최신의 타임스탬프로 돌려놓는 것
  • git restore unread.txt → 워킹트리 깨끗 / resotre 보다 오래된 것은 checkout

 

3) Unstaging

  • 예전에는 git reset HEAD unread.txt , 요즘에는 git restore --staged unread.txt
  • 여기서 HEAD 는 최신이라는 뜻
  • git commit --amend : 최신 커밋 메시지 수정

 

4) Reset commit

  • worst case : reset → 직전 3개의 commit을 삭제한 후, remote에 강제 push
  • best case : revert → 현재 HEAD에서 직전의 3개의 commit을 순서대로 거슬러 올라가 해당 내역에 대해 commit, push 수행
  • revert : git revert --no-commit HEAD~3.. → 삭제하는 commit 의 숫자만큼 commit 을 찍어줘야 하기 때문에 마지막에 한번에 commit 하겠다는 뜻으로 --no-commit 을 쓰고, 최신 commit 에서 부터 3개를 삭제하겠다는 뜻으로 HEAD~3 을 작성하고, 맨 뒤에 .. 은 꼭 해줘야 함

 

 

 

 

 

4. Git 협업 프로젝트

 

1) 팀장 : Organization 만들기

    • Github 에서 + 버튼 누르고 New organization 
    • Free Plan 선택
    • Organization account name(팀 이름) 작성, Contact email(대표 이메일) 작성, My personal account(개인 계정) 선택
    • 팀원 초대, 당장 하지 않아도 됨. skip 도 가능
    • survey 는 해도 안해도 상관 없음, 나가려면 New Organization
    • skip 후 팀원 초대하려면 invite member 선택, owner 는 팀장 권한이니 member 선택
    • repository 만들기 : 이름 작성, public 선택, license 는 mit, create 클릭하고 작업

 

2) 팀장 : 초기 Set UP

  • Git bash 에서 git clone [주소] / 만들어진 해당 repository 이름으로 된 파일로 cd 명령어를 통해 이동
  • gitignore.io 사이트로 가서 gitignore 파일에 들어갈 코드 생성
  • Git bash 에서 touch .gitignore (파일 생성), vi .gitignore (수정) 해서 gitignore.io 에서 복사한 코드 붙여넣기
  • README.md 파일 수정
  • 이때, 설정 파일은 다른 폴더에 넣지 않고 메인에 놓기
  • 기본 작업할 html, css, js, img 등 파일 생성해놓으면 좋음
  • git status (상태확인) → git add → git commit → git flow init (branch 구조 만들기) → git push -u origin develop (첫 push)

 

3) 팀장, 팀원 : Issues 작성

  • Issues 작성은 해야 될 일을 작성하는 것
  • Issue 는 한글로 작성해도 됨. 할 일을 정하고 해당 Issue 를 해결하면 완료.
  • 제목은 본인 이름 포함해 간단하고 명확하게 명시할 것. 본문은 설명, 할일, 참조 형식으로 작성.
  • 할 일은 각자 선정하고, 체크박스 활용할 것

 

4) 팀장, 팀원 : fork 뜨기

  • fork : 팀 organization 의 사본, 간접 기여 방식, 원본 리모트의 사본을 뜻함
  • 팀 organization 에서 fork 라는 버튼을 클릭 후 Copy the main branch only 체크박스 해제
  • 팀원 : Git bash 에서 fork 를 떠서 사본이 되고 자기 소유가 된 repository 의 주소를 가져다가 clone → git clone [주소]
  • 팀장 : 이때 set up 을 완료한 원본 폴더가 남아있을텐데 이 폴더는 rm -rf [원래폴더명] 으로 지워주고 fork 뜬 사본 repository 를 git clone [주소]
  • git flow init ls (만들어졌는지 확인) git flow feature start [이름] (feature branch 생성] → 작업, add, commit → git flow feature finish [이름] → git push -u origin develop (이후 push 할 땐 -u 없애도 됨)
  • Github 에 fork 뜬 내 repository 로 이동해서 상단에 뜬 compare & pull requests 클릭하거나, pull requests 탭으로 가서 new pull request 버튼 클릭. 근데 후자를 추천
  • 바뀐 내용이 똑같은 branch 로 들어가도록 develop 에서 develop 으로 가게 선택, 이때 오른쪽의 내 repository 부터 선택해주기
  • pull request 의 제목, 내용 작성 : 작성한 issue 와 연결되도록 fix(수정), close(마무리), resolve(해결) 중 알맞은 키워드 고른 후 옆에 # 해주면 issue 자동완성이 뜸 / 키워드는 복수형(# 여러 개) 과거형 모두 가능(예: fixed, fixes)
  • 완료되면 create pull reaquest

 

5) 팀장 : Code Review

  • pull requests 탭 들어가서 
  • Reviewers (리뷰할 사람, 팀장) 지정 - Assignees (pull requests 한 사람) 지정 - Labels (어떤 것을 했는지 구분) 지정
  • files changed 에서 보고 코드 위 + 버튼 눌러서 리뷰
  • 파일 당 상단 오른쪽에 viewed 라는 체크박스가 있는데 통과한 것은 체크, 통과 못한 거는 viewed 누르면 안됨 
  • finish your review 클릭하고 확인해달라고 내용 작성, comment(단순한 제안, 해도 되고 안해도 되고), approve(승인), request changes(반려) 중 하나 선택해서 보냄. 이때 반려의 경우 반려된 것 고칠 때까지 마지할 수 없음

 

6) 팀원 : Request Changes 수정

  • Git bash 에서 code . 해서 vscode 로 이동
  • 수정할 사항 작업
  •  vscode terminal 켜서 git add → git commit git push origin develop
  • 이때 pull reaquest 가 닫힐 때까지 나의 develop 으로 push 해도 팀의 develop 까지 쭉 연결되어 연동됨

 

7) 팀장 : 수정 사항 확인

  • 해결된 것 확인 후 resolve conversation 클릭
  • files changed 로 가서 viewed 체크, comment 작성 후 approve
  • 그럼 merge 가능한 초록색 버튼으로 뜸, 추가 의견도 맨 하단에 작성 가능, merge 클릭

 

8) 팀장, 팀원 : pull 받기

  • Git bash 에서 git remote -v 했을 때 upstream 이 없다면 git remote add upstream [팀주소] 하면 upstream 이 생김
  • pull 받을 때는 팀의 develop 을 받아야 함, 그래서 git pull upstream develop
  • 다른 사람 작업 내역이 내 develop 에 쌓임
  • 따라서 디벨롭에서 작업을 할 수 있지만 하지 않는 이유는 중간중간 pull 을 받아야 하는 때가 오기 때문에. 그럼 내 작업과 다른 사람 작업이 충돌 할 수 있음

 

 

 

 

 

 

10171, 10172, 25083

 

console.log(`\\    /\\
 )  ( ')
(  /  )
 \\(__)|`);
 
 console.log(`|\\_/|
|q p|   /}
( 0 )"""\\
|"^"\`    |
||_/=\\\\__|`);

console.log(`         ,r'"7
r\`-_   ,'  ,/
 \\. ". L_r'
   \`~\\/
      |
      |`);

 

벡틱과 역슬래쉬 주의!

벡틱과 역슬래쉬 쓸 때는 앞에 역슬래쉬를 하나 붙여줘야 에러가 안남

 

 

 

2588번 답

let fs = require("fs");
let [a, b] = fs.readFileSync("/dev/stdin").toString().split("\n").map(Number);

let oneNum = b % 10;
let tenNum = Math.floor((b % 100) / 10);
let hundredNum = Math.floor(b / 100);

console.log(a * oneNum);
console.log(a * tenNum);
console.log(a * hundredNum);
console.log(a * b);

 

처음엔 꼼수를 써서 console.log(a * 5); console.log(a * 8); console.log(a * 3); 이런 식으로 구했다가 안돼서 385 부분을 다시 split 으로 나눠가지고 변수를 지정해준 뒤 각각 곱했는데 런타임 에러가 나왔다ㅎㅎ..

답을 찾아보니 하나하나 사칙연산으로 계산해줬어야 했던 것이다 너무 꼼수만 썼다

 

 

3003번 답

let fs = require("fs");
let input = fs.readFileSync(__dirname + "/textfile.txt").toString().split(" ").map((num) => parseInt(num));
let origin = [1, 1, 2, 2, 2, 8];
let result = origin.map((el, idx) => el - input[idx]);
console.log(result.join(" "));

 

split 까지만 하고 도저히 풀리지 않아 답을 봤다

[ '0', '1', '2', '2', '2', '7' ] → 문자열로 되어있는 배열을 숫자로 바꿔줘야 하니까 map 을 돌려 각 배열을 숫자열로 변환해주고,

원래 있어야 하는 피스 양을 origin 으로 지정해준 뒤,

피스가 추가하거나 빼야 하는 양을 계산하기 위해 origin 에 map 을 돌려 원래 있어야 하는 피스 양에서 지금 있는 각 피스들을 빼주고,

그 상태로 result 를 출력하면 [ 1, 0, 0, 0, 0, 1 ] 이렇게 배열로 나오기 때문에 배열의 모든 요소를 연결해 하나의 문자열로 만드는 join 메서드로 합쳐준다.

 

 

 

18108번 답

let fs = require("fs");
let input = fs.readFileSync('/dev/stdin').toString();
console.log(input - 543);

 

불기연도를 서기연도로 변환하라 그래서 다른 방법이 있는건가;;

그러다가 10926번 처럼 그냥 출력하라는 거 아닐까 싶어서 꼼수를 부려서 2541-1998 = 543 해가지고 고대로 543 만 빼서 1998 을 출력 시켰더니 정답이었다 이렇게 간단할수가

 

 

+ Recent posts