gu04005의 등록된 링크

키자드에 등록된 총 637개의 포스트를 확인하실 수 있습니다.

Naver Blog

청소년 모의투자 대회

허허... 요즘은 창업의 열기? 라고 하나요 아니면 제가 그런쪽이라서 제 주위사람들도 그런 쪽으로 몰리는건가요...(끼리끼리 논다는 느낌이죠ㅋㅋ) 풍문으로 많은 창업소식이 들립니다 저 마저도 근래 창업대회를 했는데 제 후배도 모의투자 대회를 했다고 하더군요 훌륭합니다 짝짝 흠~흠터레스팅~ 일단 후배가 제공한 홍보자료를 한번 보겠습니다 대략적으로 보아하니 청소년 정보제공 어플리케이션이군요 흠... 나쁘지 않습니다 제가 고등학교때 저에게 주어지는 혜택이나 기타 관련 정보를 찾을려면 인터넷 서핑을 해야되서 시간이 은근히 잡아먹었는데 앱 하나로 그 모든 정보를 알 수 있으면 그것만으로 제공하는 가치는 나쁘지 않을것 같군요 모든 사업의 핵심은 역시 가치 is value 랄까 가치를 제공하는 사업은 성공하게 되어있죠 후배님이 참가한 모의투자 대회는 가상으로 투자를 해서 많이 투자받은 팀이 상을 받는 대회라고 하더군요 아까 대회 사이트에 접속해보니 백만원(가상화폐)을 지급 받았습니다?! 가짜 돈

원문보기 내부링크
Naver Blog

CSS정리 (심화편)

css로 할수있는 애니메이션 효과들과 변형, 3D 마치 js를 사용한것 같음 transition 어떤 상태에서 다른 상태로의 변화! 를 보내주는 애니매이션이다 1) transtion은 state(hover, active, focus ...) 있을때 사용하고state없는 요소에 붙어야한다 state에 transition을 준다면 변화를 준것(예를들면 hover라면 마우스를 갖다 댄것)을 그만할경우(마우스를 뗄경우) 원래상태로 바로 돌아간다 2) transtion 에 변화를 준것들은 state에 들어있는것들이 기준이 되어 바뀌는것이다 바뀌는 것들에 한정하여 transition 이 일어날 수 있다 a { color: white; transition: all 1s ease-in-out; // 트랜지션 애니메이션 효과사용 } a:hover{ color: tomato; //마우스가 위에 객체 위에 있을시 토마토로 바뀌는데 이때 트랜지션 효과로 애니메이션 } 3)트랜지션 마지막 요소에 애니메이션

원문보기 내부링크
Naver Blog

GIT이 대체 뭔데?

초보때는 몰랐는데 하면 할수록 git의 필요성과 유용함을 피부로 느끼고 있습니다(현재진행형) 고로 아직 git을 잘 모르는 분들을 위해 제가 이해한 git의 정의?를 알려드리겠습니다 git이 뭐야? git은 파일을 계속 추적(Tracking)하는 것 1. 코드의 히스토리를 알고 있어야 한다. 처음에 뭘 작성했는지, 나중에 뭘 추가했는지,변경 내역 등을 알고 있어야 하는데 이럴 때 git을 사용하면 것이 도움이 된다. 2. 내가 원하는 파일의 변경된 내용을 확인 할 수 있다. 3. git은 programming에서 주로 사용되는 도구다(저장, 변경 이력확인, 이전상태복원 등등). 4. text 파일에서만 사용 할 수 있는 것이 아니라, excel, image, song 등등 다른 파일 형식에도 사용 할 수 있다.(git 시스템은 파일을 binary format(0101010 같은 것)으로 인식하기 때문) git의 자매품 -github- 코딩 작업을 열심히 했고 git에 저장도 했는데,

원문보기 내부링크
Naver Blog

github 사용법 (github desktop)

깃허브의 주 사용목적은 Repositories(저장소)에 프로그래밍한 코드를 저장과 변경내역 확인 등등이 있습니다 github에 코드를 저장하는 방법은 많지만 그중에서 간단한 github desktop을 이용해서 github에 코드를 어떻게 저장하고 사용하는지 알려드리겠습니다 GitHub가입 및 저장소 생성 GitHub: Where the world builds software · GitHub 위 링크로 가서 계정이 없으면 만들어주고, 있다면 로그인해주세오 로그인하면 아래처럼 대쉬보드가 나옵니다 저 같은 경우 현재 진행중인 프로젝트와 진행한 프로젝트가 많아서 좌측 Repositories에 떠있는게 많습니다 처음 github를 사용하시는 분들은 깨끗하실겁니다 그럼 한번 새 저장소를 만들어 보겠습니다 위 사진처럼 좌측 Repositories옆에 New버튼을 눌러주세요 위사진처럼 뜨는데 각각 정보를 입력해주고 create repository를 해주시면됩니다 1. 공백없이 저장소 이름작성

원문보기 내부링크
Naver Blog

창업대회 수상! 거기다가 사무실까지?!

올해 야심차게 준비했던 창업프로젝트인 팀ZERO 5가 드디어 결실을 맺었습니다 짝짝짝~ 치얼스~ 제품영상 거의 1년동안 제품구상부터 설계 및 부품구성, 조립, 모델링까지 여러가지를 동료들과 독학하면서 제작 한 것 같습니다 제품하나를 만드는데 들어가는 여러가지 프로세스들과 해결해야하는 과제들이 이렇게 다양하고 어려운지 배우는 시간이였습니다 흠...느낌점이랄까 창업은 달리기로 치면 단거리 달리기가 아닌 마라톤과 비슷한것 같습니다 중간중간 지치고 포기하고 싶을때도 있었지만 그저 꾸준히 앞에있는 과제들을 해결해 나가면서 가다보면 결국 결승점에 도달하는 느낌이라 의미있는 경험이 되었던것 같네요 ㅎㅎ 그리고 이번 수상으로 상금도 좋지만 사무실이 생겨서 아주 만족스럽습니다 국가에서 지원해주는 창업사무실이라 임대료나 관리비는 따로 안들어간다고 해서 상금보다 더 좋은것 같네요 앞으로도 열심히 해야겠습니다 흐흐 ps. 뉴스에도 박제되서 부끄럽네요 // https://news.naver.com/main

원문보기 내부링크
Naver Blog

HTML/CSS) 클론코딩 카카오톡 완성

Welcome to SongSongTalk (deumian.github.io) HTML과 CSS로 만든 카카오톡 클론코딩입니다! 화면은 모바일 기준으로 만들어서 넓이가 일정이상 넓으면 노란색 화면이 뜹니다 넓이가 일정이상 넓으면 이런창이 뜹니다 위와 같은 이미지가 뜬다면 사이트 가로 크기를 줄여주시면 아래 사진처럼 정상적으로 보입니다 로그인은 아이디, 비번 아무거나 치셔서 들어가시면 됩니다 들어가시면 아래처럼 채팅페이지가 나오고 몇몇 페이지에 접속할 수 있습니다 이번 프로젝트는 HTML / CSS 를 익힐겸 전체적인 앱 디자인과 애니메이션 위주로 클론코딩한것이라 따로 사이트 안에서 채팅을 하거나 친구추가하는 상호작용은 없습니다

원문보기 내부링크
Naver Blog

JS정리 (기초)

자바스크립트-브라우저의 두뇌역활을 담당함 변수이름을 만들때 약속(Camelcase) ex)veryLongVariableName JS 변수선언 const: 재선언 금지, 재할당 금지 let: 재선언 금지, 재할당 가능 var: 재선언 가능, 재할당 가능 변수를 만들때 되도록 const>let>var 순으로 만들것 var는 사실상 안쓰는게 좋음 const a=10; let b=10; var c=10; a=5; //const 변수이기 때문에 에러발생 b=5; c=5; JS data type const a=10; //숫자 const b="hahaha"; //문자 const c=true; //boolean const d=null; //null - 값이 없다 const e; //undefined-변수는 선언했지만 값을 할당하지는 않음 JS 변수+String조합 방법1 "" const name=deumian; const greeting="hello "+name; 방법2 `` const name=

원문보기 내부링크
Naver Blog

JS정리 (html,css 연결편)

자바스크립트-브라우저의 두뇌역활을 담당함 이러한 이유로 js는 브라우저가 제공하는 객체와 오브젝트로 html, css를 접근하거나 수정가능함 물론 html과 css에 접근하기 위해서는 연결작업이 필요함 html에 js import 예시 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>studyHard</title> </head> <body> <script src="app.js"></script> //<---------- 이부분에서 app.js를 import함 </body> </html> 간단! Docu

원문보기 내부링크
Naver Blog

JS addEventListener와 Event오브젝트()

