반응형 분류 전체보기373 오브젝트 - 2.객체지향 프로그래밍 1. 영화 예매 시스템 2. 객체지향 프로그래밍을 향해 - 협력, 객체, 클래스 · 어떤 객체들이 필요한지 (어떤 클래스가 필요한지 보다) 먼저 고민하라. · 객체를 독립적인 존재가 아니라 기능을 구현하기 위해 협력하는 공동체의 일원으로 봐야 한다. - 자율적인 객체(상태는 숨기고 행동만 외부에 공개) · 캡슐화: 데이터와 기능을 객체 내부로 함께 묶는 것 · 접근제어: public protected, private 등 접근 수정자 제공 · public interface: 외부에서 접근 가능한 부분 · implementation(구현): 외부 접근 불가, 내부만 접근 가능 - 프로그래머의 자유 · 클라이언트 프로그래머에게 필요한 부분만 공개하여, 불필요한 접근을 방지한다. . 클라이언트 프로그래머가 알아.. 2021. 8. 8. 오브젝트 - 1.객체, 설계 1. 티켓판매 애플리케이션 구현하기 2. 무엇이 문제인가 - 모든 모듈은 제대로 실행돼야 한다(o) - 변경이 용이해야 한다(x) => 과한 의존성 => 결합도가 높다. - 이해하기 쉬워야 한다(x) 3. 설계 개선하기 - 자율성을 높이자 · 모든 객체가 자율적인 존재가 되도록 설계를 변경(TicketSeller, Audience 등) · 캡슐화 : 객체 내부의 세부적인 사항을 감추는 것 => 객체 사이의 결합도를 낮춤 => 설계 변경이 쉬워짐. - 절차지향과 객체지향 · 절차지향: 프로세스와 데이터를 별도의 모듈에 위치시키는 방식 · 객체지향: 프로세스와 데이터를 동일한 모듈 내부에 위치시키는 방식. 어떤 책임을 할당할 것이냐에 초점을 맞춤 - 책임의 이동 · 기존: 책임이 Theater에 집중됨 · .. 2021. 8. 8. 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. Firebase 이미지 저장하기(storage) 업로드 content 올리기 2021. 7. 30. Firebase 데이터 저장하기 파이어베이스 웹서버 입니다. 2021. 7. 30. Firebase 구글 인증하기 1. 인증방식 추가 2. 앱 추가 프로젝트 개요에서 앱 추가를 진행합니다. 또는 생성된 앱을 클릭하여 SDK 소스추가 부분으로 진행합니다. 3. 소스코드 복사 아래의 스크립트 부분을 복사하여 public/index.html 파일에 붙여넣습니다. 파이어베이스 웹서버 입니다. // 구글 인증 기능 추가 var provider = new firebase.auth.GoogleAuthProvider(); // 인증하기 firebase.auth().signInWithPopup(provider).then(function(result) { // This gives you a Google Access Token. You can use it to access the Google API. var token = result... 2021. 7. 29. Firebase API 만들기 1. 프로젝트 생성 - 로그인 / 프로젝트 생성 - firebase.google.com - Function 과 Hosting 기능을 사용하려면 Blaze 로 업그레이드가 필요합니다. 2. 로컬에 firebase 설치 및 시작 npm install -g firebase-tools 1) firebase 로그인 firebase login 2) firebase init firebase init 생성 과정에서 lint는 y로 설치해줍니다. public directory 의 이름을 지정해야 하는데 기본 설정인 public으로 진행하겠습니다. (public directory 는 html, css, js 파일들이 위치하게 될 디렉토리입니다.) rewrite all urls to /index.html 은 n 으로 입력 .. 2021. 7. 27. Oracle 여러행의 데이터를 하나의 행에 가로로 합치기(LISTAGG) SELECT LISTAGG(필드명, 구분자) WITHIN GROUP ( ORDER BY 정렬기준필드 ASC 또는 DESC) FROM 테이블 2021. 7. 27. 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. Vivaldi Browser 사용기 오늘은 비발디(Vivaldi) 브라우저에 대해 알아보도록 하겠습니다. 인터넷 브라우저 하면 Chrome, Safari, IE, Edge, Firefox....간혹 Opera 같은 브라우저들을 떠올리실텐데요. 옛날부터 저는 Opera를 빼놓지 않고 사용했었습니다. 무료로 제공되는 VPN모드 때문이었지요. 그런데 이 Opera 개발회사가 중국으로 넘어갔다고 하더라구요. 그 와중에 Opera의 개발 방향이 바뀌면서 Opera 메인 개발자인 욘 스테펜손 폰 테츠너가 뛰쳐나와 만든 브라우저가 Vivaldi 되겠습니다. 비발디는 크로뮴 기반 의 브라우저로 크롬의 확장기능 사용이 가능합니다. 메모리 사용량은 다른 브라우저들보다 훨씬 작습니다. UI를 Javascript, React, Node.js, Browserif.. 2021. 7. 2. 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. 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. 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. 이전 1 ··· 4 5 6 7 8 9 10 ··· 13 다음 반응형
