profile
마음이 시키는 프론트엔드
post-thumbnail

[javascript] null 과 undefined 차이점

나는 똥멍청이야....

2022년 6월 9일
·
0개의 댓글
·
post-thumbnail

[javascript] LocalStorage

어제 갑자기 삘 받아서 백엔드 분들에게 사진 url과 게시글을 API로 통신하고 그걸 내 피드에 뿌려보는걸 구현하자고 했다.사실 백엔드분들은 아무리 DB 구조를 잘짜고 뭔가 다 완성을 했다고 해도 그걸....볼 수 없다면.... 속상하다고 하셨다. (feat. 정현님,

2022년 3월 25일
·
0개의 댓글
·
post-thumbnail

[javascript] 게시글 더보기

일정 너비 이상으로 넘어가게 되면 더보기로 말줄임 ...가 나오고 옆에 있는 더보기를 클릭하면 내용 전체를 보여주는 기능을 구현해보았다.곰곰히 생각을 해봤다. 필요한 준비물(css)이 뭐가 있는지...........먼저 이 기능을 위해 따로 사용한 css는 아래와 같다

2022년 3월 10일
·
0개의 댓글
·
post-thumbnail

[javascript] 댓글 작성 기능 (click,keyCode)

input에 글을 작성하면 게시라는 버튼과 키보드에 Enter를 누르면 내가 쓴 댓글이 댓글란에 추가가 되는 기능을 구현하려고 한다. 그냥 올라가기만 하면 되는거 아닌가? input에 value 값 받아오고 id는 임의로 지정해놓은 string을 받아와서 같이 뿌려주면

2022년 3월 9일
·
5개의 댓글
·
post-thumbnail

[javascript] Event 종류, 작성

웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것 로드 및 기타 이벤트 어떠한 이벤트가 발생했을 때 이를 처리하는 함수를 이벤트 리스너 또는 이벤트 핸들러라고 한다.인라인 방식은 이벤트를 HTML 요소

2022년 3월 6일
·
0개의 댓글
·
post-thumbnail

[javascript] DOM과 Event

DOM은 Document Object Model의 약자이다. 직역을 하자면 문서 객체 모델이다. 문서 객체란 <html>이나 <body> 같은 html 문서의 태그들이 자바스크립트가 이용할 수 있는 객체로 만들어진 것을 말한다.이러한 문서 객체는 DOM 구조

2022년 3월 6일
·
0개의 댓글
·
post-thumbnail

[Replit] js object / for ~ in

Replit 문제를 풀다가 막히는 문제나 구글링 해본 문제는 블로그에 글을 남겨서 잠깐 그 상황만 모면하고 가는게 아니라 기억의 휘발성을 조금이라도 잡도록 노력해보겠다. getExamResult 함수를 구현하세요. 내가 풀었던 방식 가면 갈수

2022년 3월 4일
·
0개의 댓글
·
post-thumbnail

[Replit] js - Object

객체에 조금이라도 자신이 있었다고 생각한 내 자신이 밉다.먼저 문제는 이렇게 주어졌다.나의 약점이자 제일 큰 문제가 바로 나왔다. 처음 문제를 풀때 어디에 뭘 넣어야할지 아직도 감이 잘 잡히지 않아서 구글링을 해봤다. 새로운 객체를 만들어서 리턴하면 된다.라는걸 파악한

2022년 3월 3일
·
0개의 댓글
·
post-thumbnail

[Replit] js 최소 ~ 최대값 랜덤 수 뽑기

랜덤한 숫자를 가져오는 기능은 프로그램 개발에서 매우 자주 사용되는 기능임따라서, javascript는 built-in 함수로 포함되어 있음 Math.random()구글에 js 최소 ~ 최대값 랜덤으로 뽑기를 치면 당연히 답은 나온다. 물론 생각보다 간결하고 길지 않고

2022년 3월 3일
·
0개의 댓글
·
post-thumbnail

[javascript] async & await

promise를 좀 더 간결하고 간편하게 동기적으로 실행되는 것처럼 보이게 만들어주는 기능이다.기존에 promise.then.then.then..... 이렇게 계속 체이닝을 하는 것 보다 api로 좀 더 간결하게 async await을 사용하면 동기식으로 코드를 순서대

2022년 2월 21일
·
0개의 댓글
·
post-thumbnail

[javascript] Promise

callback 지옥을 탈출하기엔 Promise만한게 없다고 많이 들었고 잘 사용하면 굉장히 편리하다고 들었다. 먼저 벨로퍼트님의 강의를 들어봤지만 아직은 잘 이해가 안간다. 어떤 상황에서 사용을 해야하는지도 감이 안잡힌다... 일단 강의 내용을 토대로 정리를 해봤다.

2022년 2월 17일
·
0개의 댓글
·
post-thumbnail

[javascript] 비동기 처리

작업을 동기적으로 처리한다면 작업히 끝날 때까지 기다리는 동안 중지 상태가 되어버려서 다른 작업을 할 수 없다. 다음 작업을 하려면 현재 작업이 끝난 후에 작업이 가능하다.하지만 이러한 작업들을 비동기 처리로 하게 되면 동시에 여러가지를 할 수 있고, 기다리는 과정에서

2022년 2월 16일
·
0개의 댓글
·
post-thumbnail

[javascript] rest

spread와 비슷하게 생긴 ...으로 시작한다. 하지만 기능은 조금 다르다.위 예제 코드를 보면 color의 purple은 정상적으로 출력이 됐고 ...cuteSlime(rest)을 찍어봤을땐 color를 제외한 나머지들이 나오게 된다. 코드 하단에 attribute

2022년 2월 14일
·
0개의 댓글
·
post-thumbnail

[javascript] spread

spread는 펼치다의 의미를 갖고 있다. 이 문법을 사용하면 객체 혹은 배열을 펼칠 수가 있다.이렇게 작성하기보단 기존에 만들었던 객체를 참고해서 새로운 객체를 만들고 싶다면 spread를 쓰면 된다.cuteSlime에서 기존에 slime이 갖고 있던 것들을 복사해서

2022년 2월 14일
·
0개의 댓글
·
post-thumbnail

[javascript] - 비구조화 할당 (구조 분해)

ES6부터 추가된 문법이며 구조 분해 할당(Destructuring Assignment) 라고도 하며, 배열이나 객체의 값을 새로운 변수에 쉽게 할당한다.비구조화 할당은 객체나 배열 값중에 일부만 꺼내서 사용하고 싶을 때 사용할 수 있다.위 코드에서 object 변수

2022년 2월 14일
·
0개의 댓글
·
post-thumbnail

[javascript] - 07 프로토타입과 클래스 - es6 클래스 예제

class로 예제를 만들어봤는데 지금까지 한걸 봐서는 좀 더 하면 이해가 될 것 같다. 기초의 중요성을 느껴본다.

2022년 2월 11일
·
0개의 댓글
·
post-thumbnail

[javascript] - 07 프로토타입과 클래스 - es6 class

html에 class 같은 느낌이었으면 좋겠다고 빌었던 내가 바보 같다.... 그만 알아보자...

2022년 2월 10일
·
0개의 댓글
·
post-thumbnail

[javascript] - 07 프로토타입과 클래스 - 객체 생성자 상속받기

예를 들어 Cat과 Dog라는 새로운 객체 생성자를 만든다고 가정해보자.그리고 해당 객체 생성자들에서 Animal의 기능을 재사용하려면 아래 코드처럼 할 수 있다.새로만든 Dog()과 Cat()에서 Animall.call을 해주고 있다. 첫번째 인자에는 this를 넣어

2022년 2월 9일
·
0개의 댓글
·
post-thumbnail

[javascript] - 07 프로토타입과 클래스 - 객체 생성자

객체 생성자란? 함수를 통해 새로운 객체를 만들고 그 안에 넣고 싶은 값, 또는 함수를 구현할 수 있게 해준다.객체 생성자를 사용 할 때는 보통 함수의 이름을 대문자로 시작하고, 새로운 객체를 만들때는 앞에 new를 붙혀줘야한다.하지만 위 코드를 보면 dog와 cat이

2022년 2월 9일
·
0개의 댓글
·
post-thumbnail

[javascript] 6. 배열 내장 함수 - test

Test이지만 거의 오픈북이나 다름이 없었던 자체 테스트...

2022년 2월 8일
·
0개의 댓글
·