티스토리

analogcoding

검색하기

블로그 홈

analogcoding

analogcoding.tistory.com/m

contact E-mail : wjsdbtjs131313@gmail.com Insta : gucci0419

구독자: 5

방명록 방문하기

주요 글 목록

React Hook life cycle ComponentDidMount 컴포넌트가 만들어지고 render가 호출된 이후에 호출되는 메소드. ( example : fetch or TImer ) // Class class Example extends React.Component { componentDidMount() { ... } } // Hook const Example = () => { useEffect(() => { ... }, []); } ComponentWillUnmount React 엘리먼트를 실제 DOM 노드에 추가하기 직전에 호출되는 메소드. DOM이 생성되지 않았으므로 DOM을 조작할 수 없고, render가 호출되기 전이기 때문에 setState를 사용해도 render가 호출하지 않음. // Class class Example .. 공감수 0 댓글수 0 2020. 6. 4.
StoryBook 사용 - 번역 스토리북을 통한 리액트 컴포넌트 도큐멘팅 (출저 : https://medium.com/@emmabostian/documenting-react-components-with-storybook-6c83abe7cb29 ) 스토리 북이란? 스토리 북은 UI 컴포넌트를 위한 놀이터로 시장을 주도하고 있으며 주요 내용은 "스토리 작성"입니다. 스토리 북은 스토리 개념을 사용하여 구성 요소를 문서화합니다. 일반적으로 스토리에는 시각적 테스트 사례와 같은 단일 컴포넌트의 상태가 포함됩니다. 기술적으로 스토리는 화면에 렌더링 할 수있는 것을 반환하는 함수입니다. 컴포넌트 스토리 북에는 다양한 컴포넌트에 대한 다양한 스토리가 포함됩니다. 우리가 작성하는 각 스토리에는 다음과 같은 단일 상태가 포함됩니다. Storybook의.. 공감수 0 댓글수 0 2020. 4. 28.
Github action 을 이용한 S3 배포 - 번역 React 앱을 S3 에 Github Action 으로 배포하기. (출저 : https://medium.com/trackstack/deploying-a-react-app-to-aws-s3-with-github-actions-b1cb9ba75c95 ) Github Actions는 버전 관리 외에 프로젝트 관리 측면을 열어 놓은 Github 의 비교적 새로운 기능입니다. 이러한 기능 중 하나는 작년에 이미 혼잡한 시장에 도입 된 CI / CD (Continuous Deployment)입니다. 그러나 이 기능에서 볼 수 있는 주요 이점은 모든 배포 요구를 처리하는 단일 서비스입니다. 이 게시물에서는 Github Actions로 기본 연속 배포 파이프 라인을 설정하여 React 앱을 AWS S3에 배포하는 단계.. 공감수 0 댓글수 0 2020. 4. 22.
axios interceptors / defaults axios 요청을 사용하면서 생긴 불편함을 해결해주는 메소드 정리. 아래 적힌 일들을 해결하기 위해 axios 에서 제공해주는 interceptors / defaults 를 적용. 매번 axios 요청할때마다 URL 을 고정적으로 설정한다. axios 요청을 할 때 마다 헤더를 고정적으로 설정해 놓는다. 에러가 발생했을때 공통 alert 를 띄운다. 요청 고정 URL 설정 const YOUR_URL = '' axios.defaults.baseURL = YOUR_URL 로그인 이후에 모든 요청에 토큰을 보내는 설정 axios.defaults.headers.common["Authorization"] = ${localStorage.getItem("token")}; 인터셉터는 요청 직전 혹은 응답을 받고 the.. 공감수 0 댓글수 0 2020. 4. 20.
React hooks 를 사용해야하는 이유 - 번역 본기사는 Why We Switched to React Hooks 을 번역한 기사입니다. import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const App = () => { return ( ); }; const Timer = () => { const [seconds, setSeconds] = useState(0); useEffect(() => { const interval = setInterval(() => { setSeconds(seconds + 1); }, 1000); return () => clearInterval(interval); }, [seconds].. 공감수 0 댓글수 0 2020. 2. 18.
styled-components 를 사용하는 8가지 이유 -번역 본기사는 8 reasons to use styled-components (FEBRUARY 28, 2019 Prisma) 을 번역한 기사입니다. 요약 : 이 기사에서는 styled-components 의 다양한 이점으로 CSS-in-JS 프레임워크로 채택하는 것을 고려해야 하는 이유를 살펴보겠습니다. styled-components 란 무엇일까요? styled-coponents 는 자바스크립트의 태그가 지정된 템플릿 리터럴과 CSS 의 기능을 사용하여 구성 요소에 반응하는 스타일을 제공하는 CSS-in-JS 스타일링을 위한 프레임워크입니다. 본질적으로, styled-coponents 는 styled-components 라이브러리를 사용하여 리액트 컴포넌트를 쉽게 만들 수 있으며 Javascript 코드 내.. 공감수 3 댓글수 0 2020. 2. 14.
Webpack - React with typescript 초기 설정 웹팩이란 ? 웹팩은 웹에서 사용되는 모든 자원(assets)을 번들링 해주는 도구입니다. ( 번들링이란 ? : 여러개의 파일 중에 종속성이 존재하는 파일을 하나의 파일로 묶어 패키징을 시키는 과정 ) 즉 웹팩은 프로젝트 파일을 분석해서 자바스크립트 모듈과 관련 리소스들을 찾아 브라우저에서 이용할 수 있는 번들로 묶어서 패킹하는 모듈 번들러(Module bundler)입니다. 등장배경 여러 파일을 로딩하면 네트워크 비용이 증가하고 반응속도가 느려지게 됩니다. 또한 각 파일의 변수가 충돌할 위험이 존재합니다. 시작하기 먼저 프로젝트를 시작할 파일을 생성합니다. mkdir webpack-practice 관련 package 설치를 위해 프로젝트에서 package.json 를 생성합니다. npm init -y 브.. 공감수 1 댓글수 1 2020. 1. 21.
react 에서 loading 표시하기 (progressbar , spinner) 파일을 업로드 하거나 다운로드 하는 상황에서 유저에게 해당 load status 를 보여주기 위한 기능을 구현하게 되었습니다. 텍스트가 아닌 데이터 크기가 큰 파일을 유저가 업로드 , 다운 받을 수 있는 상황일 때로 가정합니다. 요청에 대한 대기 시간을 indicator 로 표시해주는데 스피너와 로딩바 두 가지를 사용해서 구현해보겠습니다. axios 요청과 Material UI 컴포넌트를 사용하겠습니다. https://material-ui.com/api/circular-progress/ CircularProgress API - Material-UI The API documentation of the CircularProgress React component. Learn more about the prop.. 공감수 1 댓글수 0 2020. 1. 16.
Netlify 로 정적 클라이언트 배포하기 React 프로젝트를 간단하게 배포할 수 있는 Netlify 를 사용해보았다. 1. 먼저 배포할 프로젝트를 Github 에 올려준다. 2. Netlify 에서 회원가입을 진행한다. https://www.netlify.com/ Netlify: All-in-one platform for automating modern web projects Deploy modern static websites with Netlify. Get CDN, Continuous deployment, 1-click HTTPS, and all the services you need. Get started for free. www.netlify.com 3. Sites 에서 배포할 레파지토리와 브랜치를 설정한다. 4. deploy sett.. 공감수 0 댓글수 0 2020. 1. 9.
GraphQL 을 사용하는 5가지 이유 ( 번역 ) 본기사는 Top 5 Reasons to Use GraphQL (MARCH 20, 2018 Prisma) 을 번역한 기사입니다. GraphQL은 API 개발의 새로운 표준이 되어가고 있습니다. 이 기사에서 그 이유를 알아보겠습니다. 불과 2년 6개월 만에 그래프QL은 API 개발의 선두로 올라왔습니다. 이 글에서는 개발자가 GraphQL을 좋아하는 이유를 설명하고 빠르게 채택된 주된 이유를 공개합니다. 1. graphQL API 는 강력한 스키마 타입을 가지고 있습니다. 대부분의 API 에 가장 큰 문제 중 하나는 운영 방식에 대한 강한 약속이 없다는 것입니다. 많은 개발자들은 API가 지원하는 작업과 사용 방법을 알 수있는 적절한 방법이 부족해서 더 이상 사용되지 않는 API 문서로 작업해야하는 상황에 .. 공감수 0 댓글수 0 2019. 12. 20.
React Component , States , Props , Life cycle Component ****** React 컴포넌트를 작성할 때 컴포넌트 이름은 대문자로 시작해야 합니다. Class VS Functional Functional React 에서 컴포넌트를 정의하는 가장 간단한 방법은 javascript 의 함수 형식으로 정의하는 것입니다. state 나 lifecycle 이 없는 일반 JavaScript 함수이므로 읽기 및 테스트 하기가 수월합니다. 기본적으로는 state , lifecycle 등 의 기능을 사용할 수 없습니다. ( 위 기능들을 Functional 에서 사용할 수 있도록 Hook 등장! ) functional Component Example function Welcome(props) { return Hello, {props.name}; } ( props .. 공감수 0 댓글수 0 2019. 10. 8.
React start What is React ? 비교적 짧은 러닝커브 React 는 Framework 가 아닌 Library 로 기본적인 javascript 와 html 에 대해 이해하고 있다면 홈페이지에 잘 나와있는 튜토리얼을 통해 개발을 시작할 수 있습니다. 재사용성 , 유지보수에 용이한 구성요소 보유 React 는 component 구조로 이루어져 재사용성 과 유지보수 에 있어서 뛰어납니다. Virtual DOM 을 통한 rendering React 는 virtual DOM 을 통해 변화를 가상 DOM 에 먼저 적용하고 render 시켜 연산을 줄여줍니다. This is React ! React = Library Framework Application 설계 , 개발 시 구조, 필수적인 코드, 알고리즘, 암호화, 데이터.. 공감수 0 댓글수 0 2019. 10. 7.
Redux 란? (+example) Redux 란? 웹이 넓어질수록 많은 상태를 자바스크립트 코드로 관리할 필요가 생겨났습니다. 항상 변하는 상태를 관리하기란 어렵습니다. 모델이 다른 모델을 업데이트하고, 그리고 뷰가 모델을 업데이트 할 수 있고, 이 뷰가 다시 다른 모델을 업데이트하고, 이에 따라 또 다른 뷰가 업데이트 됩니다. 어느 시점에서는 프로그래머조차 애플리케이션에서 무슨 일이 일어나는지 알 수 없게 됩니다. 이에 대한 해결책으로 나온 리덕스는, 가장 사용률이 높은 상태관리 라이브러리입니다. 리덕스를 사용하면, 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있습니다. 또한, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있.. 공감수 0 댓글수 0 2019. 9. 26.
Moment.js 를 사용해보자 ( with 'cdn' ) 오늘의 이슈 - 날짜를 화면에 보기 편하게 출력해보기. MomentJS 란? 자바스크립트에서 날짜 형식의 데이터를 파싱, 유효성 체크, 조작, 화면에 출력을 쉽게 할 수 있도록 도와주는 라이브러리입니다. npm install 로 설치 후 사용하는 방법 -> 설치 , 필요한 함수는 DOCS 에 너무나 잘 나와있다. https://momentjs.com Moment.js | Home Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time.. 공감수 0 댓글수 0 2019. 9. 25.
Prettier 란 ? , Prettier 설치 What is Prettier ? Visual Studio Code Extention 으로 정해진 규칙에 따라 자동으로 코드 스타일을 정리 해주는 도구입니다. 여러 규칙들을 쉽게 커스터마이징 할 수도 있습니다. Why use Prettier ? 코드를 저장 시 정해놓은 규칙에 맞게 자동으로 정렬해서 가독성을 높이고 코드 스타일을 통일할 수 있습니다. How to Start ? Visual Studio Code Extention 에서 Prettier 를 검색하고 설치합니다. 이 후 VS Code를 재 시작 한 후 setting 에서 규칙을 설정하면 코드를 깔끔하게 정리할 수 있습니다. { "singleQuote": true, // 따옴표 고정 "semi": true, // 코드 끝에 ; 설정 "useTab.. 공감수 5 댓글수 0 2019. 9. 18.
ESlint 란 ? , ESlint 설치 What is ESlint ? ES ( EcmaScript ) + Lint ( 에러 코드 표식 ) 코드에 특정 스타일과 규칙을 적용해서 문제를 사전에 찾고 패턴을 적용시킬 수 있는 정적 분석 툴입니다. airbnb 등 미리 스타일과 규칙이 정해진 rule 을 적용시킬 수도 있습니다. 개발자가 자신만의 스타일과 규칙을 유동적으로 정해서 적용할 수 있습니다. Tip* ( airbnb 와 airbnb-base 의 차이는, airbnb-base 에는 리액트 관련 규칙이 들어있지 않습니다. ) Why use ESlint ? 다양한 플러그인을 사용해서 새로운 규칙을 추가하고 커스텀할 수 있습니다. 즉 뛰어난 확장성을 바탕으로 다른 사람들과 같은 환경에서 개발을 진행할 수 있습니다. How to Start ? 많은 .. 공감수 1 댓글수 0 2019. 9. 18.
jest 란 ? , jest 설치 , testing code 읽어보기 What is Jest ? Jest 는 코드가 제대로 동작하는 지 확인하는 test case 를 만드는 '테스팅 프레임워크' 입니다. Why use Jest ? lint 가 코드 스타일에 rule 을 정하는 것이라면 코드가 올바른 기능을 하는 지 체크할 수 있습니다. 이를 통해서 보다 안정적이고 제대로 동작하는 코드를 작성할 수 있습니다. How to Start ? package.json 파일을 만들고 Jest 라이브러리를 개발 의존성으로 설치합니다. yarn 과 npm 모두 간단하게 설치 가능합니다. yarn add --dev jest npm install --save-dev jest Tip* ( -dev 는 package.json 안에 dependencies 가 닌 devDependencies 에 저.. 공감수 1 댓글수 2 2019. 9. 18.
Apollo Cache what is Apollo Cache 아폴로는 Query 요청을 할 때 먼저 Cache 를 확인한다. 처음 Query 요청 시 Cache 에 Query , variables 데이터를 자동적으로 Cache에 저장한다. 처음 페이지가 렌더 될 때 로딩이 걸리지만 다음 번 그 페이지를 방문할 때 바로 렌더 되는 이유는 첫 요청에서는 요청을 실행하지만 그 다음부터는 Cache 를 참조한다. problem 그렇지만 단점으로는 데이터가 업데이트되는 Mutation 요청이 진행되었을 때, 페이지에서 새로고침을 하지않는 한 렌더된 데이터가 변하지 않는다. Query 요청을 다시 보내서 새로 DB에서 업데이트 된 데이터를 가져와야하는데 Cache 에 같은 Query 의 이름이 있어서, 기존에 Cache에 있던 데이터만 .. 공감수 0 댓글수 0 2019. 8. 8.
Kakao MAP 사용하기 카카오 개발자 등록 후 개인 javascript API 발급 후 index.html 에 script 를 추가한다. 현재 좌표를 가지고 오기 위해서 navigator.geolocation.getCurrentPosition 함수 호출 (위 함수는 사용자의 현재 위치를 요청한다.) navigator.geolocation.getCurrentPosition 에서 받아올 수 있는 프로퍼티 coords.latitude 고도 coords.latitude 위도 coords.longitude 경도 coords.accuracy 위도/경도의 오차(m) coords.altitudeAccuracy 고도의 오차(m) coords.heading 방위(도) coords.speed 속도(m/초) ㅍ 지도 호출은 카카오 디벨로퍼에 sam.. 공감수 1 댓글수 0 2019. 8. 8.
PASSPORT 카카오 (KaKao)2 console.log 로 카카오로 부터 profile 객체를 전달 받는 것 까지 성공한 뒤 데이터를 확인해서 회원가입 , 로그인 상태 구현하기. const kakaoSign = async (req, res) => { // login 에서는 받은 profile 을 DB 랑 비교한당 req.user = profile const { user } = req; const nickName = user.username; const email = user.id; const { provider } = user; console.log("provider-->", req.provider); return User.findOne({ where: { email, nickName, admin: false, provider } }) .. 공감수 0 댓글수 0 2019. 8. 1.
PASSPORT 카카오 (KaKao) 1. 먼저 카카오 개발자 홈으로 이동 https://developers.kakao.com/ Kakao Developers_ 더 나은 세상을 꿈꾸고 그것을 현실로 만드는 이를 위하여 카카오에서 앱 개발 플랫폼 서비스를 시작합니다. developers.kakao.com 2. 로그인 후 상단에 이름 클릭 - 내 애플리케이션으로 이동 3. 사용자 관리 토글 버튼 ON , 일반으로 이동 후 주소 설정 4. Passport , Passport-kakao 설치 yarn add passport yarn add passport-kakao 코드 작성 const KakaoStrategy = passportKakao.Strategy; const kakaoKey = { clientID: "일반에서 정의된 내 API 키", cl.. 공감수 0 댓글수 0 2019. 7. 30.
JWT in graphQL GraphQL은 플랫폼 독립적이고 기존의 REST API와는 완전히 다르지만 기존의 JWT(Json Web Token)을 충분히 이용 가능하다. JWT 토큰을 전달하는 위치가 헤더 에서 쿼리나 뮤테이션의 인자로 바뀌었을 뿐이다. 토큰을 생성(create) , 검사(decade)하는 파일 , 함수 생성 const jwt = require('jsonwebtoken'); require('dotenv').config(); exports.jwtsign = email => { const token = jwt.sign({ email }, process.env.PRIVATE_KEY, { expiresIn: '5h' }); return token; }; return 한 토큰을 클라이언트에 전달해주고 server.expr.. 공감수 0 댓글수 1 2019. 7. 28.
Sequelize sequelize sequelize란 nodeJS에서 mysql을 사용할 때 raw Query문을 사용하지 않고 더욱 쉽게 다룰 수 있도록 도와주는 라이브러리이다. sequelize는 ORM(Object-Relational Mapping)로 분류된다. ( ORM이란 객체와 관계형 데이터베이스의 관계를 매핑 해주는 도구이다. ) sequelize를 사용하면 raw Query문을 사용하지 않고 자바스크립트를 이용해서 mysql을 사용할 수 있다. sequelize 설치 npm install sequelize // 시퀄라이즈 설치 npm install mysql2 // mysql2 설치 npm install -g sequelize-cli // sequelize-cli를 전역으로 설치한다. 총 3가지를 설치 한.. 공감수 0 댓글수 0 2019. 7. 27.
Passport start app.use(passport.initialize()); app.use(passport.session()); app.use (passport.initialize ()) : 패스포트를 초기화한다. passport.session () : 패스포트가 세션 정보를 사용한다. Middlewares은 요청 객체 (req), 응답 객체 (res) 및 응용 프로그램의 요청. Passport는 요청을 인증하는 노드 용 인증 미들웨어이다. 따라서 기본적으로 passport.initialize ()는 인증 모듈을 초기화한다. passport.session ()은 요청 객체를 변경하고 현재 세션 ID (클라이언트 쿠키에서) 인 ‘user’값을 진정한 비 직렬화 사용자 객체로 변경하는 또 다른 미들웨어다. 공감수 0 댓글수 0 2019. 7. 27.
ESlint 설정 ( with babel , prettier , gitignore) 프로젝트에 앞서 설정 맞추기에 들어갔다. ESlint 는 에어비엔비룰을 사용했고 프리티어로 문법 교정을 통일했다. node modules 같은 파일/폴더는 gitignore 에서 제공하는 양식을 사용했다. 1.eslint config airbnb , eslint , plugin-import 설치 $ yarn add eslint-config-airbnb-base eslint eslint-plugin-import 2.프로젝트 폴더 내부에 .eslintrc.js 파일 생성 3. 코드작성 module.exports = { env: { browser: true, es6: true, node: true }, extends: "airbnb-base", globals: { Atomics: "readonly", Shar.. 공감수 0 댓글수 0 2019. 7. 27.
Apollo ready to get data 라이브러리 설치 npx install --save apollo-boost react-apollo graphql-tag graphql react apollo 구조 정리 react 환경에서 apollo 를 사용해서 graphQL data 를 가져오려면 먼저 apollo client 에서 서버와 연결하고 apollo privider 로 사용할 react 의 최상단 component 를 감싸준다. data 의 스키마에서 필요한 부분을 따로 정의하고 가져올 수 있는 양식을 만든다. (ex. 스키마에 id,nickname,password,email 등 많은 정보가 있어도 직접 정의해서 id , nickname 등 필요한 정보만 가져와서 overfetching 을 방지할 수 있다.) react 에서 필요한 부분에서 .. 공감수 0 댓글수 0 2019. 7. 26.
Apollo Token import React from 'react'; import { render } from 'react-dom'; import './index.css'; import App from './App'; import ApolloClient from "apollo-boost"; const client = new ApolloClient({ uri: "https://api.github.com/graphql", request: operation => { operation.setContext({ headers: { authorization: `Bearer your-personal-access-token` }, }); } }); render(, document.getElementById('root')); uri : 데이터.. 공감수 0 댓글수 0 2019. 7. 26.
Apollo Start 개발 환경 설정 apollo-client react-apollo graphql-tag Apollo 클라이언트 만들기 import { ApolloClient } from 'apollo-client'; import { InMemoryCache } from 'apollo-cache-inmemory'; import { HttpLink } from 'apollo-link-http'; const cache = new InMemoryCache(); const link = new HttpLink({ uri: 'http://localhost:4000/' }) const client = new ApolloClient({ cache, link }) uri : 데이터를 가져 오기 위해 사용하는 graphql 끝점. 요청 : .. 공감수 0 댓글수 0 2019. 7. 26.
GraphQL 사용법 1. graphql-yoga 설치 yarn add graphql-yoga 터미널 창에 위의 명령어를 실행시켜 graphql-yoga를 설치한다. 2. nodemon, babel 설치 yarn add nodemon yarn add babel-cli nodemon은 파일이 수정될 때마다 서버를 자동으로 재시작시켜준다. .babelrc 파일을 만들어 환경 설정을 해준다. package.json에 명령어를 추가한다. { "presets": ["env", "stage-3"] } nodemon을 실행 시키는데 babel을 통해 변환을 거치고 index.js를 실행시켜 서버를 실행시킨다 3.index.js 파일 생성 및 실행 //index.js import { GraphQLServer } from "graphql-y.. 공감수 0 댓글수 0 2019. 7. 26.
GraphQL GraphQL이란 GraphQL은 페이스북에서 만든 API를 위한 쿼리 언어로 기존에 API를 구현할 때에는 REST API가 사용되고 있는데 REST API는 두 가지 단점이 있다. 바로 Over-Fetching 과 Under-Fetching이 발생하는데 이 두 가지 문제를 해결해 주는 것이 GraphQL이다. Over-Fetching이란 Over-Fetching 이란 필요한 정보만 받는 게 아닌 불필요한 정보까지도 서버로부터 받게 되는 것이다. User의 userName만 필요하지만 서버에 요청하게 되면 그 외에 정보까지도 전달받게 된다. ex) { "Users": [ { "id": "1", "userName": "test123", "email": "test123@gmail.com" } ] } use.. 공감수 0 댓글수 0 2019. 7. 25.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.