Web Development/Front End 관련 개념 정리13 프로그래밍 패러다임 | Part2. 명령형과 객체지향형 프로그래밍 프로그래밍 패러다임 | Part2. 명령형과 객체지향형 프로그래밍 [index] 1. 명령형 프로그래밍이란? 2. 객체지향형 프로그래밍이란? 2-1 객체지향형 프로그래밍이란? 2-2. 객체 지향 프로그래밍의 특징 4가지 2-3. 객체 지향 프로그래밍 설계 원칙 SOLID 2-4. SOLID 원칙을 적용하는 예시 1. 명령형 프로그래밍이란? 명령형 프로그래밍은 프로그램이 어떻게 수행되어야 하는지를 명시적으로 정의하는 프로그래밍 패러다임 중 하나입니다. 이는 컴퓨터에게 단계별로 실행해야 할 명령을 명시하고 상태 변화를 통해 원하는 결과를 얻어내는 방식으로 작동합니다. 주로 명령형 프로그래밍에서는 변수, 할당문, 제어문(조건문, 반복문), 서브루틴 등을 사용하여 작성됩니다. 프로그램이 어떻게 실행되어야 하는지.. 2023. 12. 18. 프로그래밍 패러다임 | Part1. 선언형과 함수형 프로그래밍 프로그래밍 패러다임 | Part1. 선언형과 함수형 프로그래밍 [index] intro 프로그래밍 패러다임 1. 프로그래밍 패러다임(Programming Paradigm)이란? 2. 프로그래밍 패러다임의 분류 Part.1 선언형과 함수형 프로그래밍 1 선언형 프로그래밍(Declarative Programming)이란? 2. 함수형 프로그래밍이란? 2-1. 함수형 프로그래밍의 정의 2-2. 함수형 프로그래밍의 특징 2-3. 함수형 프로그래밍의 장점 2-4. 함수형 프로그래밍의 단점 2-5. 함수형 프로그래밍의 중요성 3. 마무리 intro 프로그래밍 패러다임 1. 프로그래밍 패러다임(Programming Paradigm)이란? 프로그래밍 패러다임이란 프로그래밍의 관점을 갖게 하는 개발 방법론입니다. 일부 .. 2023. 12. 18. TNT : Tailwind CSS + Next.js + TypeScript 조합에 대한 분석과 실제 프로젝트에서의 경험 공유 TNT : Tailwind CSS + Next.js + TypeScript 조합에 대한 분석과 실제 프로젝트에서의 경험 공유 TNT 스택(Tailwind CSS + Next.js + TypeScript)란? 각각의 이점 2-1 Next.js: 강력한 React 프레임워크 2-2. TypeScript: 정적 타입 지원 및 개발 생산성 2-3. Tailwind CSS: 빠르고 효율적인 UI 개발 및 유지보수 결합을 통한 이점 3-1 Next.js와 TypeScript 3-2. Next.js와 Tailwind CSS 3-3. TypeScript와 Tailwind CSS 실제 프로젝트에서의 경험 공유 4-1. 프로젝트 적용 사례 4-2. 팀 협업에서의 이점 4-3. 배운 점과 느낀점 마무리 1. TNT 스택(T.. 2023. 12. 9. [Next.js] Next.js | 기술적 분석 + 사용해보며 느낀점 Next.js 기술적 분석 + 사용해보며 느낀점 [index] 1. Next.js란? 2. Next.js의 주요 기능 및 이점 3. Next.js의 단점 4. 프론트 개발자의 입장에서 보는 Next.js의 이점 5. React와 비교해보기 6. 사용해보며 느낀점 1. Next.js란? Next.js는 Vercel이라는 회사에서 개발된 React 기반의 웹 프레임워크입니다. 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(Static Site Generation, SSG)과 같은 기능을 사용할 수 있도록 하여 신속하게 대규모 및 기업용 애플리케이션을 개발하고 배포할 수 있도록 지원합니다. 특히 사용자 친화적이며 매우 빠른 정적 사이트를 구축할 수 있습니다. 또한 Automatic Static Optimi.. 2023. 12. 9. [FE] 상태관리란? 상태관리란? [index] 1. 상태관리란? 2. 상태관리의 역사 3. 상태관리 라이브러리의 종류 1. 상태관리란? State Management 상태 관리는 모던 프론트엔드의 핵심 역량 중 하나로 여겨지며, 효과적인 상태 관리는 개발자의 핵심 역량이 되었습니다. 프론트엔드 개발에서 상태 관리는 다양한 컴포넌트 간 데이터 전달과 이벤트 통신을 효과적으로 관리하는 것이 목표입니다. 상태의 정의 프론트엔드에서 상태는 주로 유저 정보나 UI에 영향을 미치는 동적으로 변화하는 데이터를 말합니다. 또한 프론트엔드에서 상태는 눈에 보이는 UI 요소 뿐만 아니라 서버와의 통신을 통해 변하는 데이터를 포함합니다. 이를 관리하기 위해서는 예측 가능한 변화를 유지하고 상태의 일관성을 유지해야 합니다. React에서는 상태.. 2023. 11. 28. SPA(Single Page Application)란? SPA(Single Page Application)란? [INDEX] 1. SPA란 무엇인가 2. SPA 장점 3. SPA 단점 + SPA의 단점인 SEO 문제를 보완할 수 있는 여러가지 방법들 1. SPA란 무엇인가 SPA란 'Single Page Application'의 약자로 단일 페이지로 구성된 웹 애플리케이션을 말합니다. 초기 페이지 로드 후 서버가 더 이상 HTML을 보내지 않습니다. 처음부터 HTML을 모두 다운로드하면 됩니다. 서버는 쉘 페이지를 보내고 브라우저는 사용자 인터페이스(UI)를 렌더링합니다. 그런 다음 클릭하면 SPA가 데이터 및 마크업에 대한 요청을 다시 보냅니다. 서버는 필요한 원시 자료를 다시 전송하고 브라우저는 이를 받아 업데이트된 UI를 렌더링하여 전체 페이지를 새로 .. 2023. 10. 10. babel이란? babel이란? [ 목차 ] 1. babel의 등장배경 2. babel의 개념 3. babel의 기능 3가지 4. babel의 프로세스 3단계 1. babel의 등장배경 프론트엔드 영역의 기술들이 빠르게 변화하면서 최신 브라우져 조차도 지원하지 못하는 문법과 여러 기술들이 출연하고 있습니다.모두가 빠르게 새로운 브라우저를 사용한다면 호환성에 대한 걱정없이 개발할 수 있겠지만, 아직도 많은 사람들이 예전 버전의 브라우저를 사용하고 있습니다. 그렇기 때문에 프론트엔드 개발자하면 하위 호환성을 반드시 고려할 수 밖에 없습니다. 이렇게 다양한 상태의 브라우저에서도 동일한 서비스를 유지하기 위해 크로스브라우징은 필수입니다. 크로스 브라우징은 브라우저 환경에 맞춰 사용자에게 동일한 웹 서비스를 경험할 수 있도록 최.. 2023. 8. 21. Local Storage & Session Storage란? Local Storage & Session Storage란? [ 목차 ] 1. Web Storage 개념 2. storage 이벤트 3. local Storage란? 4. session Storage란? 5. Web Storage & Cookie 비교 6. cookie가 아닌 Web Storage를 사용하는 이유 1. Web Storage 개념 localStorage와 sessionStorage ko.javascript.info HTML5 에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어 있습니다. Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴입니다. 그리고 영구저장소(LocalStorage)와 임.. 2023. 8. 16. webpack이란? Webpack 이란? [ 목차 ] 1. webpack의 등장 배경 2. Webpack의 개념 3. Webpack의 필요성 4. Webpack의 장단점 5. webpack의 Concepts 1. Webpack 의 등장 배경 webpack이 만들어진 배경을 보면 왜 webpack을 사용하지는 알수있습니다. 잠시 역사를 짚어보면, 약 2010년경부터 자바스크립트 프레임워크들의 경쟁과 함께 자바스크립트 웹 개발 추세가 치솟았습니다. 프론트엔드 업계에서 많이 사용되는 프레임워크인 리액트와 뷰만 하더라도 프로젝트 파일의 크기가 꽤 큽니다. 또한 최근에는 백엔드의 로직을 일부 프론트엔드로 옮겨오는 추세인지라 그 복잡도가 더 증가하고 있습니다. 따라서 이런 대규모 소스코드를 브라우저가 그대로 다운받아서 실행할경우, 너.. 2023. 8. 16. 이전 1 2 다음
