전체 글

URI URI(Uniform Resource Identifier)는 통합 자원 식별자는 특정 리소스를 식별한다. 자원의 위치뿐만 아니라 자원에 대한 고유 식별자로서 URL 의미를 포함한다. URI의 존재는 인터넷으로 요구되는 기본 조건으로 인터넷 프로토콜에 항상 붙어다닌다. 웹 기술에서 사용하는 논리적 또는 물리적 리소스를 식별하는 고유한 문자열 시퀀스다. URI의 하위 개념으로 URL, URN이 있다. Uniform: 리소스를 식별하는 통일된 방식 Resource: 자원, URI로 식별할 수 있는 모든것 자원은 웹 브라우저의 파일만 뜻하는 게 아닌 실시간 교통정보 등 우리가 구분할 수 있는 것은 모든 게 리소스가 된다. Identifier: 다른 항목과 구분하는데 필요한 정보 URI의 구조 scheme..

브라우저(Browser)란? 웹 브라우저는 동기(Synchronous)적으로 (HTML + CSS), Javascript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어이다. 웹 브라우저가 웹 서버에 필요한 리소스를 요청하면 서버는 응답하고 웹 브라우저는 이를 해석한 후 사용자에게 보여준다. 보통 자원은 HTML 문서지만 PDF, 이미지 등 다양한 형태일 수 있다. 웹 브라우저의 종류는 크롬, 네이버 웨일, 파이어폭스, 사파리 등이 대표적이며 매우 다양하다. 서버의 응답은 주소를 통해 요청하는데, 이 주소를 URI(Uniform Resource Identifier)라고 한다. 브라우저의 구조 사용자 인터페이스 사용자가 접근할 수 있는 영역이다. URI를 입력할 수 있는 주소 표시줄, 이전/다음 버..

Protocol 프로토콜(Protocol)은 컴퓨터 내부 또는 컴퓨터 사이의 데이터 교환 방식을 정의하는 규칙 체계이다. 장비간 통신은 교환되는 데이터 형식에 대해 상호 합의를 요구하며, 이런 형식을 정의하는 규칙의 집합을 프로토콜이라 한다. HTTP HTTP는 Hyper Text Transfer Protocol의 두문자어로, HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜이다. 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버의 프로토콜이기도 하다. 브라우저인 클라이언트에 의해 전송되는 메시지를 요청(request)라고 하며, 서버에서 응답으로 전송되는 메시지를 응답(response)라고 한다. 각각의 개별적인 요청들은 서버로 보내지며, 서버는 요청을 처리하고 응답을 제..

인터넷 인터넷(Internet)이라는 단어를 Inter-net으로 나누면, 내부 망 이라는 뜻이다. 인터넷의 사전적 정의는 '컴퓨터들이 연결된 통신망'이다. TCP/IP로 이루어진 네트워크들이 전세계적으로 연결된 네트워크이다. 전 세계에 깔린 광케이블 또는 UTP등으로 직접 연결되며 어느 하나에 의존적이지 않고 분산된 네트워킹 시스템이다. 현재는 와이파이라는 기술이 등장했지만, 과거에는 전화선에 종량제 모뎀 인터넷 선을 연결해 인터넷을 사용했다. 하나 이상의 컴퓨터가 통신하기 위해서는 서로간의 연결이 필요한데, 이러한 연결을 통해 형성된 네트워크가 곧 인터넷이다. 하나의 컴퓨터를 다른 하나의 컴퓨터와 연결하는 것을 시작으로 복잡한 수준의 연결로 확장될 수 있다. 계속 연결되면 네트워크는 무척이나 복잡하게..

1. Material UI MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. You will develop React applications faster. mui.com 리액트 기반 UI 라이브러리 중 가장 인기 많음 구글 머테리얼 디자인을 기반으로 제작 타입스크립트, 플로우 타입 모두 지원 2. React Bootstrap React-Bootstrap The most popular front-end framew..

