프론트엔드 개발자가 되는 길

her tech trail journey

셀프 터득 개발자로서 코딩을 배우면서 겪은 일들은 정말 롤러코스터 같았어요! 상상해보세요. 기술에 흥미 없는 사람이 프론트엔드 개발 세계에 뛰어들어 HTML과 CSS에 씨름하면서 가이드가 필요했던 모습을요. 어려움이 있었고 도중에 멘토나 동료를 만날 수 없어 어려움에 부딪혔죠. 결국 4개월 동안 쉬어야만 했고 절망에 빠지곤 했어요.

그래도, 걱정 마세요. 이런 평범한 애잔한 이야기가 아니에요! 수학을 좋아하지 않지만 포기하지 않고 끈기를 가졌어요. 불을 꺼지 않게 하기 위해 유데미의 유료 강좌를 구매하고 다시 코딩 세계로 돌아가 새로운 동기부여를 가지고 나서게 되었어요. HTML과 CSS 프로젝트를 다시 시작한 것이었는데, 정말 흥미진진한 여행을 했답니다. 함께 이 잊지 못할 여정을 함께할까요?

HerTechTrail 아카데미

HerTechTrail 아카데미는 아프리카의 여성을 위한 완전히 가상 학습 플랫폼입니다.

나는 3개월 동안 가상 주간 수업을 통해 HTML, CSS 및 JavaScript에 대해 멘토링을 받게 될 Web Developer Starter 부트캠프에 지원했습니다. 부트캠프에서는 우리에게 교육과 멘토링을 제공할 것입니다. 부트캠프를 끝내면 다양한 미니 프로젝트와 포트폴리오 프로젝트를 준비하게 될 것입니다.

무엇을 배웠나요?

부트캠프에서는 중급 수준의 HTML, CSS 및 Javascript을 다루었습니다.

첫 달에는 HTML 요소, 태그, 속성 및 스타일에 대해 배웠어요. 또한 기본적인 HTML 폼, 미디어 및 비디오 임베드, 그리고 접근성에 대해 다뤘습니다.

첫 달과 대부분의 두 번째 달에는 CSS에 초점을 맞췄어요. 몇 가지 프로젝트를 진행해왔지만 언제나 CSS에 어려움을 겪어왔어요. 라이브 수업에서 멘토로부터 배우는 것이 기분이 좋았고 많은 것을 이해할 수 있었어요. 게다가 부트스트랩과 미디어 쿼리를 사용한 반응형에 대해 배웠습니다.

반응형 웹 디자인(RWD)은 웹 페이지가 모든 화면 크기와 해상도에서 잘 렌더링되어 사용성을 향상시킵니다. 이 웹 개발 측면은 웹 페이지 사용자의 다양한 화면 크기에 맞추어져 중요합니다.

지난 달에는 JavaScript에 집중했어요. 이것이 제가 처음 접한 프로그래밍 언어였는데, 도전적이었어요. JavaScript를 사용하면 웹 페이지에서 시기적절한 콘텐츠 업데이트, 대화식 지도, 다양한 그래픽 요소 등 복잡한 기능을 구현할 수 있어요.

전반적으로, 수업은 다양한 주제를 다루었고, 배운 기술들은 제 포트폴리오를 만들기에 충분해요.

새로 배운 것은 무엇인가요?

세부 수업을 통해 HTML 기술을 향상할 수 있었어요. 다양한 스타일과 태그에 대해 더 잘 이해하고, 웹 페이지에서 적절하게 반응형을 구현하는 방법을 배웠어요.

CSS에 대해 이야기할 때는 미디어 쿼리를 사용한 반응형 디자인에 집중했어요. 다양한 화면으로 연습하면서 이 측면에서 능숙해졌답니다. 때로는 CSS 스타일링이 어려웠지만, 어려움을 겪을 때 Bootstrap을 활용해 도움을 받아왔어요. Bootstrap은 스타일링의 부담을 덜어주는 많은 기능을 갖춘 가치 있는 도구라고 생각해요.

자바스크립트가 가진 도전에도 불구하고, 이를 배우면서 내 창의적인 면을 발휘할 수 있었어요. 이제는 자주 사용하거나 마주치는 일상 앱의 프로그래밍 흐름에 대해 이야기하게 되었어요. 예를 들어, 슈퍼마켓 계산대가 어떻게 작동하는지 설명하고, 중첩된 루프와 if, else if와 같은 조건문을 결합하여 앱을 만드는 방법에 대해 살펴보았어요.

