JS_검색, 장바구니, 영수증 모달 구현 정리
👩🏻💻 테스트 삼아 진행한 미니 프로젝트, 진행하면서 어려웠던 부분을 정리해봤다! 🔎 검색바 & 검색한 내용에 배경 컬러 입히기 검색바 구현인데 검색한 상품만 나오게 구현하였다 단! 기존 방식과 다르게, 검색한 내용에 배경색을 추가해보았다 📌 HTML 📌 Javascript 검색기능까지는 손쉽게 구현하였지만 배경컬러 입히는 부분에서 살짝...
Git 브랜치 & 협업 정리 🛠️
👩🏻💻 지금까지는 혼자 또는 소규모 프로젝트를 진행해서 기본적인 commit, push만 사용해도 충분했다. 하지만 회사에서 협업을 하게 되면 여러 사람이 동시에 작업하게 되고, 무분별한 커밋과 푸시는 큰 문제가 될 수 있다. 그래서 커밋 개념을 다시 한번 훑어
기본개념_이벤트버블링 과 이벤트 위임🫧
👩🏻💻 프로젝트 하면서 자꾸 의도한대로 동작이 되지않길래 찾아보니 이벤트 버블링현상.. 간단한걸 까먹고 원인이 뭐지?? 하면서 다른곳에서 찾고있었다....ㅎ 어이없는 실수!!!ㅠㅠㅠ 🎈 이벤트 버블링 이벤트는 자식에서 발생해서 부모를 거쳐 조상으로 전파 >🚨이벤트 버블링 주의!!! 버블링으로 인해 부모나 조상에게까지 이벤트가 전달되기 때문에,...
🎨 탭 기능 구현하기 (하드코드 vs 반복문)
👩🏻💻 간단한 탭 기능을 하드코드 방식과 반복문을 활용한 방식으로 구현하여 비교해보았다 🏗️ HTML 코드 📌 설명 ✅ 3개의 탭화면 코드를 만들어준다 ✅ 각 탭을 클릭하면 해당 내용이 보여진다 ✍️ 하드코드 방식 (비효율적인 코드 😵) 🏆 반복문을 사용한 코드 (깔끔한 코드 ✨) 🎨 구현 화면 📌 초기 화면 📌 탭 클릭 ...
🕰️ 시간 기반 커밋 꾸미기
👩🏻💻 개발자라면 개인 깃허브는 필수! 기본적인 모습도 좋지만, 취향에 맞게 꾸미면 볼 때마다 뿌듯하고 기분이 좋아진다고!!! 그래서 꾸며본 깃허브😛 1️⃣ Repository 포크하기 🔗 먼저 아래의 레포지토리를 포크합니다. 👉 Productive-Box Repository 2️⃣ 포크한 레포지토리에서 schedule.yml 수정하기 ✏️...
JS_includes() 정리
👩🏻💻 indexOf() 만 알고있다가 .includes()를 새로 알게되었다...나만 지금 알게된거냐구...ㅎㅎㅎ 알면 알수록 새로운거 투성이다!!!✔ 배열에 특정 요소가 있는지 확인할 때 사용✅ 대소문자를 구분하지 않는다✅ true 또는 false를 반환✅
JS_ 버튼 클릭으로 다크 모드 & 라이트 모드 전환🚀
👩🏻💻 간단한 버튼 클릭 이벤트로 다크 모드와 라이트 모드를 전환하는 기능을 구현해보았다✅ badge(뱃지) 요소를 클릭하면 다크 모드 ↔ 라이트 모드로 변경✅ 기본적으로 "Dark🔁" 상태에서 시작1️⃣ badge 요소 클릭 시 count 값 증가2️⃣ 짝수
[프로그래머스]피자 나눠 먹기 (1) _자바스크립트
💻 프로그래머스 코딩테스트 연습LV0 🔍 문제_피자 나눠 먹기(1) 🎯 풀이 다른사람들 풀이⬇️
JS 조건문 활용_ 369 게임 & 시험 판독기
📌 369 게임 🧐 문제 설명 철수는 3의 배수를 구별하기 힘들어 프로그래밍으로 해결하려 한다 3의 배수일 때 박수를 치며, 9의 배수일 경우 박수를 2번 친다 📌 끝자리 3,6,9 게임 🧐 문제 설명 숫자의 끝자리가 3, 6, 9일때 '박수'를 출력하는 프
모달창 제어하기_add(), remove(), toggle()의 차이
💎 HTML ✅ add("show") → 모달 무조건 열기 ✅ remove("show") → 모달 무조건 닫기 🔄 toggle()은 언제? ✅ toggle("show") → 버튼 하나로 열고 닫을 때 ❌ 하지만 모달에는 닫기 버튼이 따로 있어 add/remov
📌 간단한 알럿창 만들기
👩🏻💻 예전에 끊어놓고 시간이 없어서 미뤄둔 강의를 복습 차원에서 빠르게 듣는 중이다~! 아주아주 쉬운 알럿창 만들기!!! 아주 쉽지만 파라미터 이해는 중요한 개념이다!! 이거 이해 못하면 JS 어려움! 😆 📌 간단한 알럿 창 만들기 버튼을 클릭하면 알럿
[프로그래머스]최빈값 구하기_자바스크립트
💻 프로그래머스 코딩테스트 연습LV0 🔍 문제_최빈값 구하기 🎯 풀이 1️⃣ 등장횟수 카운트 객체 counts 랄 사용해 숫자의 등장 횟수를 기록 array.forEach()를 활용해서 숫자가 등장할때마다 개수 증가 2️⃣ 최빈값 구하기 Object.value
[프로그래머스]중앙값 구하기_자바스크립트
💻 프로그래머스 코딩테스트 연습LV0 🔍 문제_중앙값 구하기 🎯 풀이 1️⃣ 배열을 오름차순으로 정렬 2️⃣ 배열의 길이가 홀수이므로 중앙값은 (길이 // 2) 번째 요소 > 💡 Math.floor() 은 소수점 이하를 버리고, 가장 가까운 작은 정수로 내림
[프로그래머스]각도기_자바스크립트
💻 프로그래머스 코딩테스트 연습LV0 🔍 문제_각도기 🎯 풀이 각도(0 < angle ≤ 180)가 주어지면, ✅ 예각(1) → 0° ~ 90° 미만 ✅ 직각(2) → 90° ✅ 둔각(3) → 90° 초과 ~ 180° 미만 ✅ 평각(4) → 180° 이렇게
[프로그래머스]배열의 평균값_자바스크립트
💻 프로그래머스 코딩테스트 연습LV0 🔍 문제_배열의 평균값 🎯 풀이 1️⃣ numbers 에 있는 모든 숫자를 더한다 2️⃣ 요소의 개수로 나누어 평균을 계산한다 3️⃣ 계산된 평균값을 반환! > 👩🏻💻 문제를 풀이하면서 reduce 메서드를 사용하
[프로그래머스]문자열 뒤집기_자바스크립트
👩🏻💻 생각보다 손쉽게 풀었던 문제였다!!!알고리즘 병아리인 나는 스스로 풀고 놀랐지 모야,,!??!?!?! 🐣 💻 프로그래머스 코딩테스트 연습LV0 🔍 문제_문자열 뒤집기 🎯 문제 해결 방법 1️⃣ 문자열을 배열로 변환 my_string을 한 글자
[프로그래머스]두 수의 나눗셈_자바스크립트
👩🏻💻 프로그래머스 입문문제부터 차근차근,,,!!! 언어는 자바스크립트를 선택하였다 💻 프로그래머스 코딩테스트 연습LV0 🔍 문제_두수의 나눗셈 🔍 풀이 ❌ 오답 ❌ 처음에는 질문을 끝까지 읽지않고 나눈값에 바로 1,000 을 곱하였다... 당연히?? 오답일 확률 100% 이다!!! 왜냐?? 정수부분을 리턴해야하는데 소수값까지 모두 리턴...
📚 최종 스프링 프로젝트: React와 연동하기
React와 Spring 프로젝트를 연결하는 과정을 단계별로 정리해 보았다👩🏻💻 1️⃣ Spring 컨트롤러 파일 생성 ✅ 컨트롤러 파일 생성 Spring 프로젝트에 React 뷰(화면)와 연결할 컨트롤러 파일을 만들어줍니다. 📂 src/main/java/com/example/controller에 컨트롤러 파일을 생성하세요. ✅ 파일 생성 후...