두 웹 사이트의 이야기

느린 진행과 자기 반성의 중요성

Unsplash에 Tanya Nevidoma의 사진

"저는 코딩을 배우기 때문에 웹 사이트로 만들 수 있다고 생각하십니까?"

우리 모두 전에이 질문을 들었을 것입니다. 그것은 웹 개발자라는 영역과 함께 제공됩니다. 2016 년 3 월에 처음 들어 본 적이 있습니다. 제 아내는 UI / UX 분야를 개척하려는 그래픽 디자이너였습니다. 그녀는 자신의 기술을 온라인 포트폴리오에 표시하고 싶었습니다.

그 시점에서 3 개월 동안 만 웹 개발을 배우고있었습니다 (새해 결심으로 시작했습니다). 나는 HTML, CSS 및 JavaScript 과정을 마쳤고 이빨을 육즙이 많은 프로젝트에 파고 드는 것이 염려되었다.

“그렇습니다. 당신을 위해 그렇게 할 수 있습니다. 너무 오래 걸리지 않아야합니다. "

4 개월이 걸렸습니다.

나는 너무 많은 물린 것을 매우 빨리 깨달았습니다. 그러나 내가 순진한 동안 나는 또한 결심했다. 나는 그 웹 사이트에 내가 가진 모든 것을 넣었다. 직장에서 일하지 않았을 때 나는 스택 오버플로를 코딩하거나 검색하고있었습니다.

대부분 스택 오버플로를 검색합니다.

프로젝트로 인한 스트레스와 긴장에도 불구하고 브라우저에서 처음으로 라이브를 보았을 때 더 자랑스러워 할 수 없었습니다.

그것은 나의 일이었다. 나는 그것을했다.

아내는 새 웹 사이트를 사용하여 뉴욕시에서 UX 디자이너 역할을 할 수있었습니다. 우리는 우리 일을 그만두고 시애틀에서 이사를했습니다. 이것은 프로그래밍에 대한 나의 머리 우선 다이빙의 시작을 표시했다.

2 년 후

"내 웹 사이트를 업데이트 할 수 있다고 생각하십니까?"

2018 년 6 월이었고 상당히 몇 가지가 변경되었습니다. 그 짧은 2 년 동안, 제 아내는 UX 디자이너에서 제품 디자이너로, 스타트 업의 리더로 디자인했습니다. 그녀는 그 성장을 반영하기 위해 새로운 업데이트를 원했습니다.

“그렇습니다. 그렇게 할 수 있습니다.”

가능한 한 자신감있게 들리려고했지만 주저했습니다. 그녀의 웹 사이트를 처음 만드는 데 시간이 얼마나 걸 렸는지 기억했습니다. 나는 두 번째 시합에 대한 지구력과 정신적 체력이 있는지 확신하지 못했습니다. 그것은 나를 지쳤다.

이전 코드를 파고 들었을 때 자신감이 더 흔들 렸습니다. 나는 2 년 동안 그것을 보지 않았다. 나이가 많지 않았습니다. UI가 여전히 작동하고 좋아 보였지만 프론트 엔드는 엉망이었습니다. 마치 덕트 테이프로 묶여있는 것처럼 보였습니다.

“코드 냄새”의 관점에서 볼 때, 그것은 쓰레기통 화재와 비슷합니다.

아내는 업데이트 만 원했지만 해당 코드베이스를 탐색하는 것은 힘들었습니다. 처음부터 시작하는 것이 더 쉬울 것입니다. 새로 시작한다는 생각에 감격하지 않았습니다. 그러나 지난 몇 년 동안 아내가 많이 자랐지 만 나도 그랬습니다. 나는 내가 배운 양에 대해 생각해 볼 수있는 기회로 생각했다.

신선한 시작

아내의 새 웹 사이트를 구축하기 시작한 첫 날에 3 개월이 걸리지 않을 것이라는 것을 알았습니다. 나는 그 첫 주에 일주일 전보다 더 많은 일을 할 수있었습니다. 결국 업데이트를 마치는 데 약 1 주일이 걸렸습니다.