Prettier 설치 VScode > EXTENSIONS > Prettier install Prettier 설정 1. settings.json 설정 VScode > File > Preferences > setting > settings.json "prettier.printWidth": 200, "prettier.tabWidth": 2, "editor.formatOnType": true, "editor.formatOnSave": true, 2. Default Formatter 설정 VScode File > Preferences > setting > "Default Formatter" 검색 > "Prettier - Code formatter" 설정 3. Format on save 설정 VScode File ..

type: subject body footer Type 영어로 쓰되 첫 문자는 대문자로 표기 Feat: 새로운 기능 추가 Fix: 버그 수정 Add: 코드나 테스트, 예제, 문서 등의 추가 생성이 있을 때 사용 !BREAKING CHANGE: 커다란 API 변경의 경우 Comment: 필요한 주석 추가 및 변경 Chore: 빌드 업무 수정, 패키지 매니저 수정 Design: CSS 등 사용자 UI 디자인 변경 Docs: 문서 수정 !HOTFIX: 급하게 치명적인 버그를 고쳐야하는 경우 Move: 코드 이동있을 때 사용 Improve: 향상이 있을 대 사용. 호환성, 성능, 검증 기능, 접근성 등 다양한 것들이 목적이 될 수 있음 Implement: 코드가 추가된 정도보다 더 주목할 구현체를 완성시켰을 때..

1. 웹개발 미니 프로젝트 항해를 진행하며 같이 하게 될 동료들을 만났다. 최대 3~4인으로 구성되었으며, 비전공자의 비율은 70% 정도인 느낌이다. 스파르타 웹개발 종합반 강의를 기반으로 프로젝트를 진행하며 결과 중심 보다는 협업이 어떤건가 느끼는 게 목표인 것 같았다. 4명 중 그나마 국비지원 경험이 있던 내가 팀장으로 선정되었다. 시작하기 전 스터디 그룹이나 사전 들어야할 강의 목록이 있는데 뽑힌지 2일밖에 안 된 분은 결국 부담을 느끼시고 하차하여 4명에서 3명으로 프로젝트를 진행했다. 첫 프로젝트니 잘 했다고 생각했다. 뿌듯하다 생각도 했다. 그러나 시간이 지난 지금 보니 왜 저것밖에 하지 못 했지란 생각이 많이 든다. 기능도 기능이지만 깃허브 사용법을 이때 자세히 익혔야 했는데 싶은 생각이 많..

WIL - Weekly, I Learned What I Do? 실전 프로젝트 발표 자료 제작 요청사항 적용 실전 프로젝트 협력사 초청 최종 발표회 What I Learned? 발표회 후 받은 질문 개발을 시작한 이유 회사에서 다른 언어를 배우라 하면 어떡할지 몽고 DB를 사용한 이유 MySQL과 mongoDB의 차이점 관계성이란 무엇인가 가장 잘 했다고 생각하는 기능은 그 기능의 속도를 확인했는가 10만명이 그 기능을 사용하면 스트레스가 어마어마할텐데 어떻게 해야하는가 What I Will? 개인 계정 Github Readme 생성 Github 주석 정리 Final Project 잠이 드는 시간 Zzz 잠에 쉽게 들지 못한다면 마음에 안정을 주는 ASMR 듣고 수면 기록도 매일 남겨봐요! zzzapp...

WIL - Weekly, I Learned What I Do? 1/10 1/11 1/12 1/13 1/14 1/15 asmr mix API 설계 DB 정규화 API 변경 Service Worker test 디지털 마케팅 특강 멘토 상담 prettier/eslint 적용 소셜 로그인 구현 요청 변경 요청 변경 Jenkins CI/CD firebase webpush test API Document Jenkins CI/CD What I Learned? clean code - prettier/eslint Restful API git ignore 설정 DB 정규화 .env 활용 postman으로 API 문서 설계 소셜 로그인 - Kakao Webpush - ServiceWorekr / Firebase-admin ..