개발자취 10

처음 써 본 리액트 훅(Hook) 후기..

3년 전 취준 시절에 프론트엔드 개발자를 준비하면서 리액트를 아주 잠깐 공부한 적이 있다. 그 당시에도 리액트가 대세였는데 아직도 대세인 듯 하다. 지금 다니는 회사에서는 다른 프레임워크를 쓰느라 리액트를 다뤄보지 않았는데 며칠 전, 3년 만에 리액트를 써 볼 기회가 있었다. 그동안 정말 많은 게 달라져 있었다. 3년 전에 노마드 코더에서 리액트 강의를 수강했었는데 그 당시엔 클래스형 컴포넌트로 구현하는 실습을 하며 공부했던 기억이 있다. 요즘은 클래스형보단 함수형과 리액트 훅이 추세인 것 같았다. (취준 때 리액트 관련 책도 샀었는데 프레임워크는 빨리 변한다는 소문에 취업하고 바로 팔았는데 정말 다행이다.) 함수형 컴포넌트를 사용하면 클래스형에서 사용하는 생명주기 메소드는 사용할 필요가 없고, 대신에 ..

[HTML/CSS] 웹 페이지 구조 잡기

평소 일할 때 컴포넌트에 대해서 스타일 수정하고 적용하는 작업은 많이 하는데 빈 페이지에 처음부터 스타일을 잡고 적용시킨 건 아주 오래 전 개인 프로젝트할 때 말곤 없어서 막상 구현하려니 헷갈리고 좀 어려웠다. 간단해보이는 웹 페이지인데도 스타일을 적용하고 지우고 또 적용하고 또 지우고를 반복했다. 뭐든 처음에 구조를 탄탄하게 잡아둬야 무너지지 않는다. 다음에 또 구현할 때 헷갈려서 구글 검색을 하게 될 게 뻔하기 때문에 웹 페이지 구조를 잡는 비법(?)에 대해 미리 정리를 해보았다. 프로그래머스 "만들면서 배우는 실전 퍼블리싱" 스터디에서 강의를 들으면서 + 과제를 해나가면서 + 구글 검색으로 이루어진 내용이다. Header, Main, Footer로 구성된 보통의 웹 사이트 구조를 예시로 구현해봤다...

Lit와 Web Component

Lit 란? Lit 📣 Check out our brand-new Tutorials page and Lit YouTube Channel!Simple. Fast. Web Components.Skip the boilerplateBuilding on top of the Web Components standards, Lit adds just what you need to be happy and productive: reactivity, declarative templates lit.dev Lit는 가볍고 빠르게 웹 컴포넌트를 만들 수 있는 라이브러리이다. Lit 공식 사이트 코드를 참고하여 웹 컴포넌트 사용법과 클래스에 대해 공부한 내용을 정리해 보았다. 더보기 웹 컴포넌트 : 충돌 걱정 없는 캡슐화 기능을 갖..

Hoisting (호이스팅) - JavaScript

Hoisting이란? 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미 Hoisting 요약 - 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지는 것이다. - var로 선언한 변수의 경우 호이스팅이 일어나면 undefined로 변수를 초기화한다. - 실제로 코드가 상단으로 옮겨지는 것은 아니며 내부적으로 끌어올려 처리하는 것이다. - 함수의 경우 함수 선언식 대신 함수 표현식을 사용하면 호이스팅되지 않는다. - 변수 선언은 가급적 var 대신 let과 const를 사용하도록 한다. 함수 선언식 Hoisting JavaScript가 코드를 실행하기 전에 함수 선언을 메모리에 저장하는 방식의 장점 중 하나는 코드에서 선언하기 전에 함수를 사용할 수 있다는 것이다. f..

Destructuring (구조 분해 할당) - JavaScript

Destructuring "구조 분해 할당" 배열과 객체는 자바스크립트에서 많이 쓰이는 자료구조이며, 많이 쓰이는 배열이나 객체의 속성을 해체해서 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식 ECMAScript(ES6)에서 이러한 Destructuring 문법을 제공한다. 다음은 Destructuring을 사용하는 방법이다. 배열 분해하기 let arr = [1,2,3] let [first, second] = arr console.log(first) // 1 console.log(second) //2 아래의 코드는 위의 코드와 같은 결과를 출력하는 코드 let first = arr[0] let second = arr[1] destructuring은 분해 대상이 수정되거나 없어지는 것은 아..

[ElasticSearch 검색 엔진] 핵심 개념 정리 (1)