addEventListener로 Event를 받아올때 function에 인자만 있다면 Event로 발생한 다양한 정보를 오브젝트로 얻어올 수 있음 예시 sumit이벤트) const loginForm=document.querySelector("#login-form"); function onLoginSubmit(event){ //이벤트 오브젝트를 얻어오기위한 event인자선언 event.preventDefault(); //이벤트 오브젝트에 있는 함수 사용 console.log(event); } loginForm.addEventListener("submit",onLoginSubmit); 함수 동작시간부터 리턴값 등등 다양한 정보를 얻어올수있다 예시 click이벤트) const link=document.querySelector("a"); function ongoToLink(event){ console.log(event); event.preventDefault(); } link.addEven

원문보기 내부링크
Naver Blog

CSS 항목 숨기기

방법1 visibility: hidden; //공간은 그대로 두고 보이지만 않음 방법2 display:none; //잡아둔 공간도 사라짐

원문보기 내부링크
Naver Blog

JS localStorage (캐시에 변수 저장?)

페이지가 새로고침 되도 계속 기억해야될 변수를 저장할때 사용하면 좋은 방법 localStorage.setItem("userName","드미안"); //저장하는법 const name = localStorage.getItem("userName"); //불러오는법 이때 값이 없으면 null반환 localStorage에서 값을 불러올때 값이 없으면 null을 반환함 localStorage에 저장된 값은 페이지 개발자 도구로 확인이 가능함 고로 중요한 값은 지양하는게 좋을듯함

원문보기 내부링크
Naver Blog

JS 시간관련 펑션과 Date()오브젝트

setInterval(함수,딜레이시간) 함수를 딜레이시간마다 반복해서 호출하는것 function sayHello(){ console.log("hello"); } setInterval(sayHello, 1000); //1초마다 sayHello호출 setTimeout(함수,딜레이시간) 함수를 딜레이시간 후에 호출하고 끝 function sayHello(){ console.log("hello"); } setTimeout(sayHello, 1000); //1초후 sayHello호출후 끝 Date() 오브젝트 현재 시간을 알려주는 JS 제공 오브젝트 오늘 날짜를 가져옴 const date = new Date(); //선언 const hours=date.getHours().toString().padStart(2,"0"); //시간 const minutes=String(date.getMinutes()).padStart(2,"0"); //분 const seconds=String(date.getSe

원문보기 내부링크
Naver Blog

JS random 사용하기

Math.random() 0.0~0.99999...사이에 랜덤한 숫자 생성 Math.random()*10 하면 0~9.99999...중에 랜덤한 숫자 생성 Math.floor() 소수 내림 Math.ceil() 소수 올림 Math.round() 반올림 const peoples=[ //peoples배열 { //오브젝트 1 name:"Deumi", age:19, }, { //오브젝트 2 이하생략... name:"고길동", age:49, }, { name:"철수", age:25, }, { name:"제이손", age:100, }, ] //peoples 배열 선언 //0~peoples배열만큼 숫자중 랜덤한 peoples 오브젝트 선택 (소수자리 버림) const Who=peoples[Math.floor(Math.random()*peoples.length)];

원문보기 내부링크
Naver Blog

JS html요소 생성

document.createElement() JS로 html태그를 생성하는 방법중 하나 const li=document.createElement("li"); const span=document.createElement("span"); const button= document.createElement("button"); button.innerText="X"; li.appendChild(span); li.appendChild(button); span.innerText="JS로 만들었다냥~"; document.body.appendChild(li); //html body에 js로만든 li태그 삽입 이때 순서는 제일 마지막에 document.body.prependChild(li); //html body에 img태그 삽입 이때 순서는 제일 위에 결과HTML <body> <li> <span>JS로 만들었다냥~</span><button>X</button> </li> <li> <span>JS로 만들

원문보기 내부링크
Naver Blog

크롬앱 ) 오늘 할 일 리스트겸 명언과 날씨를 알려주는 웹사이트 완성

MonmentumApp (deumian.github.io) JS로 할 일 목록을 작성할 수 있는 웹사이트를 만들었습니다! 사이트는 모바일, pc상관없이 접속할 수 있지만 PC기준으로 만들었기때문에 PC접속을 권장합니다 왼:로그인전 오:로그인후 단일 페이지로 위치정보를 동의해주시면 현재 위치에 날씨, 시간, 명언 등으로 이루어져있습니다 명언은 주로 언스크립트 책을 읽으면서 감명 받았던 명언들로 이루어져 있습니다 로그인 할때 자신의 닉네임이나 이름을 입력하고 로그인해주시면 됩니다 가운데 할 일을 적는 칸에 적고 엔터를 입력하면 오른쪽 상단에 리스트로 작성됩니다 x버튼을 누르면 작성한 할 일이 사라집니다 새로고침을 누르면 이미지와 명언이 바뀝니다

원문보기 내부링크
Naver Blog

JS 버튼 클릭시 html 요소삭제

버튼을 눌렀을때 부모요소까지 한번에 삭제하고 싶을때 삭제하는법 예시 html <body> <li> <span>JS로 만들었다냥~</span><button>X</button> </li> </body> JS코드 function deletePa(event){ //각종 정보를 받아오기위한 인자 const li=event.target.parentElement; //이벤트 target(버튼)의 부모요소 li변수에 저장 li.remove(); //요소 삭제 끝 } //...생략.. const button= document.createElement("button"); //button 선언 button.addEventListener("click",deletePa); //버튼을 눌렀을때 deletPa이벤트 발생

원문보기 내부링크
Naver Blog

JS 배열을 String값으로 저장, 불러오기

JS나 기타 프로그래밍 언어를 사용하면 종종 서버나 캐시에 저장할때가 있다 localstorege는 배열로 저장할수 없고 string값으로 저장해야 된다 배열을 문자열로 바꿔서 저장 JSON.stringify() toDos["배열1","배열2","arr3","zzz","ㅋㅋㅋ"]; //toDos[0],toDos[1],...배열선언됨 const stringTemp=JSON.stringify(toDos); // 배열이 문자열로 바뀜["배열1","배열2","arr3","zzz","ㅋㅋㅋ"] localStorage.setItem("todos",stringTemp); //로컬스토리지에 string값저장 문자열을 배열로 바꾸기 JSON.parse() const arrTemp2=`["배열1","배열2","배열3이랄까","ㅋㅋㅋ"]`; //문자열 형태로 배열이 저장된 상태 const arrTemp=JSON.parse(arrTemp2); //값을 배열로 바꿈 arrTemp[0]; //"배열1" ar

원문보기 내부링크
Naver Blog

JS 배열 0~끝까지 함수로 실행하기 forEach()

배열에 인자들을 각각 함수나 어떠한 작업을 하고 싶을때 보통 for문이나 while문으로 돌리면서 인자값으로 실행했음 JS는 for문이나 while문 없이 forEach()라는 펑션으로 배열 index 0 부터 마지막 index 까지의 각각의 인자들을 함수로 돌릴수 있음 forEach() const peoples =["철수","영희","소희","주영","길동"]; //배열선언 function sayHello(who){ //함수선언 console.log("hello "+who); } peoples.forEach(sayHello); //forEach로 배열인자마다 sayHello함수 실행 총5번 실행됨 실행결과: hello 철수 hello 영희 ...생략... forEach() 간단한 버전 '=>' const peoples =["철수","영희","소희","주영","길동"]; //배열선언 peoples.forEach((who)=>console.log(`hello ${who}`)); //f

원문보기 내부링크
Naver Blog

JS li태그나 기타 html태그 삭제시 연동된 데이터베이스 정보도 삭제하기

html에서 li태그나 어떤 요소를 지울때 html은 알 수 있지만 만약 그게 데이터베이스와 연동된 경우 (예를들어 학생리스트를 지우면 데이터베이스에서도 지워져야할때) 사용할 수 있는 방법중 하나 1.html 엘리멘트ID와 데이터베이스 ID를 일치시키기 html에 태그에는 ID속성을 줄 수 있다 이것을 이용해서 데이터베이스에 저장하는 정보값마다 ID를 부여후, 그 아이디를 태그ID와 일치시키면 된다 ID는 유니크해야 되므로 꼼수로 Date.now()를 사용하면 해결된다 Date.now() UTC 기준으로 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리 초를 반환하는 메소드로 임시로 유니크 아이디로 사용하기 좋다 데이터 생성과 li태크 생성, 아이디부여 예시) 데이터 생성 const arrDB=[]; function newData(info){ const dataObj={ //정보와 아이디를 포함한 오브젝트 info: info, //정보 id: Date.now(), //유

원문보기 내부링크
Naver Blog

일차함수 그래프와 기울기

y=2x+1 보통 일차함수는 위와 같은 형태이다 이때 x앞에 있는 2가 기울기이며 뒤에 있는 +1은 절편이다 기울기는 x가 증가함에 따라 y의 증가량을 의미하며 절편은 x가 0일때 y값을 의미한다 기울기와 절편구하는 공식

원문보기 내부링크
Naver Blog

미분정의 (적분도 살짝?)

미분이란 어떤 운동이나 함수의 순간적인 움직임을 서술하는 방법이다. 어떤 함수의 미분이란 그것의 도함수를 도출해내는 과정을 말한다. 미분 공식을 이용하면 다항함수, 유리함수, 지수함수, 로그함수, 삼각함수 등 우리가 알고 있는 다양한 함수들에 대해서 그 도함수를 어렵지 않게 구할 수 있다. 예시) 미분정의와 기울기 어떤 함수의 기울기를 구하고 싶을때 (y의 증가량/x의 증가량)으로 기울기를 구할수 있다 그럼 기울기는 아래처럼 나온다 첫점을 x, 두번째 점 x+h 위 그래프처럼 그래프가 직선일경우 h의 위치에 관계없이 그래프가 일정하겠지만 ... 그래프가 곡선일 경우 h의 위치에 따라서 값이 달라지게된다 이때 h값이 작으면 작을수록 기울기가 점점 접선의 기울기에 가까워진다 그래서 위 그래프를 미분으로 나타낼수 있는데 이걸을 수식으로 나타내면 다음과 같다 이렇듯 미분을 하면 어떤 함수(그래프)가 그 순간 얼마나 변하였는지 나타내는 중요한 지표이다 예시2) 미분구하기 및 적분 간단정의 하

원문보기 내부링크
Naver Blog

리액트 기초

페이스북이 만든 리액트 JS, 지금도 페이스북이 계속 개선을 하고 있고 여러기업이 사용중 리액트 JS는 노멀 JS역시 커버가 가능하기때문에 더 간단하고 편리한 JS개발자가 되기위해서 배우면 좋음 React JS 사용하기 위해서 아래 코드를 import해야됨 설치를 위한 Javascript 코드 <!DOCTYPE html> <html> <body></body> //리액트 설치 <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script> //리액트로 만든 element를 html body에 둘수있도록 해줌 <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script> </html> 리액트로 html태그 생성 방법 예시1) 리액트로 태그 생성 <!DOCTYPE html> <html> <body id="root

원문보기 내부링크
Naver Blog

노트북 발열 감소시키기 (쿨링팬이 잘 안돌거나 너무 뜨거울때)

요 근래 노트북이 발열이 너무 핫해서 발열도 잡을겸 포스팅 합니다 저의 경우 셋팅전 온도가 90~100도 까지 불타올랐지만 셋팅후 40~50도 유지중이네요 (효과 확실하구먼 허허) 그럼 노트북이 너무 뜨겁거나 노트북 쿨링팬이 잘 안돌아갈때 셋팅법에 대해서 알아보겠습니다 발열잡는 방법 전원관리 옵션에서 발열을 잡아야하는데 현재 락이걸려있으므로 락을 풀어줘야합니다 1. 윈도우 검색에서 레지스트리를 검색후 들어갑니다 2. 레지스트리 폴더에서 HKEY_LOCAL_MACHINE ㄴ SYSTEM ㄴ CurrentControlSet ㄴ Control ㄴ Power ㄴ PowerSettings ㄴ54533251-82be-4824-96c1-47b60b740d00 로 들어갑니다 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Power\PowerSettings \54533251-82be-4824-96c1-47b60b740d00 3. 위 경로로 들어가면 아래

원문보기 내부링크
Naver Blog

리액트 State

리액트로 어떤 ui요소를 컨트롤할때 1. ReactDom.render을 이용한 업데이트 <script type="text/babel"> const root = document.getElementById("root"); let counter = 0; function countUp() { //카운터 증가함수 counter++; render(); } function render() { //화면을 업데이트해주는 함수 ReactDOM.render(<Container />, root); } const Container = () => { return ( <div> <h3>Total clicks: {counter}</h3> <button onClick={countUp}>Click me</button> //버튼을 클릭할때마다 증가함수 </div> ); }; render(); </script> 2. React.useState() 를 사용하는 방법 <script type="text/babel"> con

원문보기 내부링크
Naver Blog

리액트 PROPS

리액트를 하면 컴포넌트를 자주 만들고 사용한다 이때 컴포넌트들은 각각 prop(값)들을 받아서 prop에 맞는 다양한 컴포넌트를 만들수 있다 예시) function Btn({ buttonName, fontSize=12}) { //버튼 컴포넌트 이때 prop은 오브젝트이므로 {값1,값2}이런식으로 써야됨 return ( <button style={{ backgroundColor: "teal", color: "white", padding: "10px 20px", border: 0, borderRadius: "10px", marginRight: "5px", fontSize: fontSize, }} > {buttonName} </button> ); } const App = () => { return ( <div> <Btn buttonName="Save Changes" fontSize={18} /> //컴포넌트에 이름과 사이즈 prop입력 <Btn buttonName={"Confirm"} /

원문보기 내부링크
Naver Blog

리액트 MEMO (리랜더링 방지)

리액트 useState를 사용하다보면 더이상 랜더링을 안해도 되는데 계속 렌더링을 리소스를 잡아 먹는경우가 있다 이때 Memo를 사용하면 불필요한 리랜더링을 방지할 수 있다 function Btn({ buttonName, fontSize=12}) { //버튼 컴포넌트 이때 prop은 오브젝트이므로 {값1,값2}이런식으로 써야됨 return ( <button style={{ backgroundColor: "teal", color: "white", padding: "10px 20px", border: 0, borderRadius: "10px", marginRight: "5px", fontSize: fontSize, }} > {buttonName} </button> ); } const MemorizedBtn= React.memo(Btn); //Btn컴포넌트에 리랜더링을 const App = () => { const [value, setValue] =React.useState("Btn na

원문보기 내부링크
Naver Blog

리액트 useEffect (한번만 실행하거나 센서처럼 동작)

리렌더링 될 때마다 반복실행되어도 괜찮은 코드도 있을 테지만, 컴포넌트가 처음 render 될 때만 코드가 실행되길 원할 수 도 있다. 예를들어, API로 외부 데이터를 가져올 때 컴포넌트 렌더링되는 순간순간 API 요청을 하면 곤란할때가 있다( 예를들어 한번호출시 1000원짜리 API라면?!...) 그럴때 사용하면 좋은것이 바로 useEffect !! function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setValue((prev) => prev + 1); const onChange = (event) => setKeyword(event.target.value); useEffect(() => { //실행될 때 딱한번 실행되고 더이상 실행 안됨 console.log("I run only once."); }, []); r

원문보기 내부링크
Naver Blog

리액트 Create React App(Node.JS)

리액트 어플리케이션을 만드는 최고의 방식중 하나 이걸로 만들면 개발 서버에 접근한다든가, 자동으로 새로고침을 시켜준다든가, css를 즉각 포함시키는 기능 등등 여러가지가 있음 Create React App 사용하기 1. node.JS다운로드 하기 https://nodejs.org/ko/ Node.js Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org LTS버전으로 다운하면 좋음 각자 OS에 맞는 버전으로 다운로드 설치후 2. 콘솔(CMD)에 node -v 커맨드 입력후 npx 입력 위 사진처럼 버전이 뜨면 준비 끝 3. 설치하고싶은 폴더위치로 가서 명령창 열기 (윈도우기준 shift+오른쪽마우스) 4. PowerShell 창에 [npx create-react-app "폴더이름"]입력후 엔터 위 사진처럼 설치가 모두 끝난후 vsCode로 설치된 폴더를 열여줘서 아래 같이 뜬다면 설치끝!

원문보기 내부링크
Naver Blog

리액트 class와 state (올드버전?)

리액트 Hooks( useState와 useEffect 기타등등)이전에 자주 사용했던 방식의 코~딩 혹시 몰라서 일단 맛만볼려고 했는데 조금 배부르게 먹은 느낌으로 알아보았다! 리액트 class class component는 class이며, React.Component로부터 확장된다 (extends로 상속한다는것) 특징: 1. react는 자동적으로 class component의 render method를 실행 2. state는 object이다. (state에는 바꾸고 싶은 data를 넣음) 3. setState로 state값을 변경할 수 있음 예시1) +,- 버튼으로 카운터값 증감하는 코드 import React from "react"; import PropTypes from "prop-types"; class App extends React.Component{ state={ count:0 } add=()=>{ this.setState(current=>({count: current

원문보기 내부링크
Naver Blog

리액트 네이티브 동작

JS 이렇게 좋은 언어일줄이야 몰랐습니다~ 알았다면 이것만 계속 했을텐데 요근래 몇달동안 빡세게 공부했던 이유가 JS라는 요석과 좀 친해지기위함이고 왜 친해지고 싶냐 하면 app을 편하게 만들고 싶기 때문이죠 음 그래 이거지 내가 원했던 언어야 ㅜㅜ 그래서 스마트폰 앱을 만들기위한 언어인 리액트 네이티브 어떻게 동작하는지 살짝 맛만 봅시다 리액트와 리액트 네이티브 리액트와 리액트-네이티브의 차이는 웹사이트를 만들거면 리액트js 스마트폰App을 개발하고 싶으면 리액트-네이티브 정도에 차이 같습니다 (물론 리액트 네이티브를 하기 위해서는 리액트를 알아야하고 리액트를 하기위해서는 JS를 알아야합니다) 위 사진과정을 살펴보면 리액트JS로 웹사이트를 만들때는 html로 기본 뼈대를 만들고->리액트JS로 코딩->웹사이트 완성 과정으로 리액트JS를 브라우저가 알아들을수 있게 변환하는 몇가지 것들만 임포팅해주면 별도에 큰 설치 없이 진행가능하지만.. 리액트 네이티브로 App을 만들때는 html 기

원문보기 내부링크
Naver Blog

리액트 네이티브 쉽게 빌드하기(EXPO)

아이디어를 빠르게 구현하는 프로토타이핑의 적합한 도구 expo를 사용해보자! EXPO? 그게뭔데 별다른 설치와 선언 없이 리액트 js와 디자인코드만으로 앱을 만들수 있게 도와주는 도구다 expo를 사용하면 앱을 위한 모든셋팅은 끝난 상태로 위 사진에 코딩, 디자인 부분만 구멍이 나있고, 개발자들은 저 구멍만 자기 스타일대로 코딩하면 끝! 아주 심플하면서 유용한 도구인것 장점 xcode나 안드로이드 스튜디오를 따로 배우지 않고 expo만으로도 앱 개발이 가능. expo가 이 두가지보다 상위버전 이기에, 내부적으로 두가지의 작업을 해낼 수 있다 양쪽 소프트웨어(안드로이드/ios)를 오픈할 필요도, 각기 다른 플랫폼들에서 테스트를 거칠 필요도 없다. 윈도우에서 ios 앱을 빌드하는 것이 가능 -> 이는 서버로 데이터를 보내고, 서버에서 파일을 가지고 응답할 수 있다는 것@! 앱 하나로 양쪽 소프트웨어를 사용하는 디바이스에서 실행이 가능 ' over the air updates ' : 앱을

원문보기 내부링크
Naver Blog

JSX 즉시실행함수

즉시실행함수 구조 (function (){ // private code return { // public property or method } })(); 1. 정의되자마자 바로 실행된다. 2. 익명 함수를 사용한다. 3. 딱 1회만 실행되고 다시는 실행하지 않는다. 4. 초기화코드나 모듈화 패턴을 만들 때 유용하게 사용된다. const name="deumi"; . . . <Text style={styles.title}> {(() => { if (name === "Hanbit") return "my name is Hanbit"; else if (name === "deumi") return "hi deumi"; })()} </Text> 1. 즉시 실행 함수는 정의되자마자 바로 실행하도록 만들어져 있습니다. 그러므로 명백한 의도를 가지고 의도한 스코프, 의도한 코드 라인에 정확하게 선언 및 실행해야 합니다. 2. 즉시 실행 함수는 익명 함수를 이용해 만드는 것이 보통입니다. 정의하자마자

원문보기 내부링크
Naver Blog

리액트 네이티브 화면 터치 이벤트(View)

View도 터치를 감지할수 있음 <View onTouchStart={() => 원하는함수()} style={{ width: '100%', height: '100%' }} /> 이런식으로 구성하면 view를 따로 버튼이나 터치 태그를 안감싸도 터치할때마다 함수 작동이 가능하고 view태그안에 터치, 스크롤 태그에 영향 없음

원문보기 내부링크
Naver Blog

리액트네이티브) expo bottomsheet 사용법

https://gorhom.github.io/react-native-bottom-sheet/ Getting Started | React Native Bottom Sheet A performant interactive bottom sheet with fully configurable options gorhom.github.io 설치 ///yarn or npm 설치할것들 yarn add @gorhom/bottom-sheet@^4 yarn add react-native-gesture-handler yarn add react-native-reanimated@next //expo에 설치할것들 expo install react-native-gesture-handler expo install react-native-reanimated 설치후 babel.config.js 에 Babel 플러그인을 추가 module.exports = function(api) { api.cache(true); ret

원문보기 내부링크
Naver Blog

리액트네이티브 서버통신 post(Fetch, axios)

리액트네이티브로 앱이나 웹을만들때 서버나 인터넷 없이 작동하는 앱도 있지만 21세기 테크날로지 시대에서 인터넷없는 앱,웹은 반쪽자리라 볼수 있다 그러므로 간단하게 서버통신하는 법을 알아보자 Fetch (리액트네이티브 기본탑재) https://reactnative.dev/docs/network#using-fetch Networking · React Native Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server. reactnative.dev 리액트네이티브가 기본적으로 제공하는 함수로 사용법은 간단하다 fetch('https://mywebsite.com/mydata.json'); //이런식으로 콘텐츠를 가져오기 위해 U

원문보기 내부링크
Naver Blog

리엑트네이티브 EXPO axios로 ImagePicker 이미지 서버에 파일올리기 이슈

하루하고도 반나절 더 고생한 이슈 그리고 해결 ;) ImagePicker로 이미지 파일 저장->axios로 서버저장 ->에러500 저장안됨 이슈 발생 원인은 axios! ImagePicker로 갤러리에서 이미지 선택 및 가져오기 const pickImage = async () => { let result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.Images, allowsEditing: true, quality: 1, }); console.log(result); if (!result.cancelled) { setImage(result); // [image, setImage] useState 에 저장 } }; 문제발생 axios를 이용해 사진저장이 안되는 이슈... static saveChatsForImage = async (Images) => { const body = n

원문보기 내부링크
Naver Blog

리액트네이티브 개행문자('\n') 여백

const str1 = `ㅇ`; const str2 = `ㅇ\n`; 작업중에 개행문자열을 사용할때가 있었는데 확인결과 아래처럼 나옴 그냥 단일문자 'o'과 개행문자를 포함한 'o\n'을 비교시 개행문자가 좀더 크고 o이 왼쪽으로 몇픽셀 이동된것으로 보아 \n이 공백이 존재하는것 같음 해결방법을 찾아봤지만 나만 그런가... 별로 해당 이슈에 대해서 말이 없었음 그래서 본인만에 해결방법으로 \n이 있을때마다 <Text>태그를 새로 만들어주는 방법을 사용했음 예시) const MSGText = (str) => { const temp = str.split("\n"); console.log(temp); return temp.map((Textvar) => { return <Text style={styles.ChatMsg_new}>{Textvar}</Text>; }); };

원문보기 내부링크
Naver Blog

리액트네이티브 서버에러 400뜰때 (JS숫자 데이터로 인한 에러)

서버와 html 통신을 할때 에러가 나는 경우가 있다 여러 응답들이 많지만 그 중 흔한 400이 뜰때! 클라에서 분명 서버님 말대로 잘 기입해줘도 에러가 날때! 서버와 클라 통신로그를 모두 찍어보자 그곳에서 해결법을 찾을지니... 나같은 경우 float형식의 데이터를 넘겨줘야 하는데 JS가 자동으로 int형식으로 변환해서 생긴 에러였다 float으로 1.0을 json형식으로 만들어서 넘길시 1.0->1로 자동으로 변환된서 서버에서 에러가 발생했다 서버에러가 발생한 코드부분 {addMessageRequests: [ { alpha: 1.0, // 1.0으로 적었지만 json으로 변환해서 통신시 int값 1로 바뀜 }, ], }; 그래서 float값을 온전히 전달하기위해서 1.0을 string값으로 "1.0"으로 보냈다 해결 코드 부분 {addMessageRequests: [ { alpha: "1.0", // 1.0을 string값으로 보내줌 }, ], }; 물론 "1.0"으로 strin

원문보기 내부링크
Naver Blog

리엑트네이티브 이미지 비율대로 할당하는 법

리액트 네이티브가 기본으로 지원하는 이미지 태그는 자동으로 이미지 비율대로 안만들어져서 아래처럼 코딩해줘야지 이미지 비율대로 생성된다 1. 이미지 크기대로 생성 style={{ width: 이미지Width height: 이미지height }} 2. 가로크기가 정해진 상태 에서 동적크기 생성 예시) 가로크기가 스크린에 69%로 정했을때 const chartWidth =Dimensions.get('window').width; //화면 가로사이즈 저장 <Image source={{ uri: 이미지소스넣는부분 }} style={{ width: chartWidth * 0.69, height: (chartWidth * 0.69 * 이미지height) / 이미지Width, }} resizeMode="cover" />

원문보기 내부링크
Naver Blog

리액트네이티브 Font 전체 변경하기(솔루션)

expo에서 어떤폰트를 다운받아서 사용할때 font전체변경이 안되서 하나하나 변경해줘야 할때가 있다 그럴때 이 방법을 사용하면 몇 번에 코드로 전체 Text에 폰트를 쉽게 변경 할 수 있다 1. (expo 파일트리 기준)폰트다운후 assets->fonts 폴더에 배치 2. 새로운 폰트로 return할 Text component 생성 import { Text } from "react-native"; import * as Font from "expo-font"; // custum font 설정 component const DefaultText = ({ children, style }) => { // Font.useFonts로 다운받은 폰트 로드 const [loaded] = Font.useFonts({ NanumBarunGothic: require("../../assets/fonts/NanumBarunGothic.ttf"), "NanumBarunGothic-Bold": { uri: re

원문보기 내부링크
Naver Blog

리액트네이티브 상태표시줄 높이 구하기

리액트네이티브는 기본적으로 빈 종이 같은 느낌이라 상태표시줄 높이도 구해서 공백처리를 해줘야지 디자인 안깨진다 IOS와 안드로이드를 한번에 처리할려면 아래 처럼 코딩하면 된다 import {StatusBar} from "react-native"; import { getStatusBarHeight } from "react-native-status-bar-height"; //ios 상태표시줄 크기를 얻기위해서 const StatusBarHeight = Platform.OS === "ios" ? getStatusBarHeight(true) : StatusBar.currentHeight;

원문보기 내부링크
Naver Blog

리액트 네이티브 console.log()가 [object Object]결과를 반환할때

리액트 네이티브를 할때 console.log() 로 Object를 찍으면 내가 알고 싶은 구조는 안나오고 [object Object]라고 나올때가 있다 ㅡㅡ;... 그럴때 Object가 어떤구조로 이루어졌는지 확인하는 방법이다 해결법1 JSON.stringify console.log(JSON.stringify(result)) 해결법2 console.debug(obj) console.debug(result) 해결법3 console.dir(obj) console.dir(result)

원문보기 내부링크
Naver Blog

리액트네이티브 이미지 성능 이슈(스크롤뷰 렉)

리액트 네이티브로 <Image /> 를 사용하여 여러이미지를 사용할때 보여주는 화면이 심각하게 느려지는 현상이 발생 특히 안드로이드에서 심각한 느려짐이 보임 해결법 <Image width={100} height={100} source={image} style={styles.itemHeaderImg} resizeMethod="resize" /> 1. width, height 고정값으로 지정해주기 2. resizeMethod-"reisize"로 설정 이후 렉 해결!

원문보기 내부링크
Naver Blog

리액트네이티브 네비게이션 특정작업 완료 후 페이지 이동 및 완료페이지 접근 못하게 막는법

@react-navigation/native (https://reactnavigation.org/docs/getting-started) Getting started | React Navigation What follows within the Fundamentals section of this documentation is a tour of the most important aspects of React Navigation. It should cover enough for you to know how to build your typical small mobile application, and give you the background that you need to dive deeper into the more advanced p... reactnavigation.org 리액트네이티브로 네비게이션(react-navigation/native 라이브러리 기준) 작업을 하다보면 특정작업을 완

원문보기 내부링크
Naver Blog

리액트네이티브 svg아이콘 사용하기

react native는 기본적으로 svg사용을 지원하지 않아서 디자이너님이 만들어주신 아이콘을 활용 못하고 있었는데 역시 찾아보니 라이브러리가 있어서 해결! 그럼 사용법을 알아보자 svg사용하는 방법(expo기준) SVG를 그대로 사용하는방법 1. 터미널에 아래 코드를 입력해서 설치 yarn add react-native-svg yarn add --dev react-native-svg-transformer 2. 작업폴더 최 상단에 metro.config.js 파일 추가 (없으면 만들면됨) //metro.config.js const { getDefaultConfig } = require("expo/metro-config"); module.exports = (() => { const config = getDefaultConfig(__dirname); const { transformer, resolver } = config; config.transformer = { ...transfor

원문보기 내부링크
Naver Blog

리액트네이티브 parallax 스크롤 구현하기

parallax-scroll 스크롤링 크기를 엘리먼트들에 다르게 주는 기법을 사용한 디자인 스크롤을 하면서 헤더 크기가 줄어들게 할려고 연구하다가 알게된 기법! 대략적인 기능 설명 1. Animate.ScrollView에서 스크롤을 할때마다 맵핑된 scrollY변수에 값이 입력됨 2. scrollY변수에 값이 바뀌면 Animated.View(헤더)의 높이가 변한다 const scrollY = useRef(new Animated.Value(0)).current; ... <View style={{backgroundColor: 'white'}}> <Animated.ScrollView ref={scrollViewRef} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} onScroll={Animated.event( [{nativeEvent: {contentOffset: {y: scrollY}}}], { u

원문보기 내부링크
Naver Blog

스타트업 느낌점

요 근래 스타트업 스타트멤버로 일을 하고 있습니다 아직 몇달 안됬지만 소소하게 느낀점을 기록합니다 ㅎㅎ 스타트업 느낌점 1. 작업의 끝이 정해져있지 않다 제가 초보라서 그런것도 있겠지만 코드를 짠다->수정->코드를 짠다->수정 위 행위에 무한 반복입니다 그래도 수정하면 할수록 작품의 퀄리티는 엄청 올라가서 만족! 2. 내가 지금 가는길이 옳바른 길인지 헷갈린다 과거에서 현재까지 성장한 것만 보면 앞으로 잘 가는것 같지만 현재 당장 앞으로 어떻게 가야 할지... 그리고 지금 가는 방향이 정답인지 예측이 안되서 막막합니다 안개가 자욱해서 한치 앞도 안보이지만 무작정 앞으로 걸어가는 기분일까요? 3. 재밌다 상상과 꿈을 조금씩 실현시킨다는 행위에 큰 희열이 있어서 재밌습니다 물론 고통과 갈증또한 있습니다 끊임없는 야근과 공부(프로그래머 특성인듯함ㅜ) 그리고 버그와 로직과의 머리싸움 그래도 제가 선택한 스타트업과 직업이라 그런지 그 순간순간 고뇌와 고통 또한 재밌습니다 고통=성장통 이라면

원문보기 내부링크
Naver Blog

이것이 폭풍간지! 그 시절 낭만(MEGA DETH)

요즘 브래드(사장님)의 추천으로 메탈노래에 입문했습니다 입문자 소감으로는 -간지- 요새 나오는 말랑말랑 한 사랑노래와는 전혀다른 터프와 가오가 있는 간지 그자체.... 키야... 상남자들의 매력에 취해버렸슴다 특히 메가데스에 Holy Wars를 보는 순간,... 흠 무슨말이 더 필요할겠슴까 영상한번 보시죠 Holy Wars 간지폭풍 영상 기타리프와 박력넘치는 드럼이 인상적인데 영상에 보이는 퍼포먼스와 폼세가 마치 제가 어렸을적 처음 파워레인저를 봤을때 그 감정이 다시 샘솟더군요 이건 매일 자기전에 자장가로 들어야겠습니다 장발간지 여튼 좋은 노래라서 강추할겸 포스팅 해보네용 꼭 한번 들어보세요 ps.이런 좋은 장르를 알고 계셨으면 진작에 추천좀 해주시지!!! 인생을 손해본 느낌이네요

원문보기 내부링크
Naver Blog

Execution failed for task ':react-native-video:generateDebugRFile'. 에러 해결법

Execution failed for task ':react-native-video:generateDebugRFile'. > Could not resolve all files for configuration ':react-native-video:debugCompileClasspath'. > Could not find com.yqritc:android-scalablevideoview:1.0.4. Required by: project :react-native-video com.yqritc:android-scalablevideoview:1.0.4. 이게 없어서 뜨는 오류인듯해서 찾아보니 리액트네이티브 0.65버전에서 jcenter() 제거되어 mavenCentral()다시 추가하면 allprojects.repositories마법처럼 다시 작동함 android/build.gradle 에 아래코드를 추가해준다 allprojects { repositories { .... # Keep the r

원문보기 내부링크
Naver Blog

axios url 뒤에 + query-string 붙여서 보내는법

. Axios는 추가 라이브러리 없이 아래처럼 사용하면 간편하게 해결 가능하다 axios .request({ url: '/some/url', method: 'get', params: { offset: 0, limit: 12, unknown: '???' }, ... }) 위코드를 실행하면 이렇게 나온다 /some/url?offset=0&limit=12&unknown=%3F%3F%3F.

원문보기 내부링크
Naver Blog

Promise와 Async/Await 구문

동기와 비동기 API 동기: 특정한 작업이 종료되기 전까지 기다려주고 다음줄 코드 작업을 실행함 비동기: 특정 작업이 종료되기 전까지 기다려 주지 않고 다음줄 코드가 실행됨 JS와 기타 다른 코드들 대부분 작업들이 특별한 처리를 해주지 않으면 자동적으로 비동기적으로 실행된다 그래서 JS가 지원하는 동기 라이브러리 Promise를 알아보자 Promise Promise() resolve 및 reject 인수를 전달할 실행 함수. 실행 함수는 프로미스 구현에 의해 resolve와 reject 함수를 받아 즉시 실행됩니다(실행 함수는 Promise 생성자가 생성한 객체를 반환하기도 전에 호출됩니다). resolve 및 reject 함수는 호출할 때 각각 프로미스를 이행하거나 거부합니다. 실행 함수는 보통 어떤 비동기 작업을 시작한 후 모든 작업을 끝내면 resolve를 호출해 프로미스를 이행하고, 오류가 발생한 경우 reject를 호출해 거부합니다. 실행 함수에서 오류를 던지면 프로미스는

원문보기 내부링크
Naver Blog

리액트 네이티브 현재 컴포넌트 위치정보 가져오기

리액트 네이티브를 코딩중 동적으로 컴포넌트 위치를 가져올일이 종종 생기네용 그때 사용한 방법을 기록겸 포스팅 합니다 measureInWindow() <TouchableOpacity onPress={e => { console.log('클릭함'); console.log(e.nativeEvent); PosXY.current.measureInWindow((x, y, height, width) => { //포지션 구하는 코드 console.log('{x, y,height,width}'); console.log({x, y, height, width}); }); }}> <View ref={PosXY} style={style.chatBoxContainer}> <Text style={style.textContainer}>{message}</Text> </View> </TouchableOpacity> 위치를 얻고자 하는 컴포넌트에 주소를 useRef변수로 저장하고 버튼이나 위치를 얻고자 할떄마다 us

원문보기 내부링크
Naver Blog

리액트 네이티브 url 캐시 문제

서버에서 데이터(파일이나 이미지)를 받아올때 받아오는 url주소가 동일하다면 내부 캐시때문에 데이터(파일이나 이미지) 갱신 안될때가 존재한다 그럴때 꼼수(?)로 url뒤에 추가로 값을 붙여서 하면 해결된다 ?cache=${Math.random()} await fetch(`https://url파일주소?cache=${Math.random()}`,) 캐시를 어떻게 날릴까 고민했는데 생각보다 간단한 꼼수였다

원문보기 내부링크
Naver Blog

JS 객체에 키가 있는지 확인하는 방법(여러가지)

JS 코딩을 하다보면 어떤객체가 내가 원하는 키값이 제대로 있는지 검증하거나 예외처리를 해줘야 할 때가 생긴다 그렇지 않으면 무수한 버그의 악수 요청이.. 여튼 키값을 찾는 3가지 방법으로 결론은 마지막 방법이 제일좋다 ㅎㅎ 1.직접 액세스(if문) 해서 확인하기 const tempObj={ "myKey1": "my Value 1", "myKey2": "My Value 2" }; function isKeyExistsobj, key){ if(obj[key] ==undifined){ return false; }else{ return true; } } let result0 = isKeyExists(myObject,"mykey0") console.log("Check for the non-existing key, is key exists > "+result0) let result1 = isKeyExists(myObject,"mykey1") console.log("Check for the ex

원문보기 내부링크
Naver Blog

리액트 setInterval(타이머함수) 사용시 문제점과 해결법

setInterval은 타이머관련 함수로 시간에 따라서 뭔가 하고싶을때 사용하는 함수다 그러나 리액트 특유 hooks에 리랜더 동작으로 원하는 대로 동작할려면 쪼금(?) 생각이 필요하다 잘못된 코드 예시) import React, { useState } from "react"; function App() { const [fontState, setFontState] = useState(5); setInterval(() => { setFontState(fontState + 1); }, 1000); return ( <div> <div style={{ fontSize: fontState + "px" }}>안녕</div> </div> ); } export default App; 안녕이라는 글이 1초마다 점점 커지는 코드를 생각했을때 직관적으로 나올수 있는 코드지만 useState에 hooks 특성때문에 계속 렌더링 되서 원하는 동작을 얻기 힘들다 (안녕이라는 글이 막 지진나듯이 덜덜떨리면서

원문보기 내부링크
Naver Blog

useState에 Map사용하기

Map? Map은 객체로 키-값 쌍을 보유하고 키의 원해 삽입 순서를 기억한다 예시코드 const map1 = new Map(); map1.set('a', 1); map1.set('b', 2); map1.set('c', 3); console.log(map1.get('a')); // expected output: 1 map1.set('a', 97); console.log(map1.get('a')); // expected output: 97 console.log(map1.size); // expected output: 3 map1.delete('b'); console.log(map1.size); // expected output: 2 더 자세한 설명은 독스에..https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map Map - JavaScript | MDN The Map object holds

원문보기 내부링크
Naver Blog

스마트폰별 해상도와 화면비율

해상도 목록 해상도 단위는 픽셀(px) 화소수 순 화소수 해상도 화면비율 삼성 LG 애플 구글 153,600 320 × 480 2:3 옵티머스1 아이폰3 384,000 480 × 800 3:5 갤럭시S1 갤럭시S2 넥서스S 넥서스One 614,400 640 × 960 2:3 아이폰4 727,040 640 × 1136 9:16 아이폰5 786,432 768 × 1024 3:4 옵티머스뷰 아이패드1 아이패드2 아이패드미니 921,600 720 × 1280 9:16 갤럭시S2 HD 갤럭시S3 갤노트2 옵티머스G 갤럭시넥서스 983,040 768 × 1280 3:5 넥서스4 1,000,500 750 × 1334 9:16 아이폰6 아이폰6S 아이폰7 아이폰8 1,024,000 800 × 1280 10:16 갤럭시탭10.1 갤노트1 G패드10.1 넥서스7 1,646,400 840 × 1960 9:21 갤럭시폴드(커버) 2,073,600 1080 × 1920 9:16 갤럭시S4 갤럭시S5 갤노트

원문보기 내부링크
Naver Blog

맛이 틀리네요

그 확실히 야외에서 해먹는 직화 토마호크 구이라는 녀석은 맛이 다르네요 이게 나에게 유흥이고 쾌락이랄까 낄낄 몬헌에서 나오는 고기맛이 이런맛 아닐까? 인생 별거 있겠슴까 바쁘게 살다가 소소한(?) 이런게 좋네용

원문보기 내부링크
Naver Blog

JSON.parse 사용시 데이터가 JSON인지 판단함수

JSON 파싱할때 은근히 10번중 1번꼴로 데이터가 깨질때가 있어서 JSON인지 아닌지 판단하는 함수를 간단하게 만들었다 const isJson = (value) => { try { if (typeof JSON.parse(value) == 'object') { console.log('내가 원했던 JSON이야 ㅜㅜ true'); //json일때 원하던 동작코드 } else { console.log('오브젝트 아녀 false'); //json아닐때 원하던 동작코드 } } catch (e) { console.log('JSON 아녀 false'); //json아닐때 원하던 동작코드 return; } };

원문보기 내부링크
Naver Blog

Execution failed for task ':app:packageDebug'

문제: *WhatwentwrongExecutionfailedfortask':app:packageDebug'.>Afailureoccuredwhileexecutingcom.android.build.gradle.internal.tasks.Workers$ActionFacadeJavaheapspace> 해결: android/app/src/main/AndroidManifest.xml 파일에서 </applicaiton> 태그안에 android:largeHeap=”true” <---------추가하면 해결

원문보기 내부링크
Naver Blog

react native ':app:bundleDebugJsAndAssets'. 오류

오류 * What went wrong: Execution failed for task ':app:bundleDebugJsAndAssets'. > Process 'command 'cmd'' finished with non-zero exit value 1 ------------- 해결법: android/app/build.gradle 에서 아래코드를 추석처리 해주면 된다 //apply from: "../../node_modules/react-native/react.gradle" <---주석처리

원문보기 내부링크
Naver Blog

react-native :app:installDebug FAILED

해결법: 기존 앱을 지우거나 새로운 에뮬레이션 설치후(램하고 용량 기존보다 더 넉넉하게 설정후) 다시 설치하면 동작함

원문보기 내부링크
Naver Blog

react native 장치에서 실행

https://runebook.dev/ko/docs/react_native/running-on-device React Native - 장치에서 실행 - 앱을 사용자에게 공개하기 전에 실제 기기에서 앱을 테스트하는 것이 좋습니다. 이 문서는 장치에서 React Native 앱을 실행하고 생산 준비 - 한국어 Android 기기에서 앱 실행 Development OS macOS Windows Linux 1. USB를 통한 디버깅 활성화 대부분의 Android 기기는 기본적으로 Google Play에서 다운로드 한 앱만 설치하고 실행할 수 있습니다. 개발 중에 앱을 설치하려면 장치에서 USB 디버깅을 활성화해야합니다. 장치에서 USB 디버깅을 활성화하려면 먼저 설정 → 휴대폰 정보 → 소프트웨어 정보 로 이동한 다음 하단 의 Build number 행을 7번 눌러 "개발자 옵션" 메뉴를 활성화해야 합니다. 그런 다음 설정 → 개발자 옵션 ... runebook.dev Android 기기에

원문보기 내부링크
Naver Blog

react native enum을 생성하는 방법

생성법 export enum Colors { background_color = '#000060', button_gradient_color1 = '#4c669f', button_gradient_color2 = '#3b5998', button_gradient_color3 = '#192f6a' }; 사용법 Colors.button_gradient_color1; Colors.button_gradient_color2; Colors.button_gradient_color3;

원문보기 내부링크
Naver Blog

react native 라이브러리 만들기 및 npm 올리기

1. 모듈을 만들고 싶은 폴더위치에서 아래 코드 실행 npx create-react-native-library react-native-awesome-module 위 코드 실행하면 npm패키지 이름부터 github주소 등등 입력프로세스가 나오고 입력이 끝나면 라이브러리 프로젝트가 생성됨 2. https://www.npmjs.com/signup npm | Sign Up Sign Up Username Email address Password Note: Your email address will be added to the metadata of packages that you publish, so it may be seen publicly. Your password should be at least 10 characters. Learn more Agree to the End User License Agreement and the Privacy Policy . Create an Account

원문보기 내부링크
Naver Blog

No member named 'cancelButtonTintColor' in 'JS::NativeActionSheetManager::SpecShowActionSheetWithOpt

xcode가 이전 빌드파일을 가르켜서 생기는 문제로 간단 해결방법은 XCode > Product > Clean Build Folder 이렇게 해주고 빌드하면 잘된다 android clean gradle 이랑 비슷한 느낌?

원문보기 내부링크
Naver Blog

react native apk 만들기

안드로이드 폴더로 이동한다음 릴리즈버전 apk ./gradlew assembleRelease 릴리즈버전 apk ./gradlew assembleDebug

원문보기 내부링크
Naver Blog

ios Simulator에서 키보드가 안보일때

I/O -----> Keyboard ----> Connect HardWare Keyboard 체크해제

원문보기 내부링크
Naver Blog

react native 키보드 높이 구하기

임포트 import { Keyboard } from 'react-native'; 2. 이벤트 리스너 useEffect(() => { const showSubscription = Keyboard.addListener('keyboardDidShow', e => { //키보드가 show 했을 때 //this._keyboardDidShow 함수 실행 Height= e.endCoordinates.height;//를 사용하면 키보드 높이를 구할 수 있다 }); const hideSubscription = Keyboard.addListener('keyboardDidHide', e => { //키보드가 Hide 했을 때 //this._keyboardDidHide 함수 실행 }); return () => { showSubscription.remove(); hideSubscription.remove(); }; }, []);

원문보기 내부링크
Naver Blog

이미지 크기조정 코드

/* 이미지 크기 조정 */ function resize(img){ var newImg = new Image(); newImg.src = img.src; //원본 이미지 사이즈 저장 var width = newImg.width; var height = newImg.height; // 가로, 세로 최대 사이즈 설정 var maxWidth = 300; // 원하는대로 설정. 픽셀로 하려면 maxWidth = 100 이런 식으로 입력 var maxHeight = 300; // 원래 사이즈 * 0.5 = 50% // 가로나 세로의 길이가 최대 사이즈보다 크면 실행 if(width > maxWidth || height > maxHeight){ // 가로가 세로보다 크면 가로는 최대사이즈로, 세로는 비율에 맞춰 리사이즈 if(width > height){ resizeWidth = maxWidth; resizeHeight = Math.round((height * resizeWidth) / wid

원문보기 내부링크
Naver Blog

react native release apk설치시 Play Protect에 의해 차단 된 설치 앱 오류 해결법

https://reactnative.dev/docs/next/signed-apk-android Publishing to Google Play Store · React Native Android requires that all apps be digitally signed with a certificate before they can be installed. In order to distribute your Android application via Google Play store it needs to be signed with a release key that then needs to be used for all future updates. Since 2017 it is possible for Google P... reactnative.dev 나의 경우 구글 플레이 스토어에 올릴려고 KEYTOOL 셋팅만 해두었을경우 해당 오류가 발생했다 다시 KEYTOOL셋팅을 롤백했더니 이후 테스트

원문보기 내부링크
Naver Blog

react native ffmpeg 사용하기

https://github.com/tanersener/ffmpeg-kit/tree/main/react-native ffmpeg-kit/react-native at main · tanersener/ffmpeg-kit FFmpeg Kit for applications. Supports Android, Flutter, iOS, macOS, React Native and tvOS. Supersedes MobileFFmpeg, flutter_ffmpeg and react-native-ffmpeg. - ffmpeg-kit/react-native at main · taner... github.com 영상을 유튜브나 틱톡처럼 스트리밍하기 위해서 꼭? 필요한 라이브러리 아직 나조차 모든 사용법을 파악하지 못했지만 지금 까지 사용법을 정리하고자, 문서화 함 설치 yarn add ffmpeg-kit-react-native 설치하기 위한 안드로이드, ios 최소 타켓 레벨 위 타켓레벨을 안맞춰주면 에러난

원문보기 내부링크
Naver Blog

react native useRef 핵심요약

import React, { useEffect, useState, useRef } from 'react'; const Conter = () =>{ const [count, setCount] = useState(0); const countRef = useRef(count); useEffect(() => { countRef.current = count; },[count]) // (1) 첫 번째 useEffect useEffect(() => { return () => { console.log("unmount 시 출력", countRef.current); }; }, []); // (2) 두 번째 useEffect return ( <> <h1>{count}</h1> <button onClick={()=>setCount(c=>c+1)}>+<button/> </> } ///unmount 시 출력 count값 useEffect함수 내부에 return 키워드를 사용하여 정리 및 마지막 호출하는 느낌

원문보기 내부링크
Naver Blog

Array.prototype.map()

const NUM_ITEMS=10 let testArr = [...Array(NUM_ITEMS)].map((a, index) => { //만들고 싶은 배열을 위해 작동하는 함수부문 return index; }); console.log('테스트값 :'); console.log(testArr); //응답 //테스트값 : //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 원하는 길이만큼 배열을만듬 이때 배열값은 map 함수에 어떤것을 코딩하느냐에 따라 다름

원문보기 내부링크
Naver Blog

react native ios 헤더 바텀 노치 높이 구하기

'react-native-safe-area-context' https://www.npmjs.com/package/react-native-safe-area-context#usesafeareainsets react-native-safe-area-context A flexible way to handle safe area, also works on Android and web.. Latest version: 4.3.1, last published: 2 months ago. Start using react-native-safe-area-context in your project by running `npm i react-native-safe-area-context`. There are 665 other projects in the npm registry using react-native-s... www.npmjs.com import { useSafeAreaInsets } from 'reac

원문보기 내부링크
Naver Blog

M3U8파일이란 ?

리액트 네이티브로 작업하다가 알게된 m3u8 흔히 유튜브, 네이터tv, 아프리카 등등 영상 플랫폼에서 사용하는 스트리밍용 파일이라고 보면된다 대략적으로 10초짜리 영상을 n초 간격으로 쪼개서 10초 영상을 모두 다운받지 않아도, 다운받은 n초씩 바로 재생가능하다 물론 다운 받지 못한 구간은 버퍼링이 생길수있다! 이점은 10초를 모두 다운받지 않아도 재생가능하다는점 사이트 운영자, 개발자라면 hls.js를 이용해서 간단한 스트리밍 서비스 플랫폼을 제작가능하다 m3u8 파일 예시 #EXTM3U #EXT-X-VERSION:3 #EXT-X-TARGETDURATION:35 #EXT-X-MEDIA-SEQUENCE:0 #EXTINF:10, index0.ts #EXTINF:10, index1.ts #EXTINF:10, index2.ts #EXTINF:5, index3.ts #EXT-X-ENDLIST #EXTM3U m3u8 파일임 #EXT-X-VERSION:3 m3u8 버전3 #EXT-X-TARGE

원문보기 내부링크
Naver Blog

react native FlatList Error: Invalid hook call api

RN 기본제공인 컴포넌트 FlatList에서 renderItem에 들어가는 함수중에 후크를 사용시 위와같은 에러 발생 import React, { useEffect, useState } from 'react'; import { Image, Text, View, SafeAreaView, FlatList } from "react-native"; import { useNavigation } from '@react-navigation/native'; import { TouchableOpacity } from 'react-native-gesture-handler'; import styles from './styles'; function Products() { const [apiProduct, setProduct] = useState([]); useEffect(() => { fetch('https://laravel-api.com/v1/product',{ method: 'GET', headers

원문보기 내부링크
Naver Blog

유튜브 및 스트리밍, 비트레이트 정리

출처: https://emptydream.tistory.com/4730 [빈꿈 EMPTYDREAM:티스토리] 유튜브 인코딩과 라이브 스트리밍에 관한 내용들 정리. 유튜브 해상도 720p는 해상도를 의미하고, 권장 해상도는 아래와 같다. 유튜브는 기본 16:9 비율이다. 2160p: 3840x2160 1440p: 2560x1440 1080p: 1920x1080 720p: 1280x720 480p: 854x480 360p: 640x360 240p: 426x240 프레임 레이트 frame rate 프레임 레이트 단위는 fps(frame per second)이다. 30fps라면, 1초에 30장의 이미지가 재생된다고 할 수 있다. 초당 재생되는 이미지 수가 많아지면 동영상이 좀 더 부드럽게 재생된다. 따라서 30fps보다 60fps가 더 부드러운 움직임을 보여준다. 그런데 보통 사람들은 30fps와 60fps는 차이를 확실히 느끼지만, 30fps와 20fps의 차이는 잘 느끼지 못 한다. 따

원문보기 내부링크
Naver Blog

JS 다중배열 만들기겸 다중배열 1중배열로 병합하기

중첩배열 만들기 예시) var favMovies = new Array ( ); favMovies[0] = 'Begin Again' favMovies[1] = 'Soul' favMovies[2] = new Array ("Matrix", "Matix Reloaded", "Matrix Revolutions") favMovies[3] = Array ("Frozen", "Frozen 2", ["Tangled", "Alladin"]) 결과 var favMovies = ['Begin Again', 'Soul', ['Matrix', 'Matix Reloaded', 'Matrix Revolutions'],['Frozen', 'Frozen 2', ['Tangled', 'Alladin']]] 사용법 console.log(favMovies[3][2][0]) //Tangled 중첩배열을 1차배열로 만들기 1 Array.flat() favMovies = ['Begin Again', 'Soul', ['Matr

원문보기 내부링크
Naver Blog

react native click 관련 이벤트가 안될때(onPress등등)

뷰를 완벽하게 짜고 테스트할때 가끔 onPress이벤트가 작동안할때가 있음 해결법 onPress버튼을 View로 감싸고 스타일에 position:'absolute'나 zindex값을 추가하면 클릭 위치 잘 작동함 //예시 <View style={{ zIndex: 2,}}> <Pressable style={{ height: 35, width: 55, }} onPress={() =>{"버튼클릭이벤트"}} </Pressable> </View> https://github.com/callstack/react-native-paper/issues/1883 onPress not detected on position: absolute element inside Menu's anchor property · Issue #1883 · callstack/react-native-paper OnPress not working on position absolute element inside Menu anchor

원문보기 내부링크
Naver Blog

react native Text 컴포넌트 클릭 문제점 및 해결

예시) <Text numberOfLines={isMoreTag ? maxTagLine : 1 } ellipsizeMode={'tail'} style={{ fontSize: 12, width: '80%', color: 'rgba(0,0,0,0)', }}> {hashTagList.map((item, index) => { return ( <Pressable key={index} onPress={() => { console.log('터치터치터치'); } style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', }}> <Text style={{ color: 'white', padding: 0, marginLeft: 6, fontSize: 12, }}> {'#' + item} </Text> </Pressable> ); })} </Text> 위와같은 예시처럼 리액트 네이티브 기본 Text컴포넌트 안에는 여러 컴포

원문보기 내부링크
Naver Blog

react native 2중 중첩 플랫리스트

틱톡같은 느낌 import { StyleSheet, View, SafeAreaView, Pressable, } from 'react-native'; import React, {useEffect, useState} from 'react'; import Text from '../component/DefaultText'; import {StackParamList} from '../../App'; import {StackNavigationProp} from '@react-navigation/stack'; import {RouteProp} from '@react-navigation/native'; import {DeleteFile, MediaCompression, phonSize} from '../utils/Utils'; import {FlatList} from 'react-native-gesture-handler'; type Props = { navigation: StackNavigatio

원문보기 내부링크
Naver Blog

react native FlatList 렌더링 안됨 해결

문제점: data 배열이 클때 FlatList가 렌더링이 안되는 문제 발생 해결: <FlatList style={{ flex: 0 }} initialNumToRender={data.length} /> 위 속성을 추가하면 렌더링 이슈 해결

원문보기 내부링크
Naver Blog

나한테 유용한 코딩패턴 13선

1. Singleton(싱글톤) 패턴 언제 사용하면 좋을까? 어떤 클래스의 객체가 프로세스 내에서 단 한 개만 만들어져야할 때 예: Setting을 관리하는 클래스 (다크모드를 설정하면, 모든 페이지에 다크모드가 적용되어야 함) 어떻게? 생성자를 private으로 변경 -> 다른 클래스에서 new로 생성할 수 없게 된다 클래스 안에 자신의 타입을 갖는 객체를 선언한다 static 아닌 변수는 객체가 생성될 때마다 동적공간에 메모리가 할당되지만, static 변수는 메모리가 지정된 정적 공간에 딱 하나만 존재한다 (컴파일 할 때부터) static 메소드는 이미 메모리의 정적 공간에 자리를 차지하고 있으므로 해당 객체를 new로 생성하지 않아도 바로 불러 사용할 수 있다 그냥 정적 변수를 쓰지 왜 싱글톤을 쓸까? 인터페이스의 사용이나 lazy loading 등 싱글톤으로 할수 있는 것들이 더 많기 때문에 2. Strategy(전략) 패턴 언제 사용하면 좋을까? 프로그램 실행 중 선택된

원문보기 내부링크
Naver Blog

mac m1 터미널 예기치 않은 종료 해결방법

터미널이 오류가 나서 터미널이 안열릴때 해결방법 터미널을 실행해서 작동유무 확인 Finder에서 ~/Library/Saved Application State 로 이동 (단축키 커맨드+shift+G) com.apple.Terminal.savedState디렉토리를 데스크탑과 같은 다른 곳으로 폴더 이동시키기 터미널을 다시 시작하면 작동 이후 터미널에 대한 버그를 리포트할때 com.apple.Terminal.savedState 이 폴더를 압축해서 같이 보내면 됩니당

원문보기 내부링크
Naver Blog

Open Cv관련 강좌 및 도큐

유익하고 맛있는 강좌 https://076923.github.io/posts/Python-opencv-1/ Python OpenCV 강좌 : 제 1강 - OpenCV 설치 OpenCV 076923.github.io 유익하고 맛있는 도큐 https://docs.opencv.org/4.x/ OpenCV: OpenCV modules Main modules: core. Core functionality imgproc. Image Processing imgcodecs. Image file reading and writing videoio. Video I/O highgui. High-level GUI video. Video Analysis calib3d. Camera Calibration and 3D Reconstruction features2d. 2D Features Framework objdetect. Object Detection dnn. Deep Neural... docs.opencv.

원문보기 내부링크
Naver Blog

Feature 특성 검출 기법

SIFT-Scale-Invariant Feature Trasnform 이미지의 크기가 달라져도 이미지의 특징적인 부분을 검출하는 기법 SIFT알고리즘은 이미지 스케일 불변인 키포인트를 추출후. 추출한 키포인트들의 descriptor(기술한것, 기술자)를 계산하는것 SIFT알고리즘 주요 절차 1. Scale-space Extrema Detection(스케일-공간 극값 검출) 가우시안 함수를 각 축의 방향으로 편미분한, 다시 말하면 가우시안 필터 후 라플라시안(Laplacian of Gaussian: LoG) 필터를 적용하면 이미지에서 다양한 크기의 방울 모양의 이미지를 검출합니다. 그런데 LoG는 다소 시간이 소요되기 때문에 SIFT 알고리즘에서는 하나의 이미지에 서로 다른 필터를 적용한 가우시안 피라미드 이미지의 차(Difference of Gaussian: DoG)를 이용합니다. DoG를 찾으면 이미지에서 스케일-공간 좌표상 극값을 찾습니다. 만약 극값이 있으면 이를 잠재적 키포인

원문보기 내부링크
Naver Blog

Open Cv 사각형 자유롭게 자르기

https://opencv-python.readthedocs.io/en/latest/doc/10.imageTransformation/imageTransformation.html 이미지의 기하학적 변형 — gramman 0.1 documentation 좌표 x를 좌표 x’로 변환하는 함수 예로는 사이즈 변경(Scaling), 위치변경(Translation), 회전(Rotaion) 등이 있습니다. 변환의 종류에는 몇가지 분류가 있습니다. 강체변환(Ridid-Body) : 크기 및 각도가 보존(ex; Translation, Rotation) 유사변환(Similarity) : 크기는 변하고 각도는 보존(ex; Scaling) 선형변환(Linear) : Vector 공간에서의 이동. 이동변환은 제외. Affine : 선형변환과 이동변환까지 포함. 선의 수평성은 유지.(ex;사각형->평행... opencv-python.readthedocs.io 기하학전 변형

원문보기 내부링크
Naver Blog

코사인 유사도

요약: 두 벡터(데이터)간 사이의 각을 코사인 값으로 구해서 유사도 값을 구하는것 두 벡터가 동일(데이터 유사도가 높을수록)할 수록 값이 1에 가까워짐 공식 코사인 유사도 사용예시) 검색 엔진에서 검색어(Query)와 문서(Document)의 유사도를 구해서 가장 유사도가 높은 것을 먼저 보여주기 위한 기본 랭킹 을 위한 알고리즘으로 사용됩니다. 텍스트마이닝에서 쓰입니다. 검색엔진과 텍스트마이닝이 상당히 관련이 있기 때문에 사실 1번과 관련성이 깊습니다. 텍스트 마이닝은 흔히 벡터 스페이스 모델(Vector Space Model)을 사용하고 TF-IDF(Term Frequency – Inverse Document Frequency)를 사용하는데 단어집합들 간의 유사도를 구하기 위해서 코사인 유사도를 사용하는 것이 빈번하게 나옵니다. 그래서 word2vec 같은 딥러닝 모델에서도 나옵니다. 그 외에도 다른 분석이나 수리 모형에서도 유사도를 구할 때 사용합니다. 가끔 나옵니다. 매우 빈

원문보기 내부링크
Naver Blog

함수내부, 함수외부, useState, useRef 변수들 특징

다음 네 가지 가능한 변형 사이에는 차이가 있습니다. 함수 구성 요소 내부의 변수 함수 구성 요소 외부의 변수 useState()에서 반환된 상태 변수입니다. useRef()에서 반환한 변수(속성이 'current'인 개체) 마지막 두 개는 구성 요소 내에서만 사용할 수 있습니다. 각각의 경우를 예로 들어봅시다. 1. 함수 성분 내 변수 초기화: 변수는 항상 모든 렌더에서 그리고 결과적으로 여러 구성 요소 인스턴스에서 다시 초기화됩니다. 변수 업데이트: const를 제외하고 업데이트 가능 렌더: React에 의해 트리거된 렌더가 없으므로 업데이트된 값이 반영되지 않습니다. 2. 함수 성분 외부의 변수 초기화: 변수는 파일이 로드된 경우에만 초기화됩니다. 그리고 파일에서 내보내기를 사용하는 구성 요소의 수에 관계없이 파일이 한 번만 로드됩니다. 이것이 useRef()를 사용하는 것과 비교했을 때의 주요 차이점입니다. 구성 요소 인스턴스화가 하나만 있으면 useRef()와 같습니다. 변

원문보기 내부링크
Naver Blog

android) displayName이 (중국어, 한국어, 일본어)일때 팅김 해결

android/gradle.properties FLIPPER_VERSION=0.145.0 이렇게 해주면 해결

원문보기 내부링크
Naver Blog

유사 이미지 검출기

이미지 검출 로직 1. 도용 이미지와 원본간에 특징 비교 (Feature Matching) 2. 두 이미지간 다수의 특징 매칭시 정밀비교 시작 3. 정밀비교 -두이미지 크기 동일하게 만든후 코사인 유사도(Cosine Similarity) 이미지 해싱후 해밍거리(Hamming Distance) 유사도로 측정 4. 비교한 두 이미지 파일 이름으로 png 결과파일로 출력 예시) 커여운 에리스 원본이미지 원본이미지 커여운 에리스 복제(유사한) test이미지들 test이미지1, test이미지2 test이미지3, test이미지4 결과 원본 이미지와 test이미지(4장) 비교 1번째 test이미지는 특징 비교에서 탈락 나머지 3장은 특징 검출후 얼마나 유사한지 추가 검사후 아래처럼 결과값 출력됨

원문보기 내부링크
Naver Blog

react native) 에러 Could not find com.facebook.react:react-native:0.71.0-rc.0

해결법 android/buld.gradle 파일에 allprojects에 아래코드 추가하면 해결됨 def REACT_NATIVE_VERSION = new File(['node', '--print',"JSON.parse(require('fs').readFileSync(require.resolve('react-native/package.json'), 'utf-8')).version"].execute(null, rootDir).text.trim()) allprojects { configurations.all { resolutionStrategy { // Remove this override in 0.65+, as a proper fix is included in react-native itself. force "com.facebook.react:react-native:" + REACT_NATIVE_VERSION } }

원문보기 내부링크
Naver Blog

파이썬) 두 배열의 각 자리 합하는 법

예시) a=[1,2,3,4,5] b=[5,4,3,2,1] //방법1 c=[x+y for x,y in zip(a,b)] //방법2 c=[a[i]+b[i] for i in range(len(a))] //방법3 c=[aa+bb for aa in a for bb in b] //결과 [6,6,6,6,6]

원문보기 내부링크
Naver Blog

텐서플로우2 개발환경셋팅 (윈도우 내장그래픽 사용하기)

Tensorflow 2 윈도우개발환경 셋팅 최소요구사항 https://learn.microsoft.com/en-us/windows/ai/directml/gpu-tensorflow-plugin DirectML Plugin for TensorFlow 2 Enable DirectML for TensorFlow 2.9 learn.microsoft.com 일단 시작하기 앞서서 위 요구사항부터 체크! 만약 위 요구스펙이 안된다면... 아쉽지만 내장그래픽은 사용 못합니다 1. 파이썬 3.X 64bit 버전을 설치(본인은 3.10.1을 설치했음) https://www.python.org/downloads/windows/ Python Releases for Windows The official home of the Python Programming Language www.python.org (중요1) 파이썬을 이전에 이미 설치했다고 해도 64bit 버전이 아니면 삭제 후 다시 설치하기 2. 파이썬

원문보기 내부링크
Naver Blog

머신러닝 인간러닝 딥러닝 초간단 예시

수능성적 예측 머신러닝과 인간러닝 예시 인간러닝 간단예시) 6월=70점 9월=80점 수능성적 = 6월*0.5+9월*0.5 = 75점 정도 나올것같아 인간이 예측할때는 대충 각각 어느정도인지 산정해서 평균값을 예측함 머신러닝 간단예시) 6월=70점 9월=80점 수능성적 = 6월*w1+9월*w2+B = 이때 w는 가중치, B는 바이어스(수능난이도 외부상황등등 상수값) 즉 머신러닝은 w1,w2값과 B값을 구하게 하고 이 값을 계산시키는것 6월 9월 수능 예측 오차 준호 60 80 90 80 10 호준 50 60 70 60 10 영주 60 60 80 60 20 w1, w2값을 산정하기 위해서는 학습하기 위한 데이터가 필요하고 실제 수능값과 예측값을 비교해서 오차를 최소화 하는 w1,w2 값을 컴퓨터에게 찾아달라고 시키는것이 머신러닝 딥러닝 간단예시) 위와같은 동그라미로 그린것들을 perceptron이라고함 그리고 저런 perceptron을 여러개 연결해서 중간에 레이어라는것을 만들고 숫자들

원문보기 내부링크
Naver Blog

예측값과 실제값 오차계산(평균제곱오차 MSE, 크로스 엔트로피 CEE )

평균제곱오차(MSE) 개념 오차를 제곱한 값의 평균 코딩하다가 알고리즘이나 예측한 값과 실값의 차이가 있을때 사용해서 이 값이 적을수록 알고리즘의 성능이 우수하다고 볼 수 있음 시그마:모두 더하라 yi: i번째 학습 데이터의 정답 ti: i번째 학습 데이터로 예측한 값 위 수식을 풀어보면 학습한 데이터의 오차값의 제곱들을 모두 더해서 평균내라는 뜻이다 크로스엔트로피(CEE) 개념 손실함수중 확률에 대한것 실제값과 예측값이 맞는 경우에는 0으로 수렴, 값이 틀릴경우 값이 커지기 때문에, 실제 값과 예측 값의 차이를 줄이기 위한 엔트로피임

원문보기 내부링크
1 2 3 4 5 6 7