저는 웹 프론트엔드를 공부 중이지만, 모바일 퍼스트 뷰에 PWA가 기본 세팅일 정도로 모바일 앱 개발에 관심이 많았습니다. 리액트 네이티브나 플러터를 공부할까 고민하던 차에 Do it! 안드로이드 앱 프로그래밍 with 코틀린 서평 모집글을 보고 바로 신청했습니다.  사실 안드로이드 스튜디오는 예전에 잠깐 써보았는데, 너무 무겁고 복잡하고, 차지하는 용량도 커서 좋은 기억이 없었습니다. 안드로이드 스튜디오를 기대했던 모바일 프로그래밍 강의(다른 과 전공이긴 했움 우리 과 강의 아님)에서도 앱 인벤터를 가르치길래 바로 도망쳤던 기억이 있고...안드로이드 스튜디오는 나와 인연이 아닌가 싶어 포기하고 살았지만 이번 기회에 제대로 배워볼 수 있으면 좋겠다고 생각했습니다. 책을 받자마자 너무 놀랐습니다. 상상을 ..

프론트엔드 작업을 하면서 가장 스트레스 받는 것은 개발하면 할 수록 점점 누더기 같아지는 프로젝트 구조인 것 같습니다. 특히, 남이 작업하던 프로젝트를 받아서 하면, 어느새 어디서 중복되고 있는지도 모르겠는 코드들과 너덜너덜해진  css 속에서 허우적대는 기분입니다. 투두리스트를 만들 때만 해도 행복했던 나...하지만 점점 규모가 큰 프로젝트를 하게 되면서 구조가 엉망이 되는 경험을 너무 많이 하게 되었습니다. 처음에는 분명 작은 컴포넌트 몇개로 시작했는데, 기능이 추가될수록 코드가 뒤엉키는게 온 몸으로 느껴집니다. 유지보수가 어려워지고, 새 기능을 추가하려면 어디부터 건드려야하는지 감이 잡히지 않는 상황도 발생합니다. 특히 여려명이 협업하는 프로젝트에서는 코드 스타일도 다르고, 컴포넌트 재사용성도 낮아..

Git의 비밀을 풀어보자: HEAD씨의 기묘한 모험Git을 사용하다 보면 "HEAD"라는 것을 종종 보게 됩니다. 커밋 히스토리를 살펴보거나, 브랜치를 생성할 때 등장하는 HEAD. 도대체 뭘 의미하는건지 그 정체가 궁금하신 분도 계실겁니다. 이번 포스팅에서는 HEAD의 본질을 그림과 시나리오로 설명해보려고 합니다.😎1. HEAD씨의 첫 걸음, main 브랜치HEAD씨가 Git 세상에 첫 발을 내디뎠습니다. 어쩌다보니 물 위에서 스폰된 HEAD씨를 위해, 발판을 만들어줍시다. 발판은 커밋을 통해 만들 수 있습니다.  새로운 커밋이 생성될 때마다 HEAD 씨가 있는 브랜치에 발판이 추가됩니다. 💡정리브랜치만 있으면 아무것도 할 수 없습니다. commit을 통해 브랜치에 새로운 정보를 입력할 수 있습니다..

저의 첫 웹 프로그래밍 경험은 20살, 대학생 1학년 때였습니다. 당시에는 웹 프로그래밍에 별로 흥미를 느끼지 못했습니다. 입력하는 족족 브라우저에 반영되는 것이 신기하긴 했다만, 그뿐이었고 오히려 margin이니 padding이니 하나하나 설정해주어야 하는게 너무 귀찮았습니다. 더욱이 기말 프로젝트에서 미디어 쿼리 기반 반응형을 구현하면서 질려버렸고, 휴학하고 복학하여  3학년이 될 때까지 html, css는 쳐다도 보지 않았습니다.고등학생 때부터 게임 개발자가 꿈이었기에 웹 프로그래밍은 쳐다도 안봤고, 게임 개발자 꿈을 접고 인공지능을 공부할 때 까지만 해도 웹 프로그래밍은 안중에도 없었습니다만..어쩌다보니 지금은 프론트엔드 개발자를 준비하고 있습니다. 3년전과는 다르게 이제는 CSS가 제일 재미있는..

Git이란?Git은 버전 관리 시스템(VSC, Version Control System)의 일종입니다. 파일 변화를 시간에 따라 기록하여, 나중에 특정 시점의 버전을 다시 불러올 수 있게 하는 시스템이죠. 소프트웨어 개발에서 코드의 변경 사항을 추적하고 관리하는데 사용합니다. Git, 왜 필요할까?소프트웨어 개발은 복잡하고 동적인 과정입니다. 혼자 개발할때도 계속해서 코드를 수정하고, 저장하는데 이런 작업을 여러명의 개발자가 동시에 진행하면 어떻게 될까요? 예시를 통해서 확인해봅시다. 개발자 A와 B가 동시에 하나의 프로젝트를 진행하고 있어요. 각자 다른 기능을 개발하고, 하나로 합치려고 합니다. A는 개발한 코드를 B에서 압축해서 전달하고, B는 전달받은 파일을 확인한 후 수정 요구 사항을 다시 파일로..

프로젝트를 인수인계 받아서 작업 중인데, 작업 목록 중 이미지 수정 시 무한 렌더링 오류 발생 항목이 있었다. 이전부터 오류를 인지하고는 있었는데, 어떤 조건으로 발생하는 오류인지, 원인이 뭔지는 모른다고 하셨다. 내가 작업하기로 하여 일단 조건부터 찾아보려고 하였는데 찾을 것도 없이 이미지 수정만 하면 무조건 발생하는 오류였다. 오류 로그를 보니 useEffect 활용 관련해서 문제가 발생하는 같았다. 그런데 오류 발생 코드에 useEffect가 5개 이상 선언되어 있어서 찾기 너무 어려웠고..모든 useEffect 내에서 콘솔을 찍어 문제를 유발하는 useEffect를 찾아내었다.  콘솔을 찍어보니 문제 발생 컴포넌트에서 무한 렌더링 되어 일정 스택을 찍으면 아래 오류 메시지가 출력되는 구조였다. (..