그럼에도 불구하고

배열 오름차순, 내림차순 정렬을 해보자 조건 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를 문자열로 전달받아 이스케이프 ..

시간, 분, 초를 나타낼 수 있는 시계를 만들어보자 조건: 1. 현재 시간에 맞는 시간을 출력한다. 2. 시간, 분, 초를 두 자리로 출력하되 10이 넘지 않는 (1~9)의 경우 앞에 0을 붙여서 출력한다. clock.html : : clocl.css *{ margin: 0; padding: 0; box-sizing: border-box; } .container { width: 400px; height: 200px; margin: 300px auto; background-color: skyblue; border-radius: 70px; border: 5px solid antiquewhite; } .current-time { font-size: 60px; font-weight: bold; color: wh..

! [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; } ..

오늘은 this에 대해 기록해보고자 한다. 이론적인 부분에서 공부할 때 너무 어려운 부분이 많았다. 그래서 이해가 안되는 부분이 많았는데 부족할 수 있지만 이번 계기로 확실히 정리해 보자 결론부터 말하자면 1. this는 함수가 호출될 때 결정이 된다. 2. 화살표 함수에서의 this는 함수가 속해있는 곳의 상위 this를 계승받는다. 실습으로 내가 이해한 대로 적어봐야겠다. ver_1 car라는 객체는 name 값으로 "KIA"를 가지고 있다. 여기서 car.getName(); 으로 car라는 객체의 getName() 메서드를 호출했다. this는 함수가 호출될 때 결정이 된다. 즉, car.getName();는 car가 getName()을 호출한 것이다. 이때 getName() 안에 있는 this는 ..

DOM(document object model)에 대해 알아보자 [ 문서 객체 모델이란 ] 웹이나 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹문서 전체 또는 일부분이 동적으로 반응하게 하는 것이다. 이렇게 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야 한다. ※ 문서 객체 모델(DOM)의 정의 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 DOM은 웹 문서를 하나의 객체로 정의한다. 그리고 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 각각 객체로 정의한다. 예를 들어 웹 문서 전체는 document 객체이고, 삽입한 이미지는 image 객체이다. 이처럼 DOM은 웹 문서와 그 안..

숫자를 반환하는 함수를 만들어보자 조건 1. 입력 값이 ''이거나 prompt에서 취소를 누르면 null 값 표시 2. 입력 값이 숫자가 아니면 다시 prompt 호출 후기 처음에는 do while을 사용할 생각을 못했다. 그래서 문자를 입력받으면 다시 호출해야 하는데 여기서 return readNumber();를 사용했다. 하지만, 함수 본인이 자신을 계속 호출하는 방법을 사용하고 싶지 않아서 고민하다 do while을 사용하니 해결이 됐다.

오늘은 Symbol.Toprimitive에 대해 알아보자 [ 객체를 원시형으로 변환하기 ] obj1 + obj2처럼 객체끼리 더하는 연산을 하거나, obj1-obj2처럼 객체끼리 빼는 연산을 하면 어떤 일이 발생할까? 그리고 alert(obj)로 객체를 출력할 때는 무슨 일이 발생할까? 위의 두 가지 경우 모두 자동 형 변환이 발생한다. 즉, 객체는 원시값으로 변환되고, 그 후에 의도한 연산이 수행된다. 1. 객체는 논리 평가 시 true를 반환한다. 따라서 객체는 숫자형이나 문자형으로만 형 변환이 일어난다고 생각하면 된다. 2. 숫자형으로의 형 변환은 객체끼리 빼는 연산을 할 때나 수학 관련 함수를 적용할 때 발생한다. 예를 들어 객체 Date 끼리 차감하면 (date1-date2) 두 날짜의 시간 차..