Homile

📌 AWS, Firebase만 사용했던 나에게 Vercel은 처음보는 배포 방법이다. 배포하는 방법을 많이 알아봐야겠다! 📗 오늘 학습한 내용 배포 자동화 한번의 클릭 혹은 명령어 입력을 통해 전체 배포 과정을 자동으로 진행하는 것을 뜻한다. 배포 자동화가 필요한 이유 먼저 수동적이고 반복적인 배포 과정을 자동화함으로써 시간이 절약됩니다. 휴먼 에러(Human Error)를 방지할 수 있다. *휴먼 에러: 사람이 수동적으로 배포 과정을 진행하는 중에 생기는 실수들을 뜻한다. 배포 자동화 파이프라인 소스 코드의 관리부터 실제 서비스로의 배포 과정을 연결하는 구조를 뜻한다. Source 단계: 원격 저장소에 관리되고 있는 소스 코드에 변경 사항이 일어날 경우, 이를 감지하고 다음 단계로 전달하는 작업을 수행..

📌 AWS를 통해 배포를 몇번 해봤었지만 오랜만에 하는 거라 신이난다. 항상 새롭게 할 때 마다 재미있게 개발을 할 수 있는 것 같다. 📗 오늘 학습한 내용 클라우드 서비스 업체의 기본 장점 신속한 인프라 구축 유연한 인프라 관리 예상치 못한 트래픽 폭주 대응 손쉬운 글로벌 서비스 강력한 보안과 장애 없는 서비스 합리적인 요금제 기존 서버 방식 전산실 등에 컴퓨터를 배치하고 인터넷을 연결하여 서비스를 제공했습니다. 전산실에 있는 컴퓨터의 서버가 수용 능력이 한계에 도달하면 같은 공간에 더 많은 컴퓨터를 제공하여 해결하거나 컴퓨터 한 대의 성능을 높이는 방식으로 해결했습니다. 이러한 방식의 문제점으로는 주기적인 관리가 필요하며, 공간의 한계가 있습니다. Cloud Computing 서버의 자원과 공간 및 ..

📌 이제 프로젝트까지 남은 시간이 2주정도 남았다.... 어떤 문제가 있더라도 해낼수 있도록 해보자! 📗 오늘 학습한 내용 최적화(Optimization) 주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정 허용된 자원의 한계 내에서 주어진 요구사항을 만족시키면서 최선의 결과를 얻는 과정 최적화의 필요성 및 효과 이탈률 감소 웹 개발에서의 최적화는 화면을 최대한 빠른 속도로 표시하게 하는 것이다. 페이지 로드가 3초이상 걸리면 53%의 사용자가 사이트를 이탈한다. 그렇다면 화면을 불러오는 시간을 짧게 하여 사용자가 페이지를 이탈할 확률을 낮출 수 있다. 전환율 증가 이탈률이 줄어드면 자연스럽게 전황율이 높아질 확률이 커진다. 전환율: 웹 사이트를 방문한 사용자 중 회원가입, 상품 구..

📌 TDD를 오랜만에 다시 보는 것 같다. 저번보다 조금 더 심화적인 내용을 배우지 않을까 싶다...! 후라이 반숙 맛있겠다... 📗 오늘 학습한 내용 TDD(Test-Driven-Development, 테스트 주도 개발) 코드를 작성하기 전에 테스트를 먼저 작성하고 테스트 통과 여부를 확인하며 개발하는 소프트웨어 개발 방법론입니다. 작은 단위의 테스트 케이스를 작성하고, 이를 통과하는 코드를 작성하는 과정을 반복하는 것을 의미합니다. TDD의 개발 주기 Write Failing Test: 실패하는 테스트 코드를 먼저 작성한다. Make Test Pass: 테스트 코드를 성공시키기 위한 실제 코드를 작성한다. Refactor: 중복 코드 제거, 일반화 등의 리팩토링을 수행한다. TDD의 사용하는 이유 테..

📌 그래프QL은 React를 배우기 시작할 때 한번 들었던 내용이고, 찾아봤던 내용이기 때문에 조금은 아는 상태에서 진행이 될 것이다. 그리고 이것 또한 페이스북에서 만든 것이기 때문에 React를 사용한다면 한 번쯤은 학습해야 하는 내용이다. 같은 회사에서 만들어진 것이기 때문에 같이 사용할 경우가 많을 것 같다!!!! 빠얏!! 📗 오늘 학습한 내용 GraphQL (Graph + Query Language) 페이스북에서 만든 오픈 소스로 제공되고 있으며, Server API를 통해 정보를 주고받기 위해 사용하는 쿼리언어이다. (2016년 등장) 인지도 및 만족 부분에서 높은 비율을 차지하고 있는 언어이며, GraphQL 관련 기술이 계속해서 상위권을 차지하고 있다. 개발자들 사이에서 인식률이 굉장히 높..

