artistjay의 등록된 링크

 artistjay로 등록된 티스토리 포스트 수는 62건입니다.

[Vue3.js] Vue3+nodejs+mariadb로 게시판 만들기(4) - VSCode 확장 프로그램 설치 및 기타 설정 [내부링크]

원래 이번 포스팅부터 서버 환경 구성을 진행하려고 했으나, 먼저 진행해야 할 것이 생각나서 하나 더 포스팅을 한다. 이번 포스팅에서 진행할 것은 아래 내용이므로, 필요 없는 사람은 다음 포스팅으로 넘어가도..

[Vue3.js] Vue3+nodejs+mariadb로 게시판 만들기(3) - vue-router 설정하기 [내부링크]

지난 포스팅까지 해서 뷰 개발환경을 세팅하고, 게시판 목록 컴포넌트와 게시글 작성 컴포넌트를 생성했다. 이번 포스팅에서는 index화면(초기화면)을 목록 화면으로 설정하고, '글쓰기' 버튼을 생성하여 게시글..

[Git] Github와 VSCode 연동(원격 레퍼지토리 생성, commit, push) [내부링크]

이번 포스팅에서는 github에 원격(remote) 저장소(repository)를 생성한 후 VSCode로 작성한 소스파일을 commit, push 하는 과정을 다뤄보도록 하겠다. 아직 Git을 설치하지 않았다면, 이전 포스팅을 참조해서 설..

[Vue3.js] Vue3+nodejs+mariadb로 게시판 만들기(2) - 뷰 개발환경 세팅(마무리) [내부링크]

지난 포스팅에서 진행하지 못했던 내용을 작업해보려고 한다. (하다가 오류 나서 시간이 없어서 급하게 종료..) 지난 포스팅과 동일한 환경에서 우선 아래 명령어를 실행하여 화면을 띄운다. npm run serve 나는 c..

[Vue3.js] Vue3+nodejs+mariadb로 게시판 만들기(1) - 뷰 개발환경 세팅 [내부링크]

이번 포스팅부터는 Vue를 사용하여 게시판 만들기 프로젝트를 진행하려고 한다. 왜 Vue인가? 개발자는 필요에 의해서 공부를 하는 것이라 생각한다.(지극히 개인적인 의견) 현재 내가 맡은 프로젝트가 Vue3 나름..

[프로그래머스/자바스크립트(JS)] 오픈채팅방 [내부링크]

문제 설명 전체 문제는 프로그래머스에 있습니다. 제한 사항 풀이 문제를 본 나의 생각 먼저, 닉네임을 변경하기 전 상태에서 입장, 퇴장 문자열 배열을 그대로 만든다. 이때, 닉네임은 변경 가능성이 있기 때문..

[React Hooks] 함수형 컴포넌트 useEffect 개념 및 사용방법 [내부링크]

이번 포스팅에서는 리액트 Hooks의 useEffect 사용 방법에 대해 알아본다. 우선 useEffect는 클래스형 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount 생명주기를 합친 개념으로 볼 수..

[내돈내산] 네고왕 비오비타 미니정제 요거구미 구매후기 [내부링크]

안녕하세요~ 오래전에 네고왕 할인으로 구매한 비오비타 제품들이 최근에 도착을 했습니다. 패밀리 파우더, 패밀리 미니정제, 요거구미 총 3종을 구매했는데 파우더는 아직도 안 왔어요!! 구매일 3월 11일... 언제..

[티스토리] 블로그 검색 최적화 방법(백링크, 구글서치콘솔, 네이버 서치어드바이저) [내부링크]

이번 포스팅에서는 나의 티스토리 블로그 검색 최적화 방법에 대해서 적어보려고 한다. 사실 나는 티스토리 블로그를 시작하면서부터 이것들을 적용했었다. 하지만 적용한다고 해서 무조건 노출되는 것이 아니라..

[프로그래머스/자바스크립트(JS)] 문자열 압축 [내부링크]