Git과 버전 관리를 처음 접했을 때는 새로웠지만, 중요성을 즉시 깨달았어요. GitHub를 자주 사용하지만, 버전 관리에 대해 완전히 이해하지 못해 파일을 직접 플랫폼에 업로드해왔죠. Git과 버전 관리 수업은 전체 부트캠프의 정점이었는데, 포트폴리오 프로젝트를 위해 이를 활용해야 했어요.

다음 단계는 무엇일까요? 어떻게 더 나은 개발자가 될 수 있을까요?

연습! 연습!! 연습!! 연습하면 나는 더 나아질 수 있어요. 저는 주니어 레벨 프론트엔드 개발자로 성장했고, 일관된 연습과 웹 앱 구축으로만 더 나아질 수 있어요.

올해 두 번째 반기에는 내 기술을 숙달하고 반응형 웹 앱을 만들기 위해 시간을 보낼 계획이에요.

더불어 React.js를 배워 인턴십에 지원할 예정이에요.

15 Days of Code

HerTechTrail Academy의 이 프로젝트는 수업에서 배운 내용을 연습하는 뛰어난 방법이었어요. 15일 동안 다양한 웹 앱을 구축, 스타일링, 배포하는 것은 정말 도전적이었죠. 저는 그 당시 JavaScript를 잘 몰라서 스타터 트랙을 선택했어요. 이 경로는 제 HTML과 CSS 스킬을 크게 시험했고, 저는 다음과 같은 웹 페이지를 만들었어요:

1일~5일: HTML과 CSS를 사용하여 정적 페이지를 만들었어요. HerTechTrail Academy의 가입 페이지를 디자인하고 스타일링하여 반응성을 구현했죠. 마지막으로 CodePen을 통해 배포했어요.

6일~10일: 사용자 정의 404 페이지를 만들었어요. HTML과 CSS를 사용하여 404 오류 페이지를 디자인하고 스타일링하여 모든 기기에서 완벽한 반응성을 보장했죠. 마지막으로 GitHub Pages에 호스팅했어요.

11일~15일: 간단하고 반응성 있는 랜딩 페이지를 만들었어요. 수염 성장 회사를 위한 랜딩 페이지를 디자인하고 스타일링하여 반응성을 구현하고 GitHub Pages에 호스팅했어요.

이 도전 과제는 포트폴리오 프로젝트를 준비하는 데 도움이 되었습니다. 스타일링과 반응 형에 대해 더 많이 배웠기 때문에 더 의심스러워지지 않았어요.

포트폴리오 프로젝트

홈, 연락처, 소개, 포트폴리오 페이지를 포함한 멀티 페이지 포트폴리오 웹 앱을 작성해야 합니다.

홈 페이지는 나에 대한 요약을 담은 간단한 랜딩 페이지가 될 것입니다. 그 내용에는 내가 사용하는 프로그래밍 언어가 포함됩니다. 다른 페이지로 이동하는 메뉴 바도 포함될 것입니다.

About 페이지는 웹 개발자로서의 여정을 다루며, 주요 이정표를 강조하고 제가 개발한 웹 앱 샘플을 소개할 것입니다.

Contact 페이지는 저의 연락처 정보를 표시하고, 이메일로 연락하고자 하는 사람들을 위한 간단한 양식을 포함할 것입니다.

Portfolio 페이지는 내가 참여한 모든 프로젝트를 전시하고, 그것에 대한 외부 링크를 제공할 것입니다.

개발 과정에서 홈페이지의 배경 이미지를 변경하는 것과 같은 어려움을 겪었습니다. 그러나 Pesticide 익스텐션과 Chrome 검사 도구의 도움을 받아 이를 극복했습니다. HTML Pesticide를 활용하여 코드를 디버깅하고 배경 이미지를 올바르게 스타일링했습니다.

또한, 제 웹 사이트의 모바일 반응성을 테스트하면서 1px의 중요성을 발견하면서 작은 세부 사항에 주의를 기울이는 것이 중요하다는 것을 배웠습니다. 저는 레드미와 삼성 두 안드로이드 기기에서 웹 사이트를 테스트했습니다. 먼저, 삼성 기기에서는 반응성이 있었지만 레드미에서는 그렇지 않았습니다. 미디어 쿼리에 픽셀을 추가한 후, 반응성 문제가 해결되었습니다.

제 포트폴리오 링크는 아래에서 확인할 수 있습니다.

멘토로부터의 조언과 교정, 그리고 HerTechTrail Academy의 소중한 기회와 코치 Magdalene Edozie와 Broma Elenwo의 지원에 감사드립니다.