이모저모 일상들

이전 게시물에 이어서 진행하겠습니다. [React] react 프로젝트 생성하기 React는? Facebook에서 만든 자바스크립트 라이브러리. 웹앱을 만들기 위해서 사용하며 페이지를 다시 로드하지 않고 데이터를 변경할 수 있다. 국내에선 대부분 React 혹은 Spring 안쓰면 큰일나는 줄 jdk0.tistory.com 프로젝트를 만들었다면 app.js에서 헤더부분을 지워줍니다. function App() { return ( /* 이 부분 다 지우기 Edit src/App.js and save to reload. Learn React */ ); } 사전에 설치해야 할 라이브러리 (npm start하는것 처럼 vs 터미널에서 실행하면 됩니다.) //부트스트랩 설치 npm install react-boo..

구글에 자바스크립트로 날짜 구하기를 검색해보면 new date 문법으로 날짜를 구하는게 많다. new date형식의 문법의 대략적인 문제점은 다음과 같다고 생각한다. 요즘은 UTC형식으로 날짜를 출력하는데 new date는 현재 거의 사용하지 않는 RFC형식으로 현재 날짜를 출력한다. 그리고 만약 현재 날짜를 출력하고 싶으면 쓸데없이 많은 함수들을 가져와서 써야한다. See the Pen Untitled by sodium casein (@xyyhsawg-the-selector) on CodePen. 현재 날짜를 가져오기 위해서 얼마나 많은 함수를 써야하며 또한 new date의 자바스크립트의 월은 0~11기준으로 되어 있기 때문에 5월을 뽑으려면 getMonth()함수의 +1을 해줘야 현재의 올바른 날짜..

보통 산호를 키우면서 사람이 인공적으로 번식을 시키고자 할때 프랙을 친다고 한다. 산호를 작게 잘라서 작은 베이스에 본드같은 걸 붙여서 활착하는 형식으로 보통 번식시킨다고 했는데, 자연적으로 번식을 하는 것에 대해서 딱히 생각해 본 적이 없었다. 그런데 어느날 왠 민들레 홑씨같은게 흩날리는 걸 발견했었다. 데려온지 대략 3개월이 다되가는 녀석인데 인공 번식이 아니라 스스로 번식을 해서 저렇게 활착을 한 것을 보면 신기하면서도 대견하다.(가지고 있는 산호중 가장 비싸서 그런것도) 그래서 호기심에 산호가 일반적으로 어떻게 번식하는지에 대해 검색해봤다. 산호는 2가지 방법으로 번식을 한다고 하는데 첫번째 방법은 인공적으로 프랙을 치거나 혹은 수정이 이루어지지 않은 상태에서 알이 바로 어린 산호가 되거나 폴립이..

Pagination(페이지네이션)을 구현하면서 최적화가 필요하다고 느낀적이 있나요? Pagination을 구현하면서 DB데이터가 100만개 정도로 되는 페이지를 구현한 적이 있나요?? 데이터가 별로 없어서 필요없다고 느낄 수 있지만, 시간이 지나면서 데이터가 10만개 이상, 특히 상태에 따른 정렬이나 검색에 따르게 된다면 얘기가 다를수 있습니다. 다음은 제가 실제 데이터에서 극단적인 케이스의 쿼리와 결과값을 보여드립니다. 먼저 총 데이터의 갯수가 23만개의 데이터로 예를 드려고 합니다. 극단적이겠지만 먼저 LIMIT 0,10의 결과 값과 210000,10 의 쿼리 수행속도 차이를 보여드립니다. 실제로 구현한다고 가정하더라도 관리자에서 이러한 페이지네이션의 결과값을 보여줄 일은 사실상 없다고 무방할 수 있..

React는? Facebook에서 만든 자바스크립트 라이브러리. 웹앱을 만들기 위해서 사용하며 페이지를 다시 로드하지 않고 데이터를 변경할 수 있다. 국내에선 대부분 React 혹은 Spring 안쓰면 큰일나는 줄 알아서 개발자로 빨리 취업하고 싶을 때 배우면 빠른 취업을 위한 지름길이 될 수 있다. React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.legacy.reactjs.org 개발환경셋팅 1. nodejs 다운 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 가능..

