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

JS 15

[Momentum_ problem shooting] LS의 유저이름 수정 버튼 만들기

모멘툼을 쓰는 언니가 이름 잘못 쓰면 수정 어떻게 하냐고 물어서,, 처음에는 inspector에 들어가는 법을 알려줄까 하다가.. 그냥 버튼을 만들었음. 이미, YoutubePlaylist에 ID를 업데이트하는 코드를 짰었기에 빠르게 끝낼 줄 알았으나.. ㅎㅎ ^^ 한~~~참 걸렸음... 지피티도 이유를 몰라,, 나도 이유를 몰라,, 진짜.. 한 5-6시간을 붙들고 있었던 듯. 되야 하는데 안 되니깐, LS에 저장된 값을 삭제하는 코드로도 짜보고, newUsername 변수도 만들어보고, 다 하다가 결국 savedUsername으로 충분할 거 같은데 하면서 지피티랑.. 계속 키배를 뜸... 넌 시니어 개발자인데 .. 왜 못찾냐고..ㅎ 계속 코드를 이리저리 수정해보고, 넣었다 빼보고 console.log를..

Projects 2024.03.30

[Momentum_ problem shooting] checkbox 가운데 선 긋기

사실.. 이걸 해낸지 꽤 시간이 지났는데 하루하루 지나다 보니까 이제서야 쓴다. "노마드 코더의 크롬앱 강의"에서는 delete 버튼만을 만들었기 때문에, 해낸 표시를 보면서 뿌듯하고 싶던 나는 기능을 추가하기로 결정. ㅎ 앞선 포스팅에도 있듯이 1. checked attribute를 추가하게 만들고 싶었음. 그렇지만, 실패했고 굳이 그럴 필요 없이 checkbox.checked를 사용하면, checked된 상태임을 의미함. 2. gpt와 무한 반복의 시간을 거침. 체크 박스를 만드는 것은 문제가 아니었지만, LS에 저장되서 새고를 해도 유지되게 하는 것은 별개의 문제였는데, 이게 시간이 좀 걸렸음. 리스트를 새로 만들고 업데이트 하며 저장하는 기능이 이미 있었기 때문에, checkBox.id도 같은 해..

Projects 2024.03.30

[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
728x90
반응형