분류 전체보기30 상태관리, useState에 관하여 state란 상태라는 뜻이며 React, Vue 와 같은 SPA를 쉽게 만들도록 도와주는 웹 프레임워크, 라이브러리에서는 화면을 리렌더링하는 시점, 상황을 쉽게 개발자가 컨트롤 하기 위해 변수 형태로 사용을 합니다. 예를들어, 버튼을 눌렀을 때 화면에 나타나 있는 숫자 값이 증가하는 페이지가 있습니다. 이 때, 버튼을 눌러도 화면에 나타나 있는 숫자 값은 변하지 않습니다. 이미 html파일을 불러온 상태이므로 변수값이 바뀌어 콘솔창에는 증가하는 값이 찍히더라도 화면은 바뀌지 않아야합니다. 동적인 웹 이라는 개념이 생긴 web2가 나타난지 20년 가까이 됐습니다. 그렇기에 사용자들은 내 행동에 따라 응답이 없는 페이지를 기대하고 접속하지 않습니다. 사용자 동작에 맞게 화면을 다시 그리는 행위(리렌더링)를.. 2023. 3. 27. 추천 식당 최근 사이드프로젝트를 시작했습니다. 이름은 정하진 않았고 '추식' 이라 임시로 부르고 있습니다. GPS 기반으로 현재 위치 근처 식당을 추천해주는 서비스로 웹앱 형태로 개발중입니다. JS를 주로 다뤘기에 웹으로 구현을 하고 있지만 개발하면 할수록 앱으로 만들껄 하는 후회가 듭니다. React를 사용해보고 싶어 React로 개발중에 있습니다. https://chu.banpick.kr 추식 - 오늘의 추천 식당 오늘은 추천 식당으로 가자! 근처 식당을 내가 설정한 우선순위로 추천해주는 서비스 chu.banpick.kr 개발 3주차로 지도 연동, 기본적인 UI를 구성해뒀고 검색은 아직 지원하지 않습니다. 이번주 개발 계획으로는 사용자 별 우선순위를 선택할 수 있게하고 우선순위 설정을 로컬스토리지를 통해 저장하.. 2023. 3. 22. HTTP 이해 HTTP 개요 HTTP(HyperText Transfer Protocol)는 HTML 문서와 같은 하이퍼텍스트 리소스들을 가져올 수 있도록 해주는 프로토콜입니다. 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이기도 합니다. 클라이언트-서버 프로토콜이란 수신자 측에 의해 요청이 초기화되는 프로토콜을 뜻합니다. 하나의 완전한 문서는 텍스트, 레이아웃 설명, 이미지, 비디오, 스크립트 등 불러온 하위 문서들로 재구성됩니다. HTTP는 애플리케이션 계층의 프로토콜로, TCP 혹은 암호화된 TCP인 TLS를 통해 전송됩니다. HTTP 흐름 클라이언트가 서버와 통신하고자 할 때, 다음 단계의 과정을 수행합니다. 1. TCP 연결을 엽니다. TCP 연결은 요청을 보내거나(혹은 여러 개의 요.. 2023. 3. 6. 소켓과 웹소켓 소켓 소켓은 TCP/IP기반 네트워크 통신에서 데이터 송수신의 마지막 접점이다. 소켓을 통해 클라이언트-서버 간 양방향 연결 지향성 통신을 소켓통신이라 한다. 연결 지향성 통신이란 통신 연결이 유지되는 것을 지향하는 프로토콜을 뜻한다. 연결을 유지하지 않는 HTTP통신과 대비되는 개념. TCP, UDP가 속한 4계층에서 동작한다. 따라서 바이트 스트림을 통한 데이터 전송을 한다. 소켓은 서버소켓, 클라이언트 소켓으로 분류할 수 있고 소켓 통신을 위해 서버 소켓의 IP주소와 포트번호를 알아야 한다. 웹소켓 웹소켓은 하나의 TCP 접속에 전이중 통신 채너을 제공하는 컴퓨터 통신 프로토콜이다. HTTP와 HTTPS 위에서 동작하도록 설계된 프로토콜이다. TCP에 의존하지만 HTTP에 기반하므로 7계층에서 동작.. 2023. 2. 22. 브라우저 렌더링 과정 브라우저란? 웹 브라우저(Web browser) 혹은 브라우저 는 웹에서 페이지를 검색하고 표시하며 사용자가 하이퍼링크를 통해 추가 페이지에 접근할 수 있도록 하는 프로그램. 브라우저는 사용자 에이전트의 가장 친숙한 유형이다. (참고. MDN) 우리가 많이 사용하는 Chrome, Safari, Edge, Firefox 등등이 있다. 브라우저 구조 User Interface - 사용자가 접근할 수 있는 영역으로 주소표시줄, 뒤로가기/앞으로가기 버튼, 새로고침 버튼 등 브라우저 자체의 GUI를 구성하는 부분이다. Browser engine - 사용자 인터페이스, 렌더링 엔진 사이의 동작을 제어하는 엔진. 사용자가 주소표시줄에 URI를 입력하면 브라우저 엔진이 자료 저장소에서 해당 URI에 알맞는 자료를 찾고.. 2023. 1. 31. 콜백 함수란? 알고 있다고 생각하는 개념도 설명하라고 하거나 정의를 물어보면 명확하게 얘기하지 못하는 경우가 많다. 그래서 이번 기회에 정리하여 머리 깊게 개념을 넣고자 한다. 콜백 함수란? Callback function A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. 해석하자면, 콜백함수는 다른 함수에 argument(인수)로 전달되는 함수이다, 외부함수의 내부에서 invoked(호출)되어 어떤 종류의 루틴이나 동작을 완료한다. 함수 인수로 함수가 전달되어 외부.. 2023. 1. 20. 이전 1 2 3 4 5 다음