여기에서 볼 수 있습니다 : irissprague.co

irissprague.co

얼마나 빨리 구축 할 수 있었는지에 대해 깊은 인상을 받았지만, 왜 그렇게 빠른지 정확히 알지 못했습니다. 물론, 나는 2 년 더 벨트를 가지고 있었지만 그 2 년 동안 정확히 무엇을 배웠습니까?

활용 도구

가장 먼저 눈에 띄는 것은 도구를 활용할 수있는 능력이었습니다. 2 년 전에 오픈 소스 도구에 대해서는 거의 알지 못했습니다. 아내의 첫 번째 웹 사이트는 원시 HTML, CSS, JavaScript 및 PHP를 사용하여 제작되었습니다. 그 자체로는 나쁘지는 않지만 뷰 템플릿 개념이 없었습니다.

각 HTML 파일을 처음부터 작성했습니다. 일관성을 유지하기 위해 반복되는 요소를 모두 복사했습니다. 불행하게도, 한 페이지를 바꾸는 것은 여러 페이지를 바꾸는 것을 의미했습니다.

두 번째 시도에서 HAML 템플릿과 Flexbox를 사용하여 복사 및 디버깅 시간을 모두 피했습니다.

감사합니다 Flexbox

빌드 프로세스 자동화

첫 번째 웹 사이트를 구축하는 데 오랜 시간이 걸리는 또 다른 이유는 빌드 프로세스 개념이 없기 때문입니다. 저는 3 개월 동안 아내의 첫 번째 포트폴리오 사이트를 구축하고 있었으며 모든 것을 컴퓨터에서 로컬로 수행했습니다.

내가 큰 변화를 만들 때마다, 나는 내 랩탑의 변화를 면밀히 조사하기 위해 아내를 괴롭혀야 할 것입니다. 그것이 나쁘지 않은 경우, 변경 사항을 프로덕션 서버로 푸시해야 할 시점이되었을 때 시작해야 할 부분이 없었습니다.

웹 사이트를 운영하는 데 집중하여 인터넷에 어떻게 접근 할 것인지조차 고려하지 않았습니다. DigitalOcean, Docker 또는 Heroku에 대해 들어 본 적이 없습니다.

내가 아는 유일한 호스팅 서비스는 Godaddy였습니다. Godaddy는 cPanel을 사용하여 파일을 서버 자체에 업로드합니다. 불행히도 cPanel은 한 번에 하나의 파일 만 업로드 할 수있었습니다.

몇 시간이 걸렸습니다. 자산을 변경해야 할 때마다 편집 한 파일을 수동으로 다시 업로드해야합니다.

그 실수가 기억에 불타면서 빌드 프로세스를 개선하는 데 투자했습니다. Docker Compose를 사용하여 CI / CD 워크 플로우를 자동화했습니다. 하나의 docker-compose up -d 명령으로 전체 사이트를 프로덕션에 배포 할 수 있습니다.

심지어 작은 bash 스크립트를 만들어서 Git과 Docker 명령을 일괄 처리했습니다.

내가 한 모든 변경 사항은 1 분 이내에 진행될 수 있습니다. cPanel은 과거의 일이었습니다.

또한 아내가 변경 한 내용을 볼 수 있도록 DigitalOcean Droplet을 사용했습니다. Droplet의 IP 주소를 방문하여 자신의 컴퓨터에서 수정 사항을 볼 수있었습니다. 더 이상 로컬 전용 개발이 없습니다.

아내와 저는 또한 디자인-개발 파이프 라인을 개선했습니다. 2016 년에 디자인은 주로 Photoshop과 구두 신호를 통해 이루어졌습니다.

“이것을 바꿀 수 있습니까? 추가 할 수 있습니까?”

우리 둘 다 그것을 즐기지 않았습니다.

이번에는 아내와 함께 Invision을 사용하여 협업했습니다. 그녀의 디자인 변화를 실시간으로보고 몇 분 안에 구현할 수있었습니다.

최고의 파워 커플 링.

개선 된 문제 해결

