그럼에도 불구하고

아날로그 시계를 만들어보자 조건: 1. Date 함수를 이용한다. 2. Date 함수를 통해 각도를 구해서 사용한다. HTML 더보기 CSS * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: rgba(15, 14, 14, 0.889); } .container { width: 600px; height: 500px; background-color: rgba(28, 27, 27, 0.829); border-radius: 60px; margin: 25vh auto; } .clock { width: 400px; height: 400px; border-radius: 50%; background-color: rgba(37, 36..

mousemove 이벤트로 색 변환을 해보자 조건 1. 마우스를 움직일 때마다 화면의 색이 바뀜 2. 왼쪽, 오른쪽 여부 상관없이 바뀜 3. 화면의 색은 Math.random() 메서드 사용 box01 box02 box03 box04 box05 box06 box07 box08 box09 box10 box11 box12 box13 box14 box15 box16 box17 box18 box19 box20 HTML 삽입 미리보기할 수 없는 소스 ※ 화면 크기 및 확대, 축소 비율에 따라 event.pageX의 범위가 다르기 때문에 const num =parseInt(event.pageX / ? ); ? 는 개별 지정 필요

FileReader 객체 사용하여 image 올려보자 ref: [JavaScript] FileReader 객체에 대해 알아보자 FileReader란 무엇인가? [ FileReader란? ] FileReader란 type이 file인 input 태그 또는 API 요청과 같은 인터페이스를 통해 File 또는 Blob 객체를 편리하게 처리할 수 있는 방법을 제공하는 객체이다. abort, load, e despiteallthat.tistory.com 조건 1. 파일을 올릴 수 있는 버튼을 누르면 파일을 올린다. 2. 올릴 파일은 image로 제한한다. 3. 파일은 한 개만 올릴 수도 있고 다수도 가능하다. (여기서는 4개) 4. 각 파일마다 파일명, 사이즈, 파일타입을 알려준다. CSS 더보기 * { marg..

FileReader란 무엇인가? [ FileReader란? ] FileReader란 type이 file인 input 태그 또는 API 요청과 같은 인터페이스를 통해 File 또는 Blob 객체를 편리하게 처리할 수 있는 방법을 제공하는 객체이다. abort, load, error와 같은 이벤트에서 발생한 프로세스를 처리하는데 주로 사용되며, File 또는 Blob 객체를 읽어서 result 속성에 저장한다. 개발자는 result 속성을 통해 데이터에 접근할 수 있다. [ 비동기 동작 ] JavaScript에서 setTimeout() 함수, AJAX 요청(API 요청)처럼 잠재적으로 시간이 소모되는 작업은 HTML 페이지 렌더링에 영향을 줄 수 있으므로 동기가 아닌 비동기로 동작한다. 비동기로 동작하면 H..

배열을 섞을 수 있는 메서드를 만들어보자. 1. 기존 배열 값은 바꾸지 않는다. (복사해서 사용) 2. 메서드를 실행할 때마다 무작위로 섞인다. [ array [ i ], array [randomArray]] = [array [randomArray], array [ i ] ] 피셔 예이츠(Fisher Yates) 알고리즘을 사용하며, 재사용할 수 있도록 처리 작업을 함수로 만든다. ※ 피셔 예이츠 알고리즘 [ array[ i ], array [randomArray]] = [array [randomArray], array [ i ] ] 예를 들어, 5개의 요소 [0, 1, 2, 3, 4]를 가지는 배열을 생각해보자. for문 i에 4, 3, 2, 1, 0 을 대입했을 때 Math*random()은 0 이상..

배열 오름차순, 내림차순 정렬을 해보자 조건 1. 오름차순, 내림차순 버튼이 있고 버튼을 누르면 userDataList 배열에 있는 객체 값을 보여준다. 2. 오름차순 버튼을 누르면 id가 오름차순 된 순서대로 보여준다. 3. 내림차순 버튼을 누르면 id가 내림차순 된 순서대로 보여준다. 4. 최초에는 id가 오름차순 된 순서대로 보여준다. 오름차순 내림차순 div 태그 안에 오름차순 버튼과 내림차순 버튼을 만들고, 버튼을 누르면 ul태그 안에 li 태그로 객체 값을 출력한다. 결과 HTML 삽입 미리보기할 수 없는 소스 리뷰 특별하게 어려운 건 없었는데 sortByAscending과 sortByDescending에서 return 값을 설정하는데 시간이 좀 걸린 것 같다. sort() 메서드에서 sort..

Turbo Console Log 사용법에 대해 알아보자 [ Turbo Console Log ] 이 확장은 의미 있는 로그 메시지 작성 작업을 자동화하여 디버깅을 훨씬 쉽게 만든다. console.log로 디버깅 작업을 할 때 매번 작성해야 하는 귀찮음이 있다. (다행이게도?) Turbo Console Log를 사용하면 수월하게 작성할 수 있다. :) [ 설치방법 ] 1. vscode extension에 Turbo Console Log 검색 2. 설치 [ 주요 기능 ] 1. 원하는 변수를 선택 후 ctrl+alt+L 누르기 2. 다중커서 지원 property TurboConsoleLog.wrapLogMessage(boolean): 로그 메시지를 래핑할지 여부. TurboConsoleLog.logMessag..

간단하게 encodeURIComponent로 네이버 검색을 해보자 조건 1. input text에 검색할 내용을 입력하고 버튼을 누르면 네이버 검색창에 자동 검색이 된다. + 추가기능 input text에 검색할 내용을 입력했을 때 기본적으로 합성되는 문자열을 만들어보자 ex) "포카"를 검색하면 자동으로 "칩"이 붙어 "포카칩" 검색 참고 [JavaScript] encodeURI / decodeURI란? encodeURI / decodeURI에 대해 알아보자 [ encodeURI ] encodeURI 함수는 완전한 URI (Uniform Resource Identifier)를 문자열로 전달받아 이스케이프 처리를 위해 인코딩한다. URI는 인터넷에 있는 자원을 나타내는 유 despiteallthat.ti..

encodeURI / decodeURI에 대해 알아보자 [ encodeURI ] encodeURI 함수는 완전한 URI (Uniform Resource Identifier)를 문자열로 전달받아 이스케이프 처리를 위해 인코딩한다. URI는 인터넷에 있는 자원을 나타내는 유일한 주소를 말한다. URI의 하위 개념으로 URL, URN이 있다. URI / URL / URN 이란 무엇인가 오늘은 URI / URL / URN의 차이를 알아보자 대부분의 사람들은 URI와 URL을 혼용해서 사용하고 있다. 하지만, 이는 엄밀히 말하면 다르다. 위의 사진에서 볼 수 있듯이, URI는 URL과 URN을 포함하고 있다. despiteallthat.tistory.com /** * 완전한 URI를 문자열로 전달받아 이스케이프 ..

! [rejected] master -> master (non-fast-forward) 해결 방법에 대해 알아보자 작업한 것을 push 하는 과정에서 이런 에러가 발생했다. 상황 github에서 저장소를 생성 후 최초 commit에 성공했고 파일 수정 후 다시 commit를 하려다 발생 git add . => git commit -m "second commit" => git push origin master 입력 시 오류 발생 git remote -v로 연결 경로를 확인해보면 내가 설정한 경로로 연결이 되어있음 hint로 나온 문구를 해석해 보면, GitHub에 생성된 원격 저장소와 로컬에 생성된 저장소 간 공통분모가 없는 상태에서 병합하려는 시도로 인해 발생. 기본적으로 관련 없는 두 저장소를 병합하는..

Git 설치, 업로드, 업데이트에 대해 알아보자 우선 Git을 사용하려면 Git을 설치해야 한다. Git git-scm.com Downloads를 누르고 실행 환경에 맞게 다운로드하면 된다. git bash를 열면 처음에 간단한 환경설정을 해야 한다. 1. 사용자 이름 설정 git config --global user.name "your_name" 2. 사용자 이메일 설정 git config --global user.email "your_email" 3. 정보 확인하기 git config --list 내가 입력한 email과 name을 확인할 수 있다! Github에 처음 코드 업로드하기 1. 초기화 git init 2. 추가할 파일 더하기 git add . .(점) 은 모든 파일이라는 뜻이다. 선택적으..

이미지 갤러리를 만들어보자 조건 1. 사진 6개를 보여준다. 2. 각각의 사진을 클릭하면 화면 전환이 되고 내가 누른 사진의 크기를 조절하여 보여준다. 3. 크기가 조절된 사진을 누르면 다시 사진 6개를 보여주게 만든다. 방법 1 방법 2 방법 3 CSS .row { width: 420px; margin: 30px auto; } ul { list-style: none; margin: 0; padding: 0; } ul li { display: inline-block; } #lightbox { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.694); top: 0%; left: 0%; position: fixed; display: none; } ..