프론트엔드/CSS
아날로그 시계 만들기
심플하고 깔끔한 아날로그 시계를 만들었습니다아 아래에 코드펜으로 자료를 올렸습니다 0.5로 해서 보시면 아주 좋습니당~! See the Pen Untitled by seunghyun (@plla2) on CodePen. 토글버튼을 통해 라이트모드와 다크모드도 구현해보았다.
전체 글
프론트엔드 개발자가 되고픈 개미의 일대기 🐜
프론트엔드/JS
7. 자바스크립트 자료형 정리
자료형이란?? 자료형이란, 값(value)의 종류이다. 자료형은 크게 두가지로 구분이 된다. 원시자료형, 참조 자료형이다. 원시자료형 vs 참조 자료형 원시자료형의 특징 원시 자료형을 변수에 할당하면 메모리 공간에 값 자체가 저장된다. 원시 값을 갖는 변수를 다른 변수에 할당하면 원시 값 자체가 복사되어 전달된다. 원시 자료형은 변경 불가능한 값(immutable value)이다. 즉, 한 번 생성된 원시 자료형은 읽기 전용(read only) 값이다. 자료형(number, string, boolean, undefined, null, symbol)을 원시 자료형으로 구분합니다. 참조 자료형의 특징 참조 자료형을 변수에 할당하면 메모리 공간에 주솟값이 저장된다. 참조 값을 갖는 변수를 다른 변수에 할당하면..
프론트엔드/JS
6. My agora States 만들기 (코드 파악하기)
이번 포스팅은 3월 9일, 10일에 진행했던 솔로 프로젝트 "나만의 아고라스테이츠 만들기" 진행 중 작성했던 코드들을 정리 할 것이다. 1. HTML 먼저 HTML 파일을 보면, form패그를 사용하여 폼에 제목, 이름, 질문내용을 작성할 수 있게 각 input을 주었다. 사실 포크해올 때 HTML 파일이 거의 대부분 만들어져 있어서 몇개만 바꾸고 추가해주기만해서 크게 건드리지 않았고, 많이 어려운 내용은 없었던 것 같다. 2. Javascript 진짜 어려운 점은 여기에서부터... 난관에 봉착.. 사실 자바스크립트 작성할 때 dom으로 HTML요소를 꺼내오긴했는데... 여기서 뭘 어떻게 해야할지 감조차 잡히지않았다 처음엔 하지만 유어클래스에서 튜토리얼로 간단하게 이런식으로 작성하면 된다~~ 이런 내용이..
프론트엔드/JS
5. DOM (내용정리) #1
DOM 이란, HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. 자세히 알아보자면, 문서 객체 모델을 줄인 DOM은 문서의 구조화된 표현(structered representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근 할 수 있는 방법을 제공하며 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. 1 . 1 HTML 요소와 노드 객체 HTML요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 이 때, HTML 요소의 어트리뷰트는 어트리뷰트 노드로, HTML요소의 텍스트컨텐츠는 텍스트 노드로 변환된다. 트..
프론트엔드/JS
4. 구조 분해 할당 (내용정리)
이 포스팅은 koans를 풀다가 더 공부가 많이 필요하겠다고 느낀 구조분해할당에 대해 알아보고 정리 구조 분해 할당?? 뭔지부터 알자 구조 분해 할당은 배열 또는 객체의 구조를 분해해서 그 분해된 값을 개별적인 변수에 담는 표현식 이라고는 하는데... 말로는 잘모르겠다 예제를 같이 보면서 이해해보자 const arr = [1, 2, 3, 4, 5]; const one = arr[0]; const two = arr[1]; const three = arr[2]; 배열 내부의 값을 새로운 변수에 각각 할당하고자 할 때, 하나씩 변수를 선언하고, 값을 할당하는 과정을 거쳐야된다. 하지만! 이때 배열의 구조분해할당 이라는 것을 사용하면 변수를 선언하고, 할당하는 과정을 한번에 해결할 수 있다. const arr ..
프론트엔드/JS
3. 클로저 내용정리
클로저 처음엔 closer인줄 알았던 클로저. 사실은 closure이라는... 처음알았다 클로저는 그냥 처음부터 난해하다고 설명을 하고있다. 예를 들어보면 이해가 편할수도있다. const x = 1; function outerFn() { const x = 10; function innerFn() { console.log(x); //10 } innerFn(); } outerFn(); 위의 예를 보면 outerFn 내부에서 중첩함수 innerFn이 정의되고 호출되었다. 이때 중첩 함수 innerFn의 상위스코프는 외부 함수 outerFn의 스코프이다. 따라서 innerFn 내부에서 자신을 포함하고 있는 외부함수 outerFn의 x 변수에 접근하여 콘솔에 10이 찍힌다. const x = 1; function..
코테/koans, 코플릿, sprint
1. Koans 풀이
오늘은 이틀에 걸쳐 푼 koans 내용들에서 새롭게 알게된 점을 적어보려한다. it("lexical scope와 closure에 대해 다시 확인합니다.", function () { let age = 27; let name = "jin"; let height = 179; function outerFn() { let age = 24; name = "jimin"; let height = 178; function innerFn() { age = 26; let name = "suga"; return height; } innerFn(); expect(age).to.equal(26); expect(name).to.equal("jimin"); return innerFn; } const innerFn = outerFn(..
프론트엔드/JS
2. 실행 컨텍스트, 렉시컬 환경 내용정리
실행 컨텍스트?? 그게 무엇이죠..? 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다. 그래서 그게 뭐냐구요?? 이 글을 읽다보면 이해가 되실수도 있습니다. (안되실수도...) ECMAScript 사양은 소스코드를 4가지 타입으로 구분. 전역코드, 함수코드, eval코드, 모듈코드 소스코드 타입 설명 전역코드 전역 코드는 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성해야 한다. 그리고 var키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수를 전역 객체의 프로퍼티와 메서드를 바인딩하고 참조하기 위해 전역객체와 연결 함수코드 함수코드는 지역 스코프를 생성하고 지역변수, 매개변수, arguments 객체를 관리해야 한다. 그리고 생성한 지역 스코프를 전역 스코프에서 시작하는 스..
카테고리 없음
1. 블로그 갈아타기, 티스토리 세팅
이번 포스팅에서는 나의 개발 블로그를 벨로그에서 티스토리로 옮기는 작업을 작성하려한다. 내가 애지중지 24개의 게시물을 하나하나 작성했었는데... 그치만 작성법이 살짝 불편하다는 느낌이 들어서 옮기려고 한것이다. 티스토리 이거 어케하지.... 벨로그 겨우 적응하나했더니 다시 원점 뭐,, 인간은 적응의 동물이라고 또 적응하겠지 금방.. 아마도 또 그와중에 꾸며보겠다고 스킨 이것저것 뒤져보다가 다운받고는 적용도 못하는... 앞으로 티스토리와 친해지면서 이거저거 활용해보고 적응해보자 내일부터 제2의 블로깅 시작!! 나의 전 벨로그 주소는 https://velog.io/@plla_2 plla_2 (Plla2) - velog 자바스크립트 객체 정리 또한, 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값으로..