본문 바로가기

전체 글

 (106)
TIL - 협업 할 때 코드컨벤션의 중요성 오늘은 팀 프로젝트에서 맡은 과제를 거의 해결하고 다른 팀원 분들의 코드를 보면서 개선하면 안 되는 것들을 보고 코드를 수정하면서 개선하면 좋을 것 같은 부분을 여쭤보고 같이 개선하는 날이였습니다. 그러면서 느낀 점이 코드 컨벤션의 중요성을 느꼈습니다. 저희는 처음 팀 프로젝트를 할 때 규칙을 안 정하고 개인의 브랜치에서 작업하고 병합하는 식으로 프로젝트를 진행하면서 API에서 데이터를 받아오는 것을 자신에게 맞게 수정하면서 어떤 분은 ID값에 A를 넣고 어떤 분은 똑같은 데이터에 B값을 넣으면서 코드를 전체적으로 작성하면서 시간이 지나고 보니 그 부분에 문제가 생겨서 이를 디버깅하는 과정에서 만약 코드명을 통일화 했다면 빠르게 에러를 잡을 수 있었겠다고 생각하게 되었습니다. 현재 팀 프로젝트 과제에 있..
TIL- API에서 받아온 데이터 효율적으로 사용하기 오늘은 메인 페이지에서 상세 페이지로 이동했을 때 페이지의 로딩 시간이 생각보다 길어서 이것을 해결하려고 했습니다. 맨 처음에 API를 받아올 때는 객체 안에 3개의 주제를 가진 배열이 40개의 항목 안에 8개 정도의 속성이 있었는데 이 데이터를 전부 합친 다음 하나의 배열로 만들어서 find 메서드를 이용해서 id값을 찾아서 해당 id에 속한 내용을 html에 전달하는 방식을 사용했는데 시간 복잡도는 O(N) + O (N) = O(N)이지만 주제별로 처음에 40개씩 나눠서 40개의 항목에 있는 속성의 id만 찾으면 똑같이 시간 복잡도가 O(N)지만 데이터의 수가 꽤 크게 차이 날 거라고 예상해서 코드를 바꿔봤습니다. 기존 API 처리 방식// 모든 영화 데이터를 하나의 배열로 병합 ..
TIL - 비동기 데이터 처리 및 렌더링 오늘은 페이지를 데이터 베이스에서 동적으로 받아와서 렌더링 하는 과정을 학습했습니다. 제가 맡은 역할이 영화내용 상세 페이지여서 다른 페이지에서 영화를 클릭하면 해당 영화 ID값을 가지고 영화 상세 페이지에 해당 영화에 관한 내용으로 렌더링 작업을 하기로 했습니다. 처음에 생각한 방법은 window.onload = async () => { // URL에서 영화 ID 추출 const urlParams = new URLSearchParams(window.location.search); const movieId = urlParams.get('Id'); }페이지가 로딩될 때 URL이 파일명.html?Id=아이디값 형식으로 오기 때문에 URLSearchParam Web API를 이용해서 클릭된 카..
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 =..

티스토리툴바