일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 프론트엔드
- 이더리움
- 백준
- BFS
- next.js
- 쿠버네티스
- 자바스크립트
- AWS
- 리액트
- 백엔드
- 파이썬
- 솔리디티
- 블록체인
- kubernetes
- node.js
- HTML
- docker
- TypeScript
- CSS
- react
- 이슈
- 타입스크립트
- k8s
- 가상화
- 클라우드
- JavaScript
- 알고리즘
- es6
- 컴퓨터공학
- 웹
- Today
- Total
목록전체 글 (241)
즐겁게, 코드
자바스크립트의 자료형은 원시형과 객체 타입으로 구분됩니다. 원시형 : Number, String, Boolean 객체 : 나머지 전부 객체 타입이 원시형과 구분되는 가장 큰 차이는 변수에 실제 값이 담기는 원시형과는 달리 객체 타입은 해당 데이터의 참조(reference) 값이 저장된다는 것입니다. (C나 C++의 일반 타입과 포인터를 떠올리면 됩니다.) 이게 뭐가 중요하다고 갑자기 이 얘기를 꺼내는 걸까요? 이제부터 코드를 통해 살펴봅시다. let number1 = 1; let number2 = number1; number2 = number1 + 9; console.log(`number1 : ${number1}, number2 : ${number2}`); // number1 : 1, number2 : ..
오랜만에 번역 ko.javascript.info/ 튜토리얼을 읽던 중, 클로저 문서에서 미번역된 과제분을 발견해 오랜만에 번역을 기여하려 했었다. 아무래도 거의 3개월만에 번역을 진행하려다 보니 프로젝트 세팅방법도 까먹어 문서를 다시 읽고 있었는데, 이게 왠일? 분명 문서에 적힌 프로세스를 그대로 따라갔음에도 불구하고 에러가 출력되는 것이었다. 하다못해 이게 맥북 문제인가 싶어서 윈도우 머신으로 똑같이 실행해봤지만 그래도 프로젝트 세팅이 진행되지 않았다. (* 잠깐 모던 자바스크립트 튜토리얼 프로젝트의 구조를 소개하자면 하나의 세팅용 서버와 각 국가별로 번역된 클라이언트(위키) 들이 존재한다.) 아무래도 지금은 서버에 뭔가 문제가 생긴 것 같았는데, 자세히 읽어보니 서버의 디펜던시 중 js-yaml 이라..
짧은 내용이지만 꿀팁이 될 것 같아 남겨봅니다. conwnet/github1s One second to read GitHub code with VS Code. Contribute to conwnet/github1s development by creating an account on GitHub. github.com github1s 라는 프로젝트가 있는데, 깃허브 저장소에 담긴 코드를 클론할 필요 없이 온라인 VSCode 환경에서 즉시 확인할 수 있게 합니다. 예를 들어 github.com/C17AN/vue-todo 저장소의 코드가 궁금한데 클론까지 해가면서 내용물을 들여다보기는 귀찮다 싶을 때, 도메인을 gitbhub 에서 github1s 로 고쳐 보세요. (github.com/C17AN/vue-todo..
이미지 파일을 다루다 보면 자연스럽게 다양한 확장자들을 만나게 됩니다. gif, png, jpg, raw... 등등 다양한 이미지 포맷은 벡터 이미지냐 래스터 이미지냐 / 무손실 이미지냐 손실 이미지냐로 구분되는데요, 오늘은 다양한 이미지 포맷들 중 PNG와 JPEG 포맷을 비교해 보도록 하겠습니다. 📸 JPEG 포맷 JPEG는 가장 많이 사용되는 이미지 포맷들 중 하나로, 원본 데이터가 손실되는 손실 이미지라는 특징이 있습니다. 물론 가만히 저장해 둔다고 손실이 생기는 것이 아니라, JPEG 이미지를 웹 페이지에 업로드하거나 메일로 전송하면 JPEG 포맷은 사람의 눈이 인식할 수 있는 색상만을 남기고 나머지를 제거하기 때문에 압축 과정에서 *언제나 약간씩 데이터가 소실됩니다. (* JPEG 압축 시에는..
웹 개발과 디자인은 뗄레야 뗄 수 없는 관계인데요, 이번에는 font-awesome을 활용해 간단하게 디자인을 꾸미는 방법을 알아보겠습니다. Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com Font Awesome(FA)은 수많은 아이콘을 자체 라이브러리뿐만 아니라 SVG, 유니코드 등 다양한 포맷으로 제공하는데요, 정말 다양한 종류의 아이콘을 무료로 제공할 뿐만 아니라 크기와 색상 등의 커스텀도 얼마든지 가능해 많은 사랑을 받고 있습니다. CDN을 통해 아이콘 사용하기 (* 21년 2월 기준 FA 버전..
클로저(closure). 분명 한번은 들어봤지만 한번도 직접 써본적은 없는 그 문법입니다. 그런데 정말 없을까요? 오늘은 클로저가 무엇인지 한번 알아봅시다. let myName = "Chanmin"; function printName() { console.log(myName); // "Chanmin" } printName(); 실행 결과로 "Chanmin" 이 출력되는 것은 쉽게 예측할 수 있는데, 함수 안에서 어떻게 바깥의 myName 변수를 사용할 수 있었던 걸까요? 바로 우리가 모르는 사이에 클로저가 사용되었기 때문입니다. 이번에는 조금 복잡한 예시를 들어 보겠습니다. function outer(outerValue) { return function inner(innerValue) { console...
웹 개발자라면 수도 없이 보았을 HTML 기본 구조입니다. 자, 지금부터 간단한 마술을 하나 보여드리겠습니다. 비주얼 스튜디오 코드나 다른 코드 에디터에서 index.html 파일을 만들고 ! 를 입력해보세요. 와! 느낌표 하나를 찍었더니 기본 HTML 템플릿이 생성된 모습입니다. 이건 에디터에 내장된 에밋(emmet)이라는 플러그인의 도움을 받은 결과인데요, 오늘은 에밋 문법을 소개해보도록 하겠습니다. 요소 생성하기 , 등 HTML 요소를 생성하는 방법은 정말 간단한데요, 태그명을 영어로 입력하면 무려 알아서 태그를 생성해줍니다. span.content Tip 1. [div 태그는 예외적으로 태그명을 생략할 수 있습니다.] .content Tip 2. [태그 안에 작성할 내용은 {} 기호로 감싸면 됩니..