놀랍지는 않지만 지난 2 년 동안 저는 더 빠르고 더 나은 프로그래머가되었습니다. 그러나 가장 중요한 개선은 내 문제 해결 능력이었습니다.

CSS로 그리드를 만들거나 JavaScript로 이미지 슬라이드 쇼를 만드는 방법을 찾을 필요가 없었습니다. 나는 그 문제를 스스로 해결하는 데 필요한 도구와 기초를 가지고있었습니다. 내가 겪은 모든 문제를 인터넷으로 검색하는 데 더 많은 시간을 할애 할 수있었습니다.

또한 적은 비용으로 더 많은 것을하는 방법을 알고있었습니다. 내 첫 사이트에는 가장 간단한 애니메이션을 수행하기 위해 수백 줄의 JavaScript가있었습니다. 새 사이트에는 70 줄만 있습니다. CSS 전환과 키 프레임이 나머지를 처리합니다.

JavaScript보다 CSS를 우선시하면 DOM 페인팅을 줄임으로써 각 페이지의 성능이 향상됩니다. 그러나 그것이 내가 만든 유일한 최적화는 아니 었습니다.

최적화

2 년 전에는 공연 웹 사이트를 만드는 방법을 몰랐으며 신경 쓰지 않았습니다. 나는 그 빌어 먹을 일을 원했다. 이제 기본 사항을 이해하고 더 높은 추상화 수준으로 생각했기 때문에 더 큰 문제를 해결하는 데 집중할 수있었습니다. 즉, 성능 및 사용자 경험.

정적 파일을 컴파일하고 DigitalOcean CDN을 통해 제공하고 브라우저에서이를 캐싱하여 업데이트 된 사이트를 빠른 속도로로드 할 수 있습니다.

Pingdom의 성능 등급

2016 년에 그 이전 문장은 나에게 횡설수설처럼 보였을 것입니다. 시간이 어떻게 변했는지

배운 내용을 알아볼 시간을 가지십시오

왜 내가이 모든 것을 말하는가? 내 자신의 뿔을 ot 는가? 아마도 조금.

진짜 이유는, 나는 자기 반성의 중요성을 강조하고 싶습니다. 나는 얼마나 많이 자랐는지 알지 못했기 때문에 아내의 사이트를 업데이트하는 것을 주저했습니다. 매일 진행하는 금액을 확인하기는 어렵습니다.

지식은 인치 단위로 축적됩니다. 그러나 오랜 시간을 되돌아 보면 그 인치는 도약과 한계가됩니다. 일본 문화에서, 작은 일일 개선에 대한이 아이디어는“kaizen”으로 알려져 있습니다.

저에게는 경력이 시작된 시점을 기억하는 것이 중요합니다. 내 진화를 시각화하면 내가 고원에 부딪 칠 때 동기가 유지됩니다. 썰물과 흐름은 불가피합니다. 한 번에 1 인치 씩 커밋하는 것이 목표를 향해 나아가는 방법입니다.

따라서 숙달에 대한 경의를 표하고 제 뿌리를 기억하면서 아내의 첫 번째 사이트는 제 개인 웹 사이트의 하위 도메인으로 유지됩니다. kaizen.sunli.co에서 직접 확인할 수 있습니다.

나는 숙달로가는 느린 길의 중요성을 가르쳐 준 Launch School에 특별한 소리를 지르고 싶다. 계속 추구하는 목표입니다.

그리고 아내 Iris Sprague에게 또 다른 외침이 들렸습니다.

따라서 10 개월, 10 년 또는 그 이상을 프로그래밍 한 경험이 있더라도 학습 한 내용에 대해 생각해보십시오. 시간이 느릴 때 연료로 사용하십시오. 숙달로가는 느린 길에 투자하면 결과가 복잡해졌습니다. 처음에는 점진적이지만 시간이 충분하면 로켓처럼 치 솟을 것입니다.

이 기사가 당신에게 반향을 불러 일으켰다면 박수를 하고 자신의 경력에서 어떻게 성장했는지 알려주십시오. 나는 그것에 대해 듣고 싶습니다!

언제나처럼, 행복한 코딩!