티스토리

Ik's memo

검색하기

블로그 홈

Ik's memo

jongik.tistory.com/m

IT, 일상 여러가지 주제에 대해 글쓰고있어요

구독자: 2

방명록 방문하기

주요 글 목록

Discourse 커뮤니티 사용에 대해 Discourse 플랫폼을 회사 사내 메신저로 도입하기 Discourse는 주로 포럼 소프트웨어로 알려져 있지만, 이를 회사 내부 메신저로 활용할 경우 여러 장점과 단점이 존재합니다. 또한, 오픈 소스 소프트웨어로서의 장점과 커스터마이징 가능성도 중요한 포인트입니다. 장점 오픈 소스 소프트웨어의 장점 비용 절감: Discourse는 오픈 소스 소프트웨어로 무료로 사용할 수 있습니다. 이는 초기 도입 비용을 절감할 수 있고, 라이센스 비용 부담이 없습니다. 자유로운 커스터마이징: 소스 코드가 공개되어 있어 회사의 필요에 맞게 자유롭게 커스터마이징할 수 있습니다. 기능 추가, 인터페이스 변.. 공감수 0 댓글수 0 2024. 6. 14.
Firebase Auth 정보 이관 방법! ( Firebase CLI ) 최근 웹프로젝트의 이관 작업을 하면서 Firebase Auth 로 관리하던 User 정보를 export 해 타사에 전달하는 작업을 진행했습니다. 그 과정에서 처음으로 Firebase CLI 를 이용해봤는데요, CLI 라고 하면 대부분 거부감을 느낄 수 있지만, 생각보다 아주 간단한 작업이었습니다. 그 방법을 공유해보려고 합니다! Firebase 프로젝트의 Authentication 데이터 내보내기 이 튜토리얼에서는 Firebase CLI를 사용하여 특정 Firebase 프로젝트의 Authentication 데이터를 내보내고, 해당 데이터를 처리하는 방법을 배웁니다. 1. Firebase 프로젝트 설정 확인 먼저, Firebase .. 공감수 0 댓글수 0 2024. 6. 13.
개발자가 추천하는 Chat-GPT 이용 방법 제가 처음 chat-gpt 이야기를 들은건 2년전쯤인데요. 그때 개발자로서 이미 일하고 있었음에도 불구하고, 챗지피티 능력을 무시하고 1년 가까이 그저 구글에 검색하거나 공식 개발문서 등을 찾아가며 개발을 계속 했었습니다.그런데 1년전쯤부터해서 지금은 챗지피티 없는 개발은 상상하기도 싫네요...1년동안 챗지피티를 이용하면서 챗지피티에게 조금 더 나은 응답을 받을 수 있는 조건들을 몇 가지 알게되서 공유하려고 합니다!첫번째 ! Chat-GPT 에게 역할을 부여하기말 그대로, 질문 전에 chat-gpt 에게 '너는 xx 직업을 가지고 있는 전문가야. 지금부터 전문가의 입장으로 대답해줘!' 라며 chat-gpt 에게 역할을 부여하면 됩니다!비교 이미지를 보여드릴게요!첫번째 이미지가 단순히 자바언어에 대해 설명.. 공감수 0 댓글수 0 2024. 6. 1.
국가 도메인 (.AI) 가비아에서 후이즈로 도메인 소유권 이전하기 최근에 도메인 소유권 이전 작업을 하면서 생각치도 못한 곳에서 꽤나 애를 먹었습니다. 가비아에서 구매한.ai 도메인을 AWS Route53 과 연동해 사용하고 있었고후이즈로 기관이전과 소유권이전을 동시에 진행해야 했습니다.해당 도메인을 소유권 이전하려고 가비아 도메인 관리 페이지에서 소유권 이전 버튼을 누르니 해당 도메인은 소유권 이전이 불가능하다는 팝업이 나타났습니다... 그래서 조금 검색을 해보니, .ai 도메인은 단순한 도메인이 아닌, "엥귈라" 라는 나라의 국가도메인이었습니다...?가비아에 직접 문의도 했었으나, 해당 도메인은 국가에서 관리하고 있는 최상위 도메인이기 때문에,시행중인 정책 상 소유권 이전이 불가능하다는 답변을 받았습니다. 그래서 해결 방법을 찾아 여기저기 문의하던 중 찾아낸 방법이.. 공감수 2 댓글수 0 2024. 6. 1.
Linux ) 쉘 스크립트 작성해보기 실행파일 생성 vi 또는 vim 명령어를 이용해 [filename].sh 파일을 생성한다. 첫 줄에 #!/bin/bash 를 먼저 입력해줘야한다. #! 의 의미는 스크립트를 실행할 쉘을 지정하는 선언문이다. /bin/bash 의 의미는 bash 명령의 절대경로이다. ⇒ /bin/bash 의 쉘로 스크립트를 작성하겠다는 선언을 한 것이다. 실행권한 부여 [filename].sh 를 실행파일로 만들어주려면 chmod 명령어를 이용해 실행 권한을 부여해줘야한다. chmod 755 [filename].sh 실행하기 쉘스크립트 파일이 있는 경로로 가서 ./[filename].sh 를 입력 공감수 0 댓글수 0 2023. 1. 22.
Firebase ) emailVerified 상태를 변경하기 위해 sendEmailVerification VS sendSignInLinkToEmail sendEmailVerification 사용자의 이메일 주소가 유효한지 확인하는 일회성 이벤트, user 객체에 emailVerified 값을 설정 이메일이 확인되면 다시 호출하지 않으며 회원가입 과정에서 사용됨 sendSignInLinkToEmail 사용자가 이메일/패스워드를 입력하거나 통합 계정을 통해 로그인하는 대신 이메일로 전송된 링크를 클릭해 로그인하도록 하는 인증 방법 사용자가 로그인 할 때마다 호출 credential.user 의 emailVerified 속성이 true 로 변경되기 위해서는 sendEmailVerification 을 사용해야한다! 회원가입 후 최초로그인 시에는 sendEmailVerifica.. 공감수 0 댓글수 1 2022. 7. 21.
Next.js + TypeScript ) 스크롤 내릴 시에 특정 컴포넌트 숨기기 스크롤시 상단 메뉴바 숨기기 작동화면 Code NavBar.tsx import { useScrollDirection } from "./useScrollDirection"; import styled from "styled-components"; const Header = styled.div` position: sticky; height: 3rem; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 500ms; `; const HeaderDown = styled.div` top: -3rem; `; const NavBar = () => { const scrollDirecti.. 공감수 0 댓글수 0 2022. 7. 15.
Next.js ) Input 입력값 태그로 변환하기 (TypeScript) 태그 등록 Input 만들기 작동화면 Code export default function TagInput() { const [input, setInput] = useState(""); const [tags, setTags] = useState([]); const [isKeyReleased, setIsKeyReleased] = useState(false); // input 입력값 'input' state 에 등록 const onChange = (e: React.ChangeEvent) => { const { value } = e.target; setInput(value); }; // 태그 해제하기 const deleteTag = (index: number) => { setTags((prevSt.. 공감수 0 댓글수 0 2022. 7. 15.
Next.js + TypeScript ) event 의 Type은 어떻게 지정해야할까? Next.js (React) + TypeScript : Event Type 지정하기 Input Event Input 태그에는 onChange, onKeyUp, onKeyDown 등의 이벤트가 있습니다. 이 이벤트를 통해 함수를 실행할 때에는 onChange const onChange = (e: React.ChangeEvent) => { const { value } = e.target; setInput(value); }; onKeyDown, onKeyUp const onKeyDown = (e: React.KeyboardEvent) => { // ... } const onKeyUp = (e: React.KeyboardEvent) => { // ... } 위와 같이 이벤트의 타입을 지정해주면 됩니다. Sele.. 공감수 2 댓글수 0 2022. 7. 14.
https 적용 시 cors 에러 미니 프로젝트에 ssl 을 적용시키면서 cors 에러가 발생했다. 이유를 찾아보니 인증정보가 담긴 요청에서는 cors의 withCredentials 속성을 false 값으로 둘 수 없으며, origin 속성 또한 특정 값을 넣어주어야 했다. 이상 짧은 메모. 공감수 0 댓글수 0 2022. 6. 11.
React ) redux-saga 기반 api 호출 연습 redux-saga 를 활용해 News WebApp 상태관리 하기 기존에 React Hook 방식을 이용해 구현했던 HackerRank News Web App 을 redux-saga 를 이용해 다시 구현해보았습니다. 실행 화면 주요 코드 fetchNews API 를 호출해 newsList 를 불러오는 코드만 올렸습니다. - NewsList.js function NewsList() { const dispatch = useDispatch(); const newsList = useSelector((state) => state.newsList); useEffect(() => { dispatch(allAction.getNewsList()); }, []); - actions/newsActions.js export .. 공감수 1 댓글수 1 2022. 5. 11.
React ) Recoil 로 Axios 비동기 처리하기 React-News Web App 에 Recoil 적용하기 기존에 react hook 방식과 redux-saga 를 적용해 만든 HackerRank News Web App 을 Recoil 을 이용해 상태를 관리하는 방식으로 다시 제작해봤습니다. HackerRank News OpenAPI 를 활용했습니다. 실행 화면 Code Recoil 초기 설정 먼저 npm i recoil 을 통해 recoil 을 설치합니다. Recoil 은 Redux 와 비교하면 초기설정이랄 것도 없습니다. import { RecoilRoot } from "recoil"; function App() { return ( ... ); } 그냥 RecoillRoot 로 감싸주면 끝입니다. 너무 좋습니다. atom.js import { at.. 공감수 0 댓글수 0 2022. 5. 10.
React ) HackerNews WebApp 제작을 통한 React 학습 React 로 HackerRank News WebApp 만들기 전체코드 보러가기 1.hook 브랜치에서 확인하실 수 있습니다. 사용기술 react- v18 react-router-dom - v6 실행화면 학습내용 react-router-dom 사용 App.js import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; 태그를 사용하기 위해서는 위와 같이 태그로 감싸줘야합니다. path 에는 이동할 url 주소를 명시하고, element 에는 화면에 렌더링될 컴포넌트를 입력합니다. ToolBar.js import { Link } from "react-router-dom"; News Ask Jobs 클릭해서 해당 페이지로 넘어가고 싶.. 공감수 0 댓글수 0 2022. 5. 7.
React ) Class 형 보다 Hook(함수) 형을 권장하는 이유 React 공식 문서에서는 Class 보다 Hook 을 사용할 것을 권장하고 있습니다. 학습 동기부여를 위해(?) 왜 그런지 살펴보기로 했습니다. Hook 이 해결한 문제들 1. 컴포넌트 사이에서 상태 로직을 재사용하기가 어렵다. React 는 컴포넌트간에 재사용 가능한 로직을 연결하는 방법을 제공하지 않습니다. render props 나 고차 컴포넌트와 같은 패턴을 통해 이러한 문제를 해결할 수 있습니다. 하지만 이런 패턴의 사용은 컴포넌트의 재구성을 강요하며, 코드의 추적을 어렵게 합니다. Hook 을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있기 때문에 이를 이용한 독립적인 테스트와 재사용이 가능합니다. Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줍니다. 2... 공감수 0 댓글수 0 2022. 5. 6.
ES6 ) Class 클래스 클래스 ES6 이전의 자바스크립트에는 공식적으로 클래스가 없었습니다. 타입은 함수로 정의하고 그 함수 객체에 있는 프로토타입을 사용해 메서드를 정의했습니다. function Vacation(destination, length){ this.destination = destination; this.length = length; } Vacation.prototype.print = function(){ console.log(this.destination+" "+this.length+"일"); } var daegu = new Vacation("대구",5); daegu.print() // 대구 5일 객체지향 프로그래밍을 학습해온 개발자에겐 이런 방식이 생소합니다. ES6 부터는 클래스 선언이 추가되었습니다. 함수는.. 공감수 0 댓글수 0 2022. 4. 17.
VueJS 3 ) Chart.js + Ag-Grid-Vue3 연결(?)하기 chart.js + ag-grid-vue3 문제사항 위와 같이 같은 데이터를 나타내는 차트와 그리드가 있습니다. 우측의 그리드에서 데이터가 변경되었을 때 차트 또한 업데이트되도록 구현하고 싶었습니다. 사용한 json 데이터는 다음과 같습니다. [ { "name": "mark", "score": 100 }, { "name": "Nick", "score": 80 }, { "name": "Jack", "score": 60 }, { "name": "Mary", "score": 55 }, { "name": "John", "score": 90 } ] 해결 과정 순서 Props 로 동일한 data 공유하기 Grid 에서 변경된 데이터를 emit 을 이용해 App.vue 의 기존 데이터에 덮어쓰기 :key 속성 이용하.. 공감수 1 댓글수 0 2022. 3. 24.
VueJS 3 ) <script setup> 과 setup() 의 차이 script setup 과 setup() 이용의 차이 Composition API 를 기반으로 Vue 3 프로젝트를 진행하는 방법에는 아래의 두 가지 방식이 있었습니다. script setup setup() Vue 3 공식 가이드를 보면 export default 구문이 필요가 없어졌습니다. 또한 setup() 함수를 정의하는 부분도 필요가 없어졌습니다. 그러므로 return 문 또한 필요가 없습니다. import 한 컴포넌트를 정의하지 않고 바로 템플릿 태그에서 사용이 가능합니다. props 사용 상위 컴포넌트로부터 받은 props 를 사용하기 위해 defineProps 를 사용해야합니다. 방식 export default { props: { userInfo: { type: Object, }, }, };.. 공감수 8 댓글수 0 2022. 3. 21.
VueJS 3 ) Composition API 를 기반으로 한 NewsWebApp VueJS 3 ) HackerRank NewsWebApp 제작을 통한 Composition API 학습 전체코드는 아래 링크를 통해 Github 에서 확인하실 수 있습니다. Github 바로가기 실행화면 Vue 2 로 제작한 NewsWebApp 과 동일합니다. 학습 내용 Router - transition Vue 3 에서도 라우터 트랜지션을 활용할 수 있습니다. Vue 2 Vue2 에서는 위와 같이 transition 태그 안에 router-view 태그가 들어있는 형식이었습니다. 하지만 Vue3 부터는 v-slot 과 함께 아래와 같은 형식으로 쓰입니다. Vue 3 Router 속성 이용하기 User 페이지 구현을 위해 Route 의 params 속성을 이용해야 했습니다. Vue2 에서는 this.$r.. 공감수 0 댓글수 0 2022. 3. 21.
VueJS 3 ) setup() 함수의 2 가지 인자 props, context setup() 함수의 인자 setup 함수는 props, context 두 가지 인자를 가집니다. props setup 내부의 props 는 반응성이 있고, 새로운 props 가 전달되면 업데이트 됩니다. props 는 다음과 같이 사용할 수 있습니다. export default { props: { name: String, age : Number, }, setup(props){ console.log(props.name); } }props 는 반응성을 가지고 있지만 ES6의 구조분해할당을 사용하면 props 의 반응성이 사라지기 때문에 setup 함수의 toRefs 를 사용해 반응성을 유지해야합니다. import { toRefs } from 'vue' export default{ setup(.. 공감수 0 댓글수 0 2022. 3. 20.
VueJS 3 ) TodoApp 을 통한 OptionsAPI 와 Composition API 비교 Vue3 ) TodoApp 을 통한 OptionsAPI 와 Composition API 비교 같은 동작을 하는 TodoApp 을 각각 OptionsAPI 와 Composition API 를 이용해 제작했습니다. 전체 코드는 아래 링크를 통해 Github 에서 확인하실 수 있습니다. README 파일을 참고해 브랜치별로 원하는 코드를 볼 수 있습니다. Github 로 이동 실행화면 코드 비교 setup 사용 Options APi > Composition API > Options API 와 다르게 Composition API 에서는 setup() 함수 내부에 data 속성과 method, lifeCycle hook, watch 를 입력합니다. 그 다음 setup() 함수내에서 생성한 함수들을 return 해.. 공감수 3 댓글수 1 2022. 3. 20.
Vuejs ) TodoApp (Vue2에서 Vue3으로) TypeScript 를 적용해 Vue2, Vue3 만든 TodoApp 비교 Inflearn 강좌 "Vue.js+TypeScript 완벽가이드" (장기효) 를 참고하며 제작한 Vue2 버전의 TodoApp 을 Vue3 Options API 기반으로 다시 제작해보았습니다. 아래 링크를 통해 Github 로 접속한 뒤 README 파일의 브랜치 설명을 참고하셔서 Vue3 버전의 전체 코드를 확인하실 수 있습니다. Github 에서 확인하기 실행화면 코드 비교 TypeScript 사용 두 개의 프로젝트 모두 vue-cli 로 프로젝트를 생성하는 시점에 TypeScript를 적용해 생성했습니다. Vue 2 버전에서는 의 형태로 script 코드를 작성해야합니다. defineComponent 는 전달된 객체를 반환.. 공감수 1 댓글수 0 2022. 3. 20.
JavaScript ) 간단한 click Counter 만들어보기 click counter 버튼을 누르면 1씩 증가, 감소하는 카운터 실행화면 코드 0 매번 프레임워크를 활용한 학습 및 프로젝트를 진행하다보니 javascript 에 소홀했던 것 같습니다.. 아주 기초적인 부분부터 다시 복습해볼 계획입니다. 공감수 0 댓글수 0 2022. 3. 16.
JS ) 함수를 생성하는 방법 함수를 정의하는 방법 JavaScript 에서 함수를 정의하는 방법은 4가지가 있습니다. 함수 선언문 function add(x,y) { return x+y; } 함수 선언문은 함수 이름을 생략할 수 없습니다. 함수 표현식 var add = function(x,y){ return x+y; }; 함수 선언문 vs 함수 표현식 함수 선언문으로 정의한 함수는 함수 선언문이전에 호출이 가능합니다. 하지만 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출이 불가능합니다. 이는 함수 선언문과 함수 표현식으로 정의한 함수의 생성 시점이 다르기 때문입니다. 함수 선언문은 런타임 이전에 JS 엔진에 의해 먼저 실행됩니다. 즉, 함수 선언문으로 함수를 정의한 경우 런타임 이전에 함수 객체가 먼저 생성됩니다. 그리고 .. 공감수 1 댓글수 0 2022. 3. 13.
Chart.js ) Vue2 + Chart.js 해당 글은 vue2.^, chart.js 2.^ 버전을 바탕으로 합니다. Vue2 + Chart.js 실행화면 Chart.js 설치 npm install chart.js 를 통해 간단하게 설치할 수 있습니다. chart.js NPM 폴더 구조 plugins/ChartPlugin.js import Chart from 'chart.js' export default { install(Vue) { Vue.prototype.$_Chart = Chart; // xx.vue // this.$_Chart => 차트 접근 } } 여러 컴포넌트에서 chart library 를 import 해야 할 경우, 위처럼 임의의 js 파일에서 chart.js 를 import 한 뒤 사용할 컴포넌트에서 this.$_Ch.. 공감수 0 댓글수 0 2022. 3. 1.
JS ) Sort() 정렬에서 CompareFunction 의 필요성 Sort() 배열에서 자주 쓰이는 sort() 함수는 기본적으로 정렬 순서가 유니코드의 코드 포인트를 따르게 되어 있습니다. 한 자리 수의 숫자들로 이루어진 배열 정렬 var numbers = [2,3,5,1,4]; numbers.sort(); console.log(numbers); // [1,2,3,4,5] 문자로 이루어진 배열의 정렬 var characters = ["b", "e", "s", "d", "a"]; characters.sort(); for(let x of characters){ console.log(x); // ['a','b','d','e','s'] } 따라서 문자열로 이루어진 배열이나 한 자리 수의 숫자들로 이루어진.. 공감수 1 댓글수 0 2022. 2. 28.
node.js ) 비동기 패턴 해결 (3) - async/await 비동기 패턴 해결 - async/await 이전 글에서 Promise 패턴을 이용해 비동기 처리를 동기 처리처럼 처리하는 방법을 다뤘습니다. node.js ) 비동기 패턴 해결 (2) - Promise 비동기 패턴 해결 - Promise 이전 글에서 콜백형태로 비동기 처리하는 방법을 다뤘습니다. 하지만 콜백 형태를 이용해 비동기를 처리하면, 처리는 가능하지만 매우 비효율적으로 코드가 작성됩니 jongik.tistory.com 하지만 async/await 을 이용하면 더 보기 좋은 형태로 비동기를 처리할 수 있습니다. async/await 구조 async 와 await 는 세트로 사용합니다. test.txt async test 1 async test 2 const fs = require('fs'); con.. 공감수 0 댓글수 0 2022. 2. 5.
node.js ) 비동기 패턴 해결 (2) - Promise 비동기 패턴 해결 - Promise 이전 글에서 콜백형태로 비동기 처리하는 방법을 다뤘습니다. 2022.02.05 - [Study/Express(node.js)] - node.js ) 비동기 패턴 해결 (1) - 콜백함수 하지만 콜백 형태를 이용해 비동기를 처리하면, 처리는 가능하지만 매우 비효율적으로 코드가 작성됩니다. 코드가 화살표 형태로 되거나 함수를 계속 쪼개서 타고 들어가는 형태가 되어 코드의 가독성이 많이 떨어지게 됩니다. 이를 해결하기 위해 사용되는 패턴이 Promise 패턴입니다. Promise 패턴을 이용하면 비동기 형태의 코드를 마치 순서대로 동작하는 것처럼 구현할 수 있습니다. Promise 객체 Promise 패턴을 사용하기 위해 Promise 객체를 사용합니다. then 을 통해 .. 공감수 0 댓글수 0 2022. 2. 5.
node.js ) 비동기 패턴 해결 (1) - 콜백함수 콜백함수를 이용한 비동기 패턴 해결 가장 기본적인 방법으로 콜백함수를 이용해 비동기 패턴을 해결할 수 있습니다. test.txt async test 1 async test 2 index.js const fs = require('fs'); fs.readFile('./test.txt', (err, data) => { console.log(1) console.log(data.toString()); fs.readFile("./test.txt", (err, data) => { console.log(2); console.log(data.toString()); fs.readFile("./test.txt", (err, data) => { console.log(3); console.log(data.toString());.. 공감수 0 댓글수 0 2022. 2. 5.
node.js ) 비동기 (asynchronous) 패턴 비동기 (asynchronous) 패턴 비동기 방식이란? 메인 스레드가 존재하고 메인 스레드는 실제 코드를 실행합니다. 메인 스레드는 실행시간이 오래 걸린다고 판단하면 내부에 처리하는 다른 스레드로 해당 작업을 넘기게 됩니다. 하지만 메인 스레드에게 작업을 받은 스레드는 해당 작업이 끝나면 콜백함수를 메인 스레드에게 돌려줍니다. 메인 스레드는 전달받은 콜백함수를 실행하지만 이 콜백함수를 실행할 때는 이미 다른 코드가 처리된 이후입니다. 그리고 또 다른 작업을 스레드에게 전달하게 됩니다. 예시 : fs 를 이용해 파일을 읽고 결과를 출력하는 코드 index.js const fs = require('fs'); fs.readFile('./test.txt', (err, data) => { console.log(.. 공감수 0 댓글수 0 2022. 2. 5.
express ) express-generator 프로젝트 생성하기 express-generator 매번 서버를 만들 때마다 라우터, 모델, 뷰, 미들웨어, 에러 미들웨어 등을 만드는 일은 매우 번거롭습니다. 이처럼 반복적으로 수행되는 일은 express-generator 를 이용해 한 번에 만들 수 있습니다. express-generator 를 통해 생성된 프로젝트는 개인의 스타일에 맞춰 수정하는 것도 가능합니다. express-generator 프로젝트 생성 npm 을 이용해 설치가 가능합니다. $ npm install -g express-generator express-generator 가 생성되면 express 명령어를 통해 프로젝트를 생성할 수 있습니다. express [프로젝트명] 위처럼 express 프로젝트가 생성되면 의존성 모듈을 설치하는 방법과 앱을 실.. 공감수 0 댓글수 0 2022. 2. 5.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.