원래 이번 포스팅부터 서버 환경 구성을 진행하려고 했으나, 먼저 진행해야 할 것이 생각나서 하나 더 포스팅을 한다. 이번 포스팅에서 진행할 것은 아래 내용이므로, 필요 없는 사람은 다음 포스팅으로 넘어가도..
지난 포스팅까지 해서 뷰 개발환경을 세팅하고, 게시판 목록 컴포넌트와 게시글 작성 컴포넌트를 생성했다. 이번 포스팅에서는 index화면(초기화면)을 목록 화면으로 설정하고, '글쓰기' 버튼을 생성하여 게시글..
이번 포스팅에서는 github에 원격(remote) 저장소(repository)를 생성한 후 VSCode로 작성한 소스파일을 commit, push 하는 과정을 다뤄보도록 하겠다. 아직 Git을 설치하지 않았다면, 이전 포스팅을 참조해서 설..
지난 포스팅에서 진행하지 못했던 내용을 작업해보려고 한다. (하다가 오류 나서 시간이 없어서 급하게 종료..) 지난 포스팅과 동일한 환경에서 우선 아래 명령어를 실행하여 화면을 띄운다. npm run serve 나는 c..
이번 포스팅부터는 Vue를 사용하여 게시판 만들기 프로젝트를 진행하려고 한다. 왜 Vue인가? 개발자는 필요에 의해서 공부를 하는 것이라 생각한다.(지극히 개인적인 의견) 현재 내가 맡은 프로젝트가 Vue3 나름..
문제 설명 전체 문제는 프로그래머스에 있습니다. 제한 사항 풀이 문제를 본 나의 생각 먼저, 닉네임을 변경하기 전 상태에서 입장, 퇴장 문자열 배열을 그대로 만든다. 이때, 닉네임은 변경 가능성이 있기 때문..
이번 포스팅에서는 리액트 Hooks의 useEffect 사용 방법에 대해 알아본다. 우선 useEffect는 클래스형 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount 생명주기를 합친 개념으로 볼 수..
안녕하세요~ 오래전에 네고왕 할인으로 구매한 비오비타 제품들이 최근에 도착을 했습니다. 패밀리 파우더, 패밀리 미니정제, 요거구미 총 3종을 구매했는데 파우더는 아직도 안 왔어요!! 구매일 3월 11일... 언제..
이번 포스팅에서는 나의 티스토리 블로그 검색 최적화 방법에 대해서 적어보려고 한다. 사실 나는 티스토리 블로그를 시작하면서부터 이것들을 적용했었다. 하지만 적용한다고 해서 무조건 노출되는 것이 아니라..
문제 설명 문제 원본은 프로그래머스에 있습니다. 제한 사항 풀이 우선 문제를 보고 바로 드는 생각은 다른 것보다 반복문을 몇 개를 써야 하는지 였다. 나의 접근 방법 문자열은 1개부터 전체 문자열/2개 까지..
문제 설명 전체 문제는 프로그래머스에 있습니다. 제한 사항 풀이 우선 각 스테이지에 머무르고 있는 사용자 수를 Map으로 구현하고자 했다. 그리고 stageSet을 따로 만들어서 각 스테이지별 실패율을 구하려고..
문제 설명 전체 문제는 프로그래머스에 있습니다. 제한 사항 풀이 처음 문제를 본 나의 생각 1,4,7은 L로 고정, 3,6,9는 R로 고정 2,5,8,0일 경우가 문제인데.. 우선 키패드의 좌표 x, y를 저장해놨다가 현재..
문제 설명 전체 문제는 프로그래머스에 있습니다. 제한 사항 풀이 나의 소스코드 function solution(s) { var answer = s, regexMap = new Map(); regexMap.set("zero", 0); regexMap.set("one", 1); regexMap.s..
문제 설명 문제 설명 전문은 프로그래머스에 있음. 제한 사항 풀이 이번 문제는 문제 속에 답이 있다고 생각했다. 문제 신규 유저가 입력한 아이디를 나타내는 new_id가 매개변수로 주어질 때, "네오"가 설계한..
문제 설명 제한 사항 풀이 처음 문제를 본 나의 생각 반복하는 수를 줄이기 위해 0이 아닌 값으로 배열을 재구성 일치하는 개수에 해당하는 순위를 갖고 있는 Map 생성 습관처럼 object로 만들었다가.. Map으로..
이번 포스팅에서는 자바스크립트의 내장 객체인 Set과 Map에 대해서 정리를 하려고 한다. 프로그래머스에서 열심히 머리 쥐어짜 내서 코딩을 한 뒤 다른 사람의 풀이를 봤는데... 엄청나게 자괴감이 들었다. 내가..
문제 설명 제한 사항 풀이 처음 문제를 본 나의 생각을 정리해봤다. [유저명]: [신고당한 횟수] key, value를 가진 Object가 존재해야 할 것이다. 이때, 신고당한 횟수는 number값이다. [유저명]: [나를 신고한..
이번 포스팅에서는 리액트 Hooks의 useState를 사용하여 input과 checkbox의 value 상태를 관리하는 내용을 알아보겠다. 단일 input이나 checkbox상태 관리의 경우 이전에 포스팅한 내용과 크게 다른 점이 없기 때..
안녕하세요. 제이입니다. 오랜만에 방문한 논현동에서 점심을 뭘 먹을지 고민하다 발견한 이탈리아 음식점을 소개하려고 합니다. 더플레이트를 검색해서 갔지만 처음에 입구인지 몰랐어요.. 입구는 여기입니다...
안녕하세요. 제이입니다. 코로나의 여파로 끙끙 앓다가.. 드디어 포스팅을 하게 되었네요 ㅠㅠ 코로나 확진 전에 다녀온 고깃집 후기를 남겨보도록 하겠습니다. 당산역에 위치한 '고기주방'인데요! 원래는 파스타..
이번 포스팅에서는 리액트 Hooks 중에 useState 함수 사용방법을 알아보겠다. 가장 먼저 알아야 할 부분은 왜? useState를 사용하여 상태 관리를 해야 하는지이다. 만약 아래와 같은 코드가 있다고 가정해보자. st..
리액트의 장점이라고 하면 단연 코드의 가독성과 재사용성 일 것이다. 리액트는 컴포넌트 단위로 화면을 구성하는데 이번 포스팅에서는 컴포넌트가 무엇인지 또는 리액트의 장단점을 논하지는 않겠다. 우선 컴포넌..
react-router-dom을 사용하여 페이지 이동 기능 구현 중에 문제가 발생했다. 포스팅 내용은 react-router-dom v6을 사용하였으며, v5와는 차이가 있습니다. 일반적인 화면 이동은 Link를 사용하여 아래와 같이 구..
함수형 컴포넌트를 생성한 뒤 해당 컴포넌트를 import 해서 사용하려고 했더니 아래와 같은 에러가 발생하였다. Property '' does not exist on type 'JSX.IntrinsicElements' 소스코드 import myRouter from "./r..
지난 포스팅까지 해서 완성했던 게시판을 조금 다듬어보려고 한다. VIEW는 전혀 신경 쓰지 않고 오로지 CRUD만 구현했으니.. 목록/상세/글 작성/글 수정 페이지를 구분해보려고 한다. 그러기 위해서 리액트에서 제..
이번 포스팅에서는 나의 티스토리 블로그를 구글 애널리틱스와 연동하는 방법을 공유하려고 한다. 구글 애널리틱스를 연결하면 좋은 이유는 더 자세하게 설명해주시는 분들이 많기 때문에 설명은 생략하고, 연동방..
안녕하세요. 제이입니다. 약 한 달 전 주말에 항상 커피와 디저트를 시켜먹는 습관 때문에 배달비나 아껴보자는 취지로 구매했던 네스프레소 커피머신에 대한 한 달 사용후기를 남겨보려고 합니다. + 기계 사용 방..
안녕하세요. 제이입니다. 지난주 토요일에 여자 친구 생일 기념으로 스시 오마카세 맛집에 다녀왔습니다. '나오키 등촌 본점' 평일은 저녁 6시 타임과 8시 타임으로 총 2타임 주말은 점심 12시, 저녁 5시 반, 7..
안녕하세요. Jay입니다. 다들 멕시코 음식 좋아하시나요 ~? 저는 멕시코 음식 중에 타코와 브리또를 굉장히 좋아합니다. 자주는 아니지만 가끔 타코가 먹고 싶을 때 방문하는 타코 맛집 추천하려고 합니다! (싼 편..
지난 포스팅에서 멘붕이 와서 중단한 일을 이번 포스팅에서 이어서 진행하겠다. 먼저, 해야 할 일과 완료된 일을 다시 정리해보자. a) 작성 완료 버튼 event 추가 b) 제목과 내용을 DB에 insert/update 하는 서버..
리액트 게시판 만들기 진행 중 아래와 같은 에러가 발생하여 해결방법을 공유한다. Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpd..
리액트에서 컴포넌트 간 데이터를 주고받는 로직을 구현하는 중 아래와 같은 에러가 발생하여 해결방법을 공유한다. Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<> & R..
안녕하세요. Jay입니다. 블로그에 포스팅된 글이 하나둘씩 쌓이다 보면 카테고리를 변경할 일이 생깁니다. 당장 제가 그랬거든요. 카테고리를 좀 더 세분화할 수도 있고,, 단순 변심으로 마음에 들지 않을 수도..
이번 포스팅에서는 게시글 쓰기, 상세, 수정, 삭제를 진행해보도록 하겠다. 아직 해야 할 일이 태산이지만.. 하나씩 천천히 해보자. 우선 화면을 직관적으로 보기 위해 목록 화면과 글 작성 화면을 합쳤다. 아마..
안녕하세요. Jay입니다. 이제 생성한 지 한 달밖에 되진 않았지만, 블로그 성장 기록을 꾸준히 남겨보려고 합니다. 내가 블로그를 키워나가면서 느꼈던 기분이나 행동들을 남기면 좋을 것 같아서요. 뭐든 그때만..
안녕하세요. Jay입니다. 발산역에 생크림 케이크가 정말 맛있는 맛집이 있어서 추천하려고 합니다. 밥을 먹고 나니 달달한 디저트가 생각이 나서 발산역에 디저트 맛집을 찾아보니 이미 유명한 곳이더라고요! 또..
이번 포스팅에서는 게시판에 필요한 테이블을 생성하고, 게시판 목록 조회하는 기능까지 구현해보겠다. 나는 전문적으로 테이블 설계를 해본 경험이 없기 때문에 테이블명, 칼럼명, 구조 등이 이상하게 보일 수 있..
이번 포스팅에서는 서버 프로젝트를 생성하고, 클라이언트 요청이 정상적으로 들어가는지부터 데이터베이스에 연동하는 것까지 진행하겠다. 나 같은 입문자를 기준으로 포스팅을 해야 하기 때문에 내용이 매우 길..
React + node express + mysql을 사용하여 게시판 프로젝트 진행 중, CORS 에러가 발생하여 따로 내용 정리를 한다. CORS란? Cross Origin Resource Sharing의 약자로, 현재 웹페이지 도메인에서 다른 웹페이지 도..
이제 서버 환경을 만들어보자. 서버는 node express를 사용하고, db는 MySQL을 사용할 것이다. 먼저, MySQL을 설치하자. 나도 오랜만에 설치를 하는 거라 과정을 다 까먹어서.. 메모하면서 설치를 진행하겠다. 1...
애드센스에서 수동으로 광고 코드를 생성한 후 글쓰기에서 쉽게 적용하는 방법을 공유해보려고 합니다. 이미 많은 분들이 알고 있는 내용이고 더 잘하시는 분들이 소개도 많이 했겠지만! 그럼에도 불구하고 저처럼..
안녕하세요 ~ Jay입니다. 다들 꾸준히 사용하는 화장품 있으신가요? 저도 평소에 사용하는 에센스가 있는데 다 떨어져서 새로 구매하고, 추가로 다른 제품도 충동구매했어요. 구매하시는 분들께 조금이나마 도움을..
리액트 개발환경은 세팅했으니 이제 게시판 UI를 만들어보자. 게시판은 목록 조회, 글쓰기, 상세 조회, 수정하기, 삭제하기 기능만 만들고, 중간 상태 점검을 한 후에 추가 기능을 구현하겠다. 먼저, react-bootst..
블로그를 개설한 지 얼마 안 돼서 운 좋게 애드센스 승인이 되었다. 자세한 내용은 아래 포스팅 참고하세요. https://artistjay.tistory.com/17 승인 후 당당하게 내 게시물들을 보는데 광고가 하나도 안 뜬다..?..
요즘 채용사이트에서 보면, 프런트엔드 자격요건에 typescript, react, vue, angular, nodejs가 빠지는 일이 없다. 그런데 나는 회사에서 오래된 코드를 사용하고 있기 때문에 ES6도 제대로 못해본 것이 사실이다...
티스토리 블로그를 개설한 지 정확하게 20일째.. 구글 애드 고시에 합격했다. 구글 애드센스란? 아마 블로그를 운영하는 사람이라면 모르는 사람이 없겠지만, 쉽게 얘기하면 '광고주'가 '구글'에게 자신의 브랜드..
이번에는 REPL이 아닌 프로젝트를 생성하여 TypeScript를 적용해보려고 한다. 이전 포스팅에서 열심히 무언가를 했던 작업 폴더를 과감히 삭제했다. (사실 뭐 한 것도 없지만.) 다시 새로운 작업 폴더를 만들었다...
이번 포스팅에서는 내 티스토리 검색 최적화를 위한 구글 서치 콘솔 등록에 대해 알아보겠다. 구글 서치 콘솔이란? 구글 검색 콘솔(Google Search Console)은 구글의 전 구글 웹마스터들이 개발한 웹 서비스로서,..
node.js 런타임 환경에서 TypeScript를 사용해 REPL(Read Eval Print Loop, 한 줄씩 명령어를 입력해서 실행하는 환경) 하기 위해 먼저 ts-node 패키지를 설치하겠다. 혹시 이 글을 읽으면서 같이 공부를 시작하려..
VSCode에서 npm 명령어 입력 시 아래와 같은 오류가 발생했다. 해결방법은 파일 > 기본 설정 > 설정 window profile 검색 null > Command Prompt로 변경 후 vscode 재시작 정상적으로 되는 것을 확인할 수 있다.
채용사이트에서 프런트엔드 개발자의 자격요건 혹은 우대사항을 보면 TypeScript가 빠지는 일이 없다. 이런 사실에 굉장히 자괴감을 느꼈지만,, 도대체 왜? 무엇 때문에 TypeScript가 필수적이고, 알면 무엇이 좋..
이번 포스팅에서는 vscode에서 live server를 사용하는 방법을 정리해보려고 한다. 일반적으로 우리가 웹페이지의 코드를 수정하고, 수정한 내용을 확인하기 위해서는 아파치 같은 웹서버를 띄우거나 웹 프로젝트..
개발 또는 문서작업을 하면서 편집기를 사용할 때, 편리하게 작업하기 위해서 가장 먼저 알아야 할 것은 단축키일 것이다. 나는 개발할 때 vscode를 사용하고 있기 때문에, 이번 포스팅에서는 vscode에서 자주 사..
이번 포스팅에서는 자바스크립트 배열 관련 함수 중 forEach, map, filter에 대해서 공부하고 이해한 내용을 정리하려고 한다. 세 가지 함수는 공통점이 있다. 1. 배열의 요소를 돌면서 매개변수로 받은 callback..
이번 포스팅에서는 자바스크립트 배열 데이터 추가/삭제 관련된 함수를 정리하려고 한다. 너무 간단한 내용이지만, 가끔 헷갈릴 때가 있다. 그리고 포스팅하면서 해당 함수들에 대해서 좀 더 자세히 공부하려는 목..
평소에 PC와 휴대폰을 USB로 연결하여 디버깅하는 것이 불편하다는 생각을 많이 했었는데, 무선으로도 디버깅을 할 수 있다는 사실을 알게 되어 공유하려고 한다. [전제조건] 1. 우선 PC와 휴대폰이 같은 네트워크..
Javascript는 싱글 스레드로 동작한다는 말을 많이 들었을 것이다. 이 말을 이해하기 위해서는 우선 프로세스와 스레드의 개념을 먼저 이해해야 한다. 프로세스는 메모리 상에서 실행 중인 작업을 뜻하며, 이러한..
Visual Studio Code에서 SVN을 사용하는 방법은 크게 어렵지 않다. VSCode와 SVN을 연동하는 방법은 아래 포스팅을 참고하면 된다. https://artistjay.tistory.com/4 [VSCode] Window10 VSCode에 svn 연동하기 이..
이번 포스팅에서는 vscode에 svn을 연동하는 방법을 소개한다. 준비해야 할 것은 vscode와 tortoiseSVN이다. 아직 vscode를 설치하지 않았다면 아래 포스팅을 참고하길 바란다. https://artistjay.tistory.com/3 [..
비주얼 스튜디오 코드(영어: Visual Studio Code) 또는 코드(code)]는 마이크로소프트가 마이크로소프트 윈도우, macOS, 리눅스용으로 개발한 소스 코드 편집기이다. 디버깅 지원과 Git 제어, 구문 강조..
프로젝트 진행 중 Apache JMeter를 접하게 되었다. 오늘은 Apache JMeter의 설치 방법과 간단하게 사용하는 방법을 정리해보고자 한다. Apache JMeter이란? Apache JMeter 애플리케이션은 기능 동작을 로드하고..
프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 즉, 인간과 인간이 각자의 언어로 소통을 하듯이 인간이 특정 목적을 달성하기 위해 설계된 알고리즘(algorithm)을 프로그래밍 언어..