<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>쿵스쿵스쿵스
  </title>
</head>
<body>
  

  <div><span id = "order">1</span>번 참가자</div>

  <div>제시어 : <span id = "word"></span></div>
  <input type="text">
  <button>쿵쿵따</button>
  
  <script>
    const number = Number(prompt('참가 인원을 입력해 주세요.'));
    const $order = document.querySelector('#order');
    const $input = document.querySelector('input');
    const $button = document.querySelector('button');
    const $word = document.querySelector('#word');
    
    let word;     //제시어
    let newWord;  //새로운 제시어
    const onClickEvent = () => {
      if(number) {
        if(!word || word[2]===newWord[0]){
          if(newWord.length===3){
            word = newWord;
            $word.textContent = word;
            const order = Number($order.textContent);
            if(order+1 > number){
              $order.textContent = 1;
            } else {
              $order.textContent = order +1;
            }
          } else {
            alert('세 글자 단어를 입력하세요.');
          }
        } else {
            alert('땡!');
        }
        $input.value = '';
        $input.focus();
      }

    };
    
    const onInput = () => {
      newWord = event.target.value;
    };
    

    $button.addEventListener('click', onClickEvent);
    $input.addEventListener('input', onInput);
  </script>
</body>
</html>

ㅠㅠㅠㅠㅠ인프런강의 중 셀프 체크라해서 셀프니까 내 힘으로 쉽게 할수있으려나 하고 호기롭게 시작하였으나

결국 구글링의 힘을 빌렸다.

이렇게 하면 작동할것인가 여러번 시도하면서 코드 한줄 한줄의 중요성을 뼈저리게 느낀 경험이였다.

'하찮은 개발일지' 카테고리의 다른 글

css 배경이미지 설정  (0) 2022.09.25
22.07.18 날씨 api 사용  (0) 2022.07.18
2022.07.18 버튼을 눌러 삭제하는 기능  (0) 2022.07.18
22.07.15 백그라운드 외..  (0) 2022.07.15
2022.07.14 clock.  (0) 2022.07.14

 

  1. display : flex로 설정할때 사용
  2. flex-direction : 정렬할 방법을 지정 row하면 ㅡ ,column 하면 ㅣ방향으로 기준이 된다
  3. justify-content : 가로를 기준으로 정리.
  4. align-items:세로를 기준으로 정리
  5. order: 자주 사용은 안할듯싶지만 아이템들의 위치를 지정해준다.
  6. align-self: 특정 아이템에 넣어주면 라인에서 독자적으로 움직일수있다!
  7. flex-wrap:줄바꿈.
  8. flex-flow : flex-direction+wrap 를 동시에 사용 하는 ex] flex-flow:column-reverse wrap-reverse; 둘다 사용
  9. align-content:뭘까 솔직히 3번과 4번의 헷갈림을 유도하는..이것도 공간조정에 쓰일듯싶다.

https://flexboxfroggy.com/#ko

 

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

코드를 이용하여 개구리를 연잎에 옮기면서 flex 속성에 대해 더 쉽게 이해할수있다.

초보css입문자들에게 너무 좋은듯

사진을 배경 이미지로 넣고 싶다면
img {
position:absolute;
width:100%;
height:100%;
left: 0px;
top: 0px;
right:0px;
bottom:0px;
z-index: -1;
opacity:80%;
}

 

이 간단한 것을 실제로 생각하지 못한다면 얼마나 비참한 시간이 흐르는지,..

 

   <script src="js/background.js"></script> 이 것이 html에 있던 내 백그라운드 이미지 사진이다.
아..이걸 그냥 사진말고 화면 꽉차게 하고싶은데..
도저히 스크립트로 이루어진 이미지 바꾸는 법을 모르겠어서 혼자 이것저것 해봤지만 실패. 역시 서치가 답
 
분명 시도했던것같은데 간과한것이 있었나?
그건 아마..백그라운드 사이즈 : cover에 집중해 보지못한것인가. 저 커버는 언제 통하는지 기필코 알아내고야 말겠다.
 