[ ElasticSearch 기본 개념 ] "ElasticSearch" : Elastic Stack의 중심이며 검색 엔진으로 Elastic Stack에서 가장 중요한 역할을 하고 있다. 모든 데이터를 색인하여 저장하고 검색, 집계 등을 수행하며 결과를 클라이언트나 다른 프로그램으로 전달하여 동작하게 한다. Elastic Stack이란..? : 아파치의 검색 라이브러리인 루씬의 한계를 보완하기 위하 만든 오픈소스 검색엔진이다. ElasticSearch가 Logstash, Kibana와 함께 사용되면서 ELK Stack이라는 이름으로 알려졌다가 Elastic Stack이라고 정식 명명함. ElasticSearch 특징 자바로 개발된 오픈 소스 (https://github.com/elastic) Elastic..

자바스크립트(Javascript) 란?

자바스크립트란? : '웹페이지에 생동감을 불어넣기 위해' 만들어진 프로그래밍 언어 스크립트(Script)란 ?? 스크립트란 다른 프로그램에 의해 번역되거나 수행되는 프로그램이나 명령어들의 나열을 말한다. 스크립트는 HTML안에 작성할 수 있는데, 웹 페이지를 불러올 때 스크립트가 자동으로 실행된다. 웹 페이지 내에 포함되어 있는 자바스크립트는 웹 브라우저(클라이언트) 측에서 수행된다. 스크립트는 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행할 수 있다. 그러나, 컴파일된 프로그램보다 실행시간이 오래 걸리는데, 모든 명령어가 기본 명령어 처리기에 의해 직접 처리되지 못하고, 우선 다른 프로그램에 의해 전처리가 필요하기 때문이다. 자바스크립트는 브라우저에서만 사용이 가능한가 ?? 자바스크립트는 브라..

[HTML 태그] label 태그와 input 태그

: label 태그는 사용자 인터페이스 항목의 설명을 나타내며, 주로 태그와 함께 사용한다. 체크박스 타입의 input 태그와 label 태그를 함께 사용하면 label을 클릭해서 input의 체크박스를 활성화/비활성화 할 수 있다. 또한, 화면 리더기에서 label을 읽어서 사용자가 입력해야 하는 텍스트가 무엇인지 쉽게 알 수 있다. 요소와 함께 사용할 수 있는 요소 , , , , , , 과 을 연결하여 사용하면 좋은 점 화면리더기는 폼 입력(input)에서 label을 읽어서 사용자가 입력해야하는 텍스트가 무엇인지 더 쉽게 이해할 수 있게 한다. 관련 label을 클릭해서 input 자체에 초점을 맞추거나 활성화 시킬 수 있다. 누를 수 있는 영역이 넓어져서 화면이 작은 스크린 사용자를 포함해 입력하..

Jest로 자바스크립트 코드 테스트하기 - 일반 매처(matcher) 사용하기

개발 공부를 하면서 웹 프로젝트를 할 때, TDD(테스트 주도 개발)로 개발하면 좋을 것 같아서 javascript의 테스트 프레임워크인 Jest에 대해 알아보고 공부해 보았다. Jest : Jest란 단순한 JavaScript 테스트 프레임워크이며 Babel, TypeScript, Node, React, Angular, Vue 등을 사용하는 프로젝트에서 작동한다. Jest 설치하기 jest 사용을 위해 yarn이나 npm을 통해 설치합니다. $ yarn add --dev jest 또는, $ npm install --save-dev jest 설치 후, package.json, jest.config.js에 다음의 내용을 추가해준다. // package.json "scripts": { "test": "jes..

맥 초기 세팅!! Mac mini (M1칩 탑재) 구매 후 터미널로 개발환경 세팅하기

Xcode : 애플이 개발한 OS X의 개발 툴 모음 엑스코드는 통합 개발 환경(IDE)으로 앱 개발에 필요한 모든 요소를 한 곳에 모아 둔 툴 모음이다. 애플 개발자 문서와 그래픽 인터페이스를 만드는 데 쓰는 인터페이스 빌더가 포함되어 있다. 자동 완성 기능이 있어서 타자 중인 내용을 완성시켜주고 프로그래밍 언어를 사용할 때 자동으로 색을 구분해준다. 아래의 Homebrew를 설치하기 전, Xcode를 먼저 설치해줘야 한다. Homebrew : 자유-오픈 소스 소프트웨어 패키지 관리 시스템의 하나로서 애플의 macOS 운영 체제의 소프트웨어 설치를 단순하게 만들어준다. 기본 방법 # Homebrew 설치하기 /bin/bash -c "$(curl -fsSL )" # 설치확인 brew -v brew를 설치..