본문 바로가기

TIL

 (95)
TIL - CSS와 친해지기 오늘은 새로운 팀 과제 발제가 있는 날이었습니다. 기존의 영화 페이지에 성능을 추가하는데 내가 맡은 역할은 영화 카드를 클릭 시 기존엔 영화 id가 alert창에 출력되었다면 영화 상세 페이지에 이동해서 영화 상세페이지 안에 코멘트를 등록 수정 삭제 할 수 있게 만드는 것입니다. 오늘 하루는 영화 상세 페이지를 어떻게 작성할지 고민하느라 시간을 다 소비했던 것 같습니다. 우선 모바일 화면일 땐 뒤로 가기 버튼이 없으니 따로 만들어 줘야 된다는 것을 가장 첫 번째로 생각했고 개인 과제에서 사용했던 슬라이더에서 backdrop.path 배경을 전체 배경으로 사용해야겠다고 생각했고 아래에는 연습용으로 만든 블로그에서 사용했던 탭 전환 기술도 적용시키면서 코멘트는 한 사람당 한 개로 제외하도록 하는 것으로 와이..
TIL - 화살표 함수를 사용하는 이유 서론오늘은 어제 과제 제출 당시에 개인과제의 JS파일이 한 개였어서 튜터님이 동작, 주제별로 나누는 것이 가독성이 더 좋은 코드가 될 것 같다고 피드백을 해주셨습니다. 이미 어제 JS코드를 나눠서 바로 제출했지만 제출 항목에 보완한 부분을 작성하라고 적혀있었고 코드를 주제별로 분리하면서 중복된 코드를 제거하고 함수 선언식과 함수 표현식 그리고 화살표 함수를 사용하고 있었기에 화살표 함수로 통일해서 보완했다고 작성했습니다. 그러면서 궁금증이 생겼는데 왜? 화살표 함수가 ES6문법에 새로 생겨난 이유가 무엇이고 화살표 함수의 장점과 만들어진 이유가 무엇인지 학습하기로 했습니다. 화살표 함수// 화살표 함수의 기본 문법let func = (arg1, arg2, ...argN) => expression 탄생 배..
TIL - 모듈화(Modularization) 장점 및 주의사항 오늘은 영화 검색 사이트 개인과제를 제출하는 날이었고 제출을 한 다음 어제 생각해 본 영화 극장에 화면에 영화 이미지를 슬라이드 하는 것을 구현해 봤는데 제가 상상했던 이미지랑 다르게 엄청 별로여서 그 아이디어는 지우고 튜터 개발자님의 개인과제 강의를 보니 JS코드를 script.js로 한 개의 파일로만 만들어야 한다고 생각했는데 JS 파일을 모듈화 하셔서 코드를 작성하시는 것을 보고 내가 만들었던 JS 코드를 모듈화 하기로 했습니다. 모듈화 (Modularization)모듈화 - 프로그램이나 소프트웨어를 구성하는 요소들을 기능 또는 관련성에 따라 분리하여 독립적으로 관리하는 프로그래밍 기법입니다. 모듈화의 장점구조화된 코드: 모듈화를 통해 코드를 기능 또는 관련성에 따라 분리함으로써 코드의 구조화를 쉽..
TIL - JS를 이용해서 무한 슬라이드(loop slide) 만들기 토요일 아침 유튜브를 보다가 업다운 무한 슬라이드가 구현된 영상을 보고 개인 과제에 슬라이드 기능을 추가하면 좋겠다고 생각해서 일단 스스로 슬라이드를 한번 만들어 보기로 했습니다.   자동으로 재생되는 슬라이드CSS로 해결하기 (오답)@keyframes moveSlides { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); }}// animation: moveSlides 3s linear infinite; 처음에 시도했던 방법은 슬라이드 A는 오른쪽에서 왼쪽으로 이동하는 것이라서 첫 요소가 슬라이드 되고 뒤에 항목으로 이동했던 방식과 슬라이드 B는 왼쪽에서 오른쪽으로 이동하는 것이..
TIL - 자바스크립트의 이벤트 루프 이해 이벤트 루프 정의이벤트 루프는 자바스크립트가 단일 스레드에서 실행되는 환경에서 비동기 작업을 효율적으로 처리하는 방법입니다.   이벤트 루프의 필요성자바스크립트의 작동 방식과 블로킹 문제가 발생할 수 있습니다. 자바스크립트는 단일 스레드로 작동하므로 한 번에 하나의 작업만 처리가 가능합니다. 그러나 브라우저는 멀티 스레드 환경에서 실행됩니다. 이로 인해 JavaScript에서 긴 작업이 실행되면 다음 작업이 차단되는 블로킹이 발생할 수 있습니다. // 블로킹 함수로 인한 UI 차단을 보여주는 예시// 블로킹 함수 정의function blockingFunction() { console.log("블로킹 함수 시작"); // 아주 오랜 시간 동안 실행되는 반복문 (가정) for (let i =..
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)란 브라우저가 렌더링 과정에서 화면에 요소를 표시하기 위해 요소의 크기, 위치, 스타일 등을 계산하고 배치하는 과정을 말한다. 이 과정은 브라우저가 문서의 구조나 스타일에 변경이 생겼을 때, 해당 변경에 대한 영향을 모..

티스토리툴바