어쨋든 초보 프론트엔드개발지망생의 답답함이 해결...되었다.
모든 좌우상하 위치 지정후 100%를 먹여주어야한단걸.
기억해두겠다.
 

 

'하찮은 개발일지' 카테고리의 다른 글

쿵쿵따만들기  (0) 2022.10.02
22.07.18 날씨 api 사용  (0) 2022.07.18
2022.07.18 버튼을 눌러 삭제하는 기능  (0) 2022.07.18
22.07.15 백그라운드 외..  (0) 2022.07.15
2022.07.14 clock.  (0) 2022.07.14

1브랜치를 메인 그리고 추가로 생성한 브랜치를 2브랜치로 가정했을때..

 

1. 3-way merge

신규 커밋이 있을 때 merge 명령을 통해 두 브랜치를 합치면 새로운 커밋을 자동으로 생성해준다.

 

1브랜치(main)+2브랜치 = new main3브랜치.

 

2.fast-forward merge 

 

메인브랜치가 만약 커밋이 없고 생성한 브랜치만 커밋이 있을경우?

이럴 경우를 fast-forward merge 라고 한다.

1브랜치(main)+2브랜치=  new main 2브랜치

둘을 합치면 새로운 커밋이 있는 2브랜치가 메인이 된다.

 

3.rebase and merge

간단하게 커밋시점을 옮긴후 merge 한다는것.

 

메인의 최근 커밋으로 2브랜치의 시작지점을 옮긴후 merge 하는것.

2브랜치로 스위치한담에 [git rebase main]을 한후 다시 메인브랜치로 스위치 -> 그리고 git merge 2브랜치

 

개인적으로 가장 안쓸것같은 3번.

 

4. squash and merge

2브랜치의 커밋한 내용을 한번에 메인브랜치와 이어주며 붙여준다는 느낌.

 

가장 깔끔하게 브랜치할수있을것같아서 개발배우면서 많이 쓰도록 노력하려고 한다.

하는 방법은 메인으로 스위치 한담에

[git merge --squash 브랜치명]

[git commit - '메시지'] 를 통해 남긴다.

 

 

'Git' 카테고리의 다른 글

Git 첫 대면  (0) 2022.09.25

 

git git git 말만 들었지 도대체 무슨 용도이며 왜 사용하는가를 알게 된 지금 간단한 정리를 해보자.

 

 

git은 버전관리프로그램.

게임으로 따지면 오토저장 말고 수동저장으로 차곡차곡 save파일이 쌓인 것과 비슷하다.

 

개발을 하다보면 오류가 나는건 당연지사인데 이걸 되돌리고 싶다 할때 git이 필요하며

 

깃허브란 곳에서 협업을 할때도 사용한다고 한다.

 

또한 컴퓨터에 저장하다가 날려먹는 경우를 방지하기 위해 원격저장소에 저장하여 안전하게 하는 경우와

 

컴퓨터 노트북등 그간 해왔던 개발을 옮기기에 간편.

 

 

 

시작을 한다면 터미널을 이용해

 

[ git init ] 을 입력하여 시작한다.

[git add .]  or [git add (파일명)]

을 통하여 내 코딩한 것을 staging 장소로 보낸다.

[got commit -m '메시지'] 내가 알아볼수있게 커밋한다.

 

난 아직 초보라 git log를 통해 계속 확인해보고 익숙해지려고 노력중이다.

 

물론 vs에서 커밋버튼이 있는 것을 이용해도 편하다.

배우는 입장에서 그 과정을 안다면 더 좋을 것 같아 이렇게 배운다..

 

커밋이야 개발자들이 1일1커밋 등 말로 자주 들어 익숙하다 하지만

브랜치라는 개념은 다소 생소했다.

 

 

내 식대로 표현하면 마블 멀티버스 같은 느낌?

 

어쨋든 커밋을 하는 시점에 브랜치를 생성해서 엑셀연습할때처럼 복제본에다가 이것저것 막 해보는 것.

 

그게 잘 통하면 merge를 통해 합쳐주는것.

 

