본문 바로가기

분류 전체보기260

SPA vs MPA (22.11.14 TIL) 멀티 페이지 애플리케이션 (Multi Page Application, MPA) 여러개의 페이지로 구성된 애플리케이션이다. MPA 는 새로운 페이지 요청이 있을 때마다 정적 리소스가 다운로드 되며 매번 전체 페이지가 다시 렌더링된다. 모든 템플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답한다. 이 과정을 서버 사이드 렌더링(SSR)이라고 부른다. 완성된 형태의 HTML 파일을 서버로부터 전달받기 때문에 검색 엔진이 페이지를 크롤링 하기에 적합하여 SEO (Search Engine Optimization, 검색 엔진 최적화) 관점에서는 유리하다. 하지만 새로운 페이지 요청이 있을 때마다 갱신되기 때문에 매번 새로고침이 발생되어 사용성이 좋지 않다. 또한 변경이 필요없는 부분을 포함하여 전체 .. 2022. 11. 14.
리액트 생명주기 (22.11.13 TIL) 모든 리액트 컴포넌트에는 생명주기가 존재한다. 생성 (mounting) -> 업데이트 (updating) -> 제거 (unmounting) 생명주기의 때에 따라 어떤 작업을 처리해야 하는 지 지정해줘야 불필요한 업데이트를 방지할 수 있다. 리액트의 class 컴포넌트는 라이프 사이클 메서드를 활용하고, 함수형 컴포넌트는 hook 을 사용한다. 마운트 (생성) : 컴포넌트의 인스턴스가 생성되어, DOM에 삽입될 때 순서대로 호출된다. 업데이트 : props나 state가 변경되면 렌더가 진행되며 순서대로 호출된다 언마운트 (마운트 해제) : 컴포넌트를 DOM에서 제거하는 과정이다. React Hook 리액트의 Hook 은 함수형 컴포넌트에서 React state와 생명주기 기능을 “연동(hook into).. 2022. 11. 13.
11월 두 번째 주간 회고 📚 221107-221111 이번 주 배운 것 9주차 리액트 학습 시간에서는 컴포넌트 분리보다는 한 컴포넌트에 모든 기능을 다 넣는 방식으로 구현했었는데 이번 12주차에서는 컴포넌트 분리 뿐만 아니라 컴포넌트 별로 테스트 코드를 작성하여 각 컴포넌트가 맡은 기능만 테스트할 수 있게 하는 방식을 배웠다. 자바에서는 테스트 코드 작성시 MockMvc 라는 가짜 객체를 모킹해서 의존성을 줄여주었다면 jest 는 가짜 함수를 생성할 수 있도록 jest.fn() 이라는 함수를 제공한다. 이 가짜 함수는 일반 자바스크립트 함수와 동일한 방식으로 인자를 넘겨 호출할 수도 있다. 이렇게 객체를 만들어놓고, fireEvent 라는 핸들러를 사용해서 인위적으로 이벤트를 생성한 후 트리거 시킨다. 그리고 styled-com.. 2022. 11. 13.
자바스크립트 동기와 비동기 (22.11.12 TIL) 동기는 요청 후 응답을 받아야 다음 동작을 실행하는 방식을 말하며 비동기는 요청을 보낸 후 응답과 관계없이 다음 동작을 실행하는 방식이다. 자바스크립트는 단일 스레드 프로그래밍 언어로 단일 호출 스택이 있어 한 번에 하나의 일을 처리할 수 있다. 그러므로 자바스크립트는 동기 방식으로 진행된다. 하나의 호출 스택만 있기 때문에 하나의 함수를 처리하는 데 매우 오랜 시간이 걸린다면 다음 실행해야 할 함수에 지장을 줄 수 있다는 문제가 발생한다. 이 부분이 바로 비동기의 필요성이다. 그렇다면 자바스크립트에서는 어떻게 비동기를 구현할까? 1. callback 함수 이용 callback (이하 콜백) 함수는 다른 함수의 인자로써 이용될 때나 어떤 이벤트에 의해 호출되어질 때 사용하는 함수로, 비동기 처리의 해결방.. 2022. 11. 12.
나만의 메뉴 구현 (22.11.11 TIL) 이번 주 퀘스트 과제에 있던 나만의 메뉴 구현하기. 투두리스트로 나만의 메뉴를 만들어 보았다. 강의반복과제와 유사해서 마치 복습을 하는 듯한 바이브로..^^ 거기에 삭제와 체크박스 기능 추가! 삭제 기능을 구현할 때는 filter() 메서드를 사용해서 아이디값이 다른 것만 찾아서 setTasks() 로 새로운 배열을 만들어 상태관리를 따로 해주었다. const deleteTask = (id) => { setTasks(tasks.filter((task) => task.id !== id)); }; 그럼 체크박스의 상태를 false 와 true 로 바꿔줄 때는 어떻게 해야 할까? const completeTask = (id) => { setTasks(tasks.map((task) => { if (task.id.. 2022. 11. 11.
React - Rerendering 조건 (22.11.10 TIL) 리액트에서 상태 변수는 브라우저에서 구성 요소 상태를 렌더링하는 데 사용된다. 상태가 변경되면 리액트는 새 데이터로 구성 요소를 다시 렌더링한다. 프로그램에서 발생하는 모든 변경 사항을 사용자에게 (상태가 변경될 시) 바로 알려준다. Rerendering 조건 1. state (상태) 변경이 있을 때 - state 변경이 감지되면 리렌더링 한다. 2. 새로운 props 가 들어왔을 때 - 부모 컴포넌트로부터 새 props 가 들어오면 자식 컴포넌트는 리렌더링 된다. 3. 기존 props 가 업데이트 됐을 때 - 부모 컴포넌트로부터 받은 props 가 변경되면 props 값을 받은 자식 컴포넌트도 리렌더링 된다. 4. 부모 컴포넌트가 리렌더링 될 때 - 부모 컴포넌트가 업데이트 되어 리렌더링 되면 자식 컴.. 2022. 11. 10.

티스토리툴바