자신에게 친절할 것 :)
728x90
반응형

Web Developing/JS 13

[JS] Wordle 기능 넣고 수정하기

//애플코딩의 JavaScript로 요즘 유행하는 Wordle 게임 만들기 (개쉬움) 듣고// https://youtu.be/npvrAzxgTOQ?si=1kZy4h0UC0GjuL9v 허우,,,, ​ ​ 영상 보고 게임 만든 후에 불편했던 것들 고치는 것을 시도하는 중이다. ​ 생각보다... 모르는 게 너무 많아.. ㅎ ^^ ​ 하나씩만 input에 입력되게 하기 클릭도 ok but, enter 쳐도 넘어가게 만들기. 정답 array 만들기 매일 정답 바뀌게 하기 기회 제한 넣기 CSS 손보기 ​ 1번만,,, 성공했어,,,,ㅠㅠㅠ ​ 2번 enter 치면 넘어가게는 했는데, beforeend로 추가된 iput들도 똑같이 적용되게 못 짜겠음.. ​ gpt와 씨름을 하다가... 일단 깃에 커밋 해놓고, 다시...

Web Developing/JS 2024.03.16

[JS] alert 창을 .addEventListener사용해서 2개 만들기

// 코딩애플 님의 웹개발로 배우는 자바스크립트 기초 듣는 중// 웹개발로 배우는 자바스크립트 기초 www.youtube.com ​ 너무,, 안일하게 클론 코딩만 했어.. 다들 설명하는 양이 다르고, 예제의 난이도가 다르니까. 거의 한 달을 들었는데도 코드를 못짜는... 나란 코린이.. ​ 모르는 거 당연하니깐 계속 해보자. ​ ps. 파라미터 설명을 쉽게 해주시고, 계속 과제를 주셔서 생각하게 하기 때문에 도움이 많이됨. 몇 개 해봤는데 여전히 잘 모르겠는 코린이라면 추천. 일단 10분짜리 강의 6개 정도로 alert 창을 계속 업데이트하면서 개념들을 설명해 주심. ​ 앞에는 굳이 쓸 필요도 없이 쓰윽쓰윽 지나갔는데, alert 창 2개 만드라는 지점부터 막힘. ​ 대개 찾을 때까지 해보는 데 오늘은 ..

Web Developing/JS 2024.03.16

[JS] 기본적인 개념 3

//코딩앙마님의 "자바스크립트 기초 강좌: 100분 완성" 듣는 중// ​ 허우.. 드디어 끝... 코드를 쳐가면서.. 하니깐.. 너무 오래 걸림.. 이론 공부 했으니깐. 하나 더 만들어보고 다시 중급 강좌 들어야지..ㅎ [함수 선언문 vs. 함수 표현식] ​ : 어디서든 호출 가능 sayHello();가 함수 위로 올라와도 됨. sayHello(); function sayHello(){ console.log('Hello'); } JS는 위에서 아래로 순차적으로 실행되는 함수(인터프리터 언어, interpreted language)인데 how? console.log(num); // num is not defined로 에러 뜸 let num = 1; js는 내부 알고리즘 때문. js 실행 전에 코드의 모..

Web Developing/JS 2024.03.16

[JS] 기본적인 개념 2

//코딩앙마님의 "자바스크립트 기초 강좌: 100분 완성" 듣는 중// ​ 사실은 어제 끝냈어야 했는데.. 해보자. ... 아직도 조금 남았어.. 정말 싱숭생숭 하군. [조건문] ​ if 괄호안의 조건을 평가해서 true면 실행. 괄호 안의 값은 불린형으로 변형된 뒤에 판단. else는 if절이 false일 때 실행 됨. 그 중간은 else if로 const age = 18; if(age >19) { console.log("Well Come!") } else if(age===19) { console.log("Good Luck!") } else { console.log("Good Bye!") } [논리 연산자] || or, && and, ! not || or: 여러 개 중 하나라도 true면 true. 모..

Web Developing/JS 2024.03.16

[JS] 기본적인 개념 1

/코딩앙마님의 "자바스크립트 기초 강좌: 100분 완성" 듣는 중// ​ 냅다 강의 듣고, 만드는 것부터 해서 놓친 것 있을 까봐 정리 중 아니나 다를까 많이 놓침..ㅎ [변수] let, const => 일단, 다 const로 만들고, 필요하면 let으로 변경해서 사용. let: 변경 가능하며, 바꿀 땐 아래는 let 생략. let grade = "F"; grade = "A"; const: 변경 x. const 임을 알려주고자 대문자와 _사용해서 변수 명 생성. 문자, 숫자, $,_만 사용 첫글자는 숫자 x, 예약어 x, 가급적 상수는 대문자로 알려줄 것, 변수명은 읽고 이해하기 쉽게 선언 ​ ​ [자료형] => typeof 로 확인 가능 ​ "",'', `` 문자 중간에 "I'am a boy" 같이 '..

Web Developing/JS 2024.03.16

[JS] 개념:Call Stack

