프로젝트 폴더 내부에 2개 이상의 서버를 한번에 켜고 싶을 때
·
Tech Memo
프로젝트 폴더 내에 클라이언트와 api서버가 함께 있을 때 서버를 키기 위해서는 각각 packge.json이 있는 폴더로 이동하여 npm 명령어를 실행해야 하는 번거로움이 있다. 이런 불편함을 해소하고 하나의 명령어로 두개의 서버를 킬 수 있는 concurrently라는 npm 패키지가 있다. npm install concurrently --save 설치 후에 아래의 dev명령어와 같이 입력하면 동시에 두개의 서버가 실행된다 --prefix 명령어는 client폴더 안에서 "npm run start"를 실행한다는 뜻이다 "scripts": { "start": "nodemon server/index.js", "dev": "concurrently \"npm run start\" \"npm run start ..
ios에서 pwa로 접속시 css 변경 / pwa로 시작되는지 감지 하는 방법
·
Tech Memo
pwa 설치가 가능하다는 것은 명시적으로 보여주기 위해 배너에 pwa 다운로드 버튼을 넣어서 노출시켰다. 이 배너는 pwa를 다운로드 받았을 시에 노출이 되지 않기는 원했다. 안드로이드에서는 beforeinstallpropmt 이벤트를 통해 pwa로 시작되는지 웹페이지로 시작되는지 감지가 가능하지만 ios에서는 불가능하다. window.addEventListener("beforeinstallprompt", (e) => { e.preventDefault(); deferredPrompt.current = e; }); ios는 media쿼리를 사용하여 감지할 수 있다. @media all and (display-mode: standalone) { body { background-color: yellow; } ..
webpack 간단 설명
·
Tech Memo
const path = require("path"); module.exports = { name: "wordrelay-setting", mode: "development", // 실서비스 : production devtool: "eval", resolve: { extensions: [".js", ".jsx"], }, entry: { app: ["./client"], }, //입력 module: { rules: [ { test: /\.jsx?/, loader: "babel-loader", options: { presets: ["@babel/preset-env", "@babel/preset-react"], plugins: ["@babel/plugin-proposal-class-properties"], }, ..
함수형 프로그래밍(functional programming)이란?
·
Tech Memo
면접을 보러 다니면서 함수형 프로그래밍이란 무엇인지에 대해 질문을 많이 받았다. 느낌적인 느낌이 아닌 좀 더 정확하게 알고 싶어 알아 보았다 함수형 프로그래밍은 무엇일까? 프로그램 패러다임의 한 종류이며, 코딩 스타일이다. 가장 중요한 것은 인풋에 대한 아웃풋이 있으면 이에 대한 데이터 흐름을 정해야 한다는 것이다 not functional let name = 'Aairon' let greeting = 'Hi, I'm ' console.log(greeting + name) 인사를 하는 문구와 이름을 넣어 콘솔에 나타나게 하는 코드이다 일종의 명령형 프로그래밍이라고 볼수있다 functional function greet(name) { return 'Hi, I'm ' + name } greet('Aairon..
GIT refusing to merge unrelated histories 오류 해결
·
Tech Memo
해당 오류는 이미 생성되어 있는 git repo에 clone하지 않은 작업물을 덮어 쓸 때 나타나는 오류이다 일반적인 git 사용으로는 보기 힘든 에러이지만 사이드 프로젝트를 진행 중 expo에 관한 설정 때문에 node_modules와 초기 세팅을 다시 해야하는 상황이 발생했고 해당 repo를 clone하지 않고 새로운 expo init을 하면서 발생한 오류였다 git push --force 등으로 밀어 버릴수도 있지만 기존에 심은 잔디가 날라가게 두기 싫어서 해결 방법을 찾아보았다 git pull --allow-unrelated-histories 터미널에 위의 명령어를 입력하게 되면 관련이 없는 커밋이 push할 수 있게 변경된다
페이스북 공유 페이지 만들기
·
Tech Memo
//http://www.facebook.com/sharer.php?u={페이지 제목}&t={페이지링크} $(".facebook").click(function(e){ e.preventDefault(); window.open('https://www.facebook.com/sharer/sharer.php?u=' +encodeURIComponent(document.URL) +'&t='+encodeURIComponent(document.title), 'facebooksharedialog', 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, height=300, width=600'); }); 메타테그를 입력 후 자바스크립트를 통해 이벤트를 붙여 페이스북 공유가 가능..
유튜브 동영상/구글지도 가져오기
·
Tech Memo
1. 공유 버튼 클릭 2.퍼가기 클릭 3. 소스 복사해서 넣기 1. 구글 맵스에서 검색 / 또는 우클릭 - 이곳이 궁금한가요? 2. HTML복사 클릭
아톰 시작하기
·
Tech Memo
아톰 설치 방법 http://jcon.tistory.com/19?category=736902 1. 프로젝트 폴더 생성 - file - add project folder - 프로젝트를 저장할 폴더를 생성하고 아톰에 등록 2. new file - 파일이름 1.html - 내용적기 - 1.html 파일을 만들어 안에 내용 적기 - ctrl+s 눌러 저장하기 3. 웹페이지에서 만든 파일 열기 - 크롬 - ctrl+o - 연동한 폴더 - 생성한 html파일 열기 - 결과 4. 자동 줄바꿈 - file 탭 - setting - soft wrap 체크 - 줄바꿈 구굴 검색어 : text wrap