자바스크립트(JavaScript)에서 쿼리 파라미터(query parameter) 값을 알아내는 방법

URL의 쿼리 파라미터란 아래 빨간색 박스처럼 ? 뒤에 지정하는 파라미터를 뜻합니다. 여러 개를 연결할 때는 & 를 씁니다. 쿼리 스트링(query string)이라고도 합니다.   ES6 이상인 경우 const urlParams = new URLSearchParams(window.location.search); const uwasaKeyword = urlParams.get(‘uwasaKeyword’); URLSearchParams는 최신 스펙으로 인터넷 익스플로러에서는 지원하지 않습니다. (브라우저별 호환성 확인)   ES5 이하인 경우 호환성을 고려할 때는 이 방법을 더보기…

PHP: 날짜 시간 관련 함수(date, time, strtotime, mktime)

시간 포맷 사용 – date() 함수 두 번째 파라미터는 nullable이며, 특정 타임스탬프를 지정하면 해당 타임스탬프의 날짜를 반환하고, 아니라면 time() 현재 시각을 반환합니다. // set the default timezone to use. Available since PHP 5.1 date_default_timezone_set(‘UTC’); // Prints something like: Monday echo date(“l”); // Prints something like: Monday 8th of August 2005 더보기…

자바스크립트: input file에서 이미지 미리보기 기능 만들기 (한 개, 여러 개)

1) 이미지가 1개인 경우 미리보기 이미지가 표시될 이미지 태그를 생성하고, input file 태그를 생성하고, 자바스크립트의 FileReader()를 통해 이미지가 로딩되면 이미지 태그의 src 속성이 교체되도록 합니다. <div class=”image-container”> <img style=”width: 500px;” id=”preview-image” src=”https://dummyimage.com/500×500/ffffff/000000.png&text=preview+image”> <input style=”display: block;” type=”file” id=”input-image”> </div> function readImage(input) { // 인풋 태그에 파일이 있는 경우 if(input.files && input.files[0]) 더보기…

PHP, Mysql: 좋아요 기능 만들기

예전에 PHP로 만들었던 간단한 CRUD 게시판에 ‘좋아요 기능’을 추가해보도록 하겠습니다. ‘좋아요 기능’은 빈 하트(♡)를 누르면 하트가 채워지면서(♥) 숫자 카운트가 올라가는 기능입니다. PHP: 데이터베이스 접근 기초(SELECT, INSERT, UPDATE, DELETE) 여기서는 로그인 기능이 구현되지 않았으므로 아이피 주소(IP Address)를 기준으로 중복 좋아요를 방지하도록 하겠습니다. 만약 로그인이 구현되어 있다면 로그인한 유저를 기준으로 중복 좋아요를 더보기…

PHP, Mysql: SELECT JOIN 문 실행시 중복된 이름의 열(컬럼) 결과를 가져오는 방법

Q. 내 데이터베이스에 두 개의 테이블이 있습니다. 컬럼이 있는 NEWS 테이블: id – 뉴스 ID user – 작성자의 사용자 ID 컬럼이 있는 USERS 테이블 : id -사용자 ID 이것에 대한 SQL을 실행하려고 합니다. SELECT * FROM news JOIN users ON news.user = user.id PHP에서 결과를 얻을 때 컬럼 이름을 $row['컬럼이름']으로 가져오는 경우, 동일한 더보기…

PHP: mysql_fetch_array() 에서 while() 대신에 foreach()를 사용하는 방법

Q. foreach와 함께 작동하도록 다음 코드를 어떻게 변환하는지 알고 싶습니다. $query_select = “SELECT * FROM shouts ORDER BY id DESC LIMIT 8;”; $result_select = mysql_query($query_select) or die(mysql_error()); while($row = mysql_fetch_array($result_select)) { $ename = stripslashes($row[‘name’]); $eemail = stripcslashes($row[’email’]); $epost = stripslashes($row[‘post’]); $eid = $row[‘id’]; echo $eid . ‘<br/>’; echo $ename . 더보기…

macOS: 아마존 EC2에서 내 PC로 다운로드 (scp 이용)

macOS: 내 컴퓨터에서 아마존 EC2로 파일 업로드 (scp 사용) 내 PC의 로컬 터미널에서 scp 명령어를 실행합니다. scp -i [pem_file] [EC2에 있는 다운로드할 파일 경로와 이름] [user_id]@[ec2_public_ip]:[로컬 PC 경로] pem_file – 아마존 EC2 인스턴스를 만들 때 발급받은 pem키 파일의 경로를 입력합니다. user_id – 터미널에 접속하면 보이는 빨간색 부분 (또는 루트 디렉토리에서 pwd를 누르면 home/ 뒤에 나오는 더보기…

리액트(React): React Redux 요약 정리

이 글은 위 동영상 강의들을 요약 정리한 것입니다.   Redux와 React Redux는 같은 의미인가요? 아닙니다. Redux는 상태 관리 라이브러리로, 상태관리 패턴인 Flux의 일부를 변형하여 간단하게 상태 관리가 가능하도록 만들었습니다. 이것은 제이쿼리, 일반 자바스크립트, 다른 SPA 프레임워크 등 다양한 환경에서 사용가능하도록 제작되었으며 리액트 전용으로 만들어진 것은 아닙니다. Redux의 상태관리 기법을 리액트 더보기…

자바스크립트 예제: 2차원 정방형 배열(square array) 여러 번 회전

알고리즘에 대한 설명은 여기에 나와 있습니다. 여기에서는 공식만 설명합니다. 정방형 배열은 행과 열의 수가 같은 2차원 배열을 뜻합니다. 이러한 정방형 배열은 회전할 수 있는 경우는 4가지 밖에 없습니다. 오른쪽으로 90도 회전 (왼쪽으로 270도 회전) 오른쪽, 왼쪽으로 180도 회전 오른쪽으로 270도 회전 (왼쪽으로 90도 회전) 오른쪽, 왼쪽으로 360도 회전 -> 이것은 더보기…

자바스크립트 ES6+: 모듈(module) 기능을 이용하여 리액트의 hook 흉내내기 (reactify)

예전에 어느 프론트엔드 과제 테스트에서 아래와 같은 요구사항을 제시한 적이 있습니다.   요약하면 ‘순수 자바스크립트로 리액트와 유사한 구조의 웹 페이지를 만들어봐라‘ 이런 뜻인데요, 준비가 되어 있지 않은 상태에서 이런 요구사항을 접하면 많이 난감할 것이라고 생각됩니다. 문제에서 컴포넌트를 제작할 때 function, class 둘 중 하나를 택하라 했는데 여기서는 function을 선택해서 간단한 더보기…