Small Grey Outline Pointer 'Dev.' 카테고리의 글 목록 (6 Page)
본문 바로가기

Dev.218

React :: 날씨 앱 만들기 https://openweathermap.org/api Weather API - OpenWeatherMap Please, sign up to use our fast and easy-to-work weather APIs. As a start to use OpenWeather products, we recommend our One Call API 3.0. For more functionality, please consider our products, which are included in professional collections. openweathermap.org 날씨 api 가져오기 회원 가입 후 사용한다 로직 //1. 앱이 실행 되자 마자 현재 위치 기반의 날씨가 보인다 //2. 지금 현재 도시와 온.. 2022. 8. 29.
카카오맵 api 사용하기 https://apis.map.kakao.com/web/guide/ 카카오맵 사이트에 들어가서 가이드 보면서 따라한다 넷리파이에 배포한 도메인과 뭐가 될 지 몰라서 로컬도메인 전부 다 등록했다 지도 영역 html에 추가 자바스크립트 api 지도 띄우는 코드 var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스 var options = { //지도를 생성할 때 필요한 기본 옵션 center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표. level: 3 //지도의 레벨(확대, 축소 정도) }; var map = new kakao.maps.Map(container, options).. 2022. 8. 27.
React :: 라이프 사이클 class 컴포넌트의 라이프 스타일 constructor(생성자) 제일 먼저 실행되는 함수 getDerivedStateFromProps state 와 props를 동기화 시켜주는 함수 render UI를 그려주는 함수 componentDidMount 마지막으로 호출 되는 함수, UI 셋팅이 끝나면 알려준다 mounting import React, { Component } from 'react'; import BoxClass from './component/BoxClass'; export default class AppClass extends Component { //컴포넌트가 실행되자마자 바로 호출 된다 constructor(props) { super(props); this.state = { counte.. 2022. 8. 24.
React :: 클래스 컴포넌트 클래스 컴포넌트 단축키 rcc AppClass.js import React, { Component } from 'react' export default class AppClass extends Component { render() { return ( AppClass ) } } App.js import React, { Component } from 'react'; export default class AppClass extends Component { //컴포넌트가 실행되자마자 바로 호출 된다 constructor(props) { super(props); this.state = { counter2: 0, num: 1, value: 0, }; } increase = () => { //전달할 객체 안에 thi.. 2022. 8. 22.
React :: 가위바위보 게임 만들기 가위바위보 게임 만드는 로직 1. 박스 두개 만들기(사용자-컴퓨터, 사진, 결과표시가 들어간다) 2. 가위,바위,보 버튼이 있다 3. 버튼을 클릭하면 클릭한 값이 박스에 보인다 4. 컴퓨터는 랜덤하게 아이템이 선택 된다 5. 3번과 4번의 결과를 가지고 승패를 따진다 6. 5번의 결과에 따라 박스 테두리 컬러가 바뀐다 (이기면 그린, 지면 레드, 비기면 블랙) App.js import './App.css'; import Box from './component/Box'; /* 가위바위보 게임 만드는 로직 1. 박스 두개 만들기(사용자-컴퓨터, 사진, 결과표시가 들어간다) 2. 가위,바위,보 버튼이 있다 3. 버튼을 클릭하면 클릭한 값이 박스에 보인다 4. 컴퓨터는 랜덤하게 아이템이 선택 된다 5. 3번과 .. 2022. 8. 17.
React :: 버튼 클릭시 숫자 카운트 되기 새 프로젝트 폴더를 만들고 npm start를 해도 실행이 안되면 경로충돌이 일어난 경우일 수 있으므로 새로 다시 시작해보는게 좋다 리액트에서는 클릭! onClick => c를 대문자로 표기한다, onClick 뒤에 {} 가 사용된다 App.js import './App.css'; function App() { let counter = 0; const increase = () => { counter += 1; console.log('카운터 확인!', counter); }; return ( {counter} 클릭! ); } export default App; UI는 변함 없으나, 확인용 콘솔창에는 클릭시 숫자가 올라감을 확인할 수 있다 UI에도 숫자가 바뀌는 것을 보여지도록 수정해야 한다! 리액트에서는 s.. 2022. 8. 12.
[깃허브] 디렉토리 폴더에 화살표 표시/ 폴더 클릭 안되는 경우 깃허브에 업로드 할 때 git 쓰다가, 폴더 드래그해서 업로드하다가 이리저리 번갈아가면서 업로드 하던 중간에 꼬여서 이상하게 됐다 해당 폴더가 클릭이 안되고 화살표가 생겨났다 구글링해서 해결해보았다 참고 (https://zzang9ha.tistory.com/346) GitHub(깃허브) - 디렉토리에 화살표 표시(폴더 클릭이 안될 때) 📎 GitHub 디렉토리 화살표 표시 -> 폴더 접근 불가능 깃허브에서 한 디렉토리에 다른 디렉토리를 추가하는 도중 위와 같이 디렉토리에 화살표 표시가 생기고, 디렉토리에 접근이 되지않는 문제 zzang9ha.tistory.com .git 파일이 또 생겨나서 저런 상태가 되었다는 것을 알게 되었다 bash 터미널에서 명령어를 입력하여 하위 폴더 중 .git 파일이 있는 곳.. 2022. 8. 11.
리액트 기초 1. 리액트가 나오게 된 이유 - 자바스크립트만 가지고 개발을 하려니 불편한 점이 많았는데 다음과 같다 - 첫번째... document.getElementById('')를 이용해서 매번 아이템을 가져오고, 아이디를 주고, 선택해서 가지고 오고 이런 절차를 매번 필요할 때 마다 작성해주는 것이 너무 불편했음 심지어 스펠링이라도 틀리면 오타를 찾는데 헤메는 일이 발생하기도 함 - 두번째... 매번 새로운 페이지를 만들 때 마다, 스크립트 태그 걸고, 링크 해주고, 파일도 따로따로 관리해줘야 하고 이런 점들이 불편했다 사이트의 규모가 커지면 커질수록 페이지 숫자도 많아지는데 계속 따로따로 관리하려니 많이 불편한것이 사실 - 세번째... 새로운 페이지에 들어갈 때 마다, 새로고침이 되어진다 요즘 웹사이트를 데스.. 2022. 8. 10.
python :: lambda # %% lambda 함수 정의 def show(s): print(s) ref = show print(ref("adios~")) ref =lambda s: print(s) print(ref("helllllo")) f1 = lambda n1, n2: n1+n2 print(f1(10,8)) adios~ helllllo 18 def ref1(s): return s print(ref1("adios")) ref = lambda s: s # ref = lambda s: return s 이렇게 하면 오류가 난다 print(ref('adios')) # ref = lambda s: return s 와 같은 코드 f2 = lambda s: len(s) print(f2("adios")) f3 = lambda : print(.. 2022. 8. 5.
python :: iter 이터레이터 iterable 객체 : iter 함수에 인자로 전달이 가능한 객체 iterator 객체 : iter 함수가 생성해서 반환하는 객체 iterable 객체를 대상으로 iter 함수를 호출해서 iterator 객체를 만든다 iterator 객체를 생성할 수 있는 대상이 되는 것이 iterable 객체이다 # %% ds = [1,2,3,4] # for i in ds: # print(i) ir = iter(ds) print(next(ir)) print(next(ir)) print(next(ir)) print(next(ir)) 1 2 3 4 ds = [1,2] #iter 함수에 인자로 전달 가능한 객체 ir = iter(ds) #iter 함수가 생성해서 반환하는 객체 = 리모컨 print(next(ir)) # p.. 2022. 8. 4.

티스토리툴바