분류 전체보기48 DOM과 Virtual DOM ? 돔(DOM)이란? DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. DOM(Document Object Model)을 영어 뜻풀이 그대로 하자면 문서 객체 모델을 의미한다. 문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미한다. HTML의 DOM 트리 DOM은 HTML과 스크립팅 언어(Javascript)를 서로 이어주는 역할 ❓ 자바스크립트는 어떻게 HTML 태그들을 조종할 수 있는 걸까? - Document라는 전역 객체를 통해 접근 - window라는 객체는 document객체의 상위에 위치 🙄 가상 돔.. 2022. 4. 19. (회고) 미니프로젝트를 하고 나서 미니 프로젝트를 하면서 처음으로 백엔드로 같이 협업을 했다. 처음에는 어떻게 진행해야될지 몰라서 여러가지를 찾아보고 조언도 구해가며 임했다. 협업을 시작할땐 API 설계를 잘 짜고 시작해야된다. 그 이유는 기능 구현을 할때 백엔드와 프로트엔드간의 약속이다. 하지만.. API가 어색했던 우리조는 나름 짠다고 짰는데,, 기능구현할때 다들 api가 맞지 않아... 수정을 많이 하게 되었다... 그리고 같이 하던 조원 한명 갑자기 나가게 되어.. 맞고 있던 기능을 남아있던 나와 다른 조원이 맞게 되었다.. 처음에는 멘붕이였지만.. 밤샘 작업을 통해 거의 마무리를 지어놨는데... 백엔드쪽 분들이 기능 구현을 하는게 예상 보다 너무 늦어지는것이였다.. 다른 기능부터 테스트를 해보려고 하는데... 백엔드분들은 서로의.. 2022. 4. 17. Rudux란 무엇인가? Flux 패턴 양방향 데이터 흐름이 아닌 단방향 데이터 흐름을 가지도록 변경한 것이다. 데이터 흐름이 한 방향으로 강제되고, 모든 상태가 스토어에 모여 있어서 변경 사항을 컴포넌트에 전달하기도 쉬워졌다. Flux 패턴을 바탕으로 Redux가 만들어졌고, 리덕스는 그 이후로 정말 많은 리액트 개발자들에게 상태관리 라이브러리로 선택받아 쓰이고 있다. 1-1. 리덕스 소개 리덕스는, 가장 사용률이 높은 상태관리 라이브러리입니다. 리덕스를 사용하면, 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있습니다. 또한, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있습니다. 추가적으로, 리덕스의 미들웨어라는 .. 2022. 4. 16. Axios란? Axios Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용합니다 axios 특징 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용 Promise(ES6) API 사용 요청과 응답 데이터의 변형 HTTP 요청 취소 HTTP 요청과 응답을 JSON 형태로 자동 변경 Axios 사용법 Axios 다운로드 HTTP Methods Axios 사용해보기 GET POST PUT DELETE async await에 관해 살펴보기 Promise로 Axios사용해보기 Axios 환경 구성 Axios다운로드 자신이 사용하는 패키지 매니저로 프로젝트에.. 2022. 4. 10. 리엑트 심화 구현 기능 목록 게시글 목록 가져오기 추가하기 (+이미지 업로드하기) 삭제하기 수정하기 회원가입하기 로그인하기 파이어베이스 or S3로 배포! ✅ 페이지별 상세페이지별 상세 회원가입 페이지 이메일 형식 체크, 비밀번호 체크할 것 로그인 페이지 이메일, 패스워드 미기입 시 로그인 버튼 활성화 막을 것 메인 페이지(게시글 목록 페이지) 게시글 목록 노출 게시글 하나는 작성자, 작성 시간, 이미지 미리보기, 텍스트 내용으로 구성 게시글 하나를 클릭 시, 게시글 상세 페이지로 이동 글 작성 페이지 레이아웃 선택 버튼 3가지 레이아웃 중 선택하도록 한다. 이미지가 오른편에, 텍스트는 왼편에 위치한 레이아웃 이미지가 왼편에, 텍스트는 오른편에 위치한 레이아웃 텍스트가 위에, 이미지는 아래에 위치한 레이아웃 레이아웃.. 2022. 4. 9. 라이프사이클(클래스형 vs 함수형), react hooks 라이프사이클(클래스형 vs 함수형) 1) 리액트의 라이프 사이클이란? : 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리 입니다. 그래서 각각의 컴포넌트에는 라이프 사이클(생명 주기)라는 것이 있습니다. 컴포넌트의 수명은 페이지에서 렌더딩 되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때까지를 의미합니다. 라이프 사이클은 총 9개가 존재합니다. 크게 세가지 유형으로 나눌 수 있는 데 생성 될 때, 업데이트(수정 될 때), 제거 될 때입니다. 이를 리액트에서는 마운트, 업데이트, 언마운트라고 부릅니다. ➡ 마운트는 DOM이 처음 생성 된 후 웹브라우저 상에 나타나는 것을 의미합니다. ➡ 업데이터는 4가지 상황에서 발생 됩니다. 1) props가 바뀔 때 2) state가 바뀔 때 3) 부모.. 2022. 4. 3. 이전 1 2 3 4 5 6 7 8 다음