문제 설명 문제 원본은 프로그래머스에 있습니다. 제한 사항 풀이 우선 문제를 보고 바로 드는 생각은 다른 것보다 반복문을 몇 개를 써야 하는지 였다. 나의 접근 방법 문자열은 1개부터 전체 문자열/2개 까지..

[프로그래머스/자바스크립트(JS)] 실패율 [내부링크]

문제 설명 전체 문제는 프로그래머스에 있습니다. 제한 사항 풀이 우선 각 스테이지에 머무르고 있는 사용자 수를 Map으로 구현하고자 했다. 그리고 stageSet을 따로 만들어서 각 스테이지별 실패율을 구하려고..

[프로그래머스/자바스크립트(JS)] [카카오 인턴] 키패드 누르기 [내부링크]

문제 설명 전체 문제는 프로그래머스에 있습니다. 제한 사항 풀이 처음 문제를 본 나의 생각 1,4,7은 L로 고정, 3,6,9는 R로 고정 2,5,8,0일 경우가 문제인데.. 우선 키패드의 좌표 x, y를 저장해놨다가 현재..

[프로그래머스/자바스크립트(JS)] 숫자 문자열과 영단어 [내부링크]

문제 설명 전체 문제는 프로그래머스에 있습니다. 제한 사항 풀이 나의 소스코드 function solution(s) { var answer = s, regexMap = new Map(); regexMap.set("zero", 0); regexMap.set("one", 1); regexMap.s..

[프로그래머스/자바스크립트(JS)] 신규 아이디 추천 [내부링크]

문제 설명 문제 설명 전문은 프로그래머스에 있음. 제한 사항 풀이 이번 문제는 문제 속에 답이 있다고 생각했다. 문제 신규 유저가 입력한 아이디를 나타내는 new_id가 매개변수로 주어질 때, "네오"가 설계한..

[프로그래머스/자바스크립트(JS)] 로또의 최고 순위와 최저 순위 [내부링크]

문제 설명 제한 사항 풀이 처음 문제를 본 나의 생각 반복하는 수를 줄이기 위해 0이 아닌 값으로 배열을 재구성 일치하는 개수에 해당하는 순위를 갖고 있는 Map 생성 습관처럼 object로 만들었다가.. Map으로..

[javascript] 표준 내장 객체 Set, Map 정리 [내부링크]

이번 포스팅에서는 자바스크립트의 내장 객체인 Set과 Map에 대해서 정리를 하려고 한다. 프로그래머스에서 열심히 머리 쥐어짜 내서 코딩을 한 뒤 다른 사람의 풀이를 봤는데... 엄청나게 자괴감이 들었다. 내가..

[프로그래머스/자바스크립트(JS)] 신고 결과 받기 [내부링크]

문제 설명 제한 사항 풀이 처음 문제를 본 나의 생각을 정리해봤다. [유저명]: [신고당한 횟수] key, value를 가진 Object가 존재해야 할 것이다. 이때, 신고당한 횟수는 number값이다. [유저명]: [나를 신고한..

[React Hooks] useState를 사용하여 input, checkbox value 상태관리(전체선택/해제) [내부링크]

이번 포스팅에서는 리액트 Hooks의 useState를 사용하여 input과 checkbox의 value 상태를 관리하는 내용을 알아보겠다. 단일 input이나 checkbox상태 관리의 경우 이전에 포스팅한 내용과 크게 다른 점이 없기 때..

논현동 레스토랑 파스타 맛집 '더플레이트' [내부링크]

안녕하세요. 제이입니다. 오랜만에 방문한 논현동에서 점심을 뭘 먹을지 고민하다 발견한 이탈리아 음식점을 소개하려고 합니다. 더플레이트를 검색해서 갔지만 처음에 입구인지 몰랐어요.. 입구는 여기입니다...

당산역 분위기 좋은 고깃집 '고기주방' [내부링크]

안녕하세요. 제이입니다. 코로나의 여파로 끙끙 앓다가.. 드디어 포스팅을 하게 되었네요 ㅠㅠ 코로나 확진 전에 다녀온 고깃집 후기를 남겨보도록 하겠습니다. 당산역에 위치한 '고기주방'인데요! 원래는 파스타..

[React Hooks] 함수형 컴포넌트 useState 사용 방법 [내부링크]

이번 포스팅에서는 리액트 Hooks 중에 useState 함수 사용방법을 알아보겠다. 가장 먼저 알아야 할 부분은 왜? useState를 사용하여 상태 관리를 해야 하는지이다. 만약 아래와 같은 코드가 있다고 가정해보자. st..

[React] 클래스형 컴포넌트와 함수형 컴포넌트 차이 [내부링크]

리액트의 장점이라고 하면 단연 코드의 가독성과 재사용성 일 것이다. 리액트는 컴포넌트 단위로 화면을 구성하는데 이번 포스팅에서는 컴포넌트가 무엇인지 또는 리액트의 장단점을 논하지는 않겠다. 우선 컴포넌..

Error: Invalid hook call. Hooks can only be called inside of the body of a function component 에러 해결방법 [내부링크]

react-router-dom을 사용하여 페이지 이동 기능 구현 중에 문제가 발생했다. 포스팅 내용은 react-router-dom v6을 사용하였으며, v5와는 차이가 있습니다. 일반적인 화면 이동은 Link를 사용하여 아래와 같이 구..

Property '' does not exist on type 'JSX.IntrinsicElements' 에러 해결방법 [내부링크]

함수형 컴포넌트를 생성한 뒤 해당 컴포넌트를 import 해서 사용하려고 했더니 아래와 같은 에러가 발생하였다. Property '' does not exist on type 'JSX.IntrinsicElements' 소스코드 import myRouter from "./r..

[React] React Router(리액트 라우터) 사용해보기 [내부링크]

지난 포스팅까지 해서 완성했던 게시판을 조금 다듬어보려고 한다. VIEW는 전혀 신경 쓰지 않고 오로지 CRUD만 구현했으니.. 목록/상세/글 작성/글 수정 페이지를 구분해보려고 한다. 그러기 위해서 리액트에서 제..

[티스토리] 구글 애널리틱스 연동하는 방법 [내부링크]

이번 포스팅에서는 나의 티스토리 블로그를 구글 애널리틱스와 연동하는 방법을 공유하려고 한다. 구글 애널리틱스를 연결하면 좋은 이유는 더 자세하게 설명해주시는 분들이 많기 때문에 설명은 생략하고, 연동방..

네스프레소 에센자 미니 c30 한 달 사용후기&사용 방법 [내부링크]

안녕하세요. 제이입니다. 약 한 달 전 주말에 항상 커피와 디저트를 시켜먹는 습관 때문에 배달비나 아껴보자는 취지로 구매했던 네스프레소 커피머신에 대한 한 달 사용후기를 남겨보려고 합니다. + 기계 사용 방..

강서구 오마카세 스시 맛집 '나오키' 등촌 본점 [내부링크]

안녕하세요. 제이입니다. 지난주 토요일에 여자 친구 생일 기념으로 스시 오마카세 맛집에 다녀왔습니다. '나오키 등촌 본점' 평일은 저녁 6시 타임과 8시 타임으로 총 2타임 주말은 점심 12시, 저녁 5시 반, 7..

[신사동] 멕시코음식 타코 맛집 추천 '갓잇' [내부링크]

안녕하세요. Jay입니다. 다들 멕시코 음식 좋아하시나요 ~? 저는 멕시코 음식 중에 타코와 브리또를 굉장히 좋아합니다. 자주는 아니지만 가끔 타코가 먹고 싶을 때 방문하는 타코 맛집 추천하려고 합니다! (싼 편..

[VSCode] React + nodejs + mySQL로 게시판 만들기 7편 - 게시물 쓰기, 수정, 삭제(2) [내부링크]

지난 포스팅에서 멘붕이 와서 중단한 일을 이번 포스팅에서 이어서 진행하겠다. 먼저, 해야 할 일과 완료된 일을 다시 정리해보자. a) 작성 완료 버튼 event 추가 b) 제목과 내용을 DB에 insert/update 하는 서버..

[react.js] Error: Maximum update depth exceeded 오류 해결 방법 [내부링크]

리액트 게시판 만들기 진행 중 아래와 같은 에러가 발생하여 해결방법을 공유한다. Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpd..

[React] React+TypeScript IntrinsicAttributes & IntrinsicClassAttributes 에러 해결방법 [내부링크]

리액트에서 컴포넌트 간 데이터를 주고받는 로직을 구현하는 중 아래와 같은 에러가 발생하여 해결방법을 공유한다. Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<> & R..

[티스토리] 작성한 포스팅 카테고리 쉽게 옮기는 방법 [내부링크]

안녕하세요. Jay입니다. 블로그에 포스팅된 글이 하나둘씩 쌓이다 보면 카테고리를 변경할 일이 생깁니다. 당장 제가 그랬거든요. 카테고리를 좀 더 세분화할 수도 있고,, 단순 변심으로 마음에 들지 않을 수도..

[VSCode] React + nodejs + mySQL로 게시판 만들기 6편 - 게시물 쓰기, 수정, 삭제(1) [내부링크]

이번 포스팅에서는 게시글 쓰기, 상세, 수정, 삭제를 진행해보도록 하겠다. 아직 해야 할 일이 태산이지만.. 하나씩 천천히 해보자. 우선 화면을 직관적으로 보기 위해 목록 화면과 글 작성 화면을 합쳤다. 아마..

[티스토리] 블로그 성장기록 - 1개월이 지났다. [내부링크]

안녕하세요. Jay입니다. 이제 생성한 지 한 달밖에 되진 않았지만, 블로그 성장 기록을 꾸준히 남겨보려고 합니다. 내가 블로그를 키워나가면서 느꼈던 기분이나 행동들을 남기면 좋을 것 같아서요. 뭐든 그때만..

발산역 카페 추천 프레베리 디저트 카페 [내부링크]

안녕하세요. Jay입니다. 발산역에 생크림 케이크가 정말 맛있는 맛집이 있어서 추천하려고 합니다. 밥을 먹고 나니 달달한 디저트가 생각이 나서 발산역에 디저트 맛집을 찾아보니 이미 유명한 곳이더라고요! 또..

[VSCode] React + nodejs + mySQL로 게시판 만들기 5편 - 테이블 생성, 게시판 목록 조회 [내부링크]

이번 포스팅에서는 게시판에 필요한 테이블을 생성하고, 게시판 목록 조회하는 기능까지 구현해보겠다. 나는 전문적으로 테이블 설계를 해본 경험이 없기 때문에 테이블명, 칼럼명, 구조 등이 이상하게 보일 수 있..

[VSCode] React + nodejs + mySQL로 게시판 만들기 4편 - 서버 환경 구성 [내부링크]

이번 포스팅에서는 서버 프로젝트를 생성하고, 클라이언트 요청이 정상적으로 들어가는지부터 데이터베이스에 연동하는 것까지 진행하겠다. 나 같은 입문자를 기준으로 포스팅을 해야 하기 때문에 내용이 매우 길..

[React] axios cors 에러 해결방법 [내부링크]

React + node express + mysql을 사용하여 게시판 프로젝트 진행 중, CORS 에러가 발생하여 따로 내용 정리를 한다. CORS란? Cross Origin Resource Sharing의 약자로, 현재 웹페이지 도메인에서 다른 웹페이지 도..

[VSCode] React + nodejs + mySQL로 게시판 만들기 3편 - MySQL 설치 [내부링크]

이제 서버 환경을 만들어보자. 서버는 node express를 사용하고, db는 MySQL을 사용할 것이다. 먼저, MySQL을 설치하자. 나도 오랜만에 설치를 하는 거라 과정을 다 까먹어서.. 메모하면서 설치를 진행하겠다. 1...

[티스토리] 애드센스 수동 광고 쉽게 설정하는 방법 [내부링크]

애드센스에서 수동으로 광고 코드를 생성한 후 글쓰기에서 쉽게 적용하는 방법을 공유해보려고 합니다. 이미 많은 분들이 알고 있는 내용이고 더 잘하시는 분들이 소개도 많이 했겠지만! 그럼에도 불구하고 저처럼..

이니스프리 레티놀 시카 앰플 사용후기 [내부링크]

안녕하세요 ~ Jay입니다. 다들 꾸준히 사용하는 화장품 있으신가요? 저도 평소에 사용하는 에센스가 있는데 다 떨어져서 새로 구매하고, 추가로 다른 제품도 충동구매했어요. 구매하시는 분들께 조금이나마 도움을..

[VSCode] React + nodejs + mySQL로 게시판 만들기 1편 - 게시판 UI 만들기 [내부링크]

리액트 개발환경은 세팅했으니 이제 게시판 UI를 만들어보자. 게시판은 목록 조회, 글쓰기, 상세 조회, 수정하기, 삭제하기 기능만 만들고, 중간 상태 점검을 한 후에 추가 기능을 구현하겠다. 먼저, react-bootst..

[티스토리] 애드센스 광고 넣는 법, 자동광고 넣기 [내부링크]

블로그를 개설한 지 얼마 안 돼서 운 좋게 애드센스 승인이 되었다. 자세한 내용은 아래 포스팅 참고하세요. https://artistjay.tistory.com/17 승인 후 당당하게 내 게시물들을 보는데 광고가 하나도 안 뜬다..?..

[VSCode] React + nodejs + mySQL로 게시판 만들기 1편 - 개발환경 세팅하기 [내부링크]

요즘 채용사이트에서 보면, 프런트엔드 자격요건에 typescript, react, vue, angular, nodejs가 빠지는 일이 없다. 그런데 나는 회사에서 오래된 코드를 사용하고 있기 때문에 ES6도 제대로 못해본 것이 사실이다...

[티스토리] 구글 애드센스 승인완료 - 조건이 뭘까? [내부링크]

티스토리 블로그를 개설한 지 정확하게 20일째.. 구글 애드 고시에 합격했다. 구글 애드센스란? 아마 블로그를 운영하는 사람이라면 모르는 사람이 없겠지만, 쉽게 얘기하면 '광고주'가 '구글'에게 자신의 브랜드..

[TypeScript] VSCode에서 타입스크립트 실행하기 [내부링크]

이번에는 REPL이 아닌 프로젝트를 생성하여 TypeScript를 적용해보려고 한다. 이전 포스팅에서 열심히 무언가를 했던 작업 폴더를 과감히 삭제했다. (사실 뭐 한 것도 없지만.) 다시 새로운 작업 폴더를 만들었다...

[티스토리] 구글 서치 콘솔 등록하는 방법 [내부링크]

이번 포스팅에서는 내 티스토리 검색 최적화를 위한 구글 서치 콘솔 등록에 대해 알아보겠다. 구글 서치 콘솔이란? 구글 검색 콘솔(Google Search Console)은 구글의 전 구글 웹마스터들이 개발한 웹 서비스로서,..

[TypeScript] 타입스크립트 시작하기 [내부링크]

node.js 런타임 환경에서 TypeScript를 사용해 REPL(Read Eval Print Loop, 한 줄씩 명령어를 입력해서 실행하는 환경) 하기 위해 먼저 ts-node 패키지를 설치하겠다. 혹시 이 글을 읽으면서 같이 공부를 시작하려..

[VSCode] vscode에서 node.js 에러 해결방법 [내부링크]

VSCode에서 npm 명령어 입력 시 아래와 같은 오류가 발생했다. 해결방법은 파일 > 기본 설정 > 설정 window profile 검색 null > Command Prompt로 변경 후 vscode 재시작 정상적으로 되는 것을 확인할 수 있다.

[TypeScript] 타입스크립트 개념 및 개발환경 구성 [내부링크]

채용사이트에서 프런트엔드 개발자의 자격요건 혹은 우대사항을 보면 TypeScript가 빠지는 일이 없다. 이런 사실에 굉장히 자괴감을 느꼈지만,, 도대체 왜? 무엇 때문에 TypeScript가 필수적이고, 알면 무엇이 좋..

[VSCode] vscode live server 사용방법 [내부링크]

이번 포스팅에서는 vscode에서 live server를 사용하는 방법을 정리해보려고 한다. 일반적으로 우리가 웹페이지의 코드를 수정하고, 수정한 내용을 확인하기 위해서는 아파치 같은 웹서버를 띄우거나 웹 프로젝트..

[VSCode] vscode 자주 사용하는 단축키 모음 [내부링크]

개발 또는 문서작업을 하면서 편집기를 사용할 때, 편리하게 작업하기 위해서 가장 먼저 알아야 할 것은 단축키일 것이다. 나는 개발할 때 vscode를 사용하고 있기 때문에, 이번 포스팅에서는 vscode에서 자주 사..

[javascript] 배열(Array)관련 함수(forEach, map, filter) 정리 [내부링크]

이번 포스팅에서는 자바스크립트 배열 관련 함수 중 forEach, map, filter에 대해서 공부하고 이해한 내용을 정리하려고 한다. 세 가지 함수는 공통점이 있다. 1. 배열의 요소를 돌면서 매개변수로 받은 callback..

[Javascript] 배열(Array)관련 함수(push, pop, shift, unshift, splice, slice) 정리 [내부링크]

이번 포스팅에서는 자바스크립트 배열 데이터 추가/삭제 관련된 함수를 정리하려고 한다. 너무 간단한 내용이지만, 가끔 헷갈릴 때가 있다. 그리고 포스팅하면서 해당 함수들에 대해서 좀 더 자세히 공부하려는 목..

[Android] ADB를 이용한 무선 디버깅 사용방법(WiFi 디버깅) [내부링크]

평소에 PC와 휴대폰을 USB로 연결하여 디버깅하는 것이 불편하다는 생각을 많이 했었는데, 무선으로도 디버깅을 할 수 있다는 사실을 알게 되어 공유하려고 한다. [전제조건] 1. 우선 PC와 휴대폰이 같은 네트워크..

[JS] 자바스크립트 프로세스와 쓰레드 차이 [내부링크]

Javascript는 싱글 스레드로 동작한다는 말을 많이 들었을 것이다. 이 말을 이해하기 위해서는 우선 프로세스와 스레드의 개념을 먼저 이해해야 한다. 프로세스는 메모리 상에서 실행 중인 작업을 뜻하며, 이러한..

[VSCode] SVN 간단 사용법 [내부링크]

Visual Studio Code에서 SVN을 사용하는 방법은 크게 어렵지 않다. VSCode와 SVN을 연동하는 방법은 아래 포스팅을 참고하면 된다. https://artistjay.tistory.com/4 [VSCode] Window10 VSCode에 svn 연동하기 이..

[VSCode] Window10 VSCode에 svn 연동하기 [내부링크]

이번 포스팅에서는 vscode에 svn을 연동하는 방법을 소개한다. 준비해야 할 것은 vscode와 tortoiseSVN이다. 아직 vscode를 설치하지 않았다면 아래 포스팅을 참고하길 바란다. https://artistjay.tistory.com/3 [..

[VSCode] Visual Studio Code 설치 및 한글설정 방법 [내부링크]

비주얼 스튜디오 코드(영어: Visual Studio Code) 또는 코드(code)]는 마이크로소프트가 마이크로소프트 윈도우, macOS, 리눅스용으로 개발한 소스 코드 편집기이다. 디버깅 지원과 Git 제어, 구문 강조..

[Window 10] JMeter 설치 및 사용법 정리 [내부링크]

프로젝트 진행 중 Apache JMeter를 접하게 되었다. 오늘은 Apache JMeter의 설치 방법과 간단하게 사용하는 방법을 정리해보고자 한다. Apache JMeter이란? Apache JMeter 애플리케이션은 기능 동작을 로드하고..

[Javascript] 기본 개념과 동작 원리 이해의 중요성 [내부링크]

프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 즉, 인간과 인간이 각자의 언어로 소통을 하듯이 인간이 특정 목적을 달성하기 위해 설계된 알고리즘(algorithm)을 프로그래밍 언어..