ㅇㅇㅈ Blog

프론트엔드 수행중

0%

Posted on Edited on In ,

WORDLE 게임 만들기

  • 보드판은 총 5x5 사이즈
  • 한 타일에 알파벳 하나씩 입력할 수 있고 한 줄은 한 번의 시도이다
  • 단어를 입력하고 엔터를 누르면 타일의 색이 바뀌면서 정답에 대한 힌트를 알려주고 다음 줄로 이동

html 구조

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!-- index.html -->
<body>
  <div class="container">
    <div class="board--wrap">
      <!-- 보드 한 줄 -->
      <div data-row="0" class="game-board">
        <!-- 타일 한 칸 -->
        <div data-cell="0" class="board__text"></div>
        <div data-cell="1" class="board__text"></div>
        <div data-cell="2" class="board__text"></div>
        <div data-cell="3" class="board__text"></div>
        <div data-cell="4" class="board__text"></div>
      </div>
      <div data-row="1"  class="game-board">
        <div data-cell="0" class="board__text"></div>
        <div data-cell="1" class="board__text"></div>
        <div data-cell="2" class="board__text"></div>
        <div data-cell="3" class="board__text"></div>
        <div data-cell="4" class="board__text"></div>
      </div>
      <div data-row="2"  class="game-board">
        <div data-cell="0" class="board__text"></div>
        <div data-cell="1" class="board__text"></div>
        <div data-cell="2" class="board__text"></div>
        <div data-cell="3" class="board__text"></div>
        <div data-cell="4" class="board__text"></div>
      </div>
    </div>
  </div>
</body>

game-board들은 한 줄이 되고
그 안의 board__text는 각 줄의 한 칸이 된다

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* style.css */
.container {
  width: 1000px;
  margin: 0 auto;
  padding: 40px;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.container .board--wrap{
  margin-bottom: 200px;
}
.container .board--wrap .game-board {
  display: flex;
}
.container .board--wrap .game-board .board__text {
  width: 80px;
  height: 80px;
  margin: 2px;
  border: 1px solid #ccc;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
}
Read more »

Posted on Edited on In , ,

자동차 10부제

  • 자동차 번호의 일의 자리 숫자와 날짜의 일의 자리 숫자가 일치하면 해당 자동차의 운행을 금지

입력설명

  1. 첫 줄에는 날짜의 일의 자리 숫자가 주어짐
  2. 두 번째 줄에는 7대의 자동차 번호의 끝 두 자리 숫자가 주어짐

출력 설명

  1. 주어진 날짜와 자동차의 일의 자리 숫자를 비교하여 10부제를 위반하는 차량의 대수를 출력

제일 처음 작성 했던 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
let dayNum = 2;
let carNum = [12,20,54,30,87,91,30]

function resultNum(day){
  let result = [];
  carNum.forEach(num => {
    let x = num.toString()
    if(x.includes(day)){
      result.push(x)
    }
  })
  console.log(result.length)
}
  • 문제점
    • includes로 비교하니 일의 자리 숫자만 아니라 십의 자리 숫자도 걸려서 출력 된다.
    • 배열안에는 숫자데이터라 비교할려면 toString()도 해줘야 한다
      Read more »

Posted on Edited on In

tag 추가

1
$ hexo new post "title"

기본 틀이 생성됨

1
2
3
tags: 
  - tag1
  - tag2

Category 추가

category 순서 중요

1
2
3
categories : 
  - cate1
  - cate2

같이 작성하면

  • cate1
    • cate2

와 같이 설정 된다

Posted on Edited on In , ,

데이터 실시간 서치

Axios로 데이터 가져오기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
data(){
      return {
        poketmon:[],
        filterInput:'',
      }
    },
mounted(){
  axios.get('@/assets/data/poketmon.json')
      .then(res => {
        console.log(res)
        this.poketmon = res.data.poketmon
      })
      .catch(e => {
        this.error.push(e)
      })
}
mounted 훅에서 데이터를 가져와서 뿌려줬다
created 훅으로도 적어봤는데 똑같이 잘 동작한다

Computed filter

1
2
3
4
5
6
7
8
9
computed:{
      filteredList(){
        const value = this.filterInput
        return this.poketmon.filter(function(mon){
          return mon.name.includes(value) || mon.type.includes(value) 
          // = return mon.name.indexOf(value) > -1 || mon.type.indexOf(value) > -1
        })
      }
    }
  • 인풋으로 들어가는 데이터가 계산되어 나올수 있게 computed에 메소드를 적는다
  • poketmon 배열을 filter메소드로 걸러서 반환한다 무엇을? filter의 콜백 함수 부분에서 조건에 맞는 요소를
  • includes() 메소드는 문자열이 특정 문자열을 포함하는지 확인하는 메소드

axios로 api 요청할때 쿼리값으로 넣는 것만 해봐서
받아온 데이터를 필터링 하는건 처음 해봐서 좀 헤맸다..

Posted on Edited on In ,

Page Not Found

잘못된 주소로 접근하였을 경우 router를 통해 not found(component) 페이지를 출력할 수 있다

  1. routes 폴더에 NotFound.vue 파일 생성
  2. routes/index.js 에 라우트 등록
1
2
3
4
5
6
7
8
9
routes :[
  {
    path:'/:notFound(.*)', // /:[파라미터이름 바꿔도됨](.*) 
    // 정규표현식(RegExp) 
    // . 임의의 한 문자와 일치 
    // * 와일드 카드
    component:NotFound // NotFound 컴포넌트로 보여줌
  }
]

Posted on Edited on In ,

JS-THIS

this의 값은 함수를 호출한 방법에 의해 결정된다

  • this는 호출한 자신
  • 호출한 자신이 없을 경우에는 기본값으로 window 객체를 호출한다
  • 예외
    • 전역스코프에서 this는 window 객체 이다
    • 화살표 함수에서 this가 조금 달라진다
    • Strict mode에서는 this가 조금 달라진다
1
2
3
4
5
6
7
8
9
10
11
let person = {
  fullname :'kkoj',
  age:20,
  printThis: function(){
    console.log(this) // person이 찍힌다
    console.log(this === person) // true
    console.log(this.fullname) // == person.fullname
  }
}
person.printThis(); 
// person에 의해서 printThis가 호출 되었기 때문에 this == person
Read more »

Posted on Edited on In

License

Sesame is Free software, and may be redistributed under the terms of specified in the LICENSE file.

오픈소스 프로젝트에서 가장 중요한 License는 내가 만들 때에도, 배포할 때에도 가장 신경써
야 하는 일 중 하나입니다.
가장 많이 사용하는 License는 다음과 같습니다.

  • MIT License
    • MIT에서 만든 라이센스로, 모든 행동에 제약이 없으며, 저작권자는 소프트웨어와
      관련한 책임에서 자유롭습니다.
  • Apache License 2.0
    • Apache 재단이 만든 라이센스로, 특허권 관련 내용이 포함되어 있습니다.
  • GNU General Public License v3.0
    • 가장 많이 알려져있으며, 의무사항(해당 라이센스가 적용된 소스코드 사용시 GPL을 따라야 함)이 존재합니다.
      Read more »

Posted on Edited on In , ,

헤더메뉴 v-for

  • v-for 디렉티브로 메뉴 반복 출력하기
  • 메뉴데이터에 icon이 있는 경우에만 v-if를 통해 icon 출력하기
  • v-bind:style를 통해 백그라운드 이미지 바인딩 하기
    Read more »