profile
21c Carpenter
태그 목록
전체보기 (90)JavaScript(43)javascript30(30)React(11)CSS(6)WeCode(5)react.js(4)fixed(3)react native(3)git(3)리액트(3)project(2)video(2)absolute(2)linux(2)cloning(2)regex(2)background(2)styled component(2)array method(2)Spread Syntax(2)addEventListener(2)html(2)westagram(2)정규표현식(2)github(2)CallStack(2)regular expression(2)인증(1)mixin(1)cors(1)인가(1)increment operator(1)position(1)sticky(1)Root(1)immutablility(1)data-속성(1)promise(1)실습(1)sql(1)중앙정렬(1)splice 음수 인자(1)github 실무(1)terminal(1)불변성(1)Center(1)type change(1)clock(1)relative(1)Component Structure(1)Restful(1)Primitive Type(1)rebase(1)로딩화면(1)List(1)http(1)동적 라우팅(1)propagation(1)Cross-Origin Resource Sharing(1)무한스크롤(1)extending style(1)REST(1)코어자바스크립트(1)heap(1)movemove(1)object 순회하기(1)Location(1)Request(1)Response(1)once(1)전개구문(1)lifecycle(1)slider(1)document.documentElement(1)loading indicator(1)유사배열(1)styleWe(1)형변환(1)getBoundingClientRect(1)SpeechAPI(1)shiftKey(1)email multi choice(1)router(1)float(1)이미지경로(1)webcam(1)라이프사이클(1)null(1)cue(1)scrollLeft(1)img(1)match(1)Fetch API(1)async(1)class(1)Flex(1)&&(1)EventLoop(1)stringToNumber(1)textConent(1)authentification(1)nodeList(1)e.preventDefault()(1)login(1)git flow(1)Reference Type(1)bootcamp(1)Generic(1)클론프로젝트(1)classList(1)당근마켓(1)공식문서(1)REST API(1)speechRecognition(1)scroll(1)countdown(1)const(1)let(1)class101(1)text-shawdow(1)NODE_PATH(1)회원가입(1)key stretching(1)통신지연(1)bcrypt(1)두더지잡기(1)extend(1)auto scroll(1)key(1)instagram(1)독서후기(1)callback Hell(1)clickevent(1)local storage(1)authorization(1)개발자도구(1)복수선택(1)useRef(1)inline block(1)setInterval(1)history(1)event bubbling(1)격투 게임기 기술(1)styled components(1)dev tool(1)semantic(1)clone(1)DevTools(1)Context API(1)Expo(1)reduce(1)Single Thread(1)EventListener(1)innerText(1)key sequence(1)watchPosition(1)block(1)작성중(1)styleshare(1)inline(1)InnerHTML(1)strict mode(1)음성인식(1)array(1)extends(1)super(1)프로젝트(1)react typescript(1)spa(1)geolocation(1)숫자야구 게임(1)nosql(1)db(1)크롬 개발자도구(1)speech synthesis API(1)RDBMS(1)아날로그 시계(1)best practice(1)salting(1)리액트 구조설계(1)event delegation(1)HTMLCollection(1)Database(1)Map(1)Math.random(1)regexp(1)import not working(1)portfolio(1)Reactm(1)위코드(1)pageX(1)playbackRate(1)mobx(1)redux(1)절대경로(1)mockdata(1)audio(1)speech(1)capture(1)react router(1)scope(1)Pagenation(1)canvas(1)typescript(1)객체 불변성(1)flex panel(1)랜덤숫자뽑기(1)로그인(1)signup(1)Cheat Sheet(1)undefined(1)

[책 요약] 코어 자바스크립트

(1) primitive(원시형) : number, string, boolean, null, undefined ... (2) reference(참조형) : object, Array, Function, Date, RegExp...원시형은 값이 담긴 주소값을 바로 복제

2021년 4월 14일
·
0개의 댓글
post-thumbnail

특정 영역 이외의 클릭(event) 인식(Listen)

여기서 우상단의 프로파일 이미지를 클릭하면 아래처럼 메뉴박스가 보여지고,여기서 다시, 해당 우상단 프로파일 이미지 이외 영역을 클릭하면 메뉴박스가 사라지도록 하고자 함if(this == 우상단 프로파일 이미지 element)으로 클릭된 element와 그렇지 않은 el

2021년 1월 21일
·
0개의 댓글
post-thumbnail

<Javascript> Object를 Array처럼 순회하기

기본적으로 Array는 순서가 있는 데이터가 인덱스 순서에 따라 안에 정렬되어 있어, for (var i; i &lt; arrary.length ; i++) 식으로 순회하거나 .forEach, .map, .find, .reduce 등 유용한 기능을 활용가능하다.그

2021년 1월 14일
·
0개의 댓글
post-thumbnail

Javascript - ++num과 num++의 차이

위의 2번째 줄, num ++는 아래와 동일하다.num = num + 1증가 연산자는 반복문(for) 등에서 변수에 1만 더한 값을 재할당 경우 간소하게 쓰기 위해 자주 사용된다.&lt;1번 경우>&lt;2번 경우>위의 경우에는 ++가 변수 앞에 오느나, 뒤에 오느냐에

2021년 1월 14일
·
0개의 댓글
post-thumbnail

Javascript - 최소 ~ 최대값 사이의 랜덤 숫자 뽑기

랜덤한 숫자를 가져오는 기능은 프로그램 개발에서 매우 자주 사용되는 기능임따라서, javascript는 built-in 함수로 포함되어 있음(Math.random())구글 서치를 하면 그냥 아래와 같은 방식을 공식처럼 알려주고 있다.생각보다 길지 않고, 어렵지 않다.

