만족

기존 사용하던 서버에서 Apache+php 조합을 사용하고 있기 때문에 nginx를 새로 설치하기는 부담스러워 apache+express 조합으로 서비스할 것이다. node/npm은 기존에 설치되었다고 가정한다. 설치하지 않았다면, soojae.tistory.com/25 를 참고해 설치를 진행하면 된다. apache의 경우엔 단순히 sudo apt-get install apache2 하면 된다. 버전 정보 Ubuntu 16.04 Apache 2.4.18 아파치 설정 sudo nano /etc/apache2/sites-avaliable/000-default.conf 를 이용해 vhost정보를 수정할 것이다. ... ServerName [도메인명(ex: test.com)] ServerAdmin [관리자 이메..

http://test.com 에 배포하기로 했다고 해보자. npm run build (yarn build)로 빌드한 후, 서버에 업로드했을때 정상적으로 표시되는 것으로 보인다. 그런데 /가 아닌 다른 경로로 처음 접속하면 404 페이지가 보인다. 리액트 프로젝트를 빌드하면 html파일은 index.html하나뿐이기 때문에 /, /index.html이 아니면 다른 경로로 접속했을 때 index.html을 읽어올 수 없기 때문이다. 즉, 어떤 경로로 접속하더라도 index.html 파일을 읽을 수 있도록 apache설정을 조금 만져주어야 한다. Ubuntu 16.04, Apache 2.4.18을 기준으로 설명한다. sudo nano /etc/apache2/apache2.conf 설정파일을 열고 (nano 대..

waifu2x.udp.jp/index.html waifu2x waifu2x Single-Image Super-Resolution for Anime-Style Art using Deep Convolutional Neural Networks. And it supports photo. Show full demonstration | Go to GitHub This website uses Google Analytics to help us improve the website content. waifu2x.udp.jp 다른 곳도 많지만 대부분 몇개까지만 무료로 변환해주고 결제를 요구하는데 위의 사이트에서는 무료로 무제한 변환이 가능하다. 그 대신 하나씩 해야 한다는 단점이 있다... 성능 확실하구만...

오류 로깅이나, 버그 접수 시 사용중인 버전 정보 확인이 필요하다. 그래서 package.json을 임포트하여 version값을 뽑아오려 했으나 오류가 발생한다. package.json은 프로젝트 루트 위치(src보다 상위 레벨임)에 있기 때문에 임포트가 불가능하다. 따라서 다른 방법을 사용해야 한다. ... "scripts":{ "start": "node scripts/start.js", "build": "node scripts/build.js", ... } ... package.json의 scripts 값을 보면 다음처럼 되어 있을 것이다. 여기서 nodejs에 환경 변수를 넣어줄 것이다. ... "scripts":{ "start": "REACT_APP_VERSION=$npm_package_versi..

리액트로 개발 도중 에러가 발생하면 다음과 같은 화면을 볼 수 있다. 그런데 이건 개발 중일 때 보여지는 화면이고, 프로덕션에서 오류가 나면 아무것도 표시되지 않는다. 말 그대로 페이지가 백지가 되버린다. 당연히 사용자 경험상으로 좋지 않을 뿐더러, try-catch로 모든 컴포넌트의 로직을 감쌀 수도 없는 노릇이니 개발자로서도 에러가 어디서 어떻게 발생하는지 가늠하기도 어렵다. 이럴 때 Error Boundary를 사용하면 문제가 해결된다. class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError..

window.addEventListener('online', ()=>{ /*끊김->연결로 변경될 때 호출*/}); window.addEventListener('offline', ()=>{ /*연갤->끊김으로 변경될 때 호출*/}); window.navigator.onLine //true== connected, false == disconnected 몇몇 웹사이트는 네트워크 끊김/연결될 때 시각적으로 알려주던게 신기해서 한번 알아봤다.

HOC가 뭘까? A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature. Concretely, a higher-order component is a function that takes a component and returns a new component. HOC는 리액트에서 컴포넌트 로직 재사용을 위해 사용하는 고급 기술입니다. HOC는 React API의 일부가 아니며, 단지 리액트의 집합 특성에..

SQL Injection이란? SQL 주입(삽입)이라고도 부르며, 개발자의 의도대로 동작하지 않는 구문을 추가하여 피해를 입히는 공격 방식이다. SQL Injection 예시 const removeAccount= (accountId)=>{ database.executeQuery(`DELETE FROM Account WHERE id='${accountId}'`); }; 다음과 같은 코드가 있다고 해 보자. 유저가 정상적인 id를 입력할 때는 상관 없지만, 공격자가 accountId 값에 1' OR 1=1; -- 를 입력하게 되면 쿼리문은 다음과 같이 변한다. DELETE FROM Account WHERE id='1' OR 1=1; 따라서 모든 계정이 삭제되는 결과가 초래된다. 이런 식으로 데이터를 몽땅 날..

www.w3schools.com/php/phptryit.asp?filename=tryphp_compiler 실행 결과가 궁금하지만 내 프로젝트에 추가하긴 싫을 때 쓰면 유용하다. 속도는 기대하지 말 것...

위와 같은 구조로 라우팅을 구성했다면, 가령 /test 같은 주소는 존재하지 않으므로 텅 빈 화면만이 표시된다. 이를 시각화해주는 것이 UX관점에서 좋기 때문에 추가해야 한다. 먼저 로 라우트 컴포넌트들을 감싸준다. Switch컴포넌트 내부에서는 반드시 하나의 Route컴포넌트만이 렌더링 된다. 가령 apple}/> banana}/> 이런 구조로 되어 있다면 apple 만이 렌더링된다. 그리고 를 추가한다. (NotFound 위치에는 렌더링할 컴포넌트를 넣어주면 된다.) 위의 Route패턴과 일치하는 path를 찾지 못했을 경우에 NotFound가 렌더링 된다. 잘 작동한다.

