JS20 CSR과 SSR CSR = REACT / SSR = NEXT 1. 클라이언트 사이드 렌더링 (CSR)CSR은 웹 애플리케이션의 렌더링이 클라이언트(브라우저)에서 이루어지는 방식입니다. 사용자가 페이지를 요청하면, 서버는 빈 HTML 문서와 자바스크립트 파일을 전송합니다. 이후 브라우저에서 자바스크립트가 실행되어 필요한 데이터를 API를 통해 가져오고, 이 데이터를 기반으로 동적으로 HTML을 생성하여 화면에 표시합니다.장점:빠른 사용자 경험: 초기 로딩 후 페이지 전환이 빠르며, 사용자 상호작용에 대한 반응성이 좋습니다.서버 부하 감소: 서버는 HTML을 생성하는 대신 정적 파일을 제공하므로 서버의 부하가 줄어듭니다.SPA(싱글 페이지 애플리케이션) 구현 용이: CSR은 SPA 구조에 적합하여, 페이지 간 전환이 매끄럽.. 2024. 11. 14. 머지 리퀘스트(Merge Request) / 풀 리퀘스트(Pull Request) 📢 머지 리퀘스트(Merge Request)란? 머지 리퀘스트(Merge Request)는 GitLab에서 사용하는 용어로, 한 브랜치에서 다른 브랜치로 변경 사항을 병합하려는 요청을 의미한다.새로운 기능을 추가하거나 버그를 수정한 후, 이를 메인 브랜치에 병합하기 전에 팀원들의 리뷰와 승인을 받기 위해 사용하는 절차다. 📢 풀 리퀘스트(Pull Request)란? 풀 리퀘스트(Pull Request)는 GitHub에서 사용하는 용어로, 본질적으로 머지 리퀘스트와 동일한 기능을 수행 한다.브랜치에서 작업한 내용을 다른 브랜치에 반영하기 전에 검토와 승인을 받기 위한 요청이다. 📌 주요 특징:브랜치 통합: 기능 브랜치에서 메인 브랜치로 코드 변경 사항을 병합하는 절차리뷰와 승인: 팀원들의 코드 .. 2024. 7. 16. [React] 아코디언 토글 컴포넌트 * 토글 및 다른 항목이 열리면 현재 항목이 닫히는 아코디언 컴포넌트 React 컴포넌트const Collapse = () => { const [openIndex, setOpenIndex] = useState(null); // 어떤 항목이 열려 있는지(또는 열려 있지 않으면 null)를 추적하는 상태 const [heights, setHeights] = useState([]); // 각 항목의 높이를 저장하는 상태 const answerRef = useRef([]); // 각 항목의 콘텐츠에 대한 참조를 저장하는 ref // 항목 클릭 시 호출되는 함수 const handleClick = (index : number) => { setOpenIndex(index === op.. 2024. 6. 25. JavaScript 객체의 확장, 직렬화, 메서드 📌 객체 확장객체를 확장하는 방법은 새로운 프로퍼티를 추가하거나 기존 프로퍼티를 수정한다. 이를 위해 Object.assign 메서드를 사용할 수 있습니다.const person = { name: 'Kim', age: 30};const additionalInfo = { job: 'Developer', city: 'Seoul'};const updatedPerson = Object.assign(person, additionalInfo);console.log(updatedPerson);// Output: { name: 'Kim', age: 30, job: 'Developer', city: 'Seoul' } ES6부터는 스프레드 연산자('...')를 사용하여 객체를 확장할 수 있다.const updat.. 2024. 1. 29. JavaScript 객체의 프로퍼티 접근 및 조작 방법 📢 JavaScript 객체의 프로퍼티 접근 및 조작 방법자바스크립트에서 객체는 키-값 쌍의 집합이다. 이러한 객체의 프로퍼티는 다양한 방법으로 접근하고 조작할 수 있다. 📌 프로퍼티 검색객체의 프로퍼티를 검색하는 방법에는 점 표기법(dot notation)과 대괄호 표기법(bracket notation)이 있다.const person = { name: 'Kim', age: 30};// 점 표기법console.log(person.name); // 'Kim'// 대괄호 표기법console.log(person['age']); // 30 대괄호 표기법은 동적으로 프로퍼티 이름을 지정할 수 있기 때문에 유연성이 높다.const prop = 'name';console.log(person[prop]).. 2024. 1. 28. Try-catch 문 Try-catch 문 try-catch 문은 JavaScript에서 예외 처리를 위해 사용된다. try 블록 내에서 예외가 발생할 수 있는 코드를 작성하고, catch 블록에서 예외를 처리하는 방식이다. try { // 예외가 발생할 수 있는 코드 } catch (error) { // 예외 처리 } try: 예외가 발생할 수 있는 코드를 포함하는 블록이다. 예외가 발생할 경우, 해당 블록 내에서 예외가 발생하게 된다. catch: try 블록에서 예외가 발생하면 catch 블록이 실행된다. 이 블록은 예외를 처리하고, 원하는 작업을 수행할 수 있다. catch 블록은 필수는 아니지만, try 블록에서 예외가 발생했을 때 실행되는 곳이다. error: catch 블록의 매개변수로 예외 객체를 받는다. Tr.. 2024. 1. 25. 이전 1 2 3 4 다음