본문 바로가기

분류 전체보기

 (112)
주요 HTTP headers에 대하여 ! HTTP headers는 클라이언트 - 서버 요청/응답 간에 부가적인 정보를 전송할 수 있게 해준다. 종류가 꽤나 많은데 그 중 자주 사용되고 중요해 보이는 것들 위주로 알아 보려한다. 목차 1. HTTP headers의 분류 2. HTTP headers 살펴보기 - General headers - Request headers - Response headers - Payload headers (Entity headers) 1. HTTP headers의 분류 http헤더는 두가지 방법으로 그룹화 할 수 있다. 첫째로 컨텍스트에 따라 네가지로 나뉜다. - General header : 요청과 응답 모두에 적용되지만, 최종적으로 바디에서 전송되는 데이터와는 관련이 없음 - Request header : fet..
MIME TYPE 이란 무엇인가 ! http 헤더들을 공부하던 중, accept와 content-Type에 지정되는 타입이 MIME-TYPE 기반으로 표현된다는 말에, MIME-TYPE이 뭔지 궁금하여 공부하게 되었다. 1. MIME이 나타나게된 배경 컴퓨터는 0과 1 이진수만 이해할 수 있기 때문에, a,b,c와 같은 문자를 이해하기 위해서는 문자를 숫자로 변환해 주어야 했다. 이 때 문자를 숫자로 표현하기 위한 규칙을 만들었는데 이것이 아스키 (ASCII)! 이 아스키를 가지고 문자들을 전송할 수 있었지만 바이너리 파일의 경우(이미지, 동영상, 음악 등)과 같은 파일의 경우는 그렇지 못했다. 아스키는 7비트, 바이너리 파일은 8비트를 사용하기 때문이다. (아스키의 첫번째 자리수는 제어문자를 위한 공백) 이전에는 아스키 문자를 통해서만 ..
HTTP에 대하여! HTTP요청과 응답 websocket과 HTTP의 차이를 공부하던 중, HTTP에 대해 공부해보고 싶은 욕심이 생겼다. 깊게 들어가보니 많은 내용들이 있었고 그 중에는 모르던 것도 꽤 있었다. 이번 기회에 알아 볼 수 있어서 오히려 다행이었다. 목차 1. HTTP란 무엇인가 - HTTP 개념 - HTTP 계층과 프록시 - HTTP 연결 2. HTTP요청과 응답 - HTTP 메시지, HTTP/2.0으로의 변화 - HTTP 요청 / 헤더와 바디 - HTTP 응답 / 헤더와 바디 1. HTTP란 무엇인가? 1) HTTP의 개념 HTTP : The Hypertext Transfer Protocol HTTP는 'www'(World Wide Web)의 '토대'이다. * World Wide Web은 인터넷에 연결된 사용자들이 서로의 정..
Socket에 대하여! Socket의 정의와 생성과정 non-blocking I/O에 대해서 알아보다가 Socket개념이 나왔다. Socket이 어떤 역할을 하고 어떻게 생겨나게 되는지 궁금하여 공부해 보게 되었다. 1. 소켓이란 ? 'A socket is one endpoint of a two-way communication link between two programs running on the network. A socket is bound to a port number so that the TCP layer can identify the application that data is destined to be sent to.' 간단히 말하자면 소켓은 two-way 네트워크 연결의 엔드포인트이다. 연결부이다. 소켓에 포트 넘버가 바인딩 되어 있기 때문에..
Nextron 실시간 채팅 프로젝트 후기 Nextron (Next.js + electron)과 Firebase를 이용해서 실시간 채팅 프로그램을 만들어 보았다. 목차 1. 프로젝트 소개 2. 프로젝트에서 맞닥뜨린 문제들 3. 최종 후기 1. 프로젝트 소개 기술 : Nextron (Next.js + electron), Typescript, Firebase, Redux 구성 : 로그인 / 회원가입, 유저목록, 실시간 개인대화, 실시간 그룹대화 1) 로그인 / 회원가입 - Firebase Authentication을 이용 - 회원가입, 로그인 요청 후 각각의 응답 값에 대한 핸들링 및 유저에게 알려줄 수 있게 구현 - 로그인 상태 값 Redux로 관리 - 모든 유저가 전체 유저리스트에 접근할 수 있도록 파이어베이스 auth database외 별도의 ..
Next.js 개인 쇼핑몰 프로젝트 후기. 목차 1. 프로젝트 소개 2. 프로젝트에서 맞닥뜨린 문제들 3. 얻은 것들, 잘한점과 아쉬운점 이 프로젝트를 시작하게된 계기는 Next.js의 활용이다. 기본적인 쇼핑몰 사이트를 만들어 보면서 Next.js가 어떻게 쓰이는지 이해할 수 있었다. 1. 프로젝트 소개 프로젝트는 기본적인 쇼핑몰 구조를 가지고 있다. 메인페이지, 회원가입/로그인, 상품 페이지, 상품 상세페이지, 장바구니 담기, 마이페이지 장바구니 확인, 회원탈퇴, 정보변경, contact. 깃허브 : https://github.com/Goddemi/next-blog 배포 : https://next-blog-3ffp.vercel.app/ 주로 쓰인 기술 Next.js / Redux / useQuery / Firebase Next.js : SSG..
React : useRef props넘겨줄 때 주의할점. forwardRef. form에서 input의 value를 가져올 때, useState를 사용하는 것보다 useRef를 사용하는 것을 선호한다. useState를 쓰면 계속 렌더링 된다는 것이 신경 쓰인다. 이번에도 회원가입 form을 만들면서 ref를 썼는데 결론부터 말하자면 ref값을 props로 전달하는 과정에서 고생했다. ref는 예약어이기 때문이다. (예약어 : 쓰임이 이미 정해져 있는 키워드) const SignupForm = () => { const emailRef = useRef(null); return ( ) } const InputForm = ({id, ref}) => { return ( ) } 이런 식의 구조였다. InputForm 컴포넌트에 직접 ref를 이용해서 props를 전달하려고 한게 잘못이었다...
Next.js : _App.tsx , _document.tsx 알아 보기. _document에서 UI작업 금지 ! 1. _App.tsx 넥스트js의 앱 컴포넌트는 리액트의 그것 처럼 페이지의 시작을 담당한다. 그리고 아래와 같은 역할을 할 수 있다. - 레이아웃 지정 - 페이지 별로 추가 데이터를 전달 - 상태 값 분배 - 글로벌 CSS 형식은 기본값인 App.tsx (밑줄이 없는 App임! _App이 App을 오버라이드 하는 것)를 오버라이드(재정의) 하기 위해서 아래와 같이 사용한다. //_app.tsx import type { AppProps } from 'next/app' export default function MyApp({ Component, pageProps }: AppProps) { return } - 프롭으로 받아온 Component는 활성화된 페이지를 말한다. 요놈 덕에 라우팅을 통해 새로운 페이..

티스토리툴바