애플워치를 사서 줄질을 해보려고 했으나... 스트랩이 너무 비싸서 엄두를 못 내고 있었다. 솔직히 에르메스같은 거야 비싼거 이해라도 하겠는데 얘는 그냥 실리콘 뚝딱 찍어내놓고 육만원을 달라니 아니꼬와서라도 사기가 싫다. 그래서 타사에서 제조한 애플워치 스트랩을 구매하기로 했다. 일단 가격은 매우 싸다. 리뷰를 둘러봐도 호평이 자자해서 두개 샀다. 메탈스트랩 하나, 실리콘스트랩 하나 해서 15000원정도에 구매했다. 맨 끝에 있는 검정 실리콘 스트랩이 정품이고, 나머지는 타사 제품이다. 차이점 메탈 스트랩은 정품이 없으니, 넘어가고 실리콘의 경우, 타사 제품은 실리콘이 더 뻣뻣하다. 그래서 시계를 찰 때 가끔 삑사리가 나서 짜증난다. 또, 먼지가 더 잘 달라붙는것 같다. 차고 나면 뭐... 크게 싼티가 난..

blog.hyungsub.com/entry/%EB%AA%A8%EB%8B%88%ED%84%B0-%EC%BB%AC%EB%9F%AC-%EC%BA%98%EB%A6%AC%EB%B8%8C%EB%A0%88%EC%9D%B4%EC%85%98-%EC%9B%B9%EC%97%90%EC%84%9C-%EC%95%BD%EC%8B%9D%EC%9C%BC%EB%A1%9C-%ED%95%98%EA%B8%B0

6개월간 하던 외주가 끝나고 요즘 개인적으로 진행하고 있는 프로젝트가 하나 있다 그래서 좀 많이 늘었는데 가능하면 2000개까지 뚫어보고 싶다

