Frontend Study - 1 (16) 썸네일형 리스트형 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.. 개인 포트폴리오 프로젝트 후기 목차 1. 프로젝트 소개 2. 잘한점과 아쉬운점 후기. 1. 프로젝트 소개 - 포트폴리오 사이트. 배포 : http://portfolio0124.s3-website.ap-northeast-2.amazonaws.com Git : github.com/Goddemi/portfolio 사용한 기술 기술 : React, Typescript 상태관리 : React-Query Css : Styled-components 테스트 : Jest, react-testing-library cypress 배포 : Aws-S3 1) 메인페이지 React Router의 Outlet을 이용해 레이아웃을 구성하였다. 좌측의 nav부분, 위의 현재 경로를 나타내는 header를 제외한 나머지 부분에 본문이 들어가고 페이지 이동에 따라 같.. 위코드 2차 프로젝트 후기 : myhoneytrip (myrealtrip) 프로젝트 소개 - 프로젝트 기간 : 2022년 8월 1일 ~ 2022년 8월 12일 (12일) - 마이리얼트립을 모티브로 한 항공권 예매사이트 허니문 항공권 예약과 관련된 사용자의 소셜 로그인(kakao), 검색결과 기반 상세페이지, 항공권 예약, 마이페이지까지 이어지는 커머스 사이트의 기본적인 Flow 기능을 구현한 사이트입니다. * 배포 주소 : http://2nd-myhoneytrip.s3-website.ap-northeast-2.amazonaws.com/ *깃허브 주소: https://github.com/wecode-bootcamp-korea/35-2nd-myhoneytrip-frontend 팀 소개 - 팀명 : 마이허니트립 TEAM - 팀원 : 총원 7명 / 프론트엔드 4명(이강철(PM), 구단.. 위코드 1차 프로젝트 후기 : TURTLE HOME (ZARA HOME) 프로젝트 소개 - 홈리빙 상품을 판매하는 자라홈 사이트(https://www.zarahome.com/kr/) 클론 프로젝트. - 프로젝트 기간 : 2022년 7월 18일 ~ 2022년 7월 29일 (12일) 팀 소개 - 팀명 : TURTLE HOME (꼬북집) (자라-> 거북이🐢) - 팀원 : 총원 5명 / 프론트엔드 3명, 백엔드 2명 활용한 협업 툴 - 협업툴 : 깃허브(버전관리) / 슬랙(소통) / 노션(회의록) / 트렐로(진행상황) 사용한 기술 Front-End : React.js, React-Router-Dom, SASS Back-End : Python, Django, MySQL, Bcrypt, JWT 구현 기능 (주황색글씨 : 내가 구현한 사항) 인트로 : 이미지 슬라이드 로그인 / 회원가입.. 이전 1 2 다음
