WebApp (100) 썸네일형 리스트형 WebApp_동물상앱 - 웹어플 디자인(2) 1. Zeplin 디자인을 우리의 App에 적용시켜보자 (1). padding값 적용시키기 - Zeplin예제를 Alt키를 눌러 동물상테스트 텍스트 바탕쪽으로 마우스커서를 두고 클릭하면 - 해당텍스트 상하좌우의 paddig값이 %로 나온다 -padding-top : 2.1% , padding-left : 7,7% 를 숙지하고 - 직접 앱상에서 개발자모드에 들어가 Ctrl + Shift + C로 동물상테스트 텍스트 윗 공간을 클릭하고 - Computed상태창에서 위에서 숙지한 padding값을 적용시켜 본다 *(개발자도구 우측상단 휴대폰그림을 클릭하면 아래와 같은 휴대폰상 나타나는 화면을 미리보기할 수 있음) - groomIDE에서 index.html 코드 중 nav태그 의 class이름으로 nav-pad.. WebApp_동물상앱 - 웹어플 디자인(1)( with. Zeplin, BootStrap) 1. zeplin.io zeplin은 포토샵이나 스케치등 디자인툴을 이용해서 작업한 결과물을 코드형태로 바꾸어주는 툴이다 이곳에서 디자인을 가져와 코드형태로 앱이나 엡에서 사용할 수 있다 2. zeplin 사용하기 (1) - 우측하단에 Download the Windows app으로 앱의 형태로 다운받아 사용할 수 있고 (2) - Go to Project를 통해 웹상에서도 사용할 수 있다 2. Zeplin으로 디자인을 가져와 넣는방법 (1) - 내가 직접 Sketch, Adobe XD, Figam, Photoshop등을 통해 만든 디자인을 Zeplin에 넣을 수도 있고 (2) -크몽에서 Zeplin을 검색하고 돈을 주고 외주를 맡기면 전문적으로 디자인을 만들어주는 외주가 Zeplin에 넣어준다 3. ze.. WebApp_동물상앱 - Teachable Machine&GoormIDE 참조 : www.youtube.com/watch?v=OI3fZJHQF8Y&list=PLU9-uwewPMe2-vtJAgWB6SNhHcTjJDgEO&index=3 1 - Teachable Machine -> Get Started - > Image Project 클릭 하면 아래와 같은 창이 뜸 - 클래스 이름을 적어주고 Upload를 눌러 전 포스팅에서 다운받은 강아지상 연예인사진과 고양이상 연예인 사진을 업로드 - 업로드 완료 후 Traning 을 누르면 아래와 같은 창이 뜸 - Preview란의 Export Model을 클릭 - upload(shareable link)로 업로드를 해주면 아래와 같이 sharable link 주소가 나오고 code snippets to use your model: 즉 사용가.. WebApp - 셀레니움(With python) 1. python 설치 - google 검색 : python -> python.org 최신버전 다운로드 2. pyhthon venv 가상환경 설치 - google 검색 : pyhthon venv 가상환경 - VsCode 터미널 명령 : pythob -m venv selenium (selenium이라는 이름의 가상환경을 만들겠다) - selenium이라는 폴더가 생성되고 - cd selenuium/Scripts 로 디렉토리르르 변경하고 activate 명령어를 입력하면 가상환경으로 들어옴 - activate 명령어로 가상환경으로 들어오면 터미널 디렉토리표시 앞에 (selenium)이 생김 - 현재 (selenium)이라는 가상환경안에 있고 이 상태에서는 다른 프로젝트와 독립적인 공간이라는 것 - 여기서 p.. WebApp - 크롤링(With Python) 출처: youtube Jocoding 1. 통합개발환경(Intergrated Development Environment) 즉 IDE를 사용한 개발 (1) - goorm IDE 사용 - ide.goorm.io -> 로그인 -> 대시보드 -> 새컨테이너(우리가 사용할 가상컴퓨터) 생성 (2) - hello python (3) - beautiful soup라는 크롤링을 위한 파이썬 라이브러리를 사용 - 위키피디아에서 예제를 복붙 -그대로 python index.py 를 해보면 오류가 나는데 bs4 모듈이 설치가 되어 있지 않기 때문이다 - pip install bs4로 모듈설치 2. 네이버 실시간 검색순위 가져오기 (1) - 네이버 실시간 검색순위 HTML 코드구성 살펴보기 * 개발자창의 왼쪽상단에 파란색으로.. Oauth - 절차(3) - Access token 발급 이전 시간에는 우리가 리소스서버가 클라이언트를 승인하는 과정을 살펴봣다 보는것처럼 클라이언트가 리소스 오너를 통해서 authoization code값을 받았다 그러면 그다음단계로 클라이언트가 리소스서버에게 직접 이런 정보를 전송한다 https://resource.server/token? grant_type=authorization_code&(우리가 authorziaion code를 통해서 인증을 하고 있다는 뜻) code=3&(클라이언트가 가진 authorziaion code의 코드값) redirect_uri=https://client/callback&(리다이텍트 유알엘값도 전송) client_id=1&(클라이언트 아이디 값과 client_secret=2(클라이언트 씨크릿.. Oauth - 절차(2) 1.RecourceServer의 승인 Resource Server는 Client가 등록된 Client가 맞는지 확인하기 위해서 Resource Owner을 통해서 Client에게 Authorization code를 전달합니다. 이 값을 받은 Client는 이 값과 Client secret의 값을 Resource Server로 전송해서 Client의 신원을 Resource Owner에게 증명합니다. 여기서는 이 과정을 다룹니다. 이전 시간에는 사용자가 이런 작업을 하는것을 허용합니다 하고 승인버튼을 눌렀을때 그 정보가 리소스서버에 가서 id=1이라는 유저id를 가진 리소스오너는 리소스서버안의 스콥b와c에 대한 작업을 클라이언트 id 1번이 사용하도록 허용 했다 라는것 즉 리소스오너가 클라이언트에게 일부 작.. Oauth - 용어 및 절차(1) 1.용어 client = 제 3자 앱 (ex 생활코딩) resource owner = 리소스의 소유주 (일반 사용자) resource server = API를 통해 리소스를 제공 (구글의 리소스 저장 서버) authorization server = 인증 담당으로 access token을 client 에게 보내줌 (구글의 인증 담당 서버) 리소스 서버와 인증 서버는 같은 서버일 수도 있음 2.등록 Oauth를 사용하기위해서는 일단 리소스서버에 우리의 앱인 클라이언트를 등록해야하는데 서비스(페이스북, 구글등)마다 등록방법이 다르다 공통적인것은 client ID 와 client secret authorized redirect URls 이 세가지는 공통적인것이다 client ID는 애플리케이션을 식별하는 식별자.. 이전 1 2 3 4 5 ··· 13 다음 목록 더보기
