본문 바로가기
반응형

Programming/Javascript66

프론트엔드 프레임워크 비교 (Angular / React / Vue / Svelte) 프론트엔드 프레임워크 하면 Angular / React / Vue 그리고 최근 부각되고 있는 Svelte가 있는데요. 전문 개발자는 아니지만 조금은 손대본 경험을 토대로(Angular제외..) 특성을 알아보도록 하겠습니다. Stackoverflow Ranking에서 여러 프로그래밍 언어 및 프레임워크에 대한 점유율, 선호도 등 자세한 정보는 확인하실 수 있습니다. 해당 정보에 따르면 웹 프레임워크의 점유율은 아래 그래프와 같습니다. 이 중에 프론트엔드 프레임워크만 보면 React가 제일 상단에 있고, jQuery, Angular, Vue 그리고 한참 아래쪽에 Svelte가 있네요 역시 Stackoverflow Ranking에 따르면 이번엔 Svelte가 제일 위에 있고, 그다음 React,.. 2022. 11. 1.
Electron-vue 보일러플레이트 만들기 1. Vue 프로젝트 시작 vue create . //폴더를 먼저 만들고 해당 폴더를 프로젝트 폴더로 하여 생성 2. Electron-Builder 설치 이거 설치하고 테스트를 해본다. vue add electron-builder 3. 배포 테스트 npm run electron:build 4. Router 설치 vue add router - App.vue파일이 자동으로 업데이트 됨 Home About - ./views/HomeView.vue와 /views/AboutView.vue 파일이 자동 생성됨- - ./router/index.js 파일이 자동 생성됨 5. Bootstrap-vue 설치 npm install bootstrap-vue bootstrap Bootstrap-vue 설정 (main.js) i.. 2022. 6. 22.
Vue3 + bootstrap5 적용하기 1. 설치 npm i --save bootstrap npm i --save @popperjs/core // 부트스트랩 실행에 필요 2. main.js에 두줄만 Import하면 됨 import { createApp } from 'vue' import App from './App.vue' import router from './router/index.js' // 아래 두줄만 넣으면 된다. import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap' createApp(App) .use(router) .mount('#app') *** bootstrap-vue 적용하기 npm install vue bootstrap-vue bootstrap 이제 main.js.. 2022. 5. 28.
Vuex 사용 state : data getters : computed mutations : methods actions : methods(비동기) Vuex action에서의 활용 context.state context.getters context.commit (mutation의 함수 사용시) context.dispatch (action의 함수 사용시) Vue 컴포넌트에서 Vuex Helper 사용 ...mapState('모듈',[ '상태1','상태2' ]) ===> computed에서 사용 ...mapGetters('모듈',[ '상태1','상태2' ]) ===> computed에서 사용 ...mapMutations('모듈',[ '상태1','상태2' ]) ===> methods에서 사용 ...mapActions('모듈.. 2022. 5. 24.
Vue 프로젝트 - Movie페이지 단일영화 상세정보 및 skeleton UI작성 1. routes 수정 /movie/#123456과 같이 ID를 입력받을 수 있도록 수정 import { createRouter, createWebHashHistory} from 'vue-router' import Home from './MyHome.vue' import Movie from './MyMovie.vue' import About from './MyAbout.vue' export default createRouter({ // Hash, History --> Hash mode 사용 예정 history: createWebHashHistory(), // pages routes:[ { path:'/', component: Home }, { path:'/movie/:id', component: Movi.. 2022. 5. 22.
Vue 영화검색사이트 기본 설치 파일 1.라이브러리 설치 npm i vue-router vuex bootstrap@5 npm i -D node-sass sass-loader 2. bootstrap 커스터마이징 - scss/main.scss 작성 - 오류 방지를 위해 maps는 주석 처리 // Required @import "../../node_modules/bootstrap/scss/functions"; // Default variable overrides $primary:#FDC000; //variables가 실행되기 전에 재정의되어야 함 // Required @import "../../node_modules/bootstrap/scss/variables"; @import "../../node_modules/bootstrap/scss/mix.. 2022. 5. 14.
Vue Tailwind CSS 적용하기 1. 설치 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest 2. 활성화 npx tailwindcss init -p 3. ./tailwind.config.js환경설정 module.exports = { // content: [ // "./index.html", // "./src/**/*.{vue,js,ts,jsx,tsx}", // ], purge:[ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}" ], theme: { extend: {}, }, plugins: [], } 4. src/index.css 파일 생성 @import "tailwindcss/base"; @import "tailwindcs.. 2022. 5. 13.
Vue apache 배포 오류 Vue로 작성한 프로그램을 Build를 하고... npm run build /dist/ 폴더의 파일들을 아파치 폴더에 옮겼는데, 빈 화면이 나옵니다. index.html 파일은 보이는데 개발자 화면 확인해보니...js파일과 css파일의 경로를 인식을 못했습니다. "/js/chunk-vendors....."처럼 되어있는데, 혹시나 해서 "."을 붙여보니 작동이 됩니다. 동일한 오류 겪고계신 분께서는 한번 시도해보시길 바랍니다. 2022. 5. 12.
React toolkit을 이용한 React counter 1. 라이브러리 설치 yarn add redux react-redux @reduxjs/tookit 2. index.js Reducer 연결 및 store 생성 import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; import { configureStore } from "@reduxjs/toolkit"; import rootReducer from "./reducers"; import { Provider } from "react-redux"; const store = configure.. 2021. 8. 23.
React에서 Kakao 지도 api 사용하기 - 지도에 표시하기 1. 지도에서 좌표-주소 변환 geocoder 라는 것을 사용해야하는데, services라이브러리를 써야합니다. 라이브러리는 api 요청할 때 url에 추가해서 보내면 됩니다. (kakao 예제에서 제공하는 cluster, drawing도 함께 추가해 넣었습니다.) 2. 우선 화면에 무언가 표시를 해봅시다. 예제는 kakao에서 제공되는 kakao 제주 사옥을 찾는 것 같습니다. import React, { useEffect } from 'react'; const { kakao } = window; const MapContainer = () => { useEffect(() => { const container = document.getElementById('myMap'); const options = {.. 2021. 8. 11.
React에서 Kakao 지도 api 사용하기 1. App key 발급 https://apis.map.kakao.com/web/guide/ 사이트에 접속해서 순서대로 진행합니다. 우선 카카오 개발자사이트 (https://developers.kakao.com) 접속하여 회원가입을 하고, 애플리케이션 추가하기를 통해 앱 생성을 합니다. 생성된 앱(mymap)을 클릭해 들어가면 사용할 수 있는 앱 키가 제공됩니다. 이렇게 간단히 앱키 발급이 완료되었습니다. 2. Sample React App 생성 리액트 앱을 생성하고, 간단히 소스를 추가해보겠습니다. 1) public/index.html 아래 코드를 /public/index.html 파일의 내부에 붙여넣습니다. 2) 지도를 띄우는 코드 작성 import React, { useEffect } from 'r.. 2021. 8. 10.
Javascript 주요 팁 1. 조건이 필요할 때 => 3항 연산자 score > 5 ? 'Good': 'Bad'; // 조건이 true이면 'Good', false이면 'Bad' 2. 조건이 필요할 때 => nullish coalescing const message = text ?? 'Nothing to display'; //text가 있으면 text, 없으면(null, undefined) 'Nothing to display' //함수 default parameter : null 인 경우에는 null을 출력 function printMessage(text = 'Nothing to display'){ console.log(text); } // Logical Or || leftExpr ?? right Expr // falsy(nul.. 2021. 8. 7.
Gatsby 시작하기 (with Typescript) 0. Gatsby-cli 설치 npm install -g gatsby-cli 1. Gatsby 프로젝트 생성 gatsby new [프로젝트명] or npx gatsby-cli new [프로젝트명]// gatsby-cli설치 없이 수행할 때 yarn remove gatsby-plugin-manifest gatsby-plugin-gatsby-cloud // 필요없는 라이브러리 삭제 2. 타입스크립트 설치 yarn add typescript --dev yarn add gatsby-plugin-typescript 3. gatsby-config.js 파일 수정 module.exports = { siteMetadata: { title: `Gatsby Default Starter`, description: `Kick.. 2021. 7. 4.
Recoil을 활용한 비동기 요청 예제 1. Library 설치 yarn add recoil 2. 구성 /src ㄴ components * UserList.jsx ㄴ recoil * state.js *App.js *Index.js 3. 코드 (1) src/App.js import React, { ErrorBoundary } from "react"; import { RecoilRoot } from "recoil"; import UserList from "./components/UserList"; function App() { return ( ); } export default App; (2) src/recoil/state.js import { atom, selector } from "recoil"; export const userListStat.. 2021. 6. 30.
SWR을 활용한 비동기 요청 예제 1. Library 설치 yarn add swr 2. 폴더 구성 Counter는 참고로 작성했는데, 본 포스트에서 구성하지는 않겠습니다. 비동기로 서버에서 User목록만 불러와서 보여주는 부분만 코드로 남김니다. /src ㄴcomponents *Users.jsx ㄴcustomHooks *useUsers.js *App.js *index.js 3. 코드 (1) App.js import Users from "./components/Users"; import Counter from "./components/Counter"; function App() { return ( ); } export default App; (2) src/customHooks/useUsers.js import useSWR from "swr.. 2021. 6. 29.
React-query 를 활용한 비동기 요청 예제 1. Library 설치 yarn add react-query 2. 프로젝트 구조 /src ㄴcomponents * RQ1 (테스트용) * RQ2 (실 사용 컴포넌트) ㄴcustomHooks * useUsers.js *App.js *index.js 3. 코드 (1) App.js import { QueryClient, QueryClientProvider } from "react-query"; import RQ2 from "./components/RQ2"; const queryClient = new QueryClient(); function App() { return ( ); } export default App; (2) src/customHooks/useUsers.js import { useQuery } .. 2021. 6. 29.
Redux-Saga 를 활용한 비동기 요청 예제 1. 프로젝트 생성 yarn create react-app . 2. 라이브러리 설치 yarn add redux react-redux redux-actions axios redux-saga redux-devtools-extension 3. 프로젝트 구성 프로젝트 구성은 아래와 같이 할 계획입니다. /src 하위부분만 살펴보면 되겠습니다. /src ㄴ components * Leader.jsx ㄴ containers * LeaderContainer.jsx ㄴ lib * api.js (서버에 요청하는 비동기 함수 정의부분) ㄴ modules * index.js (redux와 saga를 통합하는 부분) * leader.js ( action 타입, action 생성함수, redux, saga 정의하는 부분) * .. 2021. 6. 29.
SWR로 로컬 상태 컨트롤 - Counter import useSWR from "swr"; function useCounter() { const { data, mutate } = useSWR("state", () => window.count); return { data: window.count || 0, mutate: (count) => { window.count = count; return mutate(); }, }; } export default function Counter() { const { data, mutate } = useCounter(); const handleInc = () => mutate(data + 1); const handleDec = () => mutate(data - 1); return ( count: {data} in.. 2021. 6. 26.
Color Palette - palette.js palette.js : gray, red, pink, grape, violet, indigo, blue, cyan, teal, green, lime, yellow, ornage 일부는 적어놓고 붙여써야겠습니다. const palette = { gray: [ '#f8f9fa', '#f1f3f5', '#e9ecef', '#dee2e6', '#ced4da', '#adb5bd', '#868e96', '#495057', '#343a40', '#212529', ], cyan: [ '#e3fafc', '#c5f6fa', '#99e9f2', '#66d9e8', '#3bc9db', '#22b8cf', '#15aabf', '#1098ad', '#0c8599', '#0b7285', ], }; export default pa.. 2021. 6. 21.
Next.js 시작하기4 - 설정파일 1. next.config.js module.exports = { reactStrictMode: true, trailingSlash: false, // 뒤쪽 슬래시를 붙일 것인지.. env: { SANITY_PROJECT_ID: 'ozi5ivc6', //Sanity ID를 환경변수로 지정 } } 2021. 6. 20.
Next.js 시작하기3 - 스타일링 1. 라이브러리 설치 yarn add @sanity/block-content-to-react yarn add react-syntax-highlighter 2. BlogPostDetail.jsx import {Col, Row } from 'antd' import BlockContent from '@sanity/block-content-to-react' import SyntaxHighlighter from 'react-syntax-highlighter' const serializers = { types: { code: ({node}) => { const { code } = node; return ( {code} ) }, video: ({ node }) => { return video }, link: ({ n.. 2021. 6. 20.
Next.js 시작하기2 - 스타일링 1. 라이브러리 설치 yarn add antd @ant-design/icons// ant design yarn add dayjs// 날짜 변환 라이브러리 2. pages/_app.js 파일에 반영 -> 전체 적용 import 'antd/dist/antd.css' // p.slug === home.mainPostUrl); const otherPosts = posts.filter(p => p.slug !== home.mainPostUrl); console.log(mainPost); console.log(otherPosts); return ( ) } export async function getStaticProps() { const sanityService = new SanityService(); const .. 2021. 6. 20.
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.
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.
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.
Nodejs V14 ESM 문법 적용하기 - 리액트를 다루는 기술 backend 주의점 "리액트를 다루는 기술" 의 22장...mongodb 연동하기 과정에서 Koa 백엔드에 ESM을 적용하는 부분이 있는데, 현재 Node 14 버전에서 주의해야할 점과 함께 몇가지 정리해보고하 합니다. 1. 라이브러리 설치 해당 과정에서는 ESM이 외에도 몇가지 라이브러리가 필요합니다. koa, koa-bodyparser, koa-router, mongoose, dotenv 등 말이죠. ESLint옵션 설정하는 부분은 제외하도록 하겠습니다. (VSCode에 설치한 ESLint 기능에, 추가 설정했을 경우 달라지는 부분을 잘 몰라서 이부분은 제외하고 사용했습니다.) 아래의 package.json을 보면 필요한 라이브러리들을 확인할 수 있을 것입니다. { "name": "05_react_backend", "v.. 2021. 4. 10.

티스토리툴바