이제는 알아야겠다! CSR과 SSR의 차이점과 장단점 (SPA, MPA, SSG, Universal Rendering 까지)1. SPA와 MPA의 차이점SPASPA는 Single Page Application의 약자로 하나의 페이지로 구성된 웹 어플리케이션 을 말한다.헤더, 사이드바와 같은 공통 영역은 유지되면서 필요한 부분만 동적으로 갱신되는 애플리케이션들이다.MPAMPA는 Multi Page Application의 약자로, 탭을 이동할 때마다 서버로부터 새로운 HTML을 받아와 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식이다.MPA는 매번 새로운 HTML을 서버로부터 받아오기 때문에 페이지 전환시마다 화면 깜빡임이 존재한다는 단점이 있다.따라서 AJAX가 등장한 이후부터 원하는 부분만..

프로젝트를 진행하다 보니, 폴더 구조가 비효율적이라는 생각이 들었습니다. 점점 많은 파일과 폴더를 생성하다보니 찾고자 하는 파일 혹은 연관된 코드의 위치를 바로바로 못찾는 상황이었습니다. 이에 따라 2차 애자일을 시작하면서 아예 셋팅을 다시 하고 개발에 들어가기로 팀원분과 협의를 하게 되었습니다. 우선, FSD 구조에 대해서 살펴보기 전에, 먼저 프론트엔드에서의 폴더 구조가 어떻게 변화해 왔고 왜 변화해왔는지를 예제와 함께 자세하게 설명하고 있는 `Teo`님의 양질의 글을 읽었습니다. FSD가 나오게 된 배경을 이해하는데에 매우 도움이 되었습니다.[폴더구조의 변화로 이해하는 프론트엔드 멘탈모델 변천사]FSD란?FSD는 Feature Slice Desingn의 줄임말로 애플리케이션의 기능과 목적에 따라 파..

프론트엔드 개발자 모집 공고를 보면 자격 요건 또는 우대사항에 TypeScript 학습 경험을 적어둔 경우가 많다. 그래서 일단 이번에 진행하는 프로젝트에서는 JavaScript말고 TypeScript를 한 번 써보기로 했다. TypeScript를 공부해보기 전에 TypeScript에 대해 좀 더 자세하게 알아보고 공부하는게 더 의미있을 것 같아서 정리해봤다. 여러분의 두뇌로 타입 추론을 하지 말고, 여러분보다 똑똑한 컴파일러가 판단하도록 합시다. 타입 스크립트란?‘TypeScript’는2012년 마이크로소프트가 개발한 언어로 JavaScript 에 정적 타입 문법과 객체 지향적 기능(인터페이스, 제네)을 추가한 ‘프로그래밍 언어’이다.티오비는 타입스크립트를 2024년의 유망한 언어로 꼽았다. TypeS..

classListclassList는 DOM 요소의 class 속성을 쉽게 다룰 수 있는 객체이다. 클래스 값의 추가, 제거, 확인 등을 다룰 수 있는 유용한 여러 메서드와 속성을 가지고 있다.구문element.classList;classList의 주요 메서드add()classList.add()는 DOM 요소에 주어진 클래스 속성 값을 추가하는 메서드이다.구문element.classList.add(className1);// 여러 개의 클래스 값을 한 번에 추가할 수도 있다.element.classList.add(className1, className2);element.classList.add(className1, className2, /*...,*/ classNameN);remove()classList.r..

속성 접근 및 변경 방법. 점 표기법DOM 객체의 프로퍼티에 접근하거나 설정할 때 점 표기법을 사용한다. 이를 통해 속성을 읽고, 수정할 수 있다.이 방법은 JavaScript 객체의 프로퍼티를 직접 조작하는 방법으로, 요소의 현재 상태를 반영하게 된다.구문예제const banner = document.querySelector('#banner');// 1. 점 표기법banner.src = 'new_image.jpg';getAttribute()getAttribute() 메서드는 Element의 메서드로, 해당 Element요소에서 속성 값을 가져오는 함수이다.구문element.getAttribute(name);주어진 요소에 속성이 존재하면 그 속성의 값을 문자열로 반환한다. 존재하지 않으면 null을 반환..

