티스토리

언어와 생활

검색하기

블로그 홈

언어와 생활

cmncat.tistory.com/m

국어국문학과 출신 개발자의 변을 다룹니다.

구독자: 0

방명록 방문하기

728x90

반응형

주요 글 목록

[React] useEffect에 대한 고찰 평생 vue.js만 써오던 사람이라, react.js는 언제 봐도 어렵다. 간단하게 useEffect에 대해 설명하자면, 마운트될 때, 언마운트될 때, 값이 변경될 때 재실행되도록 돕는 함수라는 것이다. useEffect( ()=> { console.log(a, b, c) } )위와 같은 형태로 사용한다.이 예시에서는 a,b,c 값이 변경되거나, 마운트될 때, 언마운트될 때 useEffect 내의 콜백함수가 실행된다. useEffect(() => { console.log('count 상태가 변경될 때마다 실행됩니다.'); }, [count]);위와 같은 형태로 두번째 매개변수(배열)를 넣게 되면 매개변수값이 변경될 때에만 useEffect 내의 콜백함수가 실행된다. useEffect의 기본 동작은 모든 .. 공감수 0 댓글수 0 2024. 6. 5.
[자바스크립트] 비동기 프로그래밍, Callback, Promise, async/await 자바스크립트 비동기 프로그래밍에는 세가지 방법이 있다. 콜백(Callback) 함수, Promise(프로미스), async/await # 콜백(Callback) 함수는 다른 함수의 인자로 전달되어 나중에 실행되는 함수이다. 주로 비동기적인 작업에서 사용된다. 1. setTumeout() 함수console.log("시작");// 3초 후에 콜백 함수가 실행됩니다.setTimeout(function() { console.log("3초가 지났습니다.");}, 3000);console.log("끝");2. 이벤트 핸들러 클릭하세요 # Promise(프로미스)는 비동기 작업의 성공 또는 실패를 나타내는 객체이다. Promise 객체는 성공 시 resolve 콜백함수를, 실패 시 reject 콜백 함수를 가진.. 공감수 0 댓글수 0 2024. 6. 5.
[카카오 대리운전] 대리기사 도보 수입 현실 (인증 포함) 코로나 한창일 때 무너졌던 대리운전 업계가 다시 살아나고 있다. 나는 백수가 되자마자 생계가 급해 대리운전에 뛰어들었다. 이 글을 보고 있는 분들이라면 아마, 실직하셨거나 당장 생계가 막막한 분들, 그리고 부업으로 대리운전을 생각하고 있는 분들일 것이다. 이십대 중반인 19년에도 취업 이전에 용돈벌이로 대리운전을 했던 경험과 현재 무직 상태에서 전업으로 대리운전을 하고 있는 경험을 토대로 이야기하겠다.다른 블로그 글들을 보니 현실적이지 않은 부분이 있어 짚고 넘어가려 한다. 대리운전은 월화수목금토일 오전/오후 온종일 돈을 벌 수 있는 일이 아니다. 하루 얼마를 번다는 인증 글을 보아도 대략적으로 일주일 수익을 계산해본답시고 7을 곱해보는 것은 무의미한 것이다. 왜냐하면 대리운전은 요일, 공휴일 유무에 따.. 공감수 2 댓글수 0 2023. 7. 11.
[CSS] fixed로 navBar 상단 고정시키기 지난 포스팅에서도 언급했듯이, absolute, fixed는 전후에 있는 요소와 상호작용을 하지 않는다. 아래 예시를 보면 알 수 있듯이 navBar가 독립해버린다. HTML 삽입 미리보기할 수 없는 소스 그래서 다음과 같이 width를 부모 요소와 맞춰줘야 한다. HTML 삽입 미리보기할 수 없는 소스 공감수 0 댓글수 0 2023. 7. 10.
[Firebase 호스팅] 시키는대로만 하면 된다. npm install -g firebase-tools 위 명령어를 입력하면 무엇인가 설치가 된다. firebase login 파이어베이스 로그인을 한다. firebase init 프로젝트를 초기화 한다. npm run build 프로젝트 파일을 빌드한다. 아마 vue나 react를 사용한다면 dist 폴더에 빌드파일이 생성될텐데 그 파일들을 복사해서 public 폴더에 덮어 씌운다. 꼭 덮어씌워줘야 한다. 안 그럼 이런 화면이 뜨고 절망에 빠질 것이다. 아무튼 잘 따라왔다면 firebase deploy 그리고 나서 요렇게 명령어만 치면 url을 뱉어낼 것이다. 공감수 0 댓글수 0 2023. 7. 7.
[Firebase 호스팅] Welcome만 뜰 때 호스팅 시도해보려고 npm run build까지 했는데 이렇게 뜨는 사람 있을 거임 그럴 때에는 dist로 저장된 빌드 파일들을 public으로 옮긴 다음 firebase deploy 다시 실행하면 됨. 공감수 0 댓글수 0 2023. 7. 7.
[230706] 돈이 전부는 아니다 낮에는 가족을 돌보며 공부를 하고 밤에는 대리운전으로 돈을 벌고 있다. 누군가는 물어본다. 급하면 어디 편의점 아르바이트라도 구해서 하는 게 어떻냐고. 그렇게 지낼 수도 있다. 집안에서 어떤 일이 벌어질 지 모르는 상황에 정기적으로 규칙적으로 일하는 것은 쉽지 않다. 아직도 해결해야 할 많은 일들이 남아 있다는 뜻이다. 밤이 참 짧다. 공감수 0 댓글수 0 2023. 7. 6.
[useRef] vue의 ref와는 다르다.. 아냐 비슷한가..? import {useRef} from 'react' const myRef = useRef(); 이런 식으로 작성할 경우 myRef.current 이 식을 사용하면 해당 myRef DOM에 접근 할 수 있다. 변경 가능한 값이면서 + 재렌더링 할 필요가 없는 data라면 useRef를 사용해도 된다. 그렇다면 의문이 들 것이다. 아니 그럼 그냥 일반 변수 선언해서 쓰는 거랑 다를 게 없지 않음? 다르다, 재렌더링이 되면 일반 변수는 초기화 된다. useRef를 활용하면 재렌더링 되어도 초기화되지 않는다. 공감수 0 댓글수 0 2023. 7. 3.
[useState] 리액트 탐험.. useState... useState로 설정한 data를 공유하려면 부모 컴포넌트로 부터 props로 받아와야 한다. 모든 Child 컴포넌트가 같은 count 값을 공유하길 원한다면, count 상태를 Child 컴포넌트가 아닌 Parent 컴포넌트에서 관리해야 한다. 그리고 이 count와 setCount를 Child 컴포넌트에 props로 전달한다. function Parent() { const [count, setCount] = useState(0); return ; } function Child({ count, setCount }) { return ( You clicked {count} times setCount(count + 1)}> Click me ); } 같은 컴포넌트 내에서 button을 만들어 count +.. 공감수 0 댓글수 0 2023. 7. 3.
[map] JavaScript 유용한 함수 map 예를 들어 다음과 같은 배열 요소가 있다고 가정해 보자. let arr = [3, 4, 5, 6]; 이제 배열의 각 요소에 3을 곱해야 한다고 상상해 보자. 원초적인 판단으로는 다음과 같이 for 루프 사용을:할 수 있다. let arr = [3, 4, 5, 6]; for (let i = 0; i < arr.length; i++){ arr[i] = arr[i] * 3; } console.log(arr); // [9, 12, 15, 18] 그러나 사실 Array.map() 메소드를 사용한다면 이런 동일한 결과를 얻을 수 있다. let arr = [3, 4, 5, 6]; let modifiedArr = arr.map(function(element){ return element *3; }); console.l.. 공감수 0 댓글수 0 2023. 7. 3.
[Firebase 9] React 앱 세팅 파이어베이스 구버전과 9버전은 차이가 크다. 공식문서에서도 알 수 있듯이 구버전과 신버전은 문법부터 차이가 크다. 일단 npm으로 firebase를 설치한다. npm install firebase 리액트 src 폴더에 firebase.ts 파일을 추가한다. import { initializeApp } from "firebase/app"; import { getAnalytics } from "firebase/analytics"; import { getFirestore } from "firebase/firestore" const firebaseConfig = { ~~~~~~~~~~~~~~~ }; const firebase = initializeApp(firebaseConfig); const analytics.. 공감수 0 댓글수 0 2023. 6. 26.
[React-Router] 리액트 라우터 npm install react-router-dom 설치는 위 커맨드로 한다. import { BrowserRouter, Route, Routes } from 'react-router-dom' function App() { return ( ) } 위와 같은 형태로 변화하는 몸체를 만든다. BrowserRouter로 감싼 후 Routes 부분이 변화하는 부분인데 Route 태그에 path를 넣어 경로를 표현하고, element를 이용해 컴포넌트를 설정한다. import { Link } from 'react-router-dom' const Header = () => { return ( Animall Board Training Shop Trip Me ) } 라우트 링크는 위와 같이 Link를 이용해 설정한다... 공감수 0 댓글수 0 2023. 6. 26.
[React] 리액트 설치 방법 npm create-react-app app-name 가장 기본적인 설치 방법이다. 정말 기본적인 리액트 앱만 설치된다. vue는 vite를 이용해서 typescript라든지 pinia라든지 router까지 한 번에 설치할 수 있었는데...하면서 vite로 리액트 설치를 해봤다. npm create vite@latest 상태관리, 라우터는 몰라도 typescript까지는 같이 세팅이 가능하다. 공감수 0 댓글수 0 2023. 6. 25.
[230624] 상반기를 돌이켜보며 새해 목표는 '앞을 보고 뒤를 생각하면서 잘 버텨보자'였다. 못버티겠다. 1차로 멘탈이 붕괴됐던 이유가 가족 중 누군가에게 좋지 않은 일이 닥쳤다는 것이었다. 2차로 멘탈이 사라진 이유는 앞에서 언급한 일로 인해 또 다른 가족 구성원이 충격으로 건강에 문제가 생겼다는 것이었다. 내가 앞으로 거주할 주택 매매 문제까지 겹친 상태였다. 나도 내가 괜찮은 줄 알았다. 그런데 내 건강에도 문제가 생기기 시작했다. 원인 모를 복통이 계속 됐다. 모두 병들었는데 아무도 아프지 않았었다. 그런데 이제는 모두 아파한다. 일을 그만두게 됐다. 당분간은 가정에 집중하자. 너무 힘들어서, 잠이 오지 않아서, 썼던 글. 그래야겠다 -------------------------------230604 마치 아른거린다 문득 문득 .. 공감수 0 댓글수 0 2023. 6. 24.
[프로그래밍 패러다임] 객체지향, 함수형 프로그래밍 패러다임(programming paradigm)은 프로그래머에게 프로그래밍의 관점을 갖게 해주는 역할을 하는 개발 방법론이다. 예를 들어 객체지향 프로그래밍은 프로그래머들이 프로그램을 상호 작용하는 객체들의 집합으로 볼 수 있게 하는 반면에, 함수형 프로그래밍은 상태 값을 지니지 않는 함수 값들의 연속으로 생각할 수 있게 해준다. 여러 패러다임을 지원하는 언어로는 C++, 파이썬, 자바스크립트가 있으며 자바의 경우 jdk 1.8부터 함수형 프로그래밍 패러다임을 지원하기 위해 람다식, 생성자 레퍼런스, 메서드 레퍼런스를 도입했고 선언형 프로그래밍을 위해 스트림(stream) 같은 표준 API 등도 추가했다. 프로그래밍 패러다임은 크게 선언형, 명령형으로 나누며, 선언형은 함수형이라는 하위 집합을.. 공감수 0 댓글수 0 2023. 5. 17.
[디자인 패턴] MVC, MVVM, Singleton 등 디자인 패턴에 대해 디자인 패턴이란 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 ‘규약’ 형태로 만들어 놓은 것을 의미한다. - Singleton(싱글톤) - Factory Method(팩토리 패턴) - Strategy(전략 패턴) - Observer - MVC - MVP - MVVM 등의 패턴이 있다. 싱글톤 패턴 싱글톤 패턴(singleton pattern)은 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴이다. 하나의 클래스를 기반으로 여러 개의 개별적인 인스턴스를 만들 수 있지만, 그렇게 하지 않고 하나의 클래스를 기반으로 단 하나의 인스턴스를 만들어 이를 기반으로 로직을 만드는 데 쓰이며,보통 데이터베이스 연결 모듈에 많이 사용한다. 하나의 인스턴스를 만.. 공감수 0 댓글수 0 2023. 5. 11.
[Pixi.js] Vue3를 곁들인 PixiJS설치법 npm install pixi.js CDN 설치는 내가 별로 안좋아하니까 npm으로 설치함 import * as PIXI from 'pixi.js'; 사용할 파일에 import해서 쓰면 됨 예를 들어서 코드를 이렇게 짜면 이런식으로 화면이 나오게 된다. 오늘은 여기까지. 공감수 0 댓글수 0 2023. 4. 28.
[Routing] Vue-Router 없이 라우팅하기 화면이 좌/우로 트랜지션(?)되는 라우터를 만들어보자. App.vue 각 컴포넌트의 표시 여부를 관리하는 showComponent2, showComponent3, showComponent4 변수를 선언했다. 전환 효과를 위한 transitionName 변수를 선언했다. 초기 화면에는 Component1만 보이게 하고 Component1에서 이벤트를 발생시키면, Component2가 나타나고, Component1은 사라진다. Component2에서 이벤트를 발생시키면, Component3 또는 Component4가 나타나고, Component2는 사라진다. Component3에서 이벤트를 발생시키면, Component2가 다시 나타나고, Component3은 사라진다. Component4에서 이벤트를 발생.. 공감수 0 댓글수 0 2023. 4. 21.
[230420] 살아가기 '앞을 보지만 뒤를 생각한다' 대학교 선배의 상태메시지였다. 이십대 초반, 국문학도였던 나는 문장에 반했다. 고난이 있을 때마다 문장을 떠올리며 나 자신에게 위로를 건냈다. 나중에야 알았지만 어느 판타지 소설의 내용이었다. 2023년은 상급종합병원 행정직. 고연봉을 포기하고 내가 하고 싶은 일을 시작하게 된 해이다. 올해까지 장기렌트중인 승용차의 인수금을 마련해야한다. 전세계약이 만료되는 해이기도 하다. 그래서 새해 목표는 '앞을 보고 뒤를 생각하면서 잘 버텨보자'였다. 쉽지가 않다. 며칠 전, 일 중에 그날따라 새삼스럽게 전화가 왔다. 가족 중 누군가에게 큰 일이 생겼다는 내용이었다. 속이 쓰렸다. 내가 할 수 있는 건 아무 것도 없었다. 그럼에도 힘들어할 우리 가족들이 걱정돼서 그 다음날에는 본가 근.. 공감수 0 댓글수 0 2023. 4. 20.
[CSS] linear-gradient 예제와 함께 알아보자 CSS 의 linear-gradient() 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성한다. 함수의 결과 생성되는 이미지는 이미지 요소의 한 종류이므로 이미지가 적용되는 곳에 대해서만 이를 사용할 수 있다. 즉, background-color 또는 color 와 같은 속성에는 사용할 수 없다. 사용법 linear-gradient() 함수 사용법은 다음과 같다. 1 linear-gradient(방향_또는_각도, 색상_그리고_정지점1, 색상_그리고_정지점2, ... 색상_그리고_정지점n); 방향 또는 각도 미리 정의된 키워드로 표현한 그라디언트 진행 방향, 또는 진행 각도를 첫 번째 인자로 전달한다. 이는 선택사항이나, 지정하지 않을 경우 'to bottom'이 기본값으로 적용된.. 공감수 0 댓글수 0 2023. 4. 20.
[CSS] 애니메이션, 트랜지션, 트랜스폼의 차이 뜬금없지만 프론트엔드 개발자이지만 CSS를 잘 다루지 못하는 상태로 취업해서 밑바닥부터 구르고 있다. 통장 잔고를 보면 눈가가 뜨거워진다. 애니메이션, 트랜지션, 트랜스폼의 차이. 매번 단편적으로 보고 넘어가버리니 다시 보면 헷갈려서 정리해 보려고 한다. CSS의 Animation, Transition 및 Transform은 모두 웹 페이지에서 요소를 시각적으로 개선하기 위해 사용되는 CSS 속성이다. 애니메이션 (Animation) CSS3에서 새롭게 추가된 기능으로, 특정 요소에 대해 애니메이션 효과를 부여하는 방법이다. 요소에 복잡한 시각적 변화를 부여하는 데 사용되며, 일반적으로 사용자가 상호작용하지 않아도 자동으로 실행한다. @keyframes 규칙을 사용하여 정의하며, 시작 상태와 끝 상태를 .. 공감수 0 댓글수 0 2023. 4. 20.
[MD5] md5로 암호화해보자 MD5(Message-Digest algorithm 5)는 암호화 해시 함수이다. npm install md5 하면 쉽게 사용 가능하다. 설치 후 md5() 함수를 사용하면 된다. 괄호 안에 문자열을 입력하면 리턴값으로 암호화된 값을 내놓는다. 예를 들어 md5("Hello World")는 리턴값으로 b10a8db164e0754105b7a99be72e3fe5가 나온다. 그럼 의문이 들 수 있다. 그럼 md5 코드를 역으로 인코딩하면 원문이 나오는 거 아님? 이라고 생각할 수 있다. MD5는 해싱 알고리즘이므로 일방향 함수이다. 입력 값을 출력 값으로 변환할 수는 있지만, 출력 값을 입력 값으로 변환할 수는 없다. 이러한 특성 때문에 비밀번호와 같은 중요한 데이터를 저장할 때 사용하는 암호화 방식이 아니라.. 공감수 0 댓글수 0 2023. 4. 19.
[CSS] Position에 대해 알아보자 position은 다섯가지로 분류된다. 1. static 2. relative 3. absolute 4. fixed 5. stickty static position 속성을 지정하지 않았을 때 기본값으로 적용되는 값이다. 요소들은 문서의 일반적인 흐름에 따라 배치된다. top, bottom, left, right 속성을 사용할 수 없다. relative 요소가 '원래 위치에 있을 때'의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있다. top, bottom, left, right 속성을 사용할 수 있다. absolute 요소의 위치를 상위 요소 중 position 속성이 static이 아닌 가장 가까운 요소를 기준으로 이동시킨다. 만약 상위 요소 중 position 속성이 static이 아닌 요소가.. 공감수 0 댓글수 0 2023. 4. 17.
[CSS] 푸터 하단에 고정시키기 HTML 삽입 미리보기할 수 없는 소스 웹에서 흔히 나오는 방법으로 부모 요소에 position: relative;를 주고 자식 요소에 position: absolute;를 주면 absolute 특성상 부모를 무시하게 되므로 부모요소 내용이 많아질 경우에도 굳건히 자리를 지킨다. 해결방법 1 HTML 삽입 미리보기할 수 없는 소스 작은 화면에서 보면 하단에 잘 붙어있는 것처럼 보이지만, 함정이 있다. 해결방법 2 HTML 삽입 미리보기할 수 없는 소스 위에서 제시한 코드는 푸터가 스크롤을 맨 아래로 내렸을 때에 최하단에 존재하게 하는 코드이다. 모바일 화면을 만들려면 약간의 수정이 필요하다. 푸터를 화면의 하단에 고정시켜야 하기 때문이다. HTML 삽입 미리보기할 수 없는 소스 이런 식으로 wrapper.. 공감수 0 댓글수 0 2023. 4. 16.
[Capacitor] 플러그인 없이 카메라 사용하기 앱을 만들다보면 카메라 기능을 넣어야 하는 경우가 생긴다. Capacitor 공식문서를 보면 Camera 플러그인이 있다. 그런데 그 방법 없이도 안드로이드, IOS에서 카메라를 돌릴 수 있다는 사실. 이 코드 한 줄이면 된다. 신박하다. HTML코드 한 줄로 이게 된다. 물론 IOS는 Xcode에서 카메라 권한 설정을 해줘야 한다. Project Navigator에서 Info.plist 파일을 선택 Info.plist 파일에서 카메라 권한을 설정하려면 NSCameraUsageDescription 키를 찾는다. 없으면 우클릭 후 add row를 클릭한 다음 직접 입력한다. 키를 정한 후, Value 열에서 권한에 대한 설명을 입력한다/ 공감수 0 댓글수 0 2023. 4. 12.
[Vue3] img 경로 설정, 엑스박스, 사진이 안 나올 때 이런 식으로 나오시는 분들(미래의 저를 포함)을 위해 이번에 블로그에 정리해둡니다. 저렇게 나오는 분들 대부분 이렇게 지정하셨을 거예요. 요렇게 src 폴더를 기준으로 하는 @ 상대경로로 바꿔주세여. 공감수 0 댓글수 0 2023. 4. 10.
[IndexedDB] 생소한 그 이름 파헤쳐 보자 팀에서 IndexedDB를 한 번 사용해보자는 이야기가 나왔다. 내게는 신기술로 느껴지는 만큼 기록을 남겨두지 않으면 분명 나는 까먹고 말 것이다. 그래서 IndexedDB가 뭐냐면 늘 무심하게도 지나쳤던 이 항목이다. 기존 DB들과는 구조도 조금 다르고 쿼리문(?)도 익숙하지 않으니 그냥 예제부터 보고 갑시다. const dbName = "myDatabase"; const storeName = "Person"; const data = { "김창식": { age: "25", gender: "male" }, "윤옥분": { age: "30", gender: "female" } }; const request = indexedDB.open(dbName, 1); request.onupgradeneeded = f.. 공감수 0 댓글수 0 2023. 3. 31.
[Capacitor] Android / IOS 대상 버전 설정 Android 대상 버전을 지정하려면, "capacitor.config.json" 파일에서 "android" 항목 내에 "minVersion"과 "targetVersion" 속성 값을 추가하면 됩니다. 예를 들어, 다음과 같이 추가할 수 있습니다. "android": { "minVersion": "21", "targetVersion": "30" } iOS 대상 버전을 지정하려면, "capacitor.config.json" 파일에서 "ios" 항목 내에 "minVersion"과 "targetVersion" 속성 값을 추가하면 됩니다. 예를 들어, 다음과 같이 추가할 수 있습니다. "ios": { "minVersion": "10.0", "targetVersion": "14.5" } 이러한 방법으로 Capac.. 공감수 0 댓글수 0 2023. 3. 29.
[Capacitor] 하이브리드앱 만들기 Vue3 + Capacitor 조합으로 프로젝트를 하게 됐다. Vue3는 마스터는 아니지만 어느정도 작동방식은 알고 있으니 Capacitor에 대한 개괄적인 학습부터 진행해보려고 한다. capacitor.config.ts 파일 설정법도 공부해야한다. 터미널에 입력하여 vue 프로젝트를 생성한다. npm create vite@latest 웹 프로그램이 다 만들어지면 npm run build capacitor 라이브러리를 받는다. npm install @capacitor/core @capacitor/cli capacitor를 초기화한다. npx cap init android, ios 프로젝트를 만든다. npm i @capacitor/android @capacitor/ios npx cap add android.. 공감수 0 댓글수 0 2023. 3. 28.
[Vue3] Life-Cycle(라이프사이클) composition api를 사용하는 경우에는 setup hook에서 beforeCreate, created에 해당하는 과정이 한꺼번에 처리됩니다.. 이제까지 코드를 작성하면서 써온 setup() 메서드가 바로 setup hook입니다. 생명 주기 훅 등록하기 예를 들어 onMounted 훅은 컴포넌트가 초기 렌더링 및 DOM 노드 생성이 완료된 후 코드를 실행하는 데 사용할 수 있습니다: 인스턴스 생명 주기의 여러 단계에서 호출되는 다른 훅도 있으며, 가장 일반적으로 사용되는 것은 onMounted, onUpdated, onUnmounted가 있습니다. onMounted를 호출하면, Vue는 등록된 콜백 함수를 현재 활성 컴포넌트 인스턴스와 자동으로 연결합니다. 이를 위해서는 컴포넌트 설정 중에 이러.. 공감수 0 댓글수 0 2023. 3. 2.

728x90

반응형

문의안내

티스토리
로그인
고객센터

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