김도리의 개발자로서 성장기

Component 클래스 혹은 함수로 정의할 수 있다. 리액트로 작성된 화면은 컴포넌트로 구성되어 있다. UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩한다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 컴포넌트의 두가지 종류인 클래스 컴포넌트와 함수형 컴포넌트의 생명주기는 https://dev-dorydory.tistory.com/14에 정리해두었다. Page Transition (페이지 이동) 라우팅이란? 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 React Router가 라우팅 라이브러리 중 가장 많이 쓰인다. react-router 사용자가 입력한 주소를 감지..

회사에서 Web 서비스나 관리자페이지 개발을 할 때 React를 사용하여 개발을 한다. 여러 프레임워크 중 Vue나 Angular, Svelte가 아니라 왜 React를 써야하는지 알고싶어졌다. React 공식 홈페이지에 가서 어떤 친구인지를 찬찬히 읽어보았다. React 자바스크립트 라이브러리로 UI(User Interface)를 만들기 위해 사용된다. React로 프로젝트를 개발할 때에는 JSX를 사용한다. React 컴포넌트는 render() 메서드를 통해 입력 데이터를 받고 화면에 표시할 것을 반환한다. JSX(JavaScript XML) Javascript에 XML을 추가한 문법이다. 자바스크립트에서 HTML을 작성하듯이 사용하기 때문에 한 파일 내에서 자바스크립트와 HTML을 동시에 작성할 수..

VS Code에서 작업했고, 로컬에서는 JS가 module로 불러올 때 CORS 에러가 나기 때문에 Live Server라는 extension을 설치하여 진행했다. 설치가 끝나면 우측 하단에 Go Live라는 버튼이 생기는데 요거를 클릭하면 가상 서버에 해당 html파일이 띄워진다. 이 상태로 진행해보자. Interactive Web을 배워보고 싶어서 기초부터 시작했다. Interactive Developer라는 진짜 대단한 월클 유투버가 올려주신 강의를 따라서 개발해보았다. 일단 index.html, style.css, test.js, figure.js 파일들을 만든다. style.css * { outline: 0; margin: 0; padding: 0; } html { width: 100%; hei..

계속 해봐야지 해봐야지 미루고 미루던 CI/CD를 해보려 한다! 🏃‍♂️ 0-1. CI란 무엇인가? Continuous Integration으로 직역하면 지속적인 통합이다. 다시말해 여러 개발자가 작성하거나 수정한 코드를 지속적으로 통합하고 테스트하는 것을 말한다. 0-2. CD란 무엇인가? Continuous Delivery/Deployment으로 직역하면 지속적인 배포이다. 다시말해 개발, 통합, 배포, 릴리즈, 테스트를 자동화하여 지속적으로 배포하는 것을 말한다. 우리는 gitlab master branch에 push하면 자동으로 AWS EC2에 빌드&배포 까지 할예정이다. gitlab에 프로젝트 만들기와 AWS의 EC2 인스턴스 만들기는 미리 해두었다. 1. gitlab-runner 설치 & 등록..

문득 iOS 개발을 하고싶어져서 오랜만에 XCode를 켰다. 뭐를 만들까? 하다가 이전에 사이드 플젝으로 해야지 했던 서비스의 기능 중 기본적인 기능인 그림판을 만들어보기로 했다! 이 기능을 만들어보기 전까지는 너무너무 어려워 보였지만 검색해보니 레퍼런스들이 꽤 있어서 차근차근 따라해보았다!! 그럼 순서대로 개발해보자😎 0. 프로젝트 하나를 만든다. 플젝 이름은 SketchApplication으로 설정해두었다. 1. 화면을 간단하게 만든다. 화면은 UIImageView를 상단에 위치시키고, 그 아래에 지우기 버튼을 위치시켜 구성하였다. 2. 스토리보드의 컴포넌트를 ViewController와 연결시켜준다. 1) 스토리보드에 있는 UIImageView를 ViewController로 가져와 canvas라는 ..

반복되는 작업을 개발자가 직접 하는 회사들이 아직 많고, 그로인해 작업시간은 길어져 효율도 떨어지고 야근도 늘어나고 있다. 이런 이슈를 해결하기 위해 RPA가 나오게 되었다. RPA란? Robot Process Automation으로 직역하면 로봇으로 프로세스 자동화 이다. 로봇을 만들어 반복되는 작업을 수행하도록 함으로써 개발자는 그 시간을 다른 작업에 쓰게 하는 것이다. 이렇게만 말하면 로봇이 개발자 밥그릇 뺏어가는거 아닌가? 할수도 있는데 개발자들은 로봇과 동일시되어 공장의 기계처럼 반복되는 작업을 하고 있었을지도 모른다. 회사마다 다르겠지만 특히 스타트업은 그런 반복작업에 인력이 투입되기엔 꽤나 아까울 것이다. 다시 돌아와서 RPA를 만들 수 있는 툴은 다양하지만 그 중 UiPath라는 툴이 제일..

https://dev-dorydory.tistory.com/5 (요기에 이전 이야기가 적혀있습니다 ㅎㅎ) 저는 이미지가 수만개 저장되어있는 플레이스토어, 앱스토어에 배포되어 있는 서비스에서 앞으로 유저들이 업로드하는 이미지 로딩 속도를 줄여야 했습니다! 요번에는, 이미 Firebase Storage에 업로드 되어있던 수만개의 이미지들의 URL을 DB에서 조회하여 => 서버 환경에서 다운받은 후 => 리사이징하여 => 썸네일 이미지를 업로드 해야 합니다! => 적절한 비동기 처리도 꼭 필요합니다! 0. URL들을 DB에서 조회하기 는 SELECT(SQL)문을 사용하여 배열에 담았습니다! (요부분은 매우 간단한 부분이니 PASS!!) (처음에 코드를 돌릴 때에는 LIMIT문으로 페이징처리를 해서 소수의 이미..

이미지 로딩 속도를 줄이기 위해 여러가지 방법이 있는걸로 알고 있습니다. 저는 이미지가 몇만개 저장되어있는 플레이스토어, 앱스토어에 배포되어 있는 서비스에서 앞으로 유저들이 업로드하는 이미지의 썸네일을 제작하여 속도 완화를 해야 했습니다! 요런 방식을 사용했습니다! Firebase에서 베타 형태로 제공하는 Cloud Function을 사용하여, Firebase Storage에 클라이언트 단에서 원본 이미지가 업로드 되면 => 콜백 이벤트로 이미지를 400*400으로 리사이징하여 썸네일 이미지를 만들고, => 해당 썸네일 이미지를 /thumbnails/(원본 이미지 파일 이름) 이런 경로로 저장하도록 설정해두었습니다. 그래서 클라이언트에서 이미지를 업로드 하면 자동으로 thumbnail 이미지가 생기는 형..