코딩짜는 일상

📚 요약리액트를 시작하고자 한다면 필수 디렉터리와 파일들 만들고 리액트 라이브러리를 설치하고...🥹 이것저것 과정이 많고 생각보다 시간이 오래 걸리기에 node.js를 이용해 명령어 한 줄로 자동 생성하는 방법을 정리해볼 것이다!😎✨ 🎷VS Code에서 파워쉘(PowerShell) 사용하기가장 먼저 리액터 앱을 만들어줄 위치를 선정하고 VS Code의 최상단 메뉴에서 파일(File) => 폴더 열기(Open Folder) 를 선택해 해당 경로를 열어준다. 나는 C에 Workspace를 만들어 두고 쓰는데 여기에 따로 reactWorkspace폴더를 만들었다. 이제 VS Code에서 ctrl + ` 키를 누르면 하단에 터미널 창이 생긴다. 창 내용을 보면 내가 vs code에서 연 폴더..

📚 요약이번주엔 뭘 작성할까 고민하다가 최근 노트북을 바꾸면서 (무려 12년만에...😭)개발 환경 세팅이 생각보다 자주 찾아보게 된다는 걸 깨달았다. 블로그에 저장해두면 나도 찾아보기 쉽고😎다른 사람들도 자주 찾아주지 않을까 해서 정리해보기로 했다! VS Code 설치Extention 설치Node.js 설치순서로 풀어보겠다! 🎷 VS Code 설치수업은 VS Code의 터미널을 통해 빠르게 리액트 앱을 생성해주어야 하므로VS Code가 필수다! 가장 먼저 검색에 [VS Code]를 입력해준다.https://code.visualstudio.com/ Visual Studio Code - Code Editing. RedefinedVisual Studio Code redefines AI-powered..

📕 오늘 배운 것응용 예제 캔버스 기능챗봇 대화 출력실전 프로젝트 예제Top MenuSub MenuSlide ShowTab Menu베스트 상품 📙새로 알게 된 것WebRTC별도의 플러그인 없이 웹에서 RTC(Real-Time-Communications)를 구현하기 위해 HTML5에 새로 추가된 기능

📕 오늘 배운 것jQueryjQuery 효과Sliding 효과slideDown() / slideUp() / slideToggle()Fading 효과fadeIn() / fadeOut() / fadeToggle() / fadeTo(속도, 투명도)Animate 효과animate() / stop()응용 예제음성 녹음 & 다운로드 기능 캔버스 기능사각형 출력이미지 출력이미지 내 포인트와 텍스트 출력챗봇 대화 출력 📙새로 알게 된 것stop()대상 객체 애니메이션 멈춤stop(true)대상 객체에 걸린 대기열 예약 애니메이션 전부 삭제. 초기화.

📚 요약javascript 배열을 복사하는 방식에는 2가지가 있다.배열의 참조 주소만 변수에 복사하는 얕은 복사완전 별개의 배열로써 복사하는 깊은 복사 과거 회사에서 메뉴 편집 시스템을 만들 때 배열이 별개의 배열로써 복사가 되는 게 아니라 참조되어수정하는 배열의 값과 원본 배열의 값이 자꾸 같이 바뀌는 것 때문에 고생했던 기억이 났다.😂 마침 이번에 배우게 된 김에 조금 더 파보기로 했다! 🎷 얕은 복사얕은 복사는 원본 배열의 참조값을 변수에 복사해준다. 형태는 다음과 같다. 이제 참조값이 복사된다는 것이 어떤 뜻인지 보려면 newArr의 값을 바꿔본 다음,newArr와 originArr가 각각 어떻게 바뀌었는지 보면 된다. 이처럼 console창으로 확인했을 때 분명 나는 newArr..

📕 오늘 배운 것jQuery 이벤트종류마우스 이벤트키보드 이벤트입력 양식 이벤트$.each() 메소드이벤트 객체의 중단 메소드jQuery DOM 요소 조작삽입 또는 삭제속성 추가 및 삭제클래스 속성jQuery 효과Basic 효과hide() / show() / toggle() 📙 새로 알게 된 것stopPropagation() / shopImmediatePropagation()맨날 preventDefault() 만 쓰다가 2가지 새로운 이벤트 중단 메소드 알게됨!근데... 이거 어떨 때 구분해서 쓰는거지...? preventDefault() 만 써도 충분하지 않나...? 나중에 강사님께 여쭤봐야 할 듯😂 📗 오늘 회고밀린 TIL 작성! 💪🔥

📕 오늘 배운 것jQuery 선택자직접 선택자인접 관계 선택자상위 요소하위 요소형제 요소필터 선택자속성 선택자jQuery 변수jQuery 이벤트사용 방법2개 이벤트 동시 적용종류윈도우 이벤트마우스 이벤트 📙 새로 알게 된 것메소드 체이닝객체.메소드1.메소드2. ... 형태로 하나의 객체에 여러가지 메소드를 한 줄에 적용시킬 수 있음.원래도 쓰고는 있었는데 이게 jquery 기능이었구나... 워낙 jquery랑 javascript를 혼용해 쓰다보니 몰랐다...😜jQuery 메서드 사용이 가능한 object 형태의 변수변수명 앞에 $를 붙이면 jQuery 메서드 사용이 가능한 object 형태의 변수임을 의미하게 된다고 한다!Ex) var $obj = $('#box1');의미도 몰랐는데 회사에선 나..

📕 오늘 배운 것javascript객체(object)브라우저 객체setInterval()문서 객체 모델(DOM)문서 내 요소(태그) 제어 메서드요소 생성동적 태그 객체 생성요소 속성 변경요소 참조이벤트이벤트 리스너이벤트 핸들러폼 객체폼 객체 사용법유효성 확인jQueryjQuery란?사용 방법다운로드 / CDN 📙 새로 알게 된 것setInterval() 사용시 보안 이슈setInterval('함수명()', 1000) 의 형태로 사용시 문자열이 넘어가면 보안상 이슈가 있을 수 있다고 비권장한다고 하셨다. 인터넷에서 찾아본 자세한 이유는 아래와 같다.크로스 사이트 스크립팅(XSS) : '함수명()' 부분에 공격자가 다른 코드를 삽입해 브라우저에서 실행되도록 할 수 있음.문자열 기반 코드는 가독성이 떨..