Tech Note

잘하는 프론트엔드 개발자란 무엇일까요? 최근 프론트엔드 개발을 진행하면서 들었던 생각을 간략하게 정리해보았습니다. 아래 조건들이 잘하는 프론트엔드 개발자가 되기 위해 집중해야 할 전부라고는 할 수 없겠지만, 실력 있는 프론트엔드 개발자라면 아래 역량을 모두 갖추고 있을 것이라고 생각합니다. 미려한 사용자 경험을 전달하는 역량 빠른 속도로 구현하는 역량 협업할 수 있는 역량 1. 미려한 사용자 경험을 전달하기 '미려하다'는 ''아름답고 보기에 매우 좋다'는 뜻의 우리 말입니다. 조금은 모호한 편이라고 할 수 있지만, 세분화해보면 아래와 같을 것입니다. 사용자가 느끼기에 화면이 아름답고 조작이 편할 것 (UI/UX) 성능 상 이슈가 없도록 구현할 것 웹 접근성을 고려하여 ..

TL;DR 닌자 코드 패턴의 존재를 알았고, 안티 닌자 패턴으로 기존 코드(ownroom.link)를 개선해보고 싶었습니다. 첫 진입점인 Home컴포넌트에서 banner +1,2,3,4,5로 무분별한 네이밍을 발견했습니다 이 부분이 문제인 줄 알았는데요, 진정한 닌자 코드는 따로 있었습니다! 컨테이너가 너무 많은 역할을 맡았습니다. 기존의 Container & absolute 방식 대신, 플러터에서 아이디어를 얻어 컴포넌트 위치를 체계화시켰습니다. 최근 들어 사이드 프로젝트가 하고 싶어졌습니다. 그런데 막상 무언가를 하려고 보니 어떤 걸 새로 만드는 것보다 만들어 둔 것을 일단 다듬고 코딩 스타일을 가다듬는 것이 제 실력 향상에 도움이 될 것이라는 판단이 들었습니다. 좋은 코드와 나쁜 코드의 기준은 이전..

들어가며 인테리어 컨설팅 중개 플랫폼 온룸을 개발하면서 가장 처음 부딛친 난관은, "어떻게 화면을 구성할 것인가" 였다. 그 말은 무슨 뜻이냐면, 디자이너의 요구사항을 어떤 식으로 충족시킬 것인지와 같은 말이다. 디자이너의 작업 결과물 디자인 팀에서 내게 넘겨준 작업 결과물은 두 가지로, Figma에 Zeplin을 연동하여 볼 수 있도록 작업해서 넘겨줬다. position:absolute Eng 위치:절대 {"mean":["","오픈","","예제","","VLIVE 자막"],"word":"positionabsolute","basicWord":"positionabsolute","soundWord":"positionabsolute","phoneticSymbol":""} Figma로 전체 화면 구조를 한 눈..