본문 바로가기
반응형

전체 글374

Next.js 시작하기 (Sanity Blog 작성 완료된 경우) 1. 프로젝트 생성 및 Library 설치 yarn create next-app . yarn add @sanity/client//Sanity 연결하여 Data를 가져오기 위한 라이브러리 2. 시작 yarn dev yarn start는 빌드 이후 가능합니다. 3. 라우팅 설정 (기초) 폴더/페이지구조url pages/index.js -> / pages/blog/index.js-> /blog pages/blog/first-post.js->/blog/first-post pages/dashboard/setting/username.js->/dashboard/settings/username pages/blog/[slug].js->/blog/:slug(/blog/hello-world) pages/[username]/.. 2021. 6. 20.
Netlify Serverless function 작성 보안을 위해 API Key가 노출되지 않도록 API 요청 부분을 서버리스 함수로 작성하도록 하겠습니다. 추가로 API Key는 환경변수로 등록하여 Github 등으로 올릴 때 노출되는 것을 막기위해 추가적으로 보안설정을 하겠습니다. 1.netlify-cli 설치 npm i -D netlify-cli 2.netlify.toml # Netlify Dev # https://cli.netlify.com/netlify-dev/#netlifytoml-dev-block # 제품 모드 [build] command = "npm run build" functions = "functions" # Netlify 서버리스 함수가 작성된 디렉토리를 지정합니다. publish = "build" # 프로젝트 빌드 결과의 디렉토리를 .. 2021. 6. 17.
헤로쿠 백엔드, Netlify 프론트엔드 배포 1. 백엔드 헤로쿠에 백엔드를 배포할 경우 CORS(Cross Origin Resource Sharing) 문제를 해결하기 위해 라이브러리를 설치해야 합니다. Koa로 작업할 경우 'koa2-cors' 를 설치해주면 됩니다. 그리고 라우팅 설정 부분에서 아래의 구문을 추가해줍니다. import cors from 'koa2-cors'; app.use(cors()); 2. 프론트엔드 Github의 소스를 자동으로 배포해주는 Netlify의 경우에도 일부 수정할 부분이 필요합니다. Local에서 작업할 경우에는 같은 localhost에서 데이터를 주고 받아서 몰랐었는데, 이제 헤로쿠의 백엔드 데이터를 받아와야 하기 때문에 조금 달라져야 합니다. 그래서 필요한 것이 _redirects파일 입니다. /public.. 2021. 6. 15.
Heroku 기본 사용법 1. Heroku 로그인 2. Heroku CLI 설치 3. git init 4. git add . 5. git commit -m "first message" 6. heroku login 7. heroku create myapp 8. heroku git:remote -a myapp 9. git push heroku master 2021. 6. 14.
HEROKU salesforce authenticato 새 디바이스에서 인식 안된 문제 열심히 Front만 공부하던 중 Backend도 배포하려면 Heroku에서 하면 된다는 걸 알게되었습니다. 그래서 로그인 하려고 하는데 새 기기에서 로그인 하려고 하니 salesforce authenticator로 인증하라는 메시지가 뜨네요. 그래서 좀 짜증나지만 앱을 열고 인증을 해줘야 했습니다. 그런데...웬일인지 인증 메시지가 핸드폰 salesforce authenicator에서 뜨질 않네요...ㅠㅠ 최근 갑작스런 핸드폰 비번 잠금으로 인해서...핸드폰을 사용한지도 좀 되고 해서 새 폰으로 바꾼지 한 3일 되었습니다. 좀 어이가 없던 순간이었습니다. 오전에도 잘 쓰던 폰이 갑자기 결재하려니까 비번이 먹통이되면서 핸드폰 로그인 비번(지문인식 포함)이 완전히 인식을 못하는 지경에 이르렀던 것이죠. 어찌.. 2021. 6. 14.
Recoil 따라하기 - TodoList 무작정 따라한 소스를 기록으로 남김니다. 1. App.js RecoilRoot 를 사용하여 TodoList 요소를 감싸준다. import React from 'react'; import TodoList from './components/TodoList' import { RecoilRoot } from 'recoil'; function App() { return ( ); } export default App; 2. ./src/recoil/state.js 작성 import { atom } from 'recoil'; export const todoListState = atom({ key: 'todoListState', default: [], }); 3. ./src/components/TodoList.jsx 작.. 2021. 5. 28.
VS Code ESLint 저장 시 자동 Fix, Format 설정하기 1. ESLint 설치 2. 기본설정 열기( Ctrl + . ) 3. 설정 창에서 code action on save 라고 입력 4. 위 그림에서 'settings.json에서 편집' 을 눌러 파일 수정창으로 이동 5. 아래구문 추가 또는 수정 "editor.codeActionsOnSave": { "source.fixAll": true, }, "editor.formatOnSave": false, 2021. 5. 22.
Vue 프로젝트 만들기 - with Webpack Template 1. 프로젝트 구성 (Template Download) /node_modules .babelrc.js .gitignore .postcssrc.js .babelrc.js .package-lock.json .package.json .webpack.config.js index.html /src/App.vue /src/main.js /src/assets/logo.jpg ㄴ/components/HelloWorld.vue /scss/main.scss /static/fabicon.ico 2. Package 설치 npm i vue@next npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc npm i -D file-loader npm i -D eslint esli.. 2021. 5. 21.
Svelte / Snowpack template 프로젝트 만들기 1. 프로젝트 생성 npm init -y 2. 관련 package 설치 npm i -D snowpack svelte @snowpack/plugin-svelte ( 템플릿 구성용 ) npm i -D @snowpack/plugin-optimize ( html, js 난독화 및 최적화 ) npm i -D @snowpack/plugin-babel ( 바벨 ) npm i -D @snowpack/plugin-sass ( sass ) npm i -D bootstrap@next ( 부트스트랩 ) Svelt for VS Code 패키지 설치 ( 코드 하이라이트 ) 3. package.json 파일 script 추가 "scripts": { "dev": "snowpack dev", "build": "snowpack buil.. 2021. 5. 20.
Webpack template 프로젝트 만들기 1. 프로젝트 생성 npm init -y 2. 관련 플러그인 설치 npm i -D webpack webpack-cli webpack-dev-server@next npm i -D html-webpack-plugin ( html을 포함하여 build할 수 있도록 도와주는 플러그인 ) npm i -D copy-webpack-plugin ( static 폴더에 있는 이미지 파일을 인식시킬 수 있는 플러그인 ) npm i -D css-loader style-loader ( css 파일을 main.js 에서 인식시켜주는 파일 ) npm i -D sass-loader sass ( sass 파일 읽고, 해석해주는 플러그인 ) npm i -D postcss autoprefixer postcss-loader ( 스타일 후.. 2021. 5. 20.
반응형

티스토리툴바