코딩뜨개 블로그

썸네일 업로드 기능을 구현하던 중에 문제가 발생했다. (또...) 썸네일 컬럼은 상품 게시글 테이블 내에 있었고, 이미지 업로드시 이미지 정보가 들어가는 테이블은 따로 만들었다. 그리고 이미지 테이블은 id, 파일명, 파일경로 (파일경로+uuid+파일명) 컬럼으로 이루어져 있다. 어제 구현한 대로 이미지경로+썸네일컬럼 으로 썸네일을 가져오기 위해서는 이미지 테이블에 있는 uuid+파일명이 필요했다. 그래서 아래 쿼리를 사용하여 이미지를 가져오는 것에는 성공했지만, 문제가 있었다. 이미지가 로컬에 업로드되고 db에 저장되는 것보다 쿼리가 먼저 실행되어 파일명을 찾지 못하는 것이었다. 이 친구도 썸머노트 이미지 업로드처럼 글 등록 버튼을 누르기 전에 비동기로 파일을 먼저 전송하면 될 것 같았다. 파일업로드 ..

프로젝트를 진행하면서 생각보다 머리아프게 하는 부분이 자바스크립트의 변경사항이 제대로 반영되지 않는 문제였다. 이번 프로젝트에서는 게시글 CRUD부터 회원가입까지 AJAX를 사용해서 /api 경로로 넘겨주는 방식을 사용하는데, 새로 함수를 추가하거나 오타 등을 수정하거나 했는데 제대로 반영되지 않아 버튼을 눌러도 반응이 없거나 고치기 전 코드 내용으로 에러를 뱉곤 했다. 기존에 자바스크립트의 ajax를 불러올 때는 버튼의 id명을 통해 ajax를 실행시키는 방식이었다. 그래서 따로 js파일 경로를 가져와서 매핑할 필요는 없었다. 하지만 계속 변경사항이 제대로 반영되지 않아서 구글링을 했고... ajax가 들어있는 js파일의 경로를 입력해서 매핑한 후, 경로 뒤에 ?ver=버전명 을 사용해서 새롭게 캐시를..

생활코딩 자바스크립트 강의를 보고 정리한 포스팅이다. function Person(name){ this.name = name; } Person.prototype.name=null; Person.prototype.introduce = function(){ return 'My name is '+this.name; } function Programmer(name){ this.name = name; } Programmer.prototype = new Person(); var p1 = new Programmer('egoing'); document.write(p1.introduce()+" "); p1 = new Programmer('egoing')으로 생성자를 만들었다. 그리고 이 생성자의 prototype과 Pe..

생활코딩 자바스크립트 강의를 듣고 정리한 포스팅이다. var person = {} {} 로 빈 그릇(오브젝트, 객체)를 생성한다. var person = {} person.name = 'egoing'; person.introduce = function(){ return 'My name is '+this.name; } document.write(person.introduce()); 객체 내의 변수를 프로퍼티라고 한다.(name, introduce) 프로퍼티에 담긴 함수는 메소드라고 한다. (function(){}) 위 함수에서 this는 해당 함수가 속해있는 객체({})에 담겨있는 객체(name=egoing)이다. var person = { 'name' : 'egoing', 'introduce' : fun..

생활코딩 자바스크립트 강의를 보며 정리한 포스팅이다. JavaScript에서는 함수도 객체=값이다. function cal(func, num){ return func(num) } function increase(num){ return num+1 } function decrease(num){ return num-1 } alert(cal(increase, 1)); alert(cal(decrease, 1)); 함수는 값이 되기도 하기 때문에 다른 함수의 인자가 되기도 한다. function cal(mode){ var funcs = { 'plus' : function(left, right){return left + right}, 'minus' : function(left, right){return left - ..

인프런에서 생활코딩 강의를 보며 정리한 포스팅이다. 유효범위(Scope)는 변수의 수명을 의미한다. var vscope = 'global'; function fscope(){ alert(vscope); } fscope(); 결과는 당연히 global이다. var vscope = 'global'; function fscope(){ var vscope = 'local'; alert(vscope); } fscope(); (띄어쓰기가 이상한데 넘어가자 ㅠ) 만약 이렇게 되어 있다면 결과는 어떻게 나올까? 이 경우에는 local로 출력된다. fscope라는 함수 안에 vscope라는 변수가 선언되었기 때문에 함수 내에 정의된 vscope를 출력하는 것이다. 전역변수 - 함수 바깥에 있는 변수 지역변수 - 함수 안..

면접을 몇군데 다녀왔는데 필기 문제에 jQuery가 나오는 곳들이 몇군데 있어서 jQuery공부의 필요성을 느꼈다. jQuery는 예전 프로젝트에서 좋아요 기능을 구현할 때 사용한 코드를 봤던 것 외에는 접해본 적이 없어서 우선 생활코딩 자바스크립트 강의에 있는 jQuery 강의를 보고 정리했다. jQuery 엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는 자바스크립트 라이브러리 DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구이다. DOM(Document Object Model) Document : 문서Object: 객체Model: 데이터 문서 정보를 자바스크립트 객체의 형태로 만든 특정한 데이터 형태(트리구조) HTML문법..

생활코딩에서 자바스크립트 강의를 들으며 정리한 내용이다. 배열의 생성 var member = ['egoing', 'k8805', 'sorialgi'] 대괄호 안에 데이터를 넣고 콤마로 구분한다. alert(member[0]); 을 입력하면 'egoing'이 경고창으로 출력된다. function get_members(){ return ['egoing', 'k8805', 'sorialgi']; } members = get_members(); // members.length는 배열에 담긴 값의 숫자를 알려준다. for(i = 0; i < members.length; i++){ // members[i].toUpperCase()는 members[i]에 담긴 문자를 대문자로 변환해준다. document.write(..