설명은 필요 없고 소스만 바로 붙여서 나오는게 좋겠다면 소스 아래 그대로 복사 붙이기 해서 카카오 API 키값만 기재하면 주소 출력이 됩니다. 주의사항 카카오 API 키값 필요. HTTPS환경에서만 실행 됨. 그래도 안 나온다면 1. 사이트 정보 보기 2. 위치 권한을 승인 결과물 (참고) 정확한 위치는 아니지만 대략적인 위치는 비슷하게 나오거나 조금 떨어질 수 있습니다. navigator.geolocation.getCurrentPosition(success, error, [options]) success, error는 콜백함수입니다. 저는 함수 선언하기 귀찮아서 그냥 그대로 함수 만들어서 넣었습니다. 자세한 문서는 아래에서 참고해주세요. Geolocation.getCurrentPosition() - W..

체크박스 전체선택 및 해제를 vanilla버전과 jquery버전으로 간단하게 샘플을 올려 편하게 복사 붙이기를 할 수 있도록 간략하게 만들어봤습니다. vanillaSee the Pen vanilla 체크박스 전체선택 by sodium casein (@xyyhsawg-the-selector) on CodePen.  jquerySee the Pen jquery selectAll by sodium casein (@xyyhsawg-the-selector) on CodePen.  데이터 출력(아래 링크) [javascript] 자바스크립트 및 제이쿼리로 체크박스 값을 동적으로 출력하는 방법체크박스를 선택할 때 체크박스 데이터를  출력하는 법See the Pen chekcboxoutput_vanila by so..

평소에 물고기를 좋아했었고 특히 해수쪽에 관심이 있어서 시작했었다. 처음 니모들을 데려 오고 말미잘에 부비부비를 했을때는 1시간을 넘게 어항을 쳐다보기도 하였는데 벌써 1년이란 시간이 조금 넘었다. 가끔 지인들이 놀러와서 아직 부족하지만 내가 꾸민 어항들을 보고 감탄을 지을때마다 뿌듯하긴 하지만 지인들도 해보겠다고 하면 격렬히 말린다. 구피를 키우는 것처럼 일반 민물 생물들과는 달리 바다 생물을 키울때는 장비가 매우 매우 많이 들어간다. (돈이 일단 생각보다 꽤 많이 듦. 현재까지 중고차 경차 한 대 가격정도 나온 듯..) 여과재, 조명, 리턴모터, 스키머, 히터, 수류모터 등등 이런 장비들도 4~5개정도를 매일 틀고 있으니 전기세 고정비도 조금 더 나오는 편 그래도 가끔 심적으로 심란할때, 일이 잘 풀..

지난 포스팅에서는 각 셀마다 하나의 데이터만 있었지만, 간혹 JSON 데이터로 주는 경우가 있습니다. JSON이란? JSON(JavaScript Object Notation)은 사람이 읽을 수 있는 텍스트를 사용하여 데이터를 저장하고 전송하는 데이터 공유를 위한 개방형 표준 파일 형식이라고 하는데 글보다는 영상이 좋을 수 있으니 아래 유튜브를 통해 알아가기로 합시다. 이제 본론으로 갑시다 저는 업비트 API를 참고해서 JSON 데이터를 예시로 가져와봤습니다. https://docs.upbit.com/ 업비트 개발자 센터 업비트 Open API 사용을 위한 개발 문서를 제공 합니다.업비트 Open API 사용하여 다양한 앱과 프로그램을 제작해보세요. docs.upbit.com 예시 데이터를 준비하셨다면 [..

"카제인나트륨씨 엑셀파일 하나 드릴테니, 데이터 DB에 업데이트해주세요~ " 백엔드 업무를 하면, 서버 이전이나 리뉴얼 개발 등을 할 때 DB 데이터를 일괄 넣어주거나 수정해줘야 할 일이 있다. 쿼리 하나를 작성하면 한번에 모든 행에 맞는 쿼리를 생성할 수 있는 방법에 대해 공유하고자 한다. 먼저 등록일 데이터 옆에 쿼리 하나를 작성해줍니다. 셀에 작성 형식은 "INSERT INTO 테이블 SET 열1='"&데이터1&"', 열2='"&데이터2&"' ; " 형식으로 작성해주면 됩니다. 아래처럼 먼저 쿼리를 작성해줍니다. 그리고 A~C사이에 셀을 하나 클릭하고 컨트롤을 누른채로 방향키 아래로 누르면 마지막으로 데이터가 있는 부분까지 한번에 갈 수 있습니다. (실제 데이터가 10만개 100만개 이렇게 있을수도..