분류 전체보기 (10) 썸네일형 리스트형 투두리스트 MVC 패턴으로 만들어보기 - 1 (JavaScript) 투두리스트 MVC 패턴으로 만들어보기 - 1(JavaScript) 계기 지난 9개월동안 리액트를 사용하여 개발을 했다. 그런데 바닐라 자바스크립트로만 무언가를 만들어보는데 익숙해지기 전에 리액트를 사용하는데 더 익숙해져 버린 것 같다는 생각이 들었다. 프론트엔드 개발자에게 자바스크립트에 대한 이해도와 활용 능력이 굉장히 중요한데.. 그래서 이 기회에 SPA 프레임워크나 라이브러리를 사용하지 않고 자바스크립트만을 이용해서 연습을 했다. 무작정 만들어본 것은 아니고 인프런에서 김정환 님의 만들고 비교하며 학습하는 리액트를 수강한 후에 만들어 본 것이다. 리액트를 사용할 때의 장점을 비교하기 위해, 강의 앞쪽에 순수 자바스크립트로만 기능을 구현하는 내용이 있는데, 내가 원하던 것이라고 생각해서 수강했다. 투두.. 자바스크립트 원시 값의 불변성(Primitive Type) 자바스크립트 원시 값의 불변성(Primitive Type) 자바스크립트는 크게 원시 타입(primitive type)과 객체 타입(object/reference type)으로 구분할 수 있다. 자바스크립트에서 원시 값은 변경 불가능한 값(immutable value)이다. 반면에 객체는 변경 가능 값(mutable value)이다. 도대체 이게 무슨 말인지 헷갈려서, 이번 기회에 공부하면서 이해해보려고 한다. 원시 값 변경 불가능한 값 위에서 말했듯이, 원시 타입은 변경이 불가능하다. 처음에 이게 무슨 소리인지 이해가 안됐다. 분명히 나는 변수에 원시 값을 할당하고 나서 그 값을 바꿀 수 있는데 말이다. var a = 1; // 숫자 타입은 원시 타입 a = "Beautiful Night"; // 문자열.. 자바스크립트 암묵적 타입 변환(Implicit Coercion) 자바스크립트 암묵적 타입 변환(Implicit Coercion) 타입 변환이란? (명시적 타입 변환 vs 암묵적 타입 변환) 명시적 타입 변환: 개발자가 의도적으로 타입을 변환하는 것. 타입 캐스팅(Type Casting) 이라고도 함. 암묵적 타입 변환: 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환되는 것. 타입 강제 변환(Type Coercion)이라 한다. 명시적 타입 변환은 타입을 변경하겠다는 개발자의 의지가 코드에 명백히 드러나지만, 암묵적 타입 변환은 그렇지 않다. 타입 변환 결과를 예측하지 못한다면 오류를 생산할 가능성이 높아진다. 그래서 이에 대해 잘 이해하고 예측 가능한 코드를 작성하는 것이 중요하다. 암묵적 타입 변환 암묵적인 데이터 변환의 예 c.. 자바스크립트 데이터 타입 (JavaScript Data Type) 자바스크립트 데이터 타입 (JavaScript Data Type) 자바스크립트 데이터 타입에 관해 공부했다. 내가 몰랐거나 중요하다고 생각되는 부분을 정리하면서 다시 한번 되새긴다. 실수 처리 자바스크립트는 2진수, 8진수, 16진수를 표현하기 위한 데이터 타입을 제공하지 않는다. 그래서 2진수, 8진수, 16진수의 값을 변수에 할당해도 해석될 때는 모두 10진수로 해석된다. 예를 들면 아래와 같다. var binary = 0b01000001; // 2진수 var octal = 0o101; // 8진수 var hex = 0x41; // 16진수 console.log(binary); // 65 console.log(octal); // 65 console.log(hex); // 65 모든 수를 실수로 처리한.. 자바스크립트 변수 자바스크립트 변수 모던 자바스크립트 Deep Dive 라는 책을 샀다. 출판사는 '위키북스'다. 당분간 이 책으로 공부하면서 블로그에 정리할 예정이다. 변수란? 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름. 즉 값의 위치를 가리키는 상징적인 이름이다. 변수는 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행된다. 그 덕분에 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 안전하게 값에 접근이 가능하다. (자바스크립트는 인터프리터 언어이다) 할당과 참조 할당: 변수에 값을 저장(대입, 저장) 참조: 변수에 저장된 값을 읽어들임. 식별자 변수를 식별자라고도 하는데, 이는 어떤 값을 구별.. 티스토리 블로그 다시 시작 (markdown-tistory) Gatsby 문서를 보며 개발 블로그를 애써 직접 만들었는데, 티스토리 블로그로 갈아타려고 한다. 갈아타려는 이유와 고려했던 사항들을 정리하려고 한다. 검색 유입 가장 큰 이유였는데, 글 노출이 잘되지 않는다는 것이다. 구글 서치 콘솔에서 색인 요청도 잘 된 것을 확인했는데 첫 번째 게시글 이후에는 내가 올린 글을 검색해도 찾을 수 없었다. 내 주변 사람들은 동의하지 않을지 모르지만, 나는 수줍음이 많은 사람이다. 하지만 내가 쓴 글이 허접한 글이라고 해도, 키워드 노출은 되었으면 하는 정도의 관종이기 때문에 이 부분이 매우 아쉬웠다. Github Pages에 배포한 블로그와는 대조적으로 티스토리 블로그는 마지막으로 글을 쓴 게 몇 년 전인데, 아직도 몇 개 안 되는 글을 통해서 적은 수의 유입이 꾸준히.. 간단한 모달 만들기 (simple modal) 모달 만들기 html javascript css 를 이용해서 간단한 모달을 만들어보려고 한다. 먼저 .. Simple Modal Test Open Modal Modal Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis voluptate, culpa possimus odit ratione reprehenderit asperiores distinctio animi numquam sequi nisi velit perferendis sit neque ducimus ad dolorem, architecto illum. close 이렇게 코드를 작성하면 브라우저에는 아래 사진과 같이 표시가 된다. 우선 javascript를 만지기 전에 css부.. [CSS] transform 정리 Transform 속성은? MDN을 찾아보니 transform을 다음과 같이 설명하고 있다. 'transform은 좌표공간을 변형함으로써 일반적인 문서 흐름을 방해하지 않고 콘텐츠의 형태와 위치를 바꿉니다.' 일반적인 문서 흐름을 방해하지 않는다는게 무슨 말일까 ... 이건 직접 테스트해보면 알 수 있다. 위에 사진은 transform을 이용해서 B를 확대시키고 살짝 기울인 모습인데 B가 커질 때 양 옆에 있는 박스들을 밀어내거나 위에 글에 영향을 주지 않고있다. 이렇게 다른 곳에 영향을 주지 않고 혼자만 스윽~ 변한다. transform에 부여할 수 있는 속성이 여러개가 있고 그 중에는 2D 속성과 3D 속성이 있다. 오늘은 2D 효과와 관련된 부분만 정리하고 3D는 나중에 다시 포스팅 할거다. tra.. 이전 1 2 다음
