JavaScript & jQuery 썸네일형 리스트형 <javascript> 비동기 처리 (Promise, async, await) 자바스크립트에서 비동기 처리란 동기적 처리와 비교해서 얘기를 할 수 있겠는데 위 사진은 동기적처리에서의 작업연산 방식과 비동기적으로 처리 했을 때의 작업 연산 방식에 대해 나타내고 있는 사진이다. 동기적으로 작업을 처리하려 할 떄는 1번이 끝날 때 까지 2번은 대기 후 실행, 2번이 끝날 떄 까지 3번이 대기 후 실행식으로 이루어지게 된다. 하지만 비동기적으로 작업을 처리하게 되면 우리가 코드를 실행하면서 흐름이 끊기지 않게 된다. 1번실행이 안끝나도 2번,3번, 4번 작업이 이루어지게 된다. 위 사진으로 예를 들어 정리하면 동기적 처리 : 4명이 한팀인 계주 달리기 (바통주자가 와야지 다음주자가 뛰기 가능!!) 비동기적 처리 : 4명이서 100m 달리기 (요이 땅 하면 동시에 출발가능!!) 정도로 생각.. 더보기 <javascript>텍스트 에디터, 텍스트 편집기 만들기 지금 내가 사용하고 있는 이 블로그에 글을 작성 할 때도 보면은 텍스트 편집기를 쓰고 있다. 이런식으로 되어있는데 굵게, 이탈리체, 밑줄, 색깔 등등을 정해 줄 수가 있다. 현재 학원에서 진행중인 프로젝트에서 게시판 부분에 후기를 작성하는 부분을 맡아서 해보려 하는데 그냥 글만 적는건 밋밋할 것 같아서 편집기의 기능도 넣어주고 싶어서 열심히 구글링 해가면서 만들어 보았는데 한번 정리해 보겠다. 당신의 후기를 모아모아 *후기 입력란* 제목 : 글자 크기 10px 12px 16px 20px 30px 사진 업로드 등록 실제 우리 프로젝트에 사용되었는데 우선 포인트는 document.execCommand() 라는 함수와 contenteditable 이 두가지로 볼 수 있을것 같다. https://develope.. 더보기 <javascript>객체 (비구조화 할당, 함수) 객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해줍니다. const dogName = '멍멍이'; const dogAge = '7'; console.log(dogName); console.log(dogAge); 이런식으로 한 대상에 관해 여러가지 값들을 선언 해 줄때 한번에 선언을 해 줄수 있는데 중괄호로 감싼 뒤에 '키 값: 원하는 값' 형식으로 정의해주면 된다. const dog = { name : '멍멍이', age : '5', family : { parent : '2', child : '1', } } console.log(dog); 이런식으로 중괄호를 이용해서 객체를 선언해줄 수 있으면 객체 안에 또 다른 객체를 생성해 줄 수가 있겠다. 간단하게 함.. 더보기 <javascript>함수 !함수! 함수는 특정 코드를 하나의 명령어로 실행할 수 있게 해주는 기능 이라고 정리 할 수 있다. 그 기능이 물론 간단한 덧셈부터 복잡하게는 데이터베이스에서 값을 불로오고 불러온 값을 변수 혹은 배열에 담아주고 특정 블록에 붙여주는 기능을 담당 할 수도 있는것이다. 아주 기초적이고 너무도 많이 봐왔을 더하기 함수 랑 인사하기 함수를 보면서 정리해보겠다. function add(a,b){ // 요기부분의 (a,b) 저 부분이 parameter로 외부에서 값을 전달 받는 부분 return a+b; // return 은 함수가 실행되면 값을 넘겨주기 위해 사용 } let sum = add(1,2); console.log(sum); 위 코드가 간단하고도 쉬운 부분인데 개인적으로 정리해보자면 이 함수의 이름은 .. 더보기 <javascript>연산자 (대입,산술,논리,비교) 코드를 작성하다보면 가장 많이 쓰이는것이 연산자 라고도 볼 수 있겠다. 그만큼 많이 쓰이기에 정리 할 겸 한번 더 간단하게 연산자에 대해 정리하고 넘어가겠다. let a = 1; 위의 코드가 바로 '대입연산자'이다. 말 그대로 변수 a에 1이라는 값을 대입해준 것이다. 더 설명하기에는 이 한마디로 정의 할 수 있기 때문에 넘어가도록 하겠다. 다음은 산술연산자인데 '+','-','/','*' 등을 써서 값을 연산 할 때 써준다. 주의할 점 까지는 아니고 헷갈릴만한 부분을 정리해보면은 let a = 1; console.log(a++); console.log(a); console.log(++a); 이런 식의 값이 나오는 것을 알 수있는데 '연산되는 시점의 차이'로 반복문 같은 것에 쓸 때 본인이 필요한 것에 .. 더보기 <javascript,jquery>변수와 상수 (var,let,const) 자바스크립트에서 값을 선언할 떄는 크게 2가지 종류가 있다. 1. 변수 2. 상수 변수는 말그대로 값이 변할 수 있는 것을 말한다. let a = 1; console.log(a); a = 2; let b = 'devilcute'; console.log(a); 위의 코드처럼 let 이라는 키워드를 이용해서 변수를 설정해 줄 수 있고 첫번쨰 a값과 두번쨰 a의 값이 다른 것을 보면 값이 바뀐 것을 확인 할수 있다. 하지만 동일한 이름으로 선언해주지는 못하는데 let a = 1; let a = 3; 이런 식으로 해주게 되면 a라는 변수가 이미존재하기 때문에 에러가 난다. 변수가 변하는 값을 넣을 수 있는 것이면 상수는 "변하지 않는 값"이다. java를 조금 다뤄보신 분들은 상수라는 단어를 들으면 final .. 더보기 <javascript,jQuery> 무한 스크롤형 다니고 있는 학원에서 새로운 프로젝트를 하게 되었는데 갑자기 문득 페이스북처럼 무한스크롤형으로 페이지를 꾸며보고 싶었다. 그래서 오늘은 무한스크롤에 대해 간단히 정리해보겄당> 어머 스크롤이 바닥에 거의 닿거나 내가 원하는곳에 갔네~? 2-1 > 블록하나 추가하고싶당 ㅠㅠ (바로 함수호출! 나는 fetchlist 함수) 2-2 > 서버돌면서 호다닥 데이터를 담아온다 두번쨰 사진의 success : function(camps) 의 camps 3 > 받아온 데이터가지고 본인이 원하는대로 본인이 원하는 위치에다가 추가 !! 끝!!> 더보기 <javascript, jquery>hide(), show(), toggle() 사용법 제이쿼리는 자바스크립트 '라이브러리'로써 순수 자바스크립트 코드로 구현할수 있는걸 보다 간편하게 해주는 기능이 있다. 페이지에서 많이 쓰이는 목록 숨기기와 보이기를 다루어 보겠다. See the Pen jOWGayp by Sang Hoon Jeong (@DevilFront) on CodePen. 이런식으로 클래스이름으로 효과를 줄 수 있고 직접 그떄마다 스타일을 먹여서 효과를 줄 수도 있다. 이걸 간단하게 제이쿼리를 이용해서 해보겠다. See the Pen wvMPepP by Sang Hoon Jeong (@DevilFront) on CodePen. 괄호안의 400은 ms로 transition 효과를 0.4초간 주겠다는 것이고 이것으로 간단하게 목록숨기기와 나타내기를 구현할 수 있다. 더보기 이전 1 2 3 다음