satisfactoryplace.tistory.com/154?category=829221 [React] MobX 개요 MobX란? 상태 관리 라이브러리다. 비슷한 종류의 대표적인 상태 관리 라이브러리로 redux가 있다. 개인적으로 redux의 지독한(...) 보일러플레이트에 깊은 빡침을 느껴 mobx를 사용해보려고 한다. 설명 satisfactoryplace.tistory.com 위 포스트에서 이어지는 내용이다. 이번엔 MobX로 실제로 어떤 것을 해볼 수 있는지를 살펴보자. 우선 observerable state의 위치에 따른(내부/외부) state사용법에 대해 알아볼 것이다. class Timer { secondsPassed = 0 constructor() { makeAutoObservable(th..

MobX란? 상태 관리 라이브러리다. 비슷한 종류의 대표적인 상태 관리 라이브러리로 redux가 있다. 개인적으로 redux의 지독한(...) 보일러플레이트에 깊은 빡침을 느껴 mobx를 사용해보려고 한다. 설명은 공식 문서를 기준으로 설명한다. mobx.js.org/README.html About MobX · MobX mobx.js.org 빠르게 알아보자 import React from "react" import ReactDOM from "react-dom" import { makeAutoObservable } from "mobx" import { observer } from "mobx-react" // Model the application state. class Timer { secondsPasse..

KYSC:: Keep Your Shaver Clean ========= What is KYSC? Using dirty and older shaver is very dangerous. That may cause hurt or infection... Now you just tap button in app whenever change shaver! KYSC let you know the day you should change your shaver using notification. source code is here ========= Privacy Policy KYSC is never collect any information including user privacy data. All data is saved..

6번의 떨어짐 끝에 드디어 애드센스 합격 통보를 받았다. (육전칠기....) 합격을 받기까지 거친 과정을 소개해 보려고 한다. 1. 사이트 성능 최적화 satisfactoryplace.tistory.com/122?category=829221 [React] React.memo를 이용한 함수 컴포넌트 최적화 https://ko.reactjs.org/docs/react-api.html#reactmemo React 최상위 API – React A JavaScript library for building user interfaces ko.reactjs.org 요즘 클래스형 컴포넌트를 갖다 버리고, 거의 함수 컴포넌.. satisfactoryplace.tistory.com 2. JS 실행을 지원하지 않는 봇(크롤러..

서치엔진이 웹 품질을 판단하는 데는 여러 기준이 있는데, 그 중 하나는 페이지별 적절한 메타 태그가 있느냐다. 리액트에서 해당 스펙을 구현하는 방법에 대해 소개할 것이다. 우선 /public/index.html의 head 태그 내부에 다음 태그를 추가한다. 위 메타 태그는 메신저/검색엔진 등에서 사이트 프리뷰를 표시할 때 사용한다. 가령 카카오톡에서는 다음과 같이 표시된다 이제 페이지 별로 해당 태그의 content를 조작하는 코드를 작성한다. const setMetaTags = ({ title="기본 타이틀", description="기본 설명", imageUrl="기본 사이트 이미지 경로" }) => { //set title document .querySelector('meta[property="og..

내 앱에서 갤러리 앱을 열고 선택한 사진을 내 앱에서 불러오는 기능을 구현한다. 파일 읽기 권한 추가 먼저 manifest.xml에 다음 권한을 추가하고, 마시멜로 이상의 Android 버전을 타게팅하는 경우 사용자에게 권한을 요청하여 받아낸다. 액티비티에서 갤러리 열기 우선 갤러리를 여는 코드부터 작성해 보자 public class SomeActivity extends FragmentActivity{ //... if(PermissionChecker.checkPermission(this, Manifest.permission.READ_EXTERNAL_STORAGE)){ //권한이 확인된 경우 갤러리 오픈 Intent i = new Intent(Intent.ACTION_PICK,android.provider..

사이퍼즈 서포터(CPSP)의 업데이트 로드맵을 알려드리고자 합니다. 상세 일정에 대해 정해진 것은 없으나, 어떤 순서로 업데이트해 나갈 것인지 안내드립니다. 1. 사이퍼즈 서포터 웹 버전 정식 출시 현재(2020-09-13 01:24)기준 아직 웹 버전은 프리뷰 버전입니다. 앱에 있는 기능 중 아직 추가되지 못한 기능과 자잘한 디자인/버그를 수정한 뒤 정식 버전을 출시할 예정입니다. 2. 통계 자체 수집 기능 현재 통계 페이지에서 제공되고 있는 기능은 사이퍼즈 공식 홈페이지 정보에 의존적입니다. 이는 캐릭터 정보 페이지의 포지션 통계/매치업/시너지 정보와는 통계 수집 기준이 달라 이용하시는 분들께 혼란을 드릴 수 있을 것 같습니다. 따라서 포지션 통계/매치업/시너지 정보 분석 시 사용한 표본들로 승률/픽..