본문 바로가기

Study/FrontEnd14

React(2)-이벤트 처리기 1.React 1)SPA (Single Page Application) =>하나의 HTML 파일을 이용해서 애플리케이션의 모든 화면을 출력하는 방식 =>이전의 애플리케이션은 여러개의 HTML 파일을 만들어서 화면전환을 이용해서 여러 콘텐츠를 출력했는데 화면전환을 하게 되면 이전 내용을 삭제하고 새로운 내용을 출력해야하기 떄문에 깜빡임이 발생하고 네트워크 에러가 발생하게 되면 호면 전체가 에러페이지를 출력하게됩니다.모바일의 경우는 에러 페이지를 보는 횟수가 증가합니다. 이를 해결하는 방법으로 로컬에 데이터를 저장해서 네트워크 에러가 발생한 경우 로컬의 데이터를 출력하는 방법으로 해결을 하기도 하고 하나의 화면을 여러 컴포넌트로 분할하고 분할한 컴포넌트 별로 별도로 데이터를 요청해서 출력하는 방식을 사용하기.. 2024. 1. 30.
React(1)- Django + React.js Application **Django + React.js Application 1.Web Browser 와 Web Application Server 가 통신하는 방법 1)ajax =>Asynchronous Javascript XML(eXtensible Markup Language)의 약자로 Javascript의 비동기 방식을 이용해서 XML을 가져오는 것 =>최근에는 데이터 포맷에 상관없이 비동기적으로 데이터를 가져오는 기술 =>동기: 하나의 요청이 발생하면 다른 요청은 전부 대기하고 요청을 처리할 때 까지 기다린 후 다음 요청을 처리하는 방식 =>비동기: 하나의 요청이 발생해서 처리 중이더라도 다른 요청을 처리할 수 있는 방식 2)구현 방법 =>XMLHttpRequest 객체 생성 =>처리 결과를 받을 이벤트 리스너를 등록.. 2024. 1. 30.
FrontEnd 1.어플리케이션 프로그램서비스 =>우리가 하고자하는일(복잡하거나 반복되는 일)을 컴퓨터가 할 수 있도록 만드는 것 1)컴퓨터 하드웨어(장비)& 소프트웨어(실제장비를 코드로사용할수있도록 추상화) 서로다른걸 통역해주는것=인터페이스 =>운영체제:하드웨어와 소프트웨어 사이의 인터페이스 하드웨어는 기계어만인식가능. 운영체제는 대부분 어셈블러(어셈블리어를 기계어로 번역)랑 C언어로 만들어짐 네트워크를하기위헤서 새로 만들어진 UNIX(C언어로 만들어짐 but OS 끼리만 소통) Linux(다른 사람들 가져갈 수 있도록 GIT도 만듬) C언어의 단점- 플랫폼 독립적이질 못함( mac용 window용 으로 만들어야함) 그래서 나온게 파이썬,자바 파이썬은 읽어나갈때 mac이나 윈도우에 맞게 바꿔서 읽음 내가 하고자 하는 .. 2024. 1. 18.
HTML,CSS을 활용한 자기 페이지 만들기 HTML,CSS를 활용한 제 소개 페이지를 만들고 배포까지 할수 있게 한번 해보겠습니다 ~ 사실 프론트엔드 경험은 이전에도 좀 해봤으나 배포까지 해본적은 없었던거 같은데 이번에는 배포까지 해보겠습니다!! 1.HTML로 파일 만들기 html로 파일을 만들었습니다!! 이때까지 공부했던 HTML 공부했던걸 토대로 사용했습니다. 사용한 HTML 요소들과 태그들을 볼께요! 1.과 제 개인정보가 들어날 것같은 내용은 살짝 지우고 ㅎㅎ 여기서 다시 볼만한건 class="accent"와 정도 될꺼같네요. class="accent"는 CSS파일에 저장해놓은 정보입니다. 바로 위 사진을 보면 "실습1.css"라는 파일이 보이죠? 저기에 제가 어떻게 꾸밀 것인가 에 대해 저장해놨습니다. 은 앞에 정렬된 목록을 나타냅니다. .. 2024. 1. 3.
JAVASCRIPT(1) 오늘은 자바스크립트에 대해서 정리해볼께요! 자바스크립트는 웹에서 어떤 일을 할 수 있는지 먼저 정리해보겠습니다. 1. 웹의 요소를 제어 2. 웹 애플리케이션 만듬 3.다양한 라이브러리를 사용할 수 있음. 4. 서버 개발을 할 수 있음. 위의 4개중에서 다 이해했지만 4번 서버 개발을 할 수 있다... 이게 가장 의아해서 좀 더 알아봤습니담. 개발자라면 지나가면서라도 들었던 Node.js를 한번쯤 들어보셨을꺼에요! Node.js는 그동안 프런트엔드 개발에서 사용하던 자바스크립트를 백엔드 개발에서 사용할 수 있도록 만든 프레임 워크입니다. 자바스크립트만 알아도 백엔드를 넘어선 서버 개발까지 영역을 확대할 수 있다니.. 좋은 언어네요!! HTML 문서 안에 자바스크립트 소스를 작성하면 웹 문서에서 바로 확인할.. 2023. 12. 27.
CSS CSS은 HTML과 함께 웹 표준의 기본 개념으로써 HTML이 텍스트나 이미지,표 같은 웹 문서에 넣어 뼈대를 만드는 역할이라면 CSS은 텍스트나 이미지, 배경의 크기나 배치 방법등의 요소를 이용하여 디자인을 담당. Cascading style sheet 로 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정. 케스케이딩은 스타일끼리 충돌하지 않도록 막아주는 방법으로 2가지 방법 존재. 1. 스타일 우선순위 1) 얼마나 중요한가? 2) 적용범위는 어디까지인가? 3)소스 코드의 작성 순서는 어떠한가? 에 따라 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙을 말함. 2.스타일 상속 웹 문서에서 사용하는 여러 태그는 서로포함 관계가 존재. 이때 포함하는 태그를 부모 요소, 포함된 .. 2023. 12. 26.