프론트엔드42 HTML - 기초 HTML(HyperText Markup Language) 웹 페이지의 틀을 만드는 마크업 언어 여러가지 tag를 이용한 HTML 예시 DOCTYPE html> Document div span sapn 구글 1 2 1 2 d c a b submit 2023. 3. 30. REST API REST(Representational State Transfer) API 로이 필딩(Roy Fielding)의 박사학위 논문에서 웹(http)의 장점을 최대한 활용할 수 있는 아키텍처로써 처음 소개 되었다. 웹에서 사용되는 데이터나 자원을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 뜻한다. REST API 디자인 로이 필딩이 제시한 REST 방법론을 보다 더 실용적으로 적용하기 위해 레오나르드 리차드슨(Leonard Richardson)은 REST API를 잘 적용하기 위한 4단계 모델을 만들었다. REST 성숙모 모델은 총 4단계(0~3)로 나누어진다. 실제로는 엄밀하게 3단계까지 지키기 어렵기 때문에 2단계까지만 적용해도 좋은 API 디자인이라고 볼 수 있고.. 2023. 3. 29. SSR vs CSR SSR(Server Side Rendering) CSR(Client Side Rendering) SSR vs CSR SSR과 CSR의 주요 차이점은 페이지가 렌더링 되는 위치이다. SSR은 서버에서 페이지를 렌더링 하고, CSR은 브라우저(클라이언트)에서 페이지를 렌더링 한다. CSR은 사용자가 다른 경로를 요청할 때마다 페이지를 새로고침 하지 않고, 동적으로 라우팅을 관리한다. SSR 사용 SEO(Search Engine Optimization)가 우선순위인 경우, 일반적으로 SSR을 사용한다. 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우, 단일 파일의 용량이 작은 SSR이 적합하다. 웹 페이지가 사용자와 상호작용이 적은 경우, SSR을 활용할 수 있다. CSR 사용 SEO가 우선순위가 아닌 경우.. 2023. 3. 28. React - State & Props Props 외부로부터 전달 받은 값 How to use props 1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다. 2. props를 이용하여 정의된 값과 속성을 전달한다. 3. 전달받은 props를 렌더링 한다. function Parent() { return ( I'm the parent ); } function Child(props) { console.log("props : ", props); // {text : "I'm the eldest child"} return ( {props.text} ); } export default Parent; State 내부에서 변화하는 값 useState 사용법 React에서는 state를 다루는 방법 중 하나로 useState라는 특별한 함수를 제공한.. 2023. 3. 28. React - 기초 리엑트? 리엑트는 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리이다. 리엑트의 3가지 특징 선언형(Declarative) 리엑트는 한 페이지를 보여주기 위해 HTML / CSS / JS로 나눠서 적기보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다. 컴포넌트 기반(Component-Based) 리엑트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다. 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다. 유지보수 및 유닛테스트도 편하다는 장점이 있다. 범용성(Learn Once, Write Anywhere) 리엑트는 JavaScript 프로젝트 어디에든 유연하게 적용.. 2023. 3. 22. 객체 지향 프로그래밍(Object-Oriented Programming) 객체 지향 프로그래밍(OOP) 사람이 세계를 보고 이해하는 방법을 흉내 낸 프로그래밍 방법론이다. 실세계에 존재하고 인지하고 있는 객체(Object)를 소프트웨어의 세계에서 표현하기 위해 객체의 핵심적인 개념 또는 기능만을 추출하는 추상화(abstraction)을 통해 모델링하려는 프로그래밍 설계 철학을 뜻한다. 객체 지향 프로그래밍의 주요 개념으로는 크게 4가지가 있다. 캡슐화(Encapsulation) 데이터와 기능을 하나의 단위로 묶고, 외부에 공개될 필요가 없는 정보(내부 데이터 혹은 내부 구현 등등)는 숨기는 것을 말한다. 다른 말로 정보 은닉(information hiding)이라고도 한다. 데이터에 외부에서 직접 접근을 하면 안되고 오로지 함수를 통해서만 접근해야하는데 이를 가능하게 해주는 .. 2023. 3. 15. 이전 1 ··· 3 4 5 6 7 다음
