목표 : 소켓프로그래밍으로 웹에 검색요청을 보내서 웹 화면으로 출력해보자
- 사용자가 검색박스에 검색을 하고 enter버튼을 클릭해서 검색을 한다.
- c에서 짠 소켓프로그래밍 코드를 이용하여 google에 req하고 res받는다
- 해당 res를 react를 이용하여 웹에서 뿌려준다.
- React(User)가
검색어혹은호스트네임을 입력 후, 검색 혹은 url 버튼을 누른다. - Proxy(C코드)에서 React로 부터의 Request를 받아, URL의
Path를 보고 검색 혹은 뷰어를 구분한다. - Proxy에서 각 기능에 맞는 Request를 웹 페이지에 요청하여 HTML 파일을 받아온다.
- Proxy는 받아온 리소스를 React로 응답한다.
- React에서 리소스를 디스플레이한다.
- root 디렉토리에서 터미널에 npm i 입력한다.
- root 디렉토리에서 npm run dev를 실행한다.
- ./server를 이용해 컴파일된 c를 실행시켜 서버를 가동한다.
UNIX : gcc server.c -o server -lcurl -liconv
- 웹 사이트 url에 http://localhost:5173/ 로 접속한다
- 접속하면 나오는 검색창에 검색을 하고 결과를 확인한다.
- UI 수정
- 해당 페이지의 이미지까지 가져올 수 없을까?
- fetch가 최선일까? 그냥 터미널로 할까?
- 웹에서 띄워줄 때 response message들도 보이는데 이거 어떻게 하지?
- URL을 이용한 웹 뷰 기능 동작 이상
1. CORS 헤더 생성 이유
- 클라이언트가 브라우저를 통해 다른 도메인의 리소스 요청 시, 브라우저 보안 정책에 의해 요청이 차단된다. 따라서, CORS 헤더를 설정함으로써, 클라이언트 브라우저가 다른 도메인 리소스에 접근하도록 허용한다.
2. URL 디코딩이 필요한 이유
- 클라이언트가 서버로 보낸 검색어는 URL 인코딩된 형태이다. 따라서, Google에 올바른 검색어를 사용하기 위해 사람이 읽을 수 있는 형태로의 디코딩 과정이 필요하다.
3. ISO-8859-1 인코딩을 UTF-8로 변환하는 이유
- 구글로 받은 리소스는 ISO-8859-1 인코딩되어 있어, 클라이언트에서 띄우기 위해 UTF-8 표준으로 인코딩하는 과정이 필요하다.
4. CURL 라이브러리를 사용한 이유
- CURL은 HTTPS 등 여러 프로토콜을 지원하여 이를 통해 다른 페이지에 요청이 가능하다.
5. WriteCallback 함수의 역할
- 다른 서버로부터 응답 데이터를 청크 단위로 수신할때마다 호출된다. 이 함수는 수신된 데이터를 메모리의 response 변수에 저장한다. 데이터가 조각으로 도착하기에, WriteCallback은 데이터를 누적하여 전체 응답을 완성하는 역할을 한다.
6. accept() 함수에서의 대기 상태
- accept()는 클라이언트의 연결 요청이 있을 때까지 블로킹 상태로 기다린다. 만약 요청 연결이 들어오면 연결을 수락하고 새로운 소켓을 반환한다. 그 소켓을 통해 클라이언트와 데이터를 주고 받는다.
- 현재 CURL 라이브러리를 통해 다른 웹 서버간 HTTPS 프로토콜을 이용하고 있다. 이는 매우 불안정한 방식이기 때문에, 추후 SSL 인증서 발급을 통한 HTTPS 사용하도록 수정한다.