텍스트 변경하기HTML 요소의 텍스트를 변경하는 방법을 알아보자.innerTexttextContentinnerTextinnerText는 Element의 속성으로, element 내에서 사용자에게 보여지는 text 값들을 가져오거나 설정할 수 있다. 이 때 해당 요소뿐만 아니라 해당 요소의 자식들 안의 텍스트도 같이 갖고 온다.구문/* 가져오기 */const renderedText = htmlElement.innerText;/* 설정하기 */htmlElement.innerText = string;textContenttextContent는 Node의 속성으로, 사용자에게 보여지는 text값만 읽어오는 innetText와는 달리 나 태그에 상관없이 해당 노드가 가지고 있는 텍스트 값을 모두 읽어온다.구문/*..

1. 문제 쪼개서 분석하기- 동작 단위로 쪼개ㅓ 분석하는 습관을 들일 것 2. 제약 사항을 파악하고, 테스트 케이스를 추가하기- 제약 사항을 정리해 둔 뒤 이를 고려해서 테스트 케이스를 추가하는 연습을 할 것 -> 어떤 알고리즘을 적용할지 고민할 떄 유용하고, 코드 구현 과정에서 예외를 거를 때 도움이 됨 3. 입력값을 분석하기- 알고리즘의 시간 복잡도는 입력값에 의해 결정되는 경우가 대다수 -> 입력값의 크기를 확인하면 제한시간 내에 문제를 풀 수 있는 알고리즘과 그렇지 않은 알고리즘을 미리 걸러낼 수 있음. 4. 핵심 키워드 파악하기- 문제의 핵심 키워드를 빨리 파악해야 문제를 빨리 해석할 수 있음. 핵심 키워드가 특정 알고리즘을 암시하는 경우가 많음ex) 최적의 해 -> 너비 우선 탐색 알고리즘을 ..

이제 앞에서 배운 HTML, CSS, JavaScript를 결합해야 한다.DOM이란>DOM은 HTML과 XML 문서를 구조화하여 프로그래밍적으로 접근하고 조작할 수 있도록 만든 문서 객체 모델이다.웹 페이지의 각 요소는 JavaScript 객체로 표현되는데, DOM은 이 웹 페이지를 구성하는 JavaScript 객체들의 집합이다. 이를 변경하면 페이지에 즉시 반영된다.📌 DOM의 핵심 역할HTML 문서를 JS에서 조작할 수 있도록 변환웹 페이지의 구조, 스타일, 콘텐츠를 JS를 통해 동적으로 변경 가능DOM 요소 선택 메서드DOM에서 요소를 선택하기 위해 사용하는 다양한 메서드가 있다.getElementByIdgetElementById 메서드에 문자열을 전달하면 해당 문자열과 일치하는 ID 속성을 가진..

이제 앞에서 배운 HTML, CSS, JavaScript를 결합해야 한다.DOM의 정의DOM은 문서 객체 모델을 의미하며, 웹 페이지를 구성하는 JavaScript 객체들의 집합이다. 예를 들어 HTML 요소 중 태그를 모델링하는 JavaScript 객체가 존재하는 것이다. 태그를 나타내는 JS 객체를 변경하면 페이지에 변경 사항이 반영되게 된다. 문서 객체 모델은 JS에서 엡페이지 콘텐츠로 접근하는 통로이다.문서 객체의 메서드들Selecting요소 선택을 도와주는 메서드들을 공부해보자.getElementByIdgetElementById 메서드에 문자열을 전달하면 일치하는 ID를 가진 요소를 찾아 나타낸다. 없으면 null을 반환한다.getElementsByTagName태그 이름을 전달하면, 한 번에..

기본 매개변수함수를 쓸 때 매개변수가 있으면 그걸 쓰고 없으면 기본 매개변수의 값을 사용한다.디폴트 매개변수는 여러 개 사용할 수 있지만,function rollDie(numSides = 6) {}스프레드 연산자스프레드 연산자를 사용하면 배열과 같이 반복 가능한 객체를 전개구문을 사용해 확장한다.반복 가능한 객체를 펼치면 어떻게 되는가?배열 펼치기Math.max(1,3,6,15,25,4,23,99,45,101,143,21,5); //143const nums = [1,3,6,15,25,4,23,99,45,101,143,21,5];Math.max(nums); //NaN - not a numberMath.max(...nums); //143 - 배열이 펼쳐지고 인수는 따로 따로 들어가게 된 것이다!console..

이정환 강사님의 인프런 강의 '한 입 크기로 잘라먹는 리액트' 의 강의 내용과 자료를 바탕으로 복습을 위해 정리한 글입니다!동기동기란 여러 개의 작업이 있을 때, 차례대로 하나의 작업씩 처리해 나가는 방법을 말한다.동기여러 개의 작업을 순서대로, 하나씩 처리하는 방법console.log('1');console.log('2');console.log('3');/* 실행 결과 1 2 3*/동기의 장점프로그램의 실행 흐름을 파악하기 쉽다 (위에서 아래로 읽어나가면 됨)동기의 단점과 보편적 해결방안모든 프로그램의 실행 시간이 0.1초 등으로 짧다면 상관이 없겠지만, 실행 시간이 긴 프로그램이 중간에 껴있게 되면 그 다음 작업들을 수행할 수 없어 전체 프로그램의 성능이 저하된다는 치명적인 단점이 존재..

자바스크립트의 경우 Object나 Map을 사용해서 해시 테이블을 구현할 수 있다.Object: 키로 string만 사용할 수 있다.Map: 다양한 데이터 타입을 키로 사용할 수 있으며, 삽입 순서를 유지하는 장점을 갖는다.하지만 내부적으로 어떻게 동작하는지 이해하기 위해, Object나 Map을 사용하지 않고 직접 해시 테이블과 해시 함수를 구현해보려고 한다.해시 알고리즘의 처리 방식해시 테이블은 키(Key)와 값(Value) 형태의 데이터 구조이다.이때 키는 해시 함수를 통해 '고유한 해시값' 으로 변환된다. 변환된 해시 값은 해시 테이블에서 {key: value} 쌍이 저장될 위치인 해시 인덱스가 된다.해시 알고리즘을 사용하면 효율적인 검색과 데이터 저장을 할 수 있다. 하지만 충돌이 발생할 가능성..