분류 전체보기 (30) 썸네일형 리스트형 [React] 웹의 역사와 Next.js 🔸 웹의 역사 1. Mosaic Web Browser(1993)와 Netscape Navigator(1994) 등장 Mosaic Web Browser와 Netscape Navigator는 HTML과 CSS로만 이루어진 정적인 웹사이트였습니다. 사용자에게 조금 더 좋은 서비스를 제공하고자 동적인 웹사이트를 만들기 위해 고민합니다. 2. Javascript의 등장 Brendan Eich가 Javascript를 개발하였고, Netscape Navigator에는 javascript 엔진을 내장하여 출시하게 됩니다. 3. AJAX 등장 Jesse James Garrett이 비동기적으로 데이터를 받아오고 처리할 수 있는 기술이 등장합니다. 4. jQuery의 등장 Microsoft가 Internet Explorer.. [React] Redux middleware 리덕스 미들웨어 🔸 Redux란? 리덕스는 Flux 패턴을 구현한 대표적인 라이브러리 중의 하나입니다. Flux 패턴 페이스북에서 애플리케이션에서의 데이터 흐름이 복잡해며 발생하는 문제를 해결하기 위해 발표한 패턴입니다. 이 패턴은 데이터가 단방향으로만 흐르고, 새로운 데이터를 넣으면 처음부터 데이터 흐름이 다시 시작됩니다. 이를 통해서 상태의 전이 현상을 없애주고 예측 가능하다는 특징을 가지게 됩니다. 동작 화면에서 액션이 발생하면 이를 디스패처가 리듀서에 전달하고, 리듀서는 상태를 변경합니다. 이 모든 상태는 스토어에서 관리합니다. 한계 리덕스 스토어에서는 동기적으로 액션을 디스패치하고, 리듀서 함수를 호출하여 state를 업데이트하는 것을 담당합니다. 즉, 비동기 처리는 수행하지 못하는 한계가 있습니다. 🔸 Red.. [6주차] 회고 6주 차에는 '레스토랑 상세페이지 제작' 과제를 진행하였다. - 레스토랑 상세 페이지 구현 - 레스토랑 상세 페이지 라우팅 설정 레스토랑 상세 페이지를 구현하는 것은 크게 어렵지 않았는데, url, 라우팅 설정에서는 어려움이 있었다. 1. Relative URL 설정 구현을 마친 후에 테스트를 실행해봤는데, 코드숨에서 제공한 테스트 중 하나를 실패하였다. 해당 테스트는 레스토랑 상세페이지 URL (/restaurants/1)로 바로 접근했을 때 데이터가 정상적으로 표시되는지 확인하는 것이었다. 당시 restaurants/1로 접근하려고 하면 restaurants/main.js로 접근하여 fail이 떨어졌다. 처음엔 restaruants/main.js로 접근되는 이유를 몰라서 구글링 키워드도 잘못 잡았었다.. [Javascript] Generator 안녕하세요. 오늘은 Generator에 대해서 알아보도록 하겠습니다. 🔸 Generator란? Generator는 함수의 실행을 중간에 멈췄다가 재개할 수 있는 함수입니다. 이때 컨텍스트는 저장된 상태로 남아 있습니다. 예제 Generator 함수는 호출되어도 즉시 실행되지 않고, 함수를 위한 Iterator 객체를 반환합니다. function* idMaker() { let index = 0; while (index < 3) { yield index++; } } let iter = idMaker(); console.log(iter.next()); //{value: 0, done: false} console.log(iter.next()); //{value: 1, done: false} console.log.. [4주차] 회고 4주 차에는 두 가지 과제를 진행하였다. - Todo 리스트를 Redux를 활용하여 리팩터링 하기 - 레스토랑 정보 확인 애플리케이션 구현하기 첫 번째 과제는 지난 시간에 구현한 Todo 리스트 애플리케이션에 Redux를 적용하는 것이었다. 지난 강의에서 관심사의 분리에 대한 내용이 나왔었는데, 이번에 Redux를 적용하며 관심사를 분리하여 코드를 작성해보았다. 상태를 관리하는 부분은 Reducer로 분리하고, Component도 각각 Container, Presentational로 나누어 작성하였다. 규모가 작은 애플리케이션임에도 각각의 역할이 분명하여 에러가 났을 때 디버깅하기 쉽겠다는 생각이 들었고, 규모가 큰 프로젝트에서는 유지보수를 위해 Redux와 같은 상태 관리 라이브러리를 적용하는 것이 필.. [Frontend] 로딩 성능 최적화 안녕하세요. 오늘은 프론트엔드의 로딩 성능을 최적화하는 방법에 대해 알아보도록 하겠습니다. (네이버의 TECH CONCERT 자료를 참고하여 작성했습니다.) 개발자 도구의 Network 탭을 활용하여 웹 페이지의 로딩 속도를 측정하고 분석할 수 있습니다. NAVER 사이트로 예를 들어보겠습니다. 위 그림의 오른쪽에 위치한 Waterfall이라는 것이 성능 개선 작업에서 가장 중요한 지표입니다. 이 Waterfall의 높이를 줄이고, 폭을 줄이고, 간격을 줄이는 것으로 로딩 속도를 개선할 수 있습니다. 1. 높이 줄이기 : Request 수 줄이기 브라우저는 호스트당 동시에 연결할 수 있는 Connection수가 정해져 있습니다. 그 수를 넘어가게 되면 대기시간이 발생하기 때문에, Request 수를 줄이.. [3주차] 회고 1. Facts - 저번 주 과제였던 Todo 애플리케이션에 대해 테스트 케이스를 작성해보았다. - Testing Library를 이용하였고, BDD 작성하는 연습을 하였다. : describe - context - it 단계로 나누어 테스트 케이스를 작성하였다. - 처음엔 컴포넌트 단위의 테스트에 대해 잘 이해하지 못하여, 하위 컴포넌트에서 상위 컴포넌트의 기능을 검증하려고 했었다. - 통합 테스트를 작성해보았다. 2. Feelings - 항상 머리로 구현 사항을 생각하고 개발을 하였는데, 그것보다는 테스트 케이스를 명확하게 작성해놓은 후에 개발하는 것이 실수를 줄일 수 있겠다는 생각을 하였다. - 컴포넌트 단위의 테스트도 중요하지만, 통합 테스트를 통해 데이터를 정상적으로 전달하고 있는지 확인하는 것.. [Network] HTTP Persistance Connection 지속 커넥션 안녕하세요. 오늘은 HTTP의 지속 커넥션에 대해서 알아보도록 하겠습니다. 🔸 HTTP Connectionless HTTP는 서버 자원을 효율적으로 사용하기 위해 연결을 유지하지 않는다는 특징이 있습니다. 이 특징 때문에 데이터를 요청할 때마다 TCP 연결을 다시 해야 합니다. 위 그림을 보시면, TCP 커넥션을 설정하는 시간이 다른 작업에 비해 상당히 긴 것을 보실 수 있습니다. 연결을 유지하지 않는다면, 요청마다 새로운 TCP 커넥션을 설정하는데 시간이 많이 소요될 것입니다. 🔸 지속 커넥션 이를 해결하기 위해 지속 커넥션이라는 개념이 등장합니다. HTTP/1.0의 Keep-Alive 커넥션 keep-alive 커넥션의 장점은 아래 그림에서 볼 수 있습니다. 4개의 HTTP 트랜잭션에 대해서 지속 커.. 이전 1 2 3 4 다음
