게시물을 보다보면 문구에 포함된 링크의 미리보기를 제공해주는 경우를 본적이 있다. 데이터를 불러오기 위해서는 URL에 OGTag가 있어야한다.어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요
2022년이 끝나고 새해가 시작하면서 회사에서 2022년 데이터를 분석한 랜드스케이프 개발 요청이 들어왔다. 2021년 7월에 입사해 1년 6개월이 지난 시점에서 팀장님께서 혼자 개발을 진행해보라고 하셨다. 많이 배우고 있지만 스스로 개발했다라고 말할 포트폴리오가 부족
Yalco님의 강의를 기반으로 실습을 진행했습니다.models/index.js먼저 mongoDB에 가입하여 자신의 클러스터를 만들고 데이터베이스를 만든다. index.js만약 db가 잘 연결되었다면 MongoDB Connected 라는 메시지가 terminal에 뜰것이
사용자 세션을 관리하는 함수중에 사용자 정보를 가져오는 함수가 있다. 이 함수는로그인 성공정기간 세션확인 후 있을때 실행된다.그런데 중간에 세션이 사라질 때의 재로그인 처리를 한 부분이 있는데, 일정기간 세션을 확인하는 시점이 로그인시 잠시 세션이 없을 때에도 같이 적
mongo가 들어가는 docker를 구성한다. node.js에 mongoose를 통해 설정한 mongodb와 연결한다.스키마 작성이렇게 작성한 스키마는 modle.skin.findOne({ uid }, { \_id: 0 }); 이러한 형태로 mongo에 있는 데이터를
현재 회사에서 프로젝트간 텀이 있어 팀원끼리 함께 게더타운 같은 게임을 만들고 있다. 이번에 맡은 역할은 Node를 활용해 monogo 연결하여 was 작업을 맡아서 진행했다. 사용자, 케릭터, 맵 등 다양한 스키마를 설계하고 api를 만드는 경험을 하였다. 자세한 이
사내에서 사용하는 시스템으로 마크다운 형식으로 문서를 작성하고 공유하는 서비스를 만들었다. 스터디 내용도 정리하고 개발관련 지식도 공유할수 있는 서비스이다.기존에 만들어진 마크다운은 <a/> 태그의 href 기능을 사용해 스크롤을 목차에 맞게 이동하는 기능만 들어
데이터 시각화를 하다보면 벤다이어그램이 쓰이는 경우가 생긴다. 그중 3개의 타겟을 가진 벤다이어그램을 그려보자.사진과 같은 3개의 원을 그리기 위해서는 역정삼각형을 그려야한다. 각 꼭지점을 중심으로 같은 크기의 원을 3개 그리면된다.밑변의 2점을 구하는건 쉽지만 꼭지점
react-hook-form 라이브러리를 접하게 되면서 장점 중 하나가 re-rendering이 적다는 것이었다. 이해하기 위해서는 controlled component, uncontrolled component 개념을 알게되었다. 입력을 받는 방법중 여러 입력을 다
핵심 단어를 시각화하는 기법이다. 예를 들면 많이 언급될수록 단어를 크게 표현해 한눈에 들어올 수 있게 하는 기법이다.주로 워드 클라우드는 라이브러리를 활용하여 쉽게 자신이 원하는 형태를 얻을 수 있다. reat-wordcloud가 대표적인 예시를 볼 수 있다. 라이브
서비스의 개인정보처리규정에 대한 내용을 나타내는 페이지개발을 진행하던 중. 유니코드를 사용해 동그라미숫자(①②③④)를 나타내야했다.::marker를 사용해 변경을 시도했지만 ::makrer는 크롬에서 잘 작동하지만 IE와 Safari를 지원하지 않는다는 문제점이 있었다
마운트업데이트마운트 해제세 가지를 거쳐 나타난다.lifecycle 표시componentDidMount() 는 컴포넌트가 마운트 된 직후 호출된다. 초기화 작업은 이 메서드에 이루어지며 된다.API요청을 통해 외부에서 데이터를 가져와야 한다면, 요청을 보내기에 적절한 위
회사에서 다음 프로젝트를 들어가기 전까지 여유시간이 생기면서 어떤걸 공부하지? 고민에 빠졌다. 회사의 서비스에는 차트가 많이 사용되는 만큼 빈 시간을 통해 '직접 SVG를 활용해서 차트를 구현하면 좋지 않을까' 생각하게 되었다. 여러 차트중 적은 데이터로 쉽게 나타낼
기본으로 제공하는 <button>, <input>, <select>, <a> 에는 foucus라는 기능이 존재한다. 일단적으로 focus 란 해당 요요소에 데이터를 입력할 준비가 되었다를 의미한다. blur는 포커스를 잃은 순간을 이야기하는데 요소
git 관리를 위해 gitbash나 sourcetree에 로그인 할때 인증에 대한 에러가 발생하기 시작했다. 처음에는 단순히 비밀번호나 사용자 이름이 틀려서 그런줄 알았다. 에러를 검색하고 살펴보면서 github에서 2021년 8월 13일부터 인증을 ID/PW 방식이
node.js와 redis를 사용해서 backend를 구성하였다. map에 hget을 활용하여 데이터를 조회하는 작업을 하던중 비동기로 인해 문제가 발생했다.'/:id path로 요청이 들어오면 id에 해당하는 유저의 문제번호를 확인하고 번호에 맞는 데이터를 보내줘야한
OJT 프로젝트에서 DB를 기존에 사용해봤던 MongoDB대신 Redis 사용을 권유받았다. 아무리 다양한 게시물을 읽어도 이해가 잘 되지 않아 블로그 글을 작성하면서 정리하기로 했다. Redis란? Redis 기본구조
HTML5는 데이터를 클라이언트에 저장할 수 있는 web storage를 제공한다. 이전에는 쿠키에 데이터를 저장해지만 쿠키의 단점을 극복할 개선점들이 담겨있다.key-value형태로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다.그리고 크게 local s
프로젝트를 진행하면서 페이지마다 배경화면 색깔을 다르게 적용하고 모달을 만들때 배경화면을 변경하였다. 그때 css에서 주로 사용한 방법은 width,heigth를 100%로 설정하는 방법을 사용하였다. 하지만 이러한 방법은 부모의 크기에 영향을 받는 문제점이 발생하였다