본문 바로가기

TIL

 (95)
TIL - 리액트로 투두리스트 만들면서 느낀 리액트의 장점 서론오늘은 투두리스트를 리액트를 활용해서 만들어 봤습니다. 이전에 바닐라 자바스크립트로 투두리스트를 만들 때는 콘텐츠 화면을 렌더링 하려면 사용자가 상호작용이나 애플리케이션 상태 변경에 따라 DOM을 조작하는 함수를 만들어서 실행시켜서 이벤트 처리하는 로직을 작성했어야 했습니다. 하지만 리액트에서는 state 값이 변경, 부모 컴포넌트의 props가 변경, 부모 컴포넌트가 렌더링 되면 자식 컴포넌트도 자동으로 리렌더링 하여  UI가 애플리케이션의 최신 상태를 반영해 줘서 훨씬 편리했고 코드도 간결하게 작성했다고 생각합니다.  투두 리스트를 만들면서 느낀 리액트의 장점JSX를 이용해서 HTML 태그와 유사하게 생겨 UI를 보다 직관적으로 표현이 가능해서 가독성이 좋습니다. useState Hook을 사용하..
TIL - 리액트 주요 개념 정리 리액트 주요 개념 정리 01. 가상 DOM가상 DOM의 장점가상 DOM은 실제 DOM을 흉내 낸 가상의 DOM입니다.성능 향상: React 같은 라이브러리는 가상 DOM을 사용해서 실제 DOM보다 빠르게 UI 변경사항을 관리합니다.가상 DOM을 이용하면 변경이 필요한 부분만 실제 DOM에 반영해줘서, 페이지 전체를 새로 불러오지 않아 훨씬 효율적입니다.이를 통해 높은 생산성과 서비스를 만들 수 있게 되었습니다. 02. JSX01. JSX의 정의JSX는 JavaScript를 확장한 문법으로, React에서 UI 구조를 표현하는데 사용합니다.HTML 태그와 유사하게 생겼지만 Javascript를 확장한 문법으로 완전히 다른 것 입니다.JSX는 React 라이브러리의 createElement 함수 호출을 보다..
TIL - React를 배우기 전에 JS 복습하기 다음 주 월요일부터 스파르타 코딩부트캠프에서 React를 배우게 되었는데 시스템이 분반으로 리액트 베이식-스탠더드-챌린지로 나뉘어있어서 리액트를 아예 처음 시작하지만 주말 동안 열심히 공부하면 되겠지 라는 생각으로 챌린지를 신청했습니다. 그래서 오늘은 리액트를 배우기 앞서 간단하게 리액트에서 자주 사용하는 JS 문법 복습하고자 했습니다. 리액트에서 많이 사용하는 배열 메서드// map() 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과로 새로운 배열을 반환const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8, 10]// filter() 주어진 함수로 구현된 조건에 맞는 요소로 새로운 배..
TIL - 클래스 정의클래스는 간단히 말하면 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀입니다. ES6 (ECMAScript 2015)부터 클래스가 공식적으로 JavaScript에 추가되었습니다. class MyClass { constructor(prop1, prop2) { this.prop1 = prop1; this.prop2 = prop2; } // 메서드 정의 method1() { // 메서드 내용 } method2() { // 메서드 내용 }}// 클래스의 인스턴스 생성const myObject = new MyClass(arg1, arg2); class 키워드를 사용해서 클래스를 정의하고 클래스 명에 대문자로 시작하는게 일반적인 관습입니다..
TIL - 크롬 개발자 도구 이용해서 에러 디버깅 서론오늘은 어제 문제 있었던 기존에 헤더 부분에 있었던 login.js와 common.js 파일에 있는 이벤트 리스너가 null값이어서 오류가 나는 문제를 해결했습니다. 위 에러의 가장 큰 문제점은 에러가 항상 나오는 것이 아니라 페이지 이동 또는 새로고침을 하면 가끔 나오는 에러라서 명확하게 고치기 힘들었습니다. 문제를 해결하는 과정1. DOMContentLoaded와 defer사용하기document.addEventListener("DOMContentLoaded", 함수로 감싸기); defer는 태그에 defer 속성을 사용하면 스크립트가 문서 파싱이 완료된 후에 실행하고 DOMContentLoaded는 HTML 문서가 완전히 로드된 후에 실행돼서 문제를 해결할 수 있다고 생각했는데 해결하지 못했습니..
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를 이용해서 클릭된 카..

티스토리툴바