본문 바로가기

Frontend68

타입스크립트 교과서 정리 1장 타입스크립트 시작하기1.1 타입스크립르르 공부할 때 알아야할 단 한 가지타입스크립트는 타입을 위한 구문이 있는 자바스크립트타입을 위한 구문은 변수나 매개변수, 반환값 같은 값에 타입을 부여합니다.타입은 데이터의 형태를 의미합니다.여기서 데이터의 형태란, 자바스크립트에서 배운 문자열, 숫자, 객체 등의 자료형입니다정리하면 타입스크립트는 데이터의 타입을 명시적으로 표시할 수 있게 된 자바스크립트.타입스크립트를 배운다는 것은 자바스크립트에 타입을 표시하는 방법을 배우는 것입니다.1.2 공식 문서와 플레이그라운드타입스크립트를 공부할땐 공식사이트를 함께 보는것이 좋습니다. 공식 사이트는 타입스크립트 핸드북을 제공하고, 이 핸드북을 정독하는것이 타입스크립트의 기본을 익히는데에 많이 도움이 됩니다.또한 공식문서.. 2024. 10. 14.
웹브라우저 timezone 가져오기 / 웹브라우저의 timezone 변경하기 웹브라우저 timezone 정보를 가져오는 방법1. 웹 브라우저를 실행한다. (크롬, 엣지, 웨일, 파이어폭스 등)2. F12를 눌러 개발자 콘솔을 켠다.3. 콘솔 창에서 다음 코드를 입력한다.Intl.DateTimeFormat().resolvedOptions().timeZone //  'Asia.Seoul'  4. timezone값을 확인할 수 있다  위 방법으로 사용자의 타임존 값을 알 수 있다.timezone 정보를 변경하는 방법타임존을 적용한 코드를 작성하고 테스트를 하기 위해선 내 웹 브라우저의 타임존 정보를 변경해야한다. 1.웹 브라우저를 실행한다. (크롬, 엣지, 웨일, 파이어폭스 등)2. F12를 눌러 개발자 콘솔을 켠다.3. 케밥 아이콘 ︙ 을 클릭한다. (이미지의 ①)4. 도구 더보기(.. 2024. 8. 30.
Pinia 기본 사용 방법 (vuex의 새로운 이름) 목차 Vue 기본 구조 Pinia 기본 구조 State (Vue) State (Pinia) Getters (Vue) Getters (Pinia) Actions (Vue) Actions (Pinia) Vue 기본 구조 기본 구조 설명 - Composition API 방식( 다른 방식으로는 Option API 방식이있음 export default{} ) Current Count: {{ counter.count }} Pinia 기본 구조 기본 구조 설명 Option Store방식 기존 방식처럼 state, getters, actions를 직관적으로 표현한다. stores/todos-store.js import { defineStore } from 'pinia' export const useTodosStore .. 2023. 11. 20.
flutter에서 firebase auth 사용하기 flutterfire 깃허브에서 샘플을 제공한다. 아래 urld의 main.dart / auth.dart 를 복붙하기만 하면.. 샘플 화면이 짜잔~~ 물론 코드 복붙하기 전에 firebase Authentication 에 구글로그인, email 로그인 등을 추가해두어야한다. https://github.com/firebase/flutterfire/blob/master/packages/firebase_auth/firebase_auth/example/lib/auth.dart https://github.com/firebase/flutterfire/blob/master/packages/firebase_auth/firebase_auth/example/lib/main.dart 2023. 6. 6.
[error / flutter] There was an error while trying to get your package certificate hash. flutter에서 firebase 인증 세팅을 했는데 오류가 발생 [There was an error while trying to get your package certificate hash.] firebase에 등록했던 인증서 (certificate)가 플레이스토어에서 받은 sha1 이었다..ㅎ android 폴더에서 ./gradlew signingReport 명령어를 입력해서 debug key를 확인할 수 있다. Variant: debug Config: debug 1. 자바가 안깔려있어서 자바 설치했고 2. gradle.properties 에서 jvmargs를 수정(Xmx512x)로 3. 11버전 이상이어야 된다고 해서 다시 설치 후 안드로이드 스튜디오에서 버전 수정 4. ./gradlew signi.. 2023. 6. 6.
Vite + React + tailwind css + firebase 초기세팅 // vite 프로젝트 생성 $ npm create vite@latest 명령어 입력시 선택항목 표시 이름:solyi(프로젝트명) -> 선택:react -> 선택:JavaScript // 프로젝트로 이동 $ cd solyi // 폴더 열기 $ code . -r // tailwind 설치 $ npm install -D tailwindcss // 테스트 실행 $ npm run dev // firebase 설치 $ npm i firebase // firebase-tools 설치 (node version 14.18.1) $ npm install -g firebase-tools@9.2.0 // login $ firebase login $ firebase init 명령어 입력시 선택항목 표시 -> firestore.. 2023. 5. 13.
python 9일차 / 웹스크래핑 풀버전 폴더 구조 main.py extractors / indeed.py extractors / wwr.py 설치 $ pip install beautifulsoup4 $ pip install selenium # main.py from extractors.wwr import extract_wwr_jobs from extractors.indeed import extract_indeed_job keyword = input("What do you want to search for? ") file = open(f"{keyword}.csv", "w", encoding="utf-8-sig") wwr = extract_wwr_jobs(keyword) indeed = extract_indeed_job(keyword) jobs .. 2023. 1. 11.
python 8일차 / indeed / selenium / chromedriver / beautifulsoup / None (data-type) from requests import get from bs4 import BeautifulSoup from extractors.wwr import extract_wwr_jobs # function 을 import # from 폴더명.파일명 import function명 # jobs = extract_wwr_jobs("python") # print(jobs) # base_url = "https://kr.indeed.com/jobs?q=" # search_term = "python" # response = get(f"{base_url}{search_term}") # print(response) # if response.status_code != 200: # print("Fail") # else: # prin.. 2023. 1. 10.
python 7일차 웹 스크래핑 / beautifulsoup 4 / find / find_all / requests / response status_code # 5.0 웹 스크래핑 # beautiful soup (웹사이트의 데이터를 받아올 수 있게 해주는 python 라이블러리) # 5.1 다운로드 # $ pip install beautifulsoup4 # https://www.crummy.com/software/BeautifulSoup/bs4/doc/#quick-start # 5.2 주의사항 # 웹스크래핑으로 상업적 이용시 주의해야한다. from requests import get from bs4 import BeautifulSoup base_url ="https://weworkremotely.com/remote-jobs/search?term=" search_term ="vue" reseponse = get(f"{base_url}{search_term}").. 2023. 1. 10.
[vue]컴포넌트 자세히 알아보기 1. 섹션 소개 컴포넌트 등록 및 스타일에 대해 Component Registration & Styling 컴포넌트를 스타일링 하는 방법과 특정 스타일이 특정 컴포넌트에만 영향을 미치도록 하는 방법도 알아본다 슬롯과 동적 컴포넌트 Slots & Dynamic Components 컴포넌트 이름과 프로젝트 폴더 구조 Naming & Folder structure 2. 전역 컴포넌트Global Components와 지역 컴포넌트Local Components main.js에서 app.component('the-header', TheHeader); 처럼 설정하는건 vue앱의 전역에서 사용할 수 있는 컴포넌트다. 하지만 컴포넌트를 등록하는 방법 중에서 가장 좋은 방법은 아니다. 한가지 잠재적 단점이 있다. 모든 컴.. 2023. 1. 10.
python 6일차 / for ~ in ~ / for loop / requests / status_code # 4.5 For Loops websites = ( "google.com", "airbnb.com", "https://twitter.com", "facebook.com", "https://tictoc.com" ) websites[0] # tuple 의 갯수만큼 반복 for website in websites: print("Hello", website) # 일반적으로 tuple이나 list를 만들 때 복수형으로 만든다 # websites, movies, users, photos ,... # for 에서는 단수형으로 쓴다. # website, movie, user, photo # 4.6 URL Formatting for website in websites: if not website.startswith("h.. 2023. 1. 6.
python 5일차 / method / list / tuple / dictionary # 4.0 Methods # python 에는 3가지 데이터 구조가 있다. # list # tuple # dictionary # 자료구조 Data structure란 무엇일까? # 데이터를 구조화 하고 싶을 때 사용한다. # list # days_of_week = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] # print(days_of_week) name = "solyi" print(name.upper()) # 대문자로 출력 # upper() 외에도 엄 청 많 은 function 들이 결합되어있다. # "solyi"는 string 인데 내부에 많은 function 을 가지고 있다. # 이것들을 function 이 아닌 method 라고 부른다. # capita.. 2023. 1. 5.
console.log / console.table / console.error / console.info / console.debug / console.warn / console.log() console.group() console.groupEnd() console.table() console.dir() console.error() console.info() console.debug() console.warn() console.clear() const arr = [ { name: 'solyi', birthday: '5/15' }, { name: 'may', birthday: '11/7' } ] console.table(arr) console.info("인포메세지~"); console.debug("디버그~~"); console.warn("와닝와닝~"); console.error("에러메세지~"); console.debug 는 상세 메세지에서 따로 볼 수 있다. 2023. 1. 4.
반응형

티스토리툴바