📌 학부생때 가장 많이 들었던 컴퓨터구조, 동작방법 등에 대해서 학습을 하는 날이다...!! 이론적인 부분이니 기술 면접에서 충분히 나올 수 있을거라 생각하니 정리를 꼼꼼히 해보자! 📗 오늘 학습한 내용 컴퓨터 구조 하드웨어와 소프트웨어가 합쳐진 형태 하드웨어 전자 회로 및 기계 장치로 되어 있어 입출력 장치, 중앙처리장치(CPU), 기억장치 등으로 구성되어 있다. 소프트웨어 하드웨어를 제어하며 작업을 수행하는 프로그램이다. 컴퓨터의 기본 구성 요소 입력장치 컴퓨터가 처리할 수 있는 형태로 데이터와 명령을 받아들이는 물리적인 장치 키보드, 마우스, 스캐너, 타블랫 등 입력할 수 있는 장치 출력 장치 처리된 데이터를 사람이 이해할 수 있는 형태로 출력하는 물리적인 장치 모니터, 프린터 등 출력할 수 있는..

📌 어제 저녁에 각종 API를 실습을 진행했다. 유튜브, 공공데이터 포털, vworld 등은 proxy 설정없이 API를 받아올 수 있었지만 네이버 검색 API를 가져올 경우 package.json에 proxy 설정을 해야 CORS 오류가 사라지며 데이터를 받아올 수 있었다. 그리고 오늘은 Custom Hooks를 학습하는 날이다. 반복되는 룆ㄱ을 함수로 만들어 재사용할 수 있다라고 적혀있는데 어떤 것인지 정확히 학습을 진행해보자!! 📗 오늘 학습한 내용 Custom Hooks 개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있다. 여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 ..

📌 리액트 훅에 대해서 학습을 하는데 사실 앞선 과정에서 리액트 훅을 개인적으로 찾아서 학습한 뒤 사용을 하고 있었기에 조금더 정확히 짚고 가는 계기가 될 것이다. 📗 오늘 학습한 내용 Virtual DOM 가상의 DOM 객체 (추상화된 JavaScript 객체의 형태) React는 실제 DOM 객체에 접근하여 조작하는 대신 가상의 DOM 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분을 적용한다. Real DOM (DOM, Document Object Model) 브라우저가 트리 구조로 만든 객체 모델 브라우저가 JavaScript와 같은 스크립팅 언어로 html 태그들에 접근하고 조작할 수 있도록 태그들을 트리 구조로 객체화 시킨 것이다. DOM의 조작 속도가 느려지는 이유 DOM의 조작으로..

📌 웹팩은 JavaSrcipt, JSON 문법만을 번들링할 수 있지만 loader를 사용하여 각종 css, jsx 등의 언어와 png, jpb 등의 멀티미디어 파일 또한 번들링을 할 수 있습니다. 오늘은 이러한 사실을 알고 있으므로 리액트를 웹팩을 사용하여 번들링하는 방법에 대해 알아보아야한다. 📗 오늘 학습한 내용 react, react-dom 리액트 컴포넌트와 Hooks, 라이프 사이클에 대한 정보가 모두 들어있는 리액트와 이 리액트 코드를 브라우저에 보여줄 수 있는 react-dom이 필요하다. babel create-react-app에 포함되어 있는 babel이 jsx를 js로 변경해주어 번들링을 해주었기 때문에 babel은 jsx를 JavaScript로 변경하여 entry에서 불러올 수 잇게 만..

📌 웹팩은 어렵다고 많이 들었는데 어떤 부분에서 어려움이 있는지 자세히 찾아봐야겠다. 📗 오늘 학습한 내용 번들링 사전적 의미: 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위 개발적 의미: 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음 번들링을 사용하지 않을 경우 일어나는 상황 두 개의 js파일에서 같은 변수를 사용하고 있어서 변수 간 충돌이 일어난 상황 딱 한 번 불러오는 프레임워크 코드가 8MB라서, 인터넷 속도가 느린 국가의 모바일 환경에서 사용자가 불편을 호소한 상황 번들 파일 사이즈를 줄이기 위해서 파일의 공백을 모두 지웠는데, 가독성이 너무 떨어져서 코딩하기 어려운 상황 배포 코드가 너무 읽기 쉬워 개발을 할 줄 아는 사용자가 프론트엔드 애플리케이션을 임의로 조작하여 ..