Lpla 개발 블로그

React

[React] ReactJS로 영화 웹 서비스 만들기 (1)

ReactJS로 영화 웹 서비스 만들기 (2) ReactJS로 영화 웹 서비스 만들기 (3) ReactJS로 영화 웹 서비스 만들기 (4) ReactJS로 영화 웹 서비스 만들기 (5) ReactJS로 영화 웹 서비스 만들기 (6) ReactJS로 영화 웹 서비스 만들기 (7) 강의 선택 작년부터 내년(2021년)엔 프론트엔드 공부를 시작하기로 다짐했고 기념비적인 첫 강의를 무엇으로 할 지 고민을 많이 했다. velopert의 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 nomad coder의 ReactJS로 영화 웹 서비스 만들기 zerocho의 웹 게임을 만들며 배우는 React 먼저 velopert님 강의는 목소리와 발음이 좋고 강의 내용도 입문자들이 듣기에 좋아 보였지만, 2018년..

HTML&CSS

[CSS] 공전하는 애니메이션 효과 (transform: rotate)

기본세팅 HTML 1 2 3 4 5 SCSS .outer { width: 20rem; height: 20rem; position: relative; border: 2px solid #426190; border-radius: 50%; margin: 25% auto; } .satellite_wrap { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .satellite_box { position: absolute; top: -25%; left: -25%; width: 150%; height: 150%; animation: forwardRotate 8s linear infinite; text-align: center; line-height:..

그누보드

그누보드 특정 페이지에서 코드 실행하는 방법

그누보드는 기본적으로 메인 페이지에서 팝업이 노출되도록 하는 구문을 사용하고 있다. 먼저 상단에 를 실행하여 _INDEX_ 라는 변수에 true를 변환한다. 그리고 아래 조건문에서 _INDEX_가 true 일 때, newwin.inc.php 즉 팝업레이어를 실행하고 있다. 즉 팝업레이어를 실행하고 싶지 않다면 혹은 이 코드를 삭제하면 된다. 이것을 이용하면 임의의 변수를 만들고 원하는 상황에 따라 코드를 실행하는 것이 가능하다. SUB_PAGE 라는 변수를 정의하고 원하는 php 파일을 불러오거나 자바스크립트를 실행할 수 있다. 하지만 이 방법도 필요한 페이지마다 위 코드를 일일이 추가 해야 하는 작업이 필요하다. 코드 유지보수 측면에서는 훨씬 편리하지만 처음에 귀찮은 작업인 것은 분명하다. 만약 HTM..

JavaScript/기초

[JavaScript] Class 클래스 (1)

기존 프로토타입 상속 문법 function Hello (name) { this.name = name; } Hello.prototype.sayHello = function () { console.log(this.name + "님 안녕하세요."); } const h1 = new Hello('lpla'); const h2 = new Hello('coffee'); h1.sayHello(); h2.sayHello(); // 결과 // lpla님 안녕하세요. // coffee님 안녕하세요. ES6 클래스 상속 문법 class Hello { constructor(name) { this.name = name; } sayHello() { console.log(this.name + "님 안녕하세요."); } } const..

그누보드

그누보드 게시판에 DatePicker 추가

이전 포스트 : [PHP] 날짜 계산 연습 (1) 그누보드 게시판에 DatePicker (날짜 선택기) 구현하기 예시로 사용한 게시판 스킨은 basic 이다. skin/board/basic/write_skin.php 상단에 datepicker를 불러온다.

PHP

[PHP] 날짜 계산 연습

날짜를 계산하여 서로 다른 HTML값을 출력하기 위한 php 구문 PHP CSS .con { padding: 50px; } .event_btn { width: 180px; margin: 10px auto; padding: 4px 0; border-radius: 3px; text-align: center; } .event_ongoing { color: #fff; background: #3498db; } .event_end { color: #fff; background: #9e9e9e; } 결과 출력 HTML 이벤트 종료 D-361 참고 사이트 : www.php.net/manual/en/function.date.php

그누보드

그누보드 최신글 날짜 커스텀(연도, 시간, 요일 표시)

1. 최신글 불러오기 그누보드에서 게시판과 연동하여 최신글을 불러오는 방법은 다음과 같다. 여기서 스킨 이름은 게시판의 스킨이 아니라 최신글 스킨을 뜻한다. 스킨 폴더의 경로는 skin/latest/ 이며 이 경로에 있는 폴더명을 지정하면 된다. 테이블 이름은 관리자 페이지에서 확인 가능하다. 2. 연도 표시 여기서 날짜에 연도까지 표시하기 위해서는 스킨 폴더 내부의 latest.skin.php 를 열고 아래 코드를 찾는다. 그리고 아래처럼 수정한다. 3. 시간 표시 연도와 날짜 그리고 시간까지 표시하고 싶다면 아래처럼 수정한다. 4. 요일 표시 사용자에 따라 요일까지 표시하고 싶을 수 있다. 영어로 표시되는 요일을 한글로 바꾸고 싶다면 함수를 정의해야 한다. 다행히 그누보드에서 이를 알고 진작에 한글 ..

그누보드

그누보드 게시글을 클릭하면 원하는 페이지로 이동하기

1. 용도 일반적으로 그누보드 게시글을 클릭하면 게시글 본문으로 이동한다. 하지만 유튜브나 인스타그램, 페이스북, 네이버 블로그 같은 페이지로 바로 이동하고 싶은 경우가 있다. 그누보드는 게시글 작성시 하단에 링크를 첨부할 수 있는데 이 링크로 이동하는 방법에 대해 알아보겠다. 2. 코드 수정 예시로 사용한 게시판은 gallery이다. 임시로 아래와 같은 이미지와 링크를 추가한 게시글 3개를 생성했다. skin/board/gallery/list_skin.php 를 연다. 109번째 줄을 보면 아래 코드가 보인다. (버전에 따라 다를 수 있다.)

그누보드

그누보드 게시글 목록에서 글 수정 버튼 만들기

1. 용도 그누보드 게시판은 게시글을 수정하기 위해서 해당 글을 클릭하여 본문에 들어간 다음 수정 버튼을 클릭해야 한다. 이런 번거로운 과정 없이 글 수정 버튼을 게시글 목록(리스트)에 노출시켜 보겠다. 2. 수정 버튼 생성 예시로 사용한 게시판 스킨은 basic이다. skin/board/basic/list.skin.php 를 연다. 127번째 줄을 보면 아래 코드가 보인다. (버전에 따라 달라질 수 있다.) 댓글 개 여기서 마지막에 다음 코드를 추가한다. 댓글 개

JavaScript/실전

[JavaScript] 무작위 숫자 5개를 뽑아 오름차순으로 정렬 2

지난 포스트 : [JavaScript] 무작위 숫자 5개를 뽑아 오름차순으로 정렬 1 지난 번에 무작위 숫자 5개를 뽑아 오름차순으로 정렬하는 방법에 대해 알아보았다. var 추출 = []; for (i = 1; i