All (103) 썸네일형 리스트형 GraphQL, Sequelize, MySql, React (apollo server, apollo client) - CRUD 구현 우선 내가 생각하는 GraphQL의 장점은 1. rest api로 작성할때 각 url 마다 api 를 만들어줄 필요없이 하나의 end-point로 데이터를 주고받는 것이 가능하는 것이다. 2. 내가 만들어 놓은 query나 mutation을 이용하여 필요한 값들만 정확하게 가져와 데이터 낭비를 줄일 수 있다. 더 많은 장점들이 있지만 우선 생각나는 것들이 이것들 뿐이다. 그리고 단점은 file전송 같은 것을 할 때 복잡하다. 이 포스팅을 하는 이유는 주로 Sequelize와 MySQL을 같이 쓰는데 이렇게 GraphQL, Sequelize, MySQL 세 가지를 같이 활용해서 만든 예제들이 충분하지 않아, 만들기 어려웠기 때문이다. 그리고 서버는 아폴로 서버를 이용하여 만들 것이고 프론트는 리액트에 아폴.. [자바스크립트 ] 매크로 만들기 - puppeteer (간단한 자동 로그인) 보통 매크로나 웹 크롤링은 python으로 많이들 만든다는 것을 알고 있었다. 하지만 자바스크립트로도 가능하다고 하여 이번 프로젝트는 웹 매크로 만들어보려고 한다. *매크로 사용으로 인한 불이익은 어떠한 경우에도 책임지지 않습니다. 우선 npm을 이용하여 puppeteer를 자신의 프로젝트 폴더에서 다운로드 한다. npm install puppeteer 이후 자신의 .js 파일을 만들어 코드를 넣는데 저는 index.js로 만들었습니다. 자세한 설명은 주석을 달아놓았습니다. const puppeteer = require('puppeteer'); const sanitizeHtml = require('sanitize-html'); (async () => { // launch 메서드는 chrome을 실행시킴... 서비스에 mysql 없음 mysql workbench는 설치했지만 아래와 같은 오류 메세지가 뜨고 services.msc에 mysql이 없다면 failed to connect to mysql at 127.0.0.1 with user root error 2003 (hy000): can't connect to mysql server on 'localhost' (10061) mysql server가 깔려있지 않아서 localhost에서 실행이 되고 있지 않기 때문이다. 해결방법은 dev.mysql.com/downloads/mysql/ MySQL :: Download MySQL Community Server Select Operating System: Select Operating System… Microsoft Windows Ubun.. [제품 리뷰] 아이폰12 미니 블랙 128G, 케이안 슬림마스터 보호필름, 제로스킨 스키니매트 그레이 (쿠팡 아이폰12 미니 사전예약) 안녕하세요! 오랜만에 제품 리뷰로 포스팅하게 되었습니다. 오늘 보여드릴 제품은 세 가지 입니다! 1. 애플 아이폰12 미니 블랙 128G 2. 케이안 슬림마스터 보호필름 3. 제로스킨 스키니매트 그레이 자! 이제 제품 리뷰 본격적으로 들어가겠습니다. 1. 아이폰 12미니 블랙 128G 저는 쿠팡 사전예약 2차 물량으로 구매하게 되었습니다. 국민카드로 5% 할인 받았습니다. 원래는 12월 1일 배송인데 갑자기 쿠팡에서 물량확보했다고 11월 26일날 도착예정을 잡아주었습니다! 그렇게해서 아이폰12 미니를 받고 뜯어보았습니다... 상자를 여니까 아이폰 박스가 뒤집혀 있었어요.. 그래도 영롱한 박스... 포장이 정말 작아지긴 했습니다.. 열었을 때 모습입니다.... 진짜 이뻤습니다. 친환경 정책으로.... 없어.. express와 MySQL 연동 const express = require('express'); const mysql = require('mysql2'); const app = express(); const port = 8080; // mysql 계정 연동 const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: '****', database: 'boilerdb' }); // mysql 연결 connection.connect(console.log('mysql is connected')); // mysql로 query보내기 connection.query('SELECT * from users', (error, rows, fields) => {.. npm install bcrypt error 해결 방법 bcrypt 설치시 아래와 같은 오류가 뜬다면 해결하는 방법이 있습니다. 오류 코드 > bcrypt@3.0.6 install D:\Project\test\bb\back\node_modules\bcrypt > node-pre-gyp install --fallback-to-build node-pre-gyp WARN Using needle for node-pre-gyp https download node-pre-gyp WARN Tried to download(404): https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.6/bcrypt_lib-v3.0.6-node-v72-win32-x64-unknown.tar.gz node-pre-gyp WAR.. How to send a request body with a DELETE request (axios) axios를 이용하여 서버와 프론트에서 데이터를 주고 받는데 get이나 put을 이용하면 body로 request를 받아올수 있지만 delete는 못받온다. 하지만 delete를 이용해서 받아오는 방법을 찾아내서 적어본다. front 측 const deletePost = (id) => { const posts = { token: localStorage.getItem("company-auth-token") }; Axios.delete(`/posts/${id}`, {data:{posts: posts}}) .then((req) => alert("삭제완료")) setPost(post.filter((elem) => elem.id !== id)); }; 프론트측에서 이런 식으로 url 다음 파라미터에 {data: .. 로또 추점기, 로또 번호 생성기 (로또 추첨 사이트) 사용 방법 1. 돌리고 싶은 경우의 수를 입력한다. (100000 이하의 수) 2. 가장 많이 나온 숫자 6가지를 확인한다. 3. 그 숫자를 가지고 로또점에가서 로또를 산다. 4. 부자가 된다. See the Pen ZEOrNBP by ukcasso (@ukcasso) on CodePen. 예시 [제품 리뷰] zb 스토어 애플워치 밀레니즈 루프 블랙 38mm/40mm 스트랩 안녕하세요! 이번엔 애플워치 스트랩 리뷰로 찾아왔습니다. 항상 나이키 버전 기본 스트랩을 착용하니 어울리는 옷이 한정적이어서 하나 구매를 하게 되었습니다. 그중에서 zb 스토어의 스트랩을 구매해봤습니다. 저도 어떤 유투브가 이곳 스트랩을 구매하여 사용하는 것을 봐서 구매했습니다. 그래파이트 색상을 구매하고 싶었지만 서드파티 제품 중에서 그래파이트 색은 아직 어디에도 나오지 않아 구매하지 못하였습니다... ㅜ 가격 가격은 아래와 같이 9,900원이라고 적혀있지만 옵션을 선택하면 +3,000원이 되서 12,900원이었답니다. 하지만 여기에 배송비 2,500원을 더하여 15,400원에 구매하였습니다. 구매 후기 처음 배송왔을 때 모습 그대로 입니다. 상당히 깔끔하게 왔고 포장도 딱 좋았습니다. 내용물을 확인하.. [React Hook] React Hooks란?, Lifecycle의 개념 React Hooks란? 간단하게 설명하자면 기존 React의 Class 활용한 Component 설정 방법을 개선한 것이다. 기존의 단점은 세 가지 정도로 꼽을 수 있다. 1. 계층이 너무 많아진다. 2. Component가 너무 복잡해진다. 3. Class를 Component로 쓰면 bind, this를 쓰는데 이 방식은 컴퓨터에게는 복잡한 작업을 수행하게 하고 사람에게는 혼란을 발생시킨다. 위 세 가지 단점을 종합해서 말하자면 가독성이 떨어진다고 할 수 있다. 따라서 react hook은 Class 형태였던 Component를 function을 통해 만들 수 있게 해주는 API이다. React Hook를 사용할 때에는 실질적으로 두 가지만 사용한다. useState()와 useEffect()가 바로.. [React] (12) Delete 기능 구현 (CRUD) - CRUD 구현된 github 이제 CRUD의 마지막 기능인 Delete 기능이 남았다. 우리는 이미 Control.js에 delete버튼을 만들어 놓았다. Control.js import React, { Component } from 'react'; class Control extends Component { render() { console.log('Control render') return ( create update ); } } export default Control; 그리고 App.js에서 Control 태그 부분을 이렇게 고치면 된다. 전체 App.js import React, { Component } from 'react'; import TOC from "./components/TOC" import ReadContent.. [React] (11) Update 기능 구현 (CRUD) Update기능은 Create기능과 Read기능이 결합된 형태라고 볼 수 있다. 그래서 우선 components폴더 안에 UpdateContent.js를 만든다. UpdateContent.js import React, { Component } from 'react'; class UpdateContent extends Component { render() { console.log('UpdateContents render') return ( Update ); } } export default UpdateContent; 위 코드는 CreateContent.js에서 가지고 왔다. 그리고 App.js에 Import 시켜준다. refactoring (필수아님) getContent라는 함수를 만들어 조금 정리해준다... 이전 1 2 3 4 5 ··· 9 다음