2021년 1월 14일
·
0개의 댓글

값 없음- null vs undefined

'값이 없음'을 의미primitive typeundefined는 type이면서 값이지만, null의 type은 object임null은 명시적으로 '='를 통해 null로 할당

2021년 1월 8일
·
0개의 댓글
post-thumbnail

Javascript에서의 작동원리 - call stack 외

single thread = single call stack = 한 번에 한 가지 수행가능 = 동기적 수행함수의 호출을 기록하는 자료구조기본적으로 우리가 프로그램 안에서 위치한 곳오브젝트(객체)들은 힙 내부에 할당힙은 거의 구조화되지 않은 영역(unstructured)

2021년 1월 8일
·
0개의 댓글

Class - extends, super

: Class는 개별 Object를 instace하기 위한 하나의 틀(고정 형식) : 공통된 속성과 method의 효율적인 재사용을 위한 묶음:클래스 간 상속을 통해, 보다 간소하고 효율적으로 코드를 작성하기 위한 개념&lt;예시 코드>: expends 통해 상위 클래

2020년 12월 23일
·
0개의 댓글
post-thumbnail

30. Whack A Mole

두더지 잡기 게임랜덤 구멍에서 랜덤 시간동안 출현 후 사라짐. 나타나는 동안 클릭하면 잡은 두더지 수 화면에 표시두더지 나타나는 구멍, 시간의 랜덤 숫자를 저장해당 구멍에 대한 class 명 추가하고, setTimeout로 일정 시간 후에 class명을 제거하도록하여

2020년 12월 20일
·
0개의 댓글
post-thumbnail

29. Countdown Timer

잠시 자리 비움 시간을 알리기 위한 카운트다운 화면 구현구체적으로, 미리 정해진 시간 단위 버튼 or 직접 입력 시간(분)에 대한 카운트다운 화면 구현화면 상에는 카운트다운 숫자와 최종 돌아올 시간(카운트다운 종료시간)을 텍스트로 보여줌지정한 카운트다운 시간을 더한 미

2020년 12월 20일
·
0개의 댓글
post-thumbnail

28. Video Speed Controller

비디오의 playbacRate를 manual 하게 조절하기 위한 UI와 function 연습video.playbackRatee.pageYelement.offsetTopHTML input tag 속성으로 min, max등을 정해서 더 쉽게 구현할 수 있지만, input

2020년 12월 19일
·
0개의 댓글
post-thumbnail

27. Click and Drag

가로 슬라이드 UI에서 마우스를 클릭 후 드래그를 통해 슬라이딩 효과 구현 내용mousedown 이벤트 발생 시 시작점, 좌측 scroll 최초 값을 저장mousemove 이벤트 발생 시, 저장된 시작점으로부터 드래그된 거리를 위에서 저장된 좌측 scoll 최초 값에

2020년 12월 19일
·
0개의 댓글
post-thumbnail

26. Stripe Follow Along Nav

nav 메뉴에 mouse pointer가 hovering 되면, 하위 dropdown 메뉴가 각각의 크기, 위치에 맞게 보여지도록 구현하는 내용https&#x3A;//stripe.com/ 참고event listener를 각 li element에 붙임mouse가 in,

2020년 12월 19일
·
0개의 댓글
post-thumbnail

25. Event Capture, Propagation, Bubbling and Once

Event 발생 시 bubbling과 capture 그리고 addEventListener 함수의 option 인자(capture와 once)에 대한 학습Event Bubbling: 특정 element에서 event 발생 시, 상위 element로 이벤트가 전파(prop

2020년 12월 19일
·
0개의 댓글
post-thumbnail

24. Sticky Nav

수동으로 CSS의 position: sticky와 같은 효과 구현하는 내용offsetTopscrollYcss position 속성을 fixed로 변경하면, 원래 차지하던 공간을 차지하지 않게되어 공간 변형이 일어나므로 유의

2020년 12월 18일
·
0개의 댓글
post-thumbnail

23. Speech Synthesis

Text to Speech 기능 구현voice 종류, rate, pitch도 함께 설정 (Html 상의 input value 연동)SpeechSynthesis API: text to speech 기능 구현 시 활용 APIhttps&#x3A;//developer.mozi

2020년 12월 18일
·
0개의 댓글
post-thumbnail

22. Follow Along Link Highlighter

마우스 포인터를 따라서 해당 텍스트의 길이와 위치에 맞게 하이라이트 효과가 되도록 구현 (stripe 웹페이지처럼, 메뉴 버튼에 hovering 하면, 이에 따라 선택 가능한 하위 메뉴 박스가 열리는 효과와 동일)'mouseover' event와 'mouseenver'

2020년 12월 18일
·
0개의 댓글
post-thumbnail

21. Geolocation

디바이스의 실시간 위치정보를 받아서, 현재 방향과 속도를 가져와 보여주는 내용navigator.geolocation.watchPosition(success, error, option) : 장치의 위치가 바뀔 때마다 자동으로 호출할 처리기 함수를 등록할 때 사용합

2020년 12월 18일
·
0개의 댓글
post-thumbnail

20.Speech Detection

프로젝트 소개 배운 내용 Speech Recognition(음성인식) API : Speech API는 크게 Speech Recognition과 Speech Synthesis의 2가지 기능을 제공 > SpeechRecognition.lang : 언어 설정

2020년 12월 17일
·
0개의 댓글