Develop

항해99의 커리큘럼도 이제 종막을 향해 나아가고 있다. 처음 항해를 시작할 때의 나를 돌아보면 VS Code를 처음 사용하며 신기해하고 HTML 태그만을 이용해서 정적인 페이지를 만들고 자바스크립트를 통해 간단하게 움직이는 페이지를 만들고 기뻐하던 순간들이 떠오른다. 아직은 갈길이 멀게 느껴지지만 확실하게 두달 전의 나와는 다른 사람이 되었음을 느낀다. 어느정도 자신감도 생기고 시간만 충분하다면 뭐든지 할 수 있을 것 같은 기분이다. 함께 수강중인 동료들과 많은 선배들과 멘토분들이 도와주신 덕분이다. 독학했다면 겪어보지 못할 협업 과정을 통해 많은 것을 배우고 있다. 프론트 엔드 개발자라고 내 주특기인 리액트만 공부해서는 소통을 할 수 없다는 것을 깨닳는다. 최소한 API를 호출하면 어떤 일이 벌어지는지..

리액트 주특기를 학습하기 시작하고 첫 협업 프로젝트를 하게 되었다. 백엔드 팀과 프론트 엔드 팀으로 나뉘어 하나의 웹 앱을 만들어 내는 일로 기획부터 함께 진행하게 되었다. 다들 직장인이기 때문에 아주 복잡한 앱은 만들 수 없어서 간단한 앱을 구상하게되었다. 복잡한 앱을 만들어내는 것보다 납기(2주)내에 완성을 시키는 것이 중요하다고 하여 스코프는 크게 잡지 않았다. 우리가 기획한 앱은 릴레이 동화 프로젝트였다. 불특정 다수의 인원이 한줄씩 이어서 작정해서 동화를 이어나가는 기능을 구상했다. 필요한 기능은 회원가입, 로그인, 첫 동화 게시글 작성 기능, 이어쓰기 기능이 기본적으로 필요했고 이어서 서버에 저장된 데이터를 받아와서 화면에 뿌려주는 기능이 필요하다. 사이드 기능으로 글과 이어쓴 문장에 좋아요를..

문제 숫자를 넣었을 때, 3자리 수마다 콤마 ','가 찍히는 input을 구현하는 중에 느닷없는 도전과제가 발생했다. 일반적으로 사용하는 수는 16자리 이내이기 때문에 아래의 코드로도 충분히 동작하지만 아래 코드는 치명적인 문제가 하나 있었다. 입력된 숫자의 길이가 16을 넘어가면 값이 뭉개지는 문제가 있다. 지수형 값으로 변환되어 발생하는 것으로 예를 들어 “1234567890123456789” 라는 숫자를 입력한 경우 “1,234,567,890,123,457,000”로 출력된다. // 값이 변경되면 저장하는 함수, 천단위마다 ','를 입력함 const priceChangeHandler = function (event) { let inputPrice = event.target.value.replace(..

드디어 주특기 입문 주차에 진입했다. 그동안 배운 것은 모두 이번 주를 위한 준비엿다. 드디어 리액트라고하는 주특기의 상자를 열어보는 날이 찾아온 것이다. 리액트는 메타(구 페이스북)에서 설계한 오픈 소스 JavaScript 라이브러리입니다. UI, UI 구성요소를 구축하는데 사용됩니다. SPA(Single Page Application) 아키텍쳐 한 개의 페이지로 이루어진 애플리케이션으로 MPA(Multi Page Application)과는 상반된 개념입니다. 리액트는 SPA 기반의 프론트엔드 개발 프레임워크 중 하나로써 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용합니다. SPA의 장점과 단점 SPA는 많은 장점을 가지고 있습니다. 대표적인 장점은 다음과 같습니다. 빠른 사용자 경험: SP..