JS
-
테스트를 먼저하고 개발을 한다고...? TDD와 JestJS 2026. 1. 13. 16:12
오랜만에 돌아온 아티클 미션!TDD와 Jest에 대해 배우는 시간이였다. TDD란?테스트를 먼저 작성 후 그 테스트를 통과하도록 개발을 하는 개발 프로세스를 말한다.일단 개념은 이해했지만, 실제로 코드를 짜기 전 테스트를 먼저 떠올리는 게 쉽지 않았다.정말 TDD를 하는 회사가 있을까?진짜 궁금해서 당장 사람인,잡코리아에 들어가 JD를 찾아보았다. 필수스펙은 아니지만 생각보다 테스트를 요구하는 회사들이 좀 있어보였다정말 개발 쉽지않구나,,아직은 테스트를 먼저 설계하는 게 익숙하지 않아서 어렵게 느껴졌다.어쩌겠는가 필요하다면 해야지. 모르면 배우면 된다! https://youtu.be/W-fyyAHAqSU?si=DDKTGgBUBDXcwhto진짜 TDD가 필요한건지 궁금해서 보았는데 한번씩 시청해보시길 ..
-
Fetch와 PromiseJS 2025. 11. 25. 15:38
Fetch는 Promise를 반환한다...?첨에 무슨소리지 했는데 말그대로다.fetch는 서버 통신을 위한 함수고, 통신이 시간이 걸리니까 Promise 객체를 뱉는다.const 결과 = fetch('URL');console.log(결과); // Promise 객체가 나옴 에러는 무시하고 fetch안에 Promise를 저렇게 보여주게된다.내장 메서드들을 보면 .then 외에 .cath,constructor, finally, symbol 등 어디선가 한번쯤 봤었던 친구들이 많은데요것들은 아래에 천천히 설명하도록 하겠다 Promise - 결과를 약속해줄게이름 그대로 약속이란 의미로 비동기 작업, 즉 지금 당장은 값이 없지만 나중에 성공이나 실패할때 결과를 나타내는 객체라고 말할수있겠다. // 이건 뭐지..
-
호이스팅과 var/let/const 차이점JS 2025. 11. 20. 15:27
👇 예전에 클로저와 스코프에 대해 간단히 적었던 글이 있었다 2025.08.12 - [JS] - 클로저와 스코프 클로저와 스코프나의 최애동료 지유님이 추천해준 일주일에 한번씩 기술면접을 위한 질문을 메일로 보내주는 매일메일을 알게되었다!첫 질문부터 모르는 질문이여서 당황스럽긴한데 뭐 당연한걸수도,,(이제lyla-bae.tistory.com 간단하게 다시 설명하면 스코프는 유효범위, 클로저는 함수가 종료되더라도 그 유효범위(스코프)를 기억해놓는 열쇠같은 함수 라고 했다. 오늘 호이스팅을 배우면서 떼놓을수 없는 개념들이기에 리마인드하면서오늘 배운 개념들을 다시 정리해보고자 한다 호이스팅이란변수와 함수 선언이 코드 실행전에 해당 스코프의 최상단 1빠로 끌어올려지는 현상을 말한다. 근데 여기서 주의해야할것은..
-
API 그것이 뭐길래JS 2025. 11. 19. 16:50
오늘은 본격 서버통신에 대한 수업이였다. ajax,,,,fetch,,,,POST,,GET,,사실 독학할때부터 많이 들었지만 아무리 들어도 이해가 잘.......ㅎ,....거기다 오늘은 Observer라는게 잇는것도 처음알았다....아무래도 익숙치가 않아서 머리에 잘 안들어온다(라고말하고싶다) API? AJAX?진짜 나같은 빡대가리도 이해하기쉽게 설명하면 API는 프로그램끼리 소통하는 방법을 말한다. API에도 외부에서 데이터를 가져오는것과 내부에서 쓰는 것으로 나뉘게되는데외부에서 가져오는 방법은 fetch에 가져올 url을 적고 .then 뒤에 이 api에 대한 옵션들을 작성하면된다// 🌐 외부 서버 APIfetch("https://jsonplaceholder.typicode.com/posts") //..
-
getElementsByClassName이 안 돼서 이벤트 버블링으로 해결JS 2025. 11. 17. 23:31
이벤트리스너를 배우고 실습문제를 푸는 중 아래와 같은 상황이 생겼다. 문제상황getElementsByClassName으로 li를 찾아서 거기다 addEventListener을 걸은 것이다.const li = document.getElementsByClassName("item");li.addEventListener("click", ...); // ❌ 에러! 알고보니 getElementsByClassName은 [item1,item2,...]같은 배열같은 값 (유사배열객체)을 반환하는데 찐 배열은 아니고 이것을 HTMLCollection이라고 한다.HTMLCellection 자체에는 addEventListener 메소드가 없어서 바로 달지 못한다. 그럼 언제 addEventListener가 바로 먹힐까?/..
-
나빼고 다 아는 JS 기초 - 조건문, 객체, 자료구조JS 2025. 11. 13. 16:14
어제부터 시작된 JS 수업~!본격 머리에 쥐가 나기 시작했다 낄낄 오늘의 문제 1. if문보다 switch문이나 삼항연산자는 어때 조건문으로 if문은 많이 봐왔기때문에 일단 if문으로 풀었다function getGrade(score) { if (score >= 90) { return 'A'; } else if (score >= 80) { return 'B'; } else if (score >= 70) { return 'C'; } else if (score >= 60) { return 'D'; } else { return 'F'; }} 근데 너무 쉬우니까 오히려 잘쓰지않았던 switch문이나 삼항연산자로 문제를 풀어보는것도 좋은 연습이겠단 생각이 들었다. switch문..
-
클로저와 스코프JS 2025. 8. 12. 11:22
나의 최애동료 지유님이 추천해준 일주일에 한번씩 기술면접을 위한 질문을 메일로 보내주는 매일메일을 알게되었다!첫 질문부터 모르는 질문이여서 당황스럽긴한데 뭐 당연한걸수도,,(이제 개발을 배운데다, 면접준비는 안했으니까)덕분에 이렇게 하나하나씩 찾아보면서 블로그에 쌓아나가면 좋을것같아 쓴다 아무튼 잡담은 치우고 클로저와 스코프가 뭐냐함수의 일급객체,,렉시컬 스코프 블라블르 어렵게 말해봐야 어짜피 읽히지도 않을거 빡대가리도 이해할수있게 최대한 풀어써보았다.일단 스코프부터 알고 클로저를 아는게 이해하기 좋을거같다 스코프(Scope): “변수가 살아있는 공간”스코프는 변수에 접근할수있는 범위를 말한다. 크게 전역스코프, 지역스코프가 있다 (이건 변수랑 똑같구먼) let globalVar = "전역";fun..