본문 바로가기
반응형

개발이야기/Etc.37

Apollo 튜토리얼 - 스키마 만들기 Apollo로 풀 스택 앱을 빌드하는 방법을 알아보기 위해 튜토리얼을 따라 해보자! 튜토리얼을 통해 만들어 볼 앱은 SpaceX 출시에 대한 좌석을 예약하기위한 대화 형 앱이라고 한다 우주 여행을 위한 Airbnb라고 생각하고 만들기~ 여기서 사용되는 모든 데이터는 SpaceX-API로 실제 데이터라고 함!! 무튼 이제 튜토리얼 보고 따라하기 시작~ 🚀 튜토리얼 보러가기 예제 앱 클론하기 $ git clone https://github.com/apollographql/fullstack-tutorial.git 기능을 구축하기 위해 스키마를 우선 만든다 스키마는 필요한 데이터를 기능에 따라 서버에 어떻게 요청할지에 대한 정보를 담는다 Apollo 서버 설정하기 [ start/server 디렉토리에 아폴로 서.. 2021. 2. 4.
modal과 popup 차이 프론트엔드 작업을 하다보면 'modal로 만들어 주세요~'와 'popup으로 만들어 주세요~'라는 요청이 들어온다 이때 modal과 popup 무슨 차이가 있지? 하는 생각에 찾아봤던 글들을 정리해 봄! 모달(MODAL) 이란 사용자의 이목을 끌기 위해 사용하는 화면 전환 기법이지만 화면을 전환한다기 보다는 이목을 집중해야 하는 화면을 다른 화면 위로 띄워 표현하는 방식이다 모달은 내비게이션 인터페이스와는 달리 정보의 흐름을 가지고 화면을 이동한다기 보다는 꼭 이목을 끌어야하는 화면에서 사용된다 그래서 모달로 보이는 화면은 되도록 단순하고 사용자가 빠르게 처리할 수 있는 내용을 표현하는 것이 좋다 팝업(POPUP)이란 과거 ‘팝업(Popup)’은 작은 새로운 윈도우를 띄우는 기능을 말했다 사이트 접속 직.. 2021. 2. 3.
어도비 너무 비싸? Adobe 모든 플랜 저렴하게 싸게 구매하는 법! 브라우저에 SVG를 이용하여 그려보기에 도전하려 했으나 백터 그래픽을 구현하기 위해서는 Adobe illustrator가 필요하다고.... 어차피 나중에 구매해서 이용하려던 거였으니 이참에 구매하자고 마음을 먹었다 그런데 어도비... 뭐 이리 비싸니....? 😭 그리하여 저렴하게 Adobe 모든 플랜을 구매하는 법을 찾았다!! 어도비 사이트 바로가기 먼저 어도비 플랜을 살펴보자! 개인 / 기업 / 학생 및 교사 / 초중고등학교 및 대학교 이렇게 4가지의 플랜이 있다 이 중에서 보통은 개인 플랜으로 구매하는데 가격이.... 62,000원...😱 꽤 비싼 금액 때문에 내가 필요한 앱만 골라 구매해서 이용하기에는 모든 앱을 구매하는 것이 더 효율적이라 생각한다 그치만 69,000원은 너무 비싸다는 거... 개.. 2021. 2. 1.
반응형에서 이미지 비율 유지하기 반응형에서 이미지를 넣었을 때 이미지 비율 그대로 유지되는 방법을 끄적여봄~ 이미지 그대로의 비율 유지하기 [HTML] [css].image-wrapper { width: 100%;}.image { max-width: 100%; height: auto;} 가로 세로 비율 유지하기 [HTML] [css].image-wrapper { position: relative; width: 100%; height: 0; padding-bottom: 56.26%; overflow: hidden; } .image-wrapper .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 여기서 . image-wrapper의 padding-botto.. 2021. 1. 16.
크롬 확장프로그램 headingsMap으로 페이지의 헤딩 구조를 확인해보자! 크롬에는 다양한 확장 프로그램이 있다 저번에 넷플릭스에서 사용하면 유용한 크롬 확장 프로그램을 소개했었는데 이번에는 웹페이지를 제작할 때 사용하면 유용한 크롬 확장프로그램 중 하나를 소개하려 한다 웹 페이지를 제작할 때는 페이지의 헤딩 구조를 잘 짜는 것도 중요하다 페이지를 만든 후에 페이지의 헤딩 구조를 맞게 짰는지 일일히 확인하는 것도 일이 된다 그럴 때 크롬 확장프로그램 headingsMap을 사용하면 완전 꿀!!!(나는 이미 설치해서 삭제 버튼이 노출되고 있음) 크롬 확장프로그램 headingsMap 설치하기 headingsMap을 설치하고 헤딩 구조를 확인를 페이지를 띄운다 나는 예시로 네이버를 띄운 후에 headingMap을 실행시킴 그러면 좌측에 크롬 확장 프로그램 HeadingMap이 뜨면.. 2021. 1. 12.
Gitmoji로 Github 커밋 메세지 구분하자! Gitmoji는 Github 커밋 메세지에서 이모티콘을 사용하여 커밋의 목적이나 의도를 쉽게 파악할 수 있도록 도움을 준다 텍스트만 있는 커밋 메세지보다는 어떤 커밋 메세지인지 분류할 수 있는 이모티콘이 있어 시각적으로도 보기 편하다 또한 깃모지를 사용하게 되니 커밋을 하나의 덩어리로 만들어 푸쉬하는 것이 아니라 조각조각으로 나누어 푸시를 할 수 있어 커밋 단위를 쪼갤 수 있게 된다(개인적으로 커밋 단위 쪼개기 습관화하면 좋다고 생각한다) 하지만 깃모지가 손에 익지 않을 경우에는 어떤 이모티콘을 써야하는지 한참을 찾아야 한다...... 처음에는 여기서 시간을 많이 허비했지만 이제는 어느정도 익숙해진 듯~ 뭐.... 쓰는 이모티콘만 쓰게 되어 그런 거 일수도ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ Gitmoji 사이트 이동 .. 2021. 1. 12.
반응형

티스토리툴바