positon 속성 CSS의 position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top, right, bottom, left 속성으로 요소를 배치할 최종 위치를 결정합니다. static 기본값으로 요소를 일반적인 흐름에 따라 배치합니다. 원래 있어야할 위치에서 이동 불가 top, right, bottom, lef...

로그인, 회원가입 기능 구현 (Server) DB 설계 이전에 설계한 member 테이블을 삭제하고 새로 user 테이블을 정의해보겠습니다. 이전 모델링 포스팅 user 테이블 설계 먼저 회원 정보 관련 요구사항을 추가 정리합니다. 회원 정보는 아이디, 비밀번호, 이름 등의 정보가 유지되어야합니다. validation ...

express 모듈 기반으로 RESTFul API 서버를 구현해보자. express + MVC 참고 글 : MVC 패턴 참고 글을 토대로 MVC 패턴을 활용해 구현해보겠습니다. 먼저 server 폴더를 만들고 터미널에 npm init -y을 실행하여 npm을 사용할 수 있는 초기 환경을 설정합니다. View 부분으로는 추후에 Rea...

발생 오류 Access to XMLHttpRequest at 'http://localhost:5000/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the request...

DB에 데이터를 추가해보자. 공공 데이터 활용 첫 번째 방법은 공공 데이터를 제공받을 수 있는 OPEN API를 활용해보는 것이였습니다. 영화진흥위원회의 오픈 API를 활용해보겠습니다. 사이트 링크 : 영화진흥위원화 첫번째 Get 요청 (일별 박스오피스 API) 날짜(targetDt)를 parameter로 해...

puppeteer 모듈에 대해 알아보자. puppeteer 모듈 구글에서 개발한 Node.js용 Chrome/Chrominm 제어 API로 DevTools 프로토콜을 이용하여 브라우저를 제어합니다. 마우스, 키보드, 쿠키 및 세션 스토리지 등 여러 자원들을 제어할 수 있습니다. 주로 웹 테스트, 웹 스크래핑, 웹 크롤링 등 웹 자동화 작업을...

웹 서비스를 구현해보자. 주제 및 목표 설정 주제는 평소에 좋아하는 영화로 정했습니다. 먼저 정보 제공을 해주는 웹 페이지를 구현해보고 이후에 여러 기능들을 추가해보겠습니다. 아이디어 도출 현재 상영 중인 영화에 대한 정보를 제공해주는 웹 사이트를 만들어보겠습니다. 초기 모델의 기능으로 로그인, 회원가입, 영화 정보 제공 3가지를 정...

e.preventDefault() VS e.stopPropagation() 두 메서드는 이벤트 리스너에서 이벤트 중단에 사용합니다. 비슷한 역할을 하는 두 메서드의 차이점에 대해 정리해보겠습니다. e.preventDefault() 현재 이벤트의 기본 동작을 중단하는 메서드입니다. 체크 박스의 체크 , 입력 칸에 값 채우기, a 태그의 UR...

Portal React Portal은 DOM 요소를 다른 위치의 DOM 노드로 렌더링할 수 있게 해주는 기능을 제공합니다. 독힙적인 스타일 적용 기본적으로 React는 부모 컴포넌트가 렌더링되면 DOM 트리 구조에 따라 자식 컴포넌트가 렌더링되므로 부모의 CSS 스타일에 영향을 받아 의도와 다르게 보여질 수 있습니다. React Port...

Modal 구현해보기 라이브러리 없이 구현해보기 라이브러리 없이 재사용가능한 Modal 컴포넌트를 구현해보겠습니다. e.stopPropagation() 메서드를 활용해 이벤트 전파 차단 children props 활용해 재사용성 확보 children props는 부모 컴포넌트 사이의 내용을 자동 전달 받습니다. // Mo...