[git branch 브랜치이름] 을 입력하여 브랜치를 생성해줍니다.

 

생성하면 기존에 작업하던 main과 방금 생성한 브랜치 이렇게 멀티버스 두개가 공존하는데

 

[git switch 브랜치이름] 을 통하여 브랜치를 넘나들수있다.

 

merge 의 방법은 다양한데 이 부분은 따로 정리하는 것이 낫겠다.

 

 

 

 

 

 

 

 

'Git' 카테고리의 다른 글

브랜치를 합쳐보자.  (0) 2022.09.25

const weather = document.querySelector("#weather span:first-child")  // 인덱스 화일 const city = document.querySelector("#weather span:last-child")
const API_KEY ="69ccc4d6a092c24097b0d0c925e936bb"; // 이건 사이트에서 받은 api키



function onGeoOk(position){
    const lat = position.coords.latitude
    const lon = position.coords.longitude
    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`;

   
    fetch(url)                                                                    
    .then((response) => response.json())
    .then((data) => {
         city.innerText = data.name;
         weather.innerText = `${data.weather[0].main} /${data.main.temp}`;                      
        });
}
function onGeoError(){
    alert("위치를 읽을 수 없습니다")
}

navigator.geolocation.getCurrentPosition(onGeoOk,onGeoError); //현재 위치를 알려주는 기능

 

 

 

'하찮은 개발일지' 카테고리의 다른 글

쿵쿵따만들기  (0) 2022.10.02
css 배경이미지 설정  (0) 2022.09.25
2022.07.18 버튼을 눌러 삭제하는 기능  (0) 2022.07.18
22.07.15 백그라운드 외..  (0) 2022.07.15
2022.07.14 clock.  (0) 2022.07.14

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY = "todos"

let toDos = [];

function saveToDos(){
    localStorage.setItem("TODOS_KEY", JSON.stringify(toDos));
}

function deleteTodo(event){
    const li = event.target.parentElement;
    li.remove();
    toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
}

function paintToDo(newTodo){
    const li = document.createElement("li")
    li.id = newTodo.id;
    const span = document.createElement("span")
    span.innerText = newTodo.text;
    const button = document.createElement("button");
    button.addEventListener("click",deleteTodo)
    button.innerText = "X"                                                                            
    li.appendChild(span)
    li.appendChild(button)
    toDoList.appendChild(li)
}

function handleToDoSubmit(event){
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    const newTodoObj ={
        text: newTodo,
        id: Date.now(),
    };
    toDos.push(newTodoObj);
    paintToDo(newTodoObj);
    saveToDos();
}


toDoForm.addEventListener("submit", handleToDoSubmit)


const savedToDos = localStorage.getItem("TODOS_KEY")

if(savedToDos !== null){
    const parsedToDos = JSON.parse(savedToDos);
    toDos = parsedToDos;
    parsedToDos.forEach(paintToDo);
}

 

버튼을 눌러서 리스트 속 item을 삭제하는 기능을 만들었다.

생각해보면 간단한데 그 속은 전혀 아니다.

일단 중요하게 생각해야할것.

function deleteTodo(event){
    const li = event.target.parentElement;
    li.remove();

  toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));

}

 삭제하는 기능 안에 필터 기능. 말 그대로 필터해서 보여준다.

toDo에 아이디를 그전에 부여했었는데 클릭했을때 li(리스트)눌렀을때 부여된 아이디가 맞지않은 것을 모두 보여준다는 뜻.

parseInt 는 스트링->숫자로 변환해주는 것.(아이디가 스트링으로 표기되어 기능이 제대로 되지않기에 숫자로 값을 변환해줌)

'하찮은 개발일지' 카테고리의 다른 글

css 배경이미지 설정  (0) 2022.09.25
22.07.18 날씨 api 사용  (0) 2022.07.18
22.07.15 백그라운드 외..  (0) 2022.07.15
2022.07.14 clock.  (0) 2022.07.14
2022.07.11 String  (0) 2022.07.11

+ Recent posts

티스토리툴바