본문 바로가기

분류 전체보기

 (213)
다수의 github 계정 ssh key로 관리하기 개요 회사 컴퓨터로 회사 계정으로 회사 일을 하고 퇴근 후에는 개인 계정으로 개인 레포에서 작업을 이어 나가고 싶다. 그런데, push, pull을 할 때마다 권한이 없다는 오류가 발생한다. 회사계정으로 클론받은 레포에서 작업하고 push, pull할 때는 회사계정으로 적용되고 개인 계정으로 클론 받은 레포에서 작업하고 push, pull할 때는 개인 계정으로 적용되도록 구현해보자. 방법 1. .ssh 폴더에 ssh 인증키 생성 ssh-keygen -t rsa -C "첫번째계정Email@example.com" -f "첫번째계정ID" userId는 깃헙 id가 아니어도 상관없고 본인이 알아볼 수 있는 것으로 설정한다. 저장경로, 비밀번호는 option이므로 그냥 Enter 키 눌러도 된다. 첫번째계정ID ..
[메가테라 FE 생존코스] 1주차 회고 3L 회고 👍 Liked 개발환경셋팅을 직접 하나씩 설정해보면서 초기 설정 파일들이 어떤 역할을 하는지 제대로 알고 원하는 설정을 커스텀할 수 있는 방법을 배울 수 있어서 좋았다. 퇴근 후 공부시간을 강제로 가질 수 있는 습관을 들일 수 있어서 좋았다. 퇴근 후 모각코에서 사람들과 같이 공부할 수 있어서 더 집중이 잘되어 좋았다. 📘 Learned 하나의 컴퓨터에서 여러개의 ssh키를 생성하여 ssh키에 맞게 github 레포지토리를 계정별로 작업할 수 있도록 세팅하는 방법을 배웠다. 리액트처럼 생각하기, 오버리액트 등 리액트를 만든 개발자들이 작성한 블로그글을 읽으며 리액트를 리액트스럽게 사용하는 방법을 배웠다. 데이터는 상위 컴포넌트에서 하위 컴포넌트로 단방향으로 흘러야 한다. 시간이 지남에 따라 변..
Box Model(박스 모델)이란? 프론트엔드 개발자에게 필요한 스킬 중 CSS는 단연 빼놓을 수 없는 스킬이다. 박스 모델은 CSS의 기초 중의 기초이다. 어떻게 CSS가 적용되는지 이해하기 위해서는 박스 모델에 대한 이해가 있어야 한다. Box Model(박스모델) 이란? CSS를 사용할 때 기억해야할 것은 바로 CSS로 작성하는 모든 것이 박스라는 사실이다. All CSS is Box 박스모델을 모르고 CSS를 작성할 경우, 위 사진과 같이 컨텐츠가 벗어나는 문제를 마주할 수 있게 된다. 위 경우에서 width 속성을 'min-content'로 적용하게 되면 박스 크기를 내부 컨텐츠의 크기만큼 width를 가지게 되어 문제를 해결할 수 있다. 박스모델은 컨텐츠 영역, 패딩 영역, 보더 영역, 마진 영역으로 구성된다. 패딩 박스는 박스..
input 태그 autocomplete(자동완성) 기능 알아보기 input 태그로 코드를 작성하고 사용자가 form 형식에 입력을 할 때, 10자 이상의 텍스트 예를 들면, 이메일이나 패스워드 같은 경우 매번 긴 문자를 입력하는 것이 사용성을 저하시킬 수 있다. 이 때, 자동완성 기능을 사용하면 사용자가 이전에 입력했던 내용을 자동완성 리스트로 제공하여 간편하게 입력이 가능하다. 우선 대부분의 브라우저에서 자동완성 기능은 input 태그의 name 속성을 기반으로 동작한다. 일부 브라우저에서는 id 속성값을 기반으로도 동작하기도 한다. name 속성으로 자동완성 구현 아래 예시처럼 코드를 작성하면, autocomplete 속성을 따로 추가하지 않아도 email을 입력하는 input 태그에 포커스 시 이전에 email input에 입력했던 값 목록이 등장한다. Emai..
[Frontend_Roadmap] DNS 작동원리 DNS, 도메인 네임 시스템은 인간이 식별할 수 있는 도메인 이름으로 IP주소를 찾아주는 시스템이다. 그럼 DNS는 어떻게 IP 주소를 찾아서 브라우저에게 알려주는 것일까? DNS 조회 8단계 사용자가 웹 브라우저에 도메인 이름을 입력하면, 쿼리가 인터넷으로 전달되고 DNS 리커서가 이를 확인합니다. DNS 리커서가 DNS 루트 서버를 쿼리합니다. 루트 서버는 최상위 도메인(TLD) 서버의 주소를 DNS 리커서에게 응답합니다. DNS 리커서가 TLD에 요청을 합니다. TLD 서버가 도메인 이름 서버의 IP 주소로 응답합니다. DNS 리커서가 이를 받아서 도메인 이름 서버로 쿼리를 보냅니다. 이제 도메인 이름이 IP 주소가 이름 서버에서 DNS 리커서에게 반환됩니다. DNS 리커서가 IP 주소를 받아서 웹..
[Frontend_Roadmap] Web Hosting(웹 호스팅) 이란? Web Hosting(웹 호스팅) 이란? 웹 호스팅이란, 웹 사이트 및 웹 애플리케이션을 저장하고 다양한 기기에서 손쉽게 접근할 수 있도록 하는 서비스를 말한다. 웹 사이트는 일반적으로 서버라는 특수한 컴퓨터에 웹 사이트에 필요한 이미지, 동영상 및 코드 등을 여러 파일로 저장하여 구성됩니다. 웹 호스팅 서비스 공급자는 파일을 저장하기 위해 임대할 수 있는 물리적인 서버를 유지 관리하고 구성 및 실행합니다. 뿐만 아니라 웹 호스팅 서비스는 보안, 웹 사이트 백업, 성능 등 추가 지원을 제공하여 고객이 웹 사이트의 핵심 기능에 집중할 수 있도록 합니다. 웹 호스팅이 중요한 이유는? 내부 서버에서 웹 사이트를 호스팅하려면 시간과 비용이 많이 발생합니다. 웹 호스팅 서비스를 이용하면 다음과 같은 장점이 있습..
[Frontend_Roadmap] Domain name이란? 오늘은 Domain Name이 무엇인지에 대해 알아보겠습니다. 도메인 이름이란 무엇입니까? 도메인 이름은 인터넷에서 사용 가능한 모든 웹 서버에 대해 사람이 읽을 수 있는 주소를 제공합니다. 도메인 이름의 구조 TLD (최상위 도메인) TLD는 사용자에게 도메인 이름 뒤에 있는 서비스의 일반적인 목적을 알려줍니다. 가장 일반적인 TLD(.com, .org, .net)는 웹 서비스가 특정 기준을 충족하도록 요구하지 않지만 일부 TLD는 더 엄격한 정책을 시행하므로 목적이 더 명확합니다. 라벨(또는 구성 요소) 라벨은 TLD를 따르는 것입니다. 레이블은 1~63자 길이의 A~Z, 0~9, - 등 대소문자를 구분하지 않는 문자 시퀀스입니다. (예: hello-strange-person-16-how-are-yo..
[Frontend_Roadmap] HTTP/3 A to Z 알아보기 1부: HTTP/3 역사 및 핵심 개념 오늘은 HTTP/3를 파헤쳐보는 시간을 가져보도록 하겠습니다. https://www.smashingmagazine.com/2021/08/http3-core-concepts-part1/#top HTTP/3 From A To Z: Core Concepts — Smashing Magazine What exactly is HTTP/3? Why was it needed so soon after HTTP/2 (which was only finalized in 2015)? How can or should you use it? And especially, how does this improve web performance? Let’s find out. www.smashingmagazine.com HTTP/3 개요 HT..

티스토리툴바