TIL

[Day 19] 2022-0719 : solo 프로젝트 마무리

오늘 배운 것 미니 해커톤 : 나만의 아고라 스테이츠 만들기 완성! + 깃헙 페이지 배포 My Agora States kimploo / 2022-04-22T14:08:33Z hyejj19.github.io 페이지네이션/ 로컬 스토리지 저장기능 구현 새롭게 알게된 것 Date 객체의 toLocaleString() 메서드로 날짜와 시간 포맷 다듬어서 출력하기 : 무식하게 getDate, getHours로 하나하나 정렬해 주었는데, 이 메서드를 쓰면 나름 예쁘게 다듬어준다. new Date() // Tue Jul 19 2022 20:07:57 GMT+0900 (한국 표준시) new Date().toLocaleString() // '2022. 7. 19. 오후 8:08:25' // 다른 포맷의 날짜와 시간을 전..

[Day 18] 2022-0718 : solo 프로젝트 -1

오늘 배운 것 git 활용을 위한 기본 명령어 정리 [GIT] GIT 활용을 위한 명령어 정리 로컬 리포지토리 git init # 현재 디렉토리에 git repo 생성 git add . # 현재 변경 내용을 git의 관리 상태로 올려줌 (staging) git status # add 내용이 staging으로 넘어갔는지 확인 git com.. friedegg556.tistory.com 소수 판별 알고리즘 - 에라토스테네스의 체 풀이 정리 [알고리즘 JS] 프로그래머스 LV.1 소수 찾기 문제 https://school.programmers.co.kr/learn/courses/30/lessons/12921?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. ..

[Day 17] 2022-0715 - 회원가입 페이지 유효성 검사

오늘 배운 것 회원 가입 페이지 유효성 검사 로직 구현 실습, CSS 작성 이벤트 객체 개요 새롭게 알게된 것 오늘은 어제까지 완성한 유효성 검사에 이어서, 버튼 활성화 기능을 구현했다. 모든 입력값이 정확하게 입력되었을 때만 실행될 수 있도록 모든 유효성 함수의 리턴값을 체크하고 실행할 수 있는 함수를 구현하였다. // input 값 여부에 따라 버튼 활성화 function checkSignup() { let id = elInputUsername.value; let email = elInputEmail.value; let pw1 = elPassword1.value; let pw2 = elPassword2.value; if (isMoreThan4Length(id) && isRightFormat(email..

[Day 16] 2022-0714

오늘 배운 것 DOM 개념 정리 : HTML 문서를 객체화 하여 프로그래밍 언어로 조작할 수 있게 만든 표현. node > element : 요소는 노드의 한 종류이다. 노드의 종류는 요소, 텍스트, 주석 등이 될 수 있다. remove 와 removeChild의 차이 remove() : 노드 삭제 후 종료 removeChild : 부모 ~ 자식 관계 끊은 후 그 자식 노드를 리턴. 변수에 담아 재활용 할 수 있다. DOM : Document Object Model DOM 이란 무엇인가? DOM 이란 ? Document Object Model 의 약자로, HTML 요소를 Object 처럼 조작할 수 있는 모델이다. DOM 을 활용해 HTML로 구성된 웹페이지를 동적으로 움직이게 만들 수 있다. 아주 중요..

[Day 15] Koans 과제

오늘 배운 것 함수 호이스팅 함수 호이스팅이란, 아직 함수 선언문이 실행되기도 이전인데 마치 함수가 선언된 것 처럼 호출해서 사용할 수 있는 현상을 의미한다. 실제로 함수와 변수를 스코프의 최상단으로 끌어 올리는 것은 아니다. (그렇게 보이는 것임!) 함수 호이스팅이 발생하는 이유는, 자바스크립트 언어에서는 인터프리터가 코드 실행 전 변수와 함수의 메모리 공간을 미리 할당해두기 때문이다. 이런 정보들을 미리 알고 있기 때문에, 아직 선언이 되지 않은 시점이어도 아! 이 함수가 존재하는구나! 하고 사용할 수 있게 되는 것이다. 함수 호이스팅의 대상은 var로 선언된 변수와 함수 선언문이며, let, const 선언과 함수 표현식은 호이스팅의 대상이 아니다. 함수 선언문은 초기화 과정에서 실제 함수 값이 할..

[Day 14] 클로저, ES6 주요 문법

