본문 바로가기

분류 전체보기66

[알고리즘] 공부(reduce, parseInt 대체) 1. reduce 함수의 기본 구조for문, forEach 그만 쓰고 3, 4번째 인자도 활용해보자.array.reduce(function(accumulator, currentValue, currentIndex, array) { // 계산 로직}, initialValue); accumulator: 초기값 또는 이전 콜백 호출의 결과값currentValue: 현재 처리 중인 배열 요소currentIndex: 현재 요소의 인덱스array: 메소드가 호출된 배열2. 단항 플러스 연산자 (+)문자열을 계산식으로 바꾸는 문제에서 parseInt가 반복되는게 싫어서 알아본 방법단항 플러스 연산자는 문자열을 숫자로 쉽게 변환할 수 있다.이 방법은 parseFloat과 유사하게 작동하여 실수도 처리할 수 있다.l.. 2025. 3. 20.
[Vanilla-JS] 고양이 사진 검색 사이트😺: 상세 기능 구현 시작 전, 문제를 보고 기능 요구사항을 정리해보자 1. HTML, CSS더보기더보기시맨틱 태그 사용반응형 2. 다크모드 더보기더보기체크박스OS 반영3. 이미지 모달더보기더보기[필수] 닫기 기능/api/cats/:id반응형[추가] fade in/out4. 검색더보기더보기[필수] 검색 결과가 없을 때 예외사항 UI[필수] 랜덤 버튼 추가(/api/cats/random50)[필수] 로딩 UI 추가input el 수정최근 검색 키워드새로고침 시 마지막 검색 결과 유지lazy load스크롤 페이징각 아이템 클릭 이벤트를 Event Delegation 기법 사용하여 수정[추가] 마우스 오버 시 고양이 이름5. 랜덤 고양이 배너 섹션 추가 더보기더보기/api/cats/random505개만 노출하며 좌, 우 슬라이.. 2025. 3. 13.
[Vanilla-JS] 고양이 사진 검색 사이트😺 프로그래머스 과제 테스트 2020 Dev-Matching: 웹 프론트엔드 개발자(상반기)' 고양이 사진 검색 사이트 과제를 직접 풀어보았습니다.본 과제는 라이브러리나 프레임워크 없이 Vanilla JS(ES6)로만 구현하였으며, 기능 요구 사항의 풀이 과정을 기록하였습니다.저장소: https://github.com/petitesize/search-cat 본 포스팅에서는 과제 문제를 풀이하기 위해 추가적인 공부가 필요한 큰 개념 위주로 정리하였습니다. 세부 문제 풀이는 복기를 목적으로 다음 포스팅에 정리하기로 하고,시작! 1. 시맨틱한 태그 이용하기출처:[HTML] 과 의 차이 먼저 시맨틱한 태그를 이용하기 위해, header 태그에 다크모드와 검색창을 넣어주었다.그 외로는, section, article.. 2025. 3. 10.
자주 사용하는 HTTP 상태 코드 별 에러 메시지 처리하기! 앞으로 개인 프로젝트에서 자주 쓸 것 같아 정리하는 상태 코드 별 에러 메시지를 블로그에 기록해본다!const getErrorMsg = (status) => { switch (status) { case 400: return "🚨 잘못된 요청입니다. 다시 확인해주세요."; case 401: return "🔒 인증이 필요합니다. 로그인 후 시도해주세요."; case 403: return "⛔ 접근이 거부되었습니다."; case 404: return "❌ 찾을 수 없는 데이터입니다."; case 500: return "🔥 서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요."; case 503: return "⚠️ .. 2025. 3. 4.

티스토리툴바