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)
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://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://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개의 댓글
post-thumbnail

19. Webcam Fun

webcam에서 수신된 영상데이터를 웹 페이지의 canvas에 렌더링하는 동시에 다양한 effect 구현 연습사진 촬영(캡쳐)한 이미지를 기기에 저장하는 기능 포함loadedmetadata : 미디어의 메타 데이터가 로드되었을 때를 나타낸다. : 메타 데이터

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

18. Adding Up Times with Reduce

전체 비디오 시간(date-time 속성 값)을 합산하여, 시, 분, 초로 표시 (Reduce).reduce내 코드는 초, 분을 각각 Reduce로 얻어내다 보니 중복이 많이 발생정담 코드에서는 분을 초로 환산 후 기존 초의 값과 합산한 각 video의 값을 반환받아서

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

17. Sort Without Articles

정규 표현식을 이용하여, array의 텍스트를 수정(replace)한 상태에서 알파벳 순으로 정렬(sort)한 후, 웹페이지에 < li >로 보여주는 내용 Regular Expression \- \\d : digit character\\D : non-digi

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

16. Mouse Move Shadow

마우스 움직임에 따라서, 다양한 각도에서 text shawdow 효과를 발생시키는 내용제어 대상과 이벤트 리스너가 붙을 대상을 특정(선택)이벤트 리스너 함수 생성이벤트 리스너의 callback funtion 생성 shawdow 반경을 화면 내의 일정 영역으로 제한하기

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

15. LocalStorage & Event delegation

체크박스가 포함된 메뉴를 추가해서 메뉴판을 만드는 내용핵심은 페이지가 Refresh 되더라도, 입력한 메뉴 리스트가 사라지지 않고 local storage에 저장되도록 하는 것e.preventDefault(): html 에서 a 태그나 submit 태그는 고유의 동작이

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

14. JavaScript References VS Copying

primitive type 과 reference type 비교primitive type은 값을 복사하므로, 서로 영향 받지 않지만, object나 array 처럼 reference type은 주소값을 복사해서 공유하므로, 서로 영향 받음https://devel

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

13. Slide in on Scroll

프로젝트 소개 일정 수준 이상의 스크롤을 하게되면, 이미지가 슬라이드 식으로 나타나고 사라지는 효과 구현(class name 추가 방식) 코드 작성 순서 제어 대상(이미지)를 특정 슬라이드 함수 코드 작성 (스크롤 위치 등을 고려해서, 조건 문 작성) 배운 것들 d

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

12. Key Sequence Detection

일정 키 패턴의 입력 값을 받아서, 미리 정해진 패턴과 일치하면, 유니콘 캐릭터가 화면에 새로 생성되도록 구현미리 사전에 일정한 키 패턴을 array 형식으로 저장 keyup 이벤트에 대한 이벤트 리스너 생성입력 키 값을 받아 미리 사전에 정해둔 패턴과 일치여부를 판단

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

11. Custom Video Player

비디오 화면 재생, 멈춤, 재생속도, 볼륨, 건너뛰기 등을 연습eventlistener 붙는 element와 event들을 정함제어 대상 element들을 정함eventListener의 callback function 작성 video 객체의 다양한 속성(method):

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