본문 바로가기

POST LIST482

(react) SPA란? SPA란?기존 웹 사이트를 만들 때 여러 페이지를 만들고 링크를 이동하는 방식을 Multi Page Application라고 한다면, React에서는 웹 사이트 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것을  SPA(Single Page Application)라고 함.SPA에서 페이지 전환(브라우징)은 HTML5의 History API를 사용하여 기능을 구현함. 즉, 자바스크립트에서 History API를 이용하여 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 됨.  History APIHistory.back()세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드History.forward()세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드History.go()특.. 2024. 11. 18.
(react) package.json Node.js에서 package.json이란? package.json은 Node.js 프로젝트에서 핵심적인 역할을 하는 파일로 프로젝트에 대한 메타데이터와 프로젝트가 의존하는 패키지들에 대한 정보를 담고 있음. 마치 프로젝트의 신분증과 같은 역할을 수행하며, npm(Node Package Manager)을 통해 패키지를 관리하는 데 필수적임. package.json의 주요 역할프로젝트 정보: 프로젝트의 이름, 버전, 설명, 저자 등 기본적인 정보를 기록의존성 관리: 프로젝트에서 사용하는 외부 패키지(모듈)들의 목록과 버전을 관리스크립트 정의: npm 명령어를 통해 실행할 수 있는 스크립트(예: 시작, 테스트, 빌드 등)를 정의프로젝트 설정: 프로젝트의 다양한 설정 값들을 저장 package.json의 주.. 2024. 11. 17.
(react) 브라우저 렌더링 브라우저 렌더링 과정HTML, CSS 파싱: 브라우저는 HTML과 CSS 파일을 읽어서 DOM(Document Object Model)과 CSSOM(CSS Object Model)을 생성함. DOM은 HTML 문서의 구조를 나타내는 트리 구조이고, CSSOM은 스타일 정보를 담고 있는 객체 모델을 말함.렌더 트리 생성 : DOM과 CSSOM을 결합하여 렌더 트리를 생성함. 렌더 트리는 화면에 보여질 요소와 스타일 정보를 포함하고 있음.레이아웃: 렌더 트리의 각 요소의 위치와 크기를 계산함.페인팅: 계산된 레이아웃 정보를 바탕으로 실제 화면에 픽셀을 그림.  React에서 사용하는 가상 DOM이란?자바스크립트 객체로 표현된 실제 DOM의 복제본으로 메모리 상에서 관리되며, 실제 DOM과 동일한 구조를 가짐.. 2024. 11. 16.
(react) DOM이란? DOM(Document Object Model)이란?DOM은 웹 페이지의 문서 구조를 트리 형태의 표현해서 만든 객체 모델을 의미함. HTML 문서를 읽어 들인 브라우저는 이 HTML 문서를 DOM이라는 객체로 표현하여 JavaScript를 통해 이 객체를 조작할 수 있음. DOM은 웹 페이지를 자바스크립트로 조작할 수 있도록 만들어진 인터페이스라고 할 수 있음.  DOM의 구성 노드(Node): DOM의 기본 단위로, HTML 문서의 모든 요소(Element), 텍스트, 주석 등요소(Element): HTML 태그에 해당하는 노드(예: div, p, button 등)속성(Attribute): 요소의 특성을 나타내는 값(id="...", class="..." 등)텍스트 노드: 요소 내의 텍스트를 나타내는.. 2024. 11. 15.
(241114.THU) 테마 종목 및 리포트 요약 52주 신고가외국인/기관 순매수 Top20특징주특징테마리포트요약  52주 신고가한화오션, 인카금융서비스, 비에이치아이, 한화시스템, 한국항공우주, 펩트론, DI동일, 네이처셀, 코엔텍  외국인/기관 순매수 Top20NAVER두산에너빌리티한국전력기아HD현대일렉트릭현대로템HMM현대모비스삼성중공업고려아연한화오션HD한국조선해양크래프톤이수페타시스유한양행대한항공현대글로비스한화에어로스페이스DS단석SK텔레콤알테오젠에이비엘바이오삼천당제약실리콘투엔켐JYP Ent.카페24퓨쳐켐코스메카코리아엠로비에이치아이디앤디파마텍보로노이와이씨에이프릴바이오덕산테코피아바이넥스태성케이씨에스씨앤씨인터내셔널삼성전자POSCO홀딩스삼성SDINAVER한국전력신한지주LG에너지솔루션두산에너빌리티현대차SK하이닉스삼성바이오로직스삼성에스디에스HD현대마린솔루션HD.. 2024. 11. 15.
초등 필수 영단어 800 ​1. a 하나의2. about ~에 대하여, 대략~, 약~3. across ~을 가로질러, ~을 건너서4. act 행동하다, 행동,행위5. actor 영화배우6. address 주소,연설7. afraid 무서워하여, 두려워하여8. after ~뒤에, ~다음에9. afternoon 오후10. again 또, 다시 한 번11. age 나이, 연령12. ago ~전에13. air 공기, 공중14. airplane 비행기15. airport 공항, 비행장16. album 앨범, 사진첩17. all 모든, 모두, 전부18. along ~을 따라서19. always 항상, 언제나20. among ~사이에, ~가운데21. an 하나의22. and 그리고, ~와23. angry 화난, 성난24. animal 동물, .. 2024. 11. 14.
(241113.WED) 테마 종목 및 리포트 요약 52주 신고가특징주특징테마리포트요약  52주 신고가네이처셀, 윙스풋, 동아지질, 디지털대성, KT&G  특징 상한가 및 급등종목휴림로봇1,539원(+29.98%) : 로봇/로봇AI 테마 상승 및 이큐셀 최대주주로 등극 속 상한가에코캡1,539원(+29.98%) : 폭스바겐-리비안 합작법인 투자 규모 확대 소식 등에 일부 리비안 테마 상승 속 상한가셀리드5,120원(+29.95%) : 오미크론 대응 코로나19 백신 임상 3상 시험 투여 완료 소식에 상한가대원화성1,294원(+29.92%) : 폭스바겐-리비안 합작법인 투자 규모 확대 소식 등에 일부 리비안 테마 상승 속 상한가아주IB투자2,630원(+29.88%) : 美 법인, 스페이스X 지분 확보 소식에 상한가미래에셋벤처투자7,000원(+24.78%) :.. 2024. 11. 14.
(react) 컴포넌트 React 컴포넌트란?React 컴포넌트는 React 애플리케이션의 UI를 구성하는 가장 기본적인 단위. 마치 레고 블록처럼 작은 컴포넌트들을 조립하여 복잡한 UI를 만들 수 있음. 각 컴포넌트는 독립적으로 관리되고 재사용될 수 있어 코드의 유지보수성과 재사용성을 높여줌.  컴포넌트 특징재사용성: 한 번 만들어진 컴포넌트는 여러 곳에서 반복적으로 사용 가능독립성: 각 컴포넌트는 자체적인 로직과 상태를 가지고 있기때문에 다른 컴포넌트에 영향을 주지 않음.캡슐화: 컴포넌트 내부의 구현은 외부에 노출되지 않고 숨겨져 있어 복잡도를 줄이고 유지보수가 용이함.계층 구조: 컴포넌트는 부모-자식 관계를 통해 계층 구조를 형성하며, 이를 통해 복잡한 UI를 효과적으로 관리.  컴포넌트의 종류함수형 컴포넌트: 함수로 정.. 2024. 11. 14.
어떻게 열정을 갖게 할까? Q. 어떻게 열정을 찾고 유지할 수 있을까요? 1. 자신의 진정한 열정 찾기 - 자기 성찰: 과거에 어떤 일을 할 때 가장 즐거웠는지, 무엇에 가장 열정적이었는지 돌아봅니다. - 다양한 경험: 새로운 취미나 활동을 통해 숨겨진 재능과 관심사를 발견합니다. - 강점 파악: 자신이 잘하는 일, 좋아하는 일을 파악하여 강점을 살릴 수 있는 방향으로 나아갑니다.  2. 작은 목표 설정하기 - 구체적인 목표: 큰 목표보다는 작고 달성 가능한 목표를 세워 성취감을 느낄 수 있도록 합니다. - 단기 목표: 단기간에 달성할 수 있는 목표를 설정하여 동기 부여를 유지합니다. - 시각화: 목표를 시각적으로 표현하여 더욱 생생하게 상상하고, 동기 부여를 높입니다.  3. 긍정적인 환경 조성 - 긍정적인 사람들과의 교류: 긍.. 2024. 11. 13.
728x90
반응형

티스토리툴바