// Nomard Coder의 33 Concepts of JavaScript 듣는 중// ​ 1. Call Stack JS가 함수 실행을 핸들 하는 방법 중 하나 실행할 함수를 stack 위에 올림. 함수 다 실행하면 없애고, 불러올게 없어지면, 함수가 끝난 것. 순서대로 포함된 함수 전부 끝까지 리스트를 따라갔다가, 다시 위에서부터 내려오면서 없애며 "실제로 실행" 되는 것 ​ - Crome-source에서 확인하면 에러의 위치에 따라서 나타나는 에러 개수가 다른 데 그건 함수가 리스트로 쭉 위로 쌓이면서 다 확인되고(anonymous -> zero -> one, -> two -> three) 위에서부터 실행되면서 하나씩 제거되면서 아래로 내려옴 function three() { console.log(..

Web Developing/JS 2024.03.16

[JS] 날씨 정보 나타나게 하기 (API사용)

// "Normad Coder의 초보자를 위한 바닐라 JS" 들으며, 모멘텀 클론 코딩 중// ​ ​ 드디어 완강인데,, 석연치 않게 끝나는 느낌.. .then 이해가 전혀 안 돼 ㅠㅜㅠ ​ 휴 쉽지 않은 삶이다 진심... 그래도 완강했다는 것에.. 의의를 두고 담주부터 2주 챌린지 끝내야지 ㅇㅇㅇ 한 번 더 들으면 나아지겠지... ㅎ css 꾸미는 건 일단 미루고. 하자 const weather = document.querySelector(".js-weather"); const API_KEY = "8be8b30d5f392f273692fd1514c235b1"; // 날씨 api에서 가지고 온 것 // API(appication programming interface; 다른 서버로부터 손쉽게 데이터를 가져..

Web Developing/JS 2024.03.16

[JS] background image 변경하기

// "Normad Coder의 초보자를 위한 바닐라 JS" 들으며, 모멘텀 클론 코딩 중// ​ 오늘 어제 투두 기능을 prac을 변수에 붙여서 똑같이 써보려고 했는 데 실패했다... 그리고 빠르게 다음 강의로 넘어가서 배경 이미지 변경으로 넘어갔는데 확실히 CSS를 잘 못 다루면 큰 의미가 없는 듯.. 배울 것이 너무 많다... 또, 국비지원 강의 이제 정해야 하는 데 이것도 생각보다 쉬운 게 아니다.. ​ 었쨌든 어제 하나하나 투두리스트 따라해서인지 오늘은 술술 넘어간 편이긴 하다. 이번에는 따로 순서대로 하나씩 확인하면서 하진 않았다. 확실하게 배운 것은 기능마다 js를 따로 빼줘야 된다는 사실이다. ​ body { background-color: #2c3e50; } body { color: wh..

Web Developing/JS 2024.03.16

[JS] to-do list 만들기

// "Normad Coder의 초보자를 위한 바닐라 JS" 들으며, 모멘텀 클론 코딩 중// ​ 처음에는 폼 만들기랑 비슷해서 괜찮을 줄 알았는데 생각보다 너무 복잡하다.. 정리하고 한 번 다시 만들어봐야 할 것 같아. ​ 오타 찾느라 시간 낭비도 많이 하고ㅠㅠ ​ to-do list라는 게 생각보다 기능이 많이 들어간다. 1. todo를 입력하고, 이걸 화면에 나타나게 하고(리스트로), 지우기 버튼도 만들고, 정보를 LS에 저장해야 함. 2. 버튼을 누르면 지워지게 하는데, 각각 화면과 LS 모두에서 지우고 저장되어야 함. ​ 이번에는 따라 하면서, 순서를 확인하면서 해서 그 방법대로 정리해 볼 것. 그냥 무조건 냅다 클래스 만들고 시작할 것. 근데, html에 리스트를 만들어 내는 게 아니라 입력하..

Web Developing/JS 2024.03.16

[JS] form 만들고 저장하기 (사용자 이름 기억하게 하기)

// "Normad Coder의 초보자를 위한 바닐라 JS" 들으며, 모멘텀 클론 코딩 중// ​ 기능 하나를 구현해 내는 데는 생각보다 손이 많이 간다. 코딩은 문제를 해결하는 방법을 배운다는 말이 이해가 간다. ​ 연구할 때 주제를 선정하고, 해당 분석 방법을 고르고, 적용하고 해석했던 것처럼 폼을 만드는 것도 보이게 하고, 입력이 가능하게 하고, 그것을 저장하게 하고, 어떤 언어를 사용해서 어떻게 보이게 할지(인사말)도 정해야 한다. ​ 확실한 것은 내가 무엇을 원하는지를 명확하게 알아야 한다는 사실이다. 이번 강의에서 처음 써 보는 태그인데 말 그대로 폼, 입력 양식을 의미한다. 로그인 창, 회원가입 폼이 해당되기에 앞으로 많이 사용할 것 같다. ​ 은 전체 양식으로 화면에 나타나지 않기에, 실제..

Web Developing/JS 2024.03.16
728x90
반응형