728x90 전체 글57 React : SPA & SCSS 📕 SPASingle Page Application (싱글 페이지 어플리케이션)의 약자이다.즉, 페이지가 1개인 어플리케이션이란 뜻으로 유저가 요청 할 때 마다 페이지가 새로고침 제공되는 정보가 정말 많기 때문에 속도적인 측면에서 문제가 발생하고, 불필요한 트래픽으로 인한 낭비가 심해지기때문에 리액트 같은 라이브러리 혹은 프레임 워크를 사용해서 뷰렌더링을 유저의 브라우저가 담당하도록, 하고 어플리케이션을 브라우저에 로드한 다음 필요한 정보만 보여준다.📌 싱글페이지라고 해서, 한 종류의 화면만 있는가?그건 No. 예를들어 블로그를 만든다면, 홈, 포스트 목록, 포스트, 글쓰기 등의 화면이 있다.다른 주소에 따라 다른 뷰를 보여주는것을 라우팅이라 하며, 리액트 자체에는 이 기능이 내장되어있지 않는다. 따.. 2024. 10. 20. React 📕 Frontend-Framework(Library)" Angular VS Vue VS React "Angular: TypeScript 기반으로 안정적이고 탄탄한 app개발이 가능하며,Framework답게 다향한 기능이 내장되어있다. 하지만 무겁고 배우기가 어렵다는 단점을 가지고 있다.*Vue *: Evan You라는 개인이 개발한 프레임워크로 코드가 깔끔하고 배우기 쉽기 때문에 가장 나중에 생겼지만, 성장 속도가 정말 빠른 편이다.React: MVC(Model-View-Controller) Architecture(Angular,Vue)와는 다르게 리액트는 오로지 View만 담당한다. 내장된 기능이 부족해 Third-party라이브러리인 React-router, Redux를 함께 사용한다.페이스북의 지.. 2024. 10. 20. Database 📕 데이터베이스란 무엇인가?데이터란 수, 단어, 이미지, 영상 등의 형태로된 의미 단위이다.예를 들어 내가 스타벅스의 사용자라고 가정해보자.바닐라크림커피 선택하면 ➡ 페이지 이동 ➡ 커피의 상세페이지➡ 제품정보 ➡ 알레르기 유발정보 등등= 모두 다 데이터라고 볼 수 있다.✔ Client 는 고객을 의미한다.client 화면 ➡ Click ➡ (상품 상세정보 요청) web application server : 백엔드 서버에 요청 전송 ➡ 필요한 정보요청 : Datase " 나 바닐라크림에 대한 정보가 필요해 " ➡ 다시 database에서 sever로 필요한 정보 응답 (영양, 알레르기, 음료정보)데이터베이스는 컴퓨터 시스템에 저장된 정보나 데이터를 모두 모아 놓은 집합을 의미하며, 데이터들은 dat.. 2024. 10. 20. DOM & EVENT 📕 DOM이란?Document Object Model의 약자이며, 직역해보자면 문서의 객체 모델이라고 할 수 있다. 문서의 객체는 html이나 body 같은 html문서의 태그들이 자바스크립트가 이용할 수 있는 객체로 만들어진 것을 의미한다. HTML : 웹페이지 텍스트 문서를 작성할때 사용하는데, 기본 토대가되는 역할을 한다. CSS : HTML로 작성된 문서를 스타일링해주는 역할을 한다. JS : 동적인 페이지를 구성할 수 있게 해주는 역할을 한다. 📖 왜 동적인 구성을 위해 JS가 나오게 된걸까?CSS,HTML은 프로그래밍 언어가 아니기 때문에 논리적인 처리를 할 수가 없는데, JS는 논리적 로직을 짤 수 있다.📕 DOM TREE 트리구조 돔이라는 것이 객체에 접근을 하는데,웹페이지 HTML을 계층.. 2024. 10. 20. Responsive Web : 반응형 웹사이트 Responsive Web 이란?반응형웹을 뜻하며, 하나의 웹사이트에서 PC,스마트폰 테블릿 PC등 접속하는 디스플레이에 따라 화면의 크기가 자동으로 변화하는 웹페이지를 의미한다. 왜 반응형으로 웹을 만들어야 하는가?유지보수가 간편모바일 사용점유율의 증가검색엔진 최적화(SEO)가 가능미래지향적 기술Media Query미디어쿼리라는 것은 반응형 웹을 구형하는 CSS technique이다. 특정 조건에서는 어떤 CSS를 적용 하라는 규칙을 줄 수 있는데, 이때 CSS @media라는 문법으로 작성할 수 있다. 예를들면 아래와 같은 식으로 표현할 수 있다.@media only screen and (max-width:480px){ body{ font-size: 12px; }}@media: media.. 2024. 10. 20. CSS : Layout의 모든 것 📌layout 이란?웹사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것이다.display는 layout을 적절하게 조정하는 중요한 속성이라고 볼 수 있다. 모든 요소들은 속성에 의거하여 기본값을 가지고있는데, 기본값은 대부분 block 혹은 inline 요소들로 구성되어있다. block요소는 block-level요소라고 불리며, line요소는 inline-level이라고 말한다.📌block div 태그는 block-level의 표준이다. 무조건 한 줄을 점유하고 있기 때문에block-level은 새로운 줄에서 시작하며, 왼쪽에서 오른쪽으로 최대한 확장된다. ```- width/height 적용불가- margin/padding-top/bottom 적용불가- line-height를 원하는.. 2024. 10. 20. 이전 1 ··· 4 5 6 7 8 9 10 다음 728x90 반응형
