독학 개발자의 기록

나는 영상 제작에 취미를 가지고 있다. 촬영한 영상들을 한 페이지에 나타낼 수 있는 페이지를 만들 계획을 갖고 있었고, 새해가 된 기념으로 이번 기회에 프로젝트를 만들기 시작했다. 우선, 기본적인 구현 목록은 다음처럼 계획하였다. 각 카테고리 별 동영상 출력하기 각 동영상을 이미지 버튼으로 실행할 수 있도록 구현하기 해당 동영상의 이미지 버튼을 클릭하면 모달창으로 동영상 실행하기 위의 구현 내용을 테스트 이미지와 동영상 파일을 활용해 최적화를 고려하지 않은 채 구현까지는 성공했다. 구현을 성공했으니, 최적화 전에 실제로 사용할 이미지 파일들과 동영상 파일들을 사용해야 했다. 문제 원인 모든 파일들을 용량 최적화를 진행하고 나서, 프로젝트에 추가했다. 이미지 파일들은 동영상보다 용량이 작았기 때문에 프로젝..

⤴ 문구 부분에서는 비교적 중요도가 낮은 글은 톤을 낮춰 불필요한 시선 처리에 기준을 잡아준다. 버튼 부분에서는 중요도에 따른 버튼은 컬러로 계층을 잡아준다. ⤴ 각각의 사이에 여백을 활용하여 코너 간 계층을 잡고 그룹핑을 한다. 중요도에 따른 버튼은 컬러로 계층을 잡아준다. ⤴ 영역이 넓어지지만 직관적인 버튼형으로 각각의 내용을 명확하게 디자인한다. ⤴ 사용자의 시선을 강제하지 않도록 BG 컬러를 약하게 처리하여 디자인한다. ⤴ 과감하게 컬러를 사용해 채팅창과 버튼을 명확하게 구분 지어 디자인한다.

컴포넌트는 무엇일까? 쉽게 말하면, '구성 요소'이다. 레고 블록일 수도 있고, UI 단위일 수도 있다. 조금 어렵게 말하면, 여러 요소들을 모아 짜내어 이룬다고 말할 수 있다. 그렇다면, 웹에서는 무엇일까? 하나의 페이지가 될 수도 있고, 페이지 속 하나의 구성요소가 될 수 있다. 웹 컴포넌트는 그 기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음이다. 웹 컴포넌트는 웹 페이지 및 웹 앱에서 커스텀, 재사용 가능한, 캡슐화 HTML 태그를 생성할 수 있는 API이다. 커스텀 컴포넌트 및 위젯은 웹 위젯은 웹 컴포넌트 요소 표준을 기반으로 최신 브라우저에서 작동하며 HTML과 함께 작동하는 컴포넌트는 무엇이 있을까? Co..

브라우저의 검색창에 '구글'을 검색하면 어떤 일이 일어날까? 첫 번째 단계 우선, '구글'을 브라우저 검색창에서 검색한다. 두 번째 단계 브라우저는 캐싱된 DNS 기록으로 IP를 체크한다. DNS은 URL들의 이름과 IP 주소를 저장하고 있는 데이터베이스인데, 인터넷에 있는 URL은 고유의 IP 주소를 가지고 있고 이 주소를 확인하기 위해 터미널에서 nslookup www.google.com 을 검색하면 해당 IP 주소를 확인할 수 있다. DNS의 가장 큰 목적은 URL 검색을 쉽게 하기 위한 것이며, 숫자로 검색할 수 있지만 번거롭기 때문에 문자로 쉽게 검색할 수 있도록 도와준다. 이처럼, DNS는 사람들이 웹에서 접속하기 쉽게 하는 맵핑하는 역할을 해준다. 그래서 검색을 하면 무슨 일이 일어날까? 1..

프론트엔드 개발을 할 때, 유저 인터페이스(UI)에 대해 잘 이해하고 숙지해야 한다. 디자이너와 소통하며 그들을 이해하고, 스스로 제품과 서비스의 사용성을 개선하기 위해 UI 요소들에 대해 배워야 한다. 32가지 유저 인터페이스 유저 인터페이스(UI)는 앱, 웹 사이트를 만들 때 사용하는 요소 중 하나이다. UI는 버튼, 스크롤바, 메뉴, 체크박스 등 맥락에 맞는 요소를 사용하여 사용자와 화면 간 상호작용을 더함으로써 사용자가 더 쉽고 직관적으로 인터페이스를 이용할 수 있도록 돕는다. UI 요소를 사용하여 제품의 시각적 일관성을 유지함으로써 유저가 고민하지 않고도 쉽게 제품을 사용할 수 있도록 돕는 유저-친화적인 인터페이스를 만들 수 있게 된다. 유저 인터페이스의 요소들 유저 인터페이스는 보통 네 가지 ..

Pull Request를 통해 협업을 할 수 있는 방법을 학습했다. Pull Request를 올리고 난 후 조금 더 작업을 진행할 수도 있을 것이다. 이런 상황에서 충돌이 발생할 수 있다. Pull Request를 올린 상황에서 발생하는 충돌(Conflict)를 해결할 수 있는 방법은 무엇일까? Pull Request에서 발생한 Conflict 코드를 작업하면서 발생했던 충돌(Conflict)들이 Pull Ruquest에서도 발생할 수 있다. 바로 같은 파일을 수정한 2개의 브랜치가 순서대로 Merge되는 상황에서 발생한다. 앞에서 예시로 들었던 김왼손씨와 이오른씨의 개발 과정을 다시 한 번 예시로 들어보자. 김왼손씨가 a.py를 수정하고 "left"라는 브랜치에 Push를 한 후 Pull Request..

협업을 위해 여러 기능 및 명령어를 지금까지 학습했다. Commit을 통해 버전 관리를 하는 방법을 배웠고, Branch를 통해 새로운 기능 구현이나 Debug 시 독립된 환경에서 작업을 진행하는 방법을 배웠다. 이번 시간에는 내가 적용한 코드를 바로 원격 저장소에 올리기 전 팀원들과 이야기를 나눌 수 있는 방법을 학습하려고 한다. 조금 더 완성된 프로젝트를 만들 수 있고 다른 팀원들과 이야기를 나눌 수 있는 기능인 "Pull Request"에 대해 학습하기로 하자. Pull Request 프로그램을 개발하고 반영하는 일련의 과정들을 겪으면서, 개발을 할 준비가 된 것 같을 때, "Master Branch"에 질서 정연하게 "Push"만 하면 될까? 본인이 만든 내용들이 잘 작동하지 않거나 한 번 검토가..

지금까지 협업 시, Git을 어떻게 활용할 수 있는지 예시 상황으로 확인할 수 있었다. 이번에는 협업 시 Git을 활용할 때, 충돌나는 상황에 대해 학습하려고 한다. 아무래도 여러 사람이 작업을 하는 공간이다 보니 사람마다 버전이 다를 수 있고, 현재 원격 저장소에 올라와 있는 버전과 나의 로컬의 버전이 달라졌을지도 모른다. 충돌나는 상황을 잘 해결만 할 수 있다면 수월하게 작업을 할 수 있을 것이다. Conflict 협업을 진행하다 보면, 완벽하게 중복을 피할 수 있을까? 생각해보면 앞에서 학습한 방식들이 중복을 근본적으로 피하게 해주지는 않는다. 결국 "같은 파일의 같은 줄"을 수정했다면 충돌은 피할 수 없을 것이다. 이 때, 어떻게 하면 충돌을 해결할 수 있을까? 원격 저장소의 내용을 내려 받았을 ..