오늘은 자바스크립트의 핵심 개념중 하나인 클로저와 그 외 ES6 의 주요 문법(전개연산자, 구조분해할당 등)에 대해서 공부했다. 원래 공부한 내용을 그날 정리하는 것을 원칙으로 하는데, 오늘 너무 피곤해서 간단하게만 정리하고 나중에 따로 블로깅을 하려고 한다. (아래 내용은 매우 간략한 요약과 일부 뇌피셜이 있으므로 주의) 클로저 클로저 : 함수가 생성될 시점의 정보를 기억했다가, 나중에 접근하여 사용하는 것. 함수가 중첩되어 있을 때, 즉 외부 함수와 내부 함수가 있을 때 내부 함수는 외부 함수에서 생성된 변수에 접근할 수 있는데, 심지어 외부 함수가 종료되어 실행 컨텍스트에서 pop되어도 이 정보는 렉시컬 환경에 그대로 남아있기 때문에 접근하여 사용할 수 있다. 생성될 시점의 정보를 기억하고 있다는 ..

[Day 13] 원시타입, 참조타입, 스코프

오늘 배운 것 자바스크립트 엔진은 콜 스택과 메모리 힙으로 구성되어 있다. 엔진을 포함해 자바스크립트가 작동할 수 있는 환경을 자바스크립트 런타임이라고 한다. [JavaScript] 자바스크립트 엔진과 런타임 자바스크립트 엔진 엔진이란? 쉽게 말해 자바스크립트를 실행시키는 '프로그램' 이다. 가장 유명한 엔진은 구글의 V8 엔진이고, 크롬과 node.js를 구동시킨다. 각 브라우저별로 고유한 엔진을 가지 friedegg556.tistory.com 콜 스택의 역할 중 하나는 실행 컨텍스트를 관리하는 것이다. 실행 컨텍스트란 자바스크립트의 코드 일부가 실행되는 환경이고, 변수 정보와 스코프등이 여기에 포함된다. [JavaScript] 실행 컨텍스트와 콜 스택 자바스크립트 코드의 실행 컴파일 완료 후 코드의 ..

[Day 12] 객체

오늘 배운 것 자바스크립트 객체에 대한 내용을 공부했다. for in문과 for of 문을 막연하게 비슷한 반복문이라고 생각했는데, 큰 차이점이 있다는 것을 알게되었다. 또 다양한 객체 메서드를 이해하고 활용할 수 있었다. [JavaScript] 객체 Object 객체란 무엇인가? 자바스크립트를 이루고 있는 거의 모든 것은 객체이다. 원시 타입을 제외한 나머지 값(함수, 배열, 정규표현식 등)은 객체에 속한다. 객체에서 각 요소는 프로퍼티 (key : value 쌍 friedegg556.tistory.com 배열이 빈 배열인지 확인하는 방법 라이브 세션 시간에 추가적으로 빈 배열인지 여부를 확인할 때 if (!arr.length) 를 활용하는 방법도 있다는 것을 알게 되었다. 처음에 빈 배열인지 확인하기..

[Day 11] 배열 + 2주차 까지의 소감

오늘 배운 것 배열과 객체 자료형을 사용하는 이유 : 대량의 데이터를 쉽게 다루기 위해서. 배열 값의 추가 삭제 기본 메서드 arr.pop() : 마지막 요소 삭제 arr.push(el) : 마지막에 요소 추가 arr.unshift(el) : 첫번째에 요소 추가 arr.shift() : 0번째 요소 삭제 arr.slice() : 얕은 복사 1 레벨(1차원 배열)까지는 복사가 되지만 2 레벨부터는 요소의 참조 값을 공유한다. 그 외 배열 메서드 정리 [JavaScript] 배열 메서드 정리 Array.prototype.slice() start ~ end 직전까지에 대한 얕은 복사본으로 새로운 배열을 리턴한다. 원본 배열을 변경하지 않는다. const arr = ['a', 'b', 'c', 'd', 'e']..

[Day 10] 리눅스, nvm, npm, Git

터미널을 사용하다..! 오늘은 리눅스 CLI 명령어를 사용한 기본적인 조작방법 및 Node.js 런타임에 대한 기본 지식을 학습했다. mac OS 혹은 ubuntu를 사용해서 학습해야 하는데, 나는 윈도우11 유저이고 우분투 듀얼부팅이 싫어서 wsl2를 설치하여 진행했다. wsl2 세팅은 여기과 여기 를 참조했다. 어려웠던 부분은 우분투에서 gui 앱을 실행하기 위해서 X11이라는 것을 활성화 시켜야 한다는 오류가 있었다. 구글링을 통해 VcXsrv라는 것을 받아 세팅을 진행했고 (참고링크 : WSL2 GUI 사용하기), 우분투에서 nautilus(윈도우의 파일탐색기처럼 파일을 볼 수 있는 파일 관리자) 를 실행시킬 수 있었다. wsl2를 사용하면서 윈도우 터미널 미리보기 라는 앱을 설치하여 사용중이다...