본문 바로가기

분류 전체보기

 (106)
TIL - 코드 리팩토링(Code refactoring)을 하는 이유 정의코드 리팩토링(Code refactoring)은 외부 동작을 변경하지 않고 기존 컴퓨터 코드를 재구성(팩터링 변경)하는 프로세스를 말합니다. 요약소프트웨어의 기능을 유지하면서 소프트웨어의 설계, 구조 및/또는 구현(비기능적 속성)을 개선하기 위한 것입니다.리팩터링의 잠재적 이점으로는 코드 가독성 향상과 복잡성 감소를 들 수 있는데, 이는 소스 코드의 유지보수성을 개선하고 더 간단하고 깔끔하며 표현력이 풍부한 내부 아키텍처 또는 객체 모델을 만들어 확장성을 향상할 수 있습니다.코드 리팩터링을 잘 수행하면 소프트웨어 개발자가 기본 로직을 단순화하고 불필요한 복잡성을 제거하여 시스템의 숨겨진 버그나 휴면 상태의 취약점을 발견하고 수정하는 데 도움이 될 수 있습니다.리팩토링을 잘못 수행하면 외부 기능을 변경..
TIL - 실시간 검색 기능과 반응형 웹 만들어 보기 개인 과제의 필수 요구 사항을 충족시키고 themoviedb에서 받아온 데이터가 top_rated인 것을 고려해서 추가 사항으로 기능들을 추가하기로 생각했다.기능을 추가하는 데 있어서 중요하게 생각한 점은 사이트의 목적과 맞고 내가 사용자라면 있었으면 좋을 것이라고 생각한 것들을 적어보고 하나씩 구현했다.배지를 만들어서 카드의 왼쪽 상단에 순위를 더 명확하게 파악다크 모드/ 라이트 모드 구현과 localStorage에 저장해서 설정 저장검색 기능이 사이트 내에 데이터를 조회하는 것이라서 실시간으로 검색 결과 표시데이터 베이스에서 받아온 데이터를 확인해 보니 출시 연도가 고르게 분포되어 있어서 연도순 필터링해서 화면에 표시반응형 웹 만들기    1. 배지를 만들어서 카드의 왼쪽 상..
TIL - DocumentFragment를 활용하여 DOM 조작을 최적화하고 성능을 향상 DocumentFragment란 DOM 조작을 최적화하고 성능을 향상하기 위해 사용되는 가벼운 문서 구조 DocumentFragment의 정의와 장점 DocumentFragment은 DOM(Document Object Model)의 일부로서, 가상의 문서 객체를 나타내고 실제 문서에 부착되지 않은 작고 가벼운 문서 구조를 저장하는 데 사용된다. 이것은 메모리 상에서 DOM 노드들을 관리하면서 리플로우(reflow)를 방지하고 성능을 최적화하는 데 도움이 된다. 여기서 리플로우(reflow)란 브라우저가 렌더링 과정에서 화면에 요소를 표시하기 위해 요소의 크기, 위치, 스타일 등을 계산하고 배치하는 과정을 말한다. 이 과정은 브라우저가 문서의 구조나 스타일에 변경이 생겼을 때, 해당 변경에 대한 영향을 모..
TIL - 이벤트 리스너에서 querySelectorAll 를 사용하면서 생긴 문제와 해결방안: 동적으로 생성되는 요소에 대해서도 이벤트를 처리 이번 주 내일 배움 캠프 스파르타코딩클럽 react_5기 프로젝트는 개인과제로 API에서 받아온 데이터를 가지고 평점순으로 정렬해서 카드 형식으로 flex 또는 grid를 이용해서 검색 기능까지 구현하는 사이트였다. 과제 필수 요구사항 바닐라 JS 영화정보 카드 리스트 UI 구현( 카드에는 title(제목), overview(내용 요약), poster_path(포스터 이미지 경로), vote_average(평점) 이렇게 4가지 정보가 필수) 영화 검색 UI 구현 API로 받아온 전체 영화들 중 영화 제목에 input 창에 입력한 문자값이 포함되는 영화들만 화면에 표시 입력 후 검색버튼 클릭 시 실행 카드 클릭 시에는 클릭한 영화 id를 나타내는 alert 창 표시 선택요구사항 CSS flex/grid 사..
TIL - 블로그 만들기 모달창 구현 및 블로그 글 목록 선입선출로 만들기 (2) 오늘 배운 것 모달창 기능 구현 블로그 홈 섹션에 표시되는 글 목록 만들기 날짜 표시 lastChild()에서 lastElementChild()의 차이점 오늘은 블로그 글 쓰기 폼을 제출하면 홈 섹션에 글 목록이 표시되고 글 목록이 5개가 넘어가면 오래된 항목의 표시를 삭제하고 새 항목을 추가하는 기능을 구현했고 오늘 코딩을 하는데 큰 문제점은 없었지만 firestore에서 받은 API 키를 github에 push 할 수 없어서. gitignore로 push 했지만 문제가 npx http-server로 서버를 활성화하니까 API키를 읽을 수 없었고 모듈 js파일을 script src 하면서 보안 정책인 CORS (Cross-Origin Resource Sharing) 에러와 API키의 문제점을 해결하려고..
TIL - JS와 Firestore 이용해서 블로그 만들기 - 탭 전환 (1) 오늘 배운 내용 오늘은 팀 프로젝트에서 만든 웹페이지를 발표하고 튜터님이 피드백을 하는 시간을 가졌고 다른 조의 웹사이트를 보면서 괜찮아 보이는 기능을 만들어 봐야겠다고 생각했고 그동안 firestore와 JS를 통해 방명록 만들기와 Todo List를 만들면서 블로그를 만들 수 있겠다고 생각해서 피드백과 다른 조에서 좋아 보였던 기능을 배워서 간단한 블로그를 만들기로 했다. 피드백에서 나온 내용 다크 모드 백그라운드 어태치먼트 기능 칭찬 모달 닫기 버튼 이외에도 밖에 버튼을 클릭할 때 모달방이 닫히게 하면 좋았을 것 트랜지션을 이용해 효과를 부드럽게 애니메이션 기능을 넣어주면 좋았을 것 와이어프레임 우선 블로그를 처음 들어갔을 때의 모습이고 다른 조에서 탭 전환하는 기능이 괜찮게 보여서 header의 ..
TIL - Git의 필요성과 prepend()를 사용하면서 생긴 문제 발견과 해결 Git의 필요성 오늘은 내일까지인 팀 프로젝트 간단한 팀 소개 웹페이지에서 팀원들과 그동안 만들었던 기능들을 합치는 작업과 어제 todo list를 만들면서 팀 소개 웹페이지에 들어갈 방명록 중에 개선해야 할 점들을 개선했다. git을 아직 익숙하지 않아서 github에 직접 파일을 업로드하고 수정하면서 협업을 진행했었는데 오늘 기능들을 합치는 과정에서 그동안 개선했던 코드들과 기존에 있던 코드를 수정하지 못해서 부분으로 에러가 발생되었다. 처음에는 간단했지만 계속 수정 작업을 하다 보니 실수가 발생했고 이러한 문제점의 해결 방안이 Git이라는 것을 알고 있었지만 몸으로 직접 겪어보니 git을 이용해서 소프트웨어의 변경사항을 체계적으로 추적하고 통제했으면 이러한 오류들이 발생되지 않았을 것이다 그리고 이..
TIL - 간단한 Todo list 만들어서 CRUD기능 구현 간단한 Todo list 만들기 어제 스파르트코딩클럽 1주차 팀 프로젝트에서 방명록 만들기에서 CRUD를 구현 해봤고 방명록을 만들었던 기억을 통해 간단하게 Todo list를 간단한 CRUD를 만들 수 있을 것 같아서 복습겸 만들어 보기로 했다. 오늘 할일📚 추가 완료된 항목 삭제 html 구조는 방명록과 비슷한 구조로 만들었고 firestore를 이용해서 만들었다. // todo 폼 제출 이벤트 핸들러 document.getElementById("todo-form").addEventListener("submit", async (event) => { event.preventDefault(); // 폼 제출 방지 const todoInput = document.getElementById("todo-inp..

티스토리툴바