전체 글 (52) 썸네일형 리스트형 구글 검색 효율적으로 하기 완전 일치 검색 "이것은 하나로 연결해서 검색해라" 이렇게 큰 따옴표로 검색하면 단어를 붙여서 인덱싱한다. 와일드카드 검색 "이것은 *로 연결해서 검색해라" 큰 따옴표 안에 *는 와일드카드로 안에 더 다양한 검색 결과가 나오도록 인덱싱한다. 마이너스 검색 "이것은 하나로 연결해서 검색해라 -책" 큰 따옴표 안에 마이너스 기호 뒤의 단어는 검색 결과에서 제외하고 인덱싱한다. 사이트 한정 "이것은 하나로 연결해서 검색 site: www.naver.com" 네이버에서 해당 검색 결과를 인덱싱한다. 파일형식 한정 "이런 파일을 찾아봐 filetype:pdf" pdf 형식인 것만 인덱싱한다. typescript + react + webpack setting 하기 (CRA❌) 1.프로젝트 폴더 생성 및 초기화 mkdir my-typescript cd ./my-typescript npm init -y 결과 : my-typescript 폴더 안에 package.json 파일 생성 2. 리액트 설치 npm install react react-dom or yarn add react react-dom react : 리액트 라이브러리 react-dom : 리액트 엘리멘트 렌더링 라이브러리 3. 타입스크립트 설치 npm i -D typescript @types/react @types/react-dom typescript : 타입스크립트 라이브러리 @types/react : 리액트를 위한 타입 정의 파일 @types/resct-dom : 리엑트 돔을 위한 타입 정의 파일 4. 웹팩 설치 n.. DB 를 공부해보자 용어정리 DataBase : 공유하여 사용할 목적으로 체계화해 관리하는 데이터의 집합. DataBase Shema : 자료의 구조, 자료의 표현 방법, 자료 간의 관계를 정의한 구조 Table : 데이터를 저장한 표 DataBase Model : 데이터를 집합하기 위한 형태의 종류, ex) RDBMS SQL : RDBMS의 데이터를 관리하기 위해 만들어진 프로그래밍 언어 DataBase Server : database를 모아 저장하기 위한 서버 ex) MySQL Database Server 설치하기 MySQL communtity server 설치 -> terminal에서 접속 mysql -uroot -p -u: user -p: password Database 만들고,확인하고, 사용하고 지워보기 CREAT.. 다섯 가지 리액트 컴포넌트 고급 패턴 (5 Advanced React Patters) 이 포스트는 이 글을 번역 및 정리한 내용입니다. 리액트를 사용하는 모든 개발자들은 아마도 스스로에게 이런 질문들을 이미 던져봤을 것입니다. - 어떻게 다양한 케이스에 맞는 재사용 가능한 컴포넌트를 만들까? - 어떻게 사용하기 쉬운 간단한 API를 가진 컴포넌트를 만들까? - 어떻게 UI나 기능 측면에서 확장 가능한 컴포넌트를 만들까? 이런 질문이 반복되면서 리액트 커뮤니티에서 몇 가지 고급 패턴이 생겨났습니다. 1. Compound Components Pattern - 합성 컴포넌트 패턴 이 패턴을 사용하면 불필요한 prop drilling 없이 표현적이고 선억적인 컴포넌트를 만들 수 있습니다. 컴포넌트를 합성하여 커스터마이징해서 사용할 수 있도록 하려면 이 패턴을 사용하는 것을 고려해 보는 것이 좋습.. 스무디 리액트 part 4 (10장) 보호되어 있는 글입니다. 무언가 놓치고 있는 기분 매일 열심히는 하고 있는데 무언가를 놓치고 있는 기분이 든다. 글을 적다보면 생각이 날지도 모른다는 느낌이 들어 블로그를 들어왔다. 요즘은 정말 하고 싶은 게 많다. - 새로 들어간 직장에 적응하기 - 생활코딩 전부(?) 보기 - 깃 블로그 정리하기 & 인강 듣기 - TDD 사내 스터디 공부 - TDD 인강 듣기 - React 인강 듣기 - 실전 리액트 프로그래밍 책 정독하기 - Node 인강 듣기 - 디자인 시스템 설계하기 - 웹 컴포넌트 정리하기 - 사이드 프로젝트 기획하기 등등 위 열거한 리스트는 기본적인 것들이고, 심화로 더 하고 싶은 것들도 많다. 너무 하고 싶으니까 동시에 다 시작은 했는데 너무 많아 마무리는 못 짓고 있는 상황이다. 그래서 항상 무언가 놓치고 있는 기분인걸까? 우선 벌여놓은 .. 커밋을 버리고 특정 버전으로 다시 되돌아가기(reset) 이 글은 backlog.com 의 git tutorial을 보고 정리한 것입니다. reset 명령어를 이용해 커밋을 버리고 원하는 버전으로 돌아가기 reset 명령어 실행하면 'HEAD'의 위치와 working tree, staging 내용을 함께 되돌릴지 여부를 선택할 수 있다. 옵션 HEAD의 위치 staging working tree --soft 변경함 변경 안 함 변경 안 함 --mixed(기본) 변경함 변경함 변경 안 함 --hard 변경함 변경함 변경함 - 커밋만 되돌리고 싶을 때 (--soft) - staging에 올라간 상태를 working tree로 되돌리고 싶을 때 (--mixed) - 최근의 커밋을 완전히 버리고 이전의 상태로 되돌리고 싶을 때(--hard) 직접 해보기 먼저 커밋 이.. 이전에 작성한 특정 커밋 지우기 (revert) 이 글은 backlog.com 의 git tutorial을 보고 정리한 것입니다. revert 명령어를 이용해 특정 커밋 지우기 rebase -i 나 reset으로 커밋을 삭제할 수 있지만, 해당 커밋이 이미 origin에 있는 상태라면 다른 개발자들이 해당 커밋을 참조하고 있어 이러한 삭제 작업을 함부로 하기 어렵습니다. 이럴때 revert를 이용해 특정 커밋의 내용을 지우는 새로운 커밋(B')을 만들어 보다 안전하게 처리할 수 있다. 직접해보기 먼저 커밋 이력을 세 개 만들어 보겠습니다. revert 명령어를 이용해 second commit을 지워보도록 하겠습니다. git revert HEAD^ (HEAD는 현재, ^는 한단계 위 커밋을 의미) git add . (second commit을 지웠으므로.. 이전에 작성한 커밋 수정하기(--amend) 이 글은 backlog.com 의 git tutorial을 보고 정리한 것입니다. --amend 옵션을 이용해 커밋 수정하기 amend는 개정하다, 수정하다는 의미입니다. --amend 옵션을 이용해 커밋을 하면, 이전에 커밋했던 내용에 새로운 내용을 추가하거나 설명을 수정할 수 있습니다. 직접해보기 이미 작성된 커밋을 수정하는 실습이므로, 커밋을 하나 만들어둡니다. mkdir amend-test cd amend-test git init vi test.html (test.html에 내용 입력) git add test.html git commit -m "first commit" test.html 내용을 추가하고, 이번에는 --amend 옵션을 이용해 커밋합니다. vi test.html (내용 수정) git.. 연차를 낸 어느날 써 내려간 글 이 글이 공개가 될 지, 비공개 글로 남을 지 모르겠지만, 솔직하고 덤덤하게 글을 써 내려가 보려고 한다. 지난 밤 고열과 오한을 느껴 새벽 세 시에 깨어난 뒤로 잠을 설쳤다. 코로나 인걸까? 코로나가 확실하다. 한참을 말똥말똥한 정신으로 코로나 증상을 서치하다가 새벽 여섯 시가 넘어 다시 잠이 든 것 같다. 아침에 눈을 떠 생각했다. 회사에 가도 되는걸 까? 내 옆자리에 앉아 일하는 상사의 결혼식이 내일인데,,, 나 때문에 결혼식과 신혼여행을 망치면 어떡하지? 많은 생각이 머릿속을 멤돌았다. 아직 몸살기운이 남아 있는 걸 보니, 오늘 회사를 가는 것은 역시 무리인 것 같다는 판단이 들고, 플렉스를 열어 연차를 신청했다. 뜻밖의 연차다. 새 회사에 입사한지 갓 2달을 채워가는 나는 사실 연차가 없다. 한.. Shadow DOM 스타일링하는 방법 내부에서 shadow dom 스타일링 하기 1. :host 선택자 See the Pen Untitled by leepro (@leepro225) on CodePen. 2. :host() 를 이용해 테마 적용하기 See the Pen Untitled by leepro (@leepro225) on CodePen. 외부에서 shadow dom 스타일링 하기 1. var 이용하기 See the Pen Untitled by leepro (@leepro225) on CodePen. 스타일 상속 및 재설정하기 resetStyleInheritance (deprecated) false - 디폴트. 상속 가능한 CSS 속성들이 상속을 유지합니다. true -shadow boundary에서 상속가능한 속성들을 initial.. Shadow Dom 이란? 웹 컴포넌트란 ? - Custom Element - Shadow Dom - HTML Template - ES Module 이 네 가지 명세를 결합해서 - 스타일링이 캡슐화되고 (Shadow Dom), - 스탬프를 찍어내듯이 여러번 사용 가능한 (HTML Template), - 고유한 태그를 (Custom Element) - 일관된 방식으로 통합하여 사용 (ES module) 가능하도록 만든 컴포넌트이다. 웹 컴포넌트에 있어서 Shadow DOM의 역할은? DOM API는 자체적으로 캡슐화를 지원하지 않는다. 캡슐화를 지원하지 않는 다는 것은 스타일 정보가 다른 트리 요소로 누출될 수 있기 때문에 커스텀 요소를 개발하기 어렵고, id가 다른 요소간에 겹칠 수 있음을 의미한다. 캡슐화는 웹 컴포넌트의 중요한.. Web Component Introduction 번역 - 웹 컴포넌트 소개 이 글은 WEBCOMPONENTS.ORG 의 글을 번역한 것입니다. 소개 웹 컴포넌트란? 웹 컴포넌트는 웹 페이지에 재사용 가능하고 캡슐화된 새로운 커스텀 컴포넌트를 만들 수 있게 도와주는 웹 플랫폼 API 세트 입니다. 웹 컴포넌트 기반으로 만들어진 커스텀 컴포넌트와 위젯은 최신 브라우저에서 작동하고, HTML과 함께 작동하는 모든 Javascript 라이브러리 또는 프레임워크와 함께 사용할 수 있습니다. 웹 컴포넌트는 기존의 웹 표준을 기반으로 합니다. 웹 컴포넌트를 지원하는 기능이 현재 HTML과 DOM 스펙에 추가되고 있어, 웹 개발자는 쉽게 HTML을 커스텀 동작과 캡슐화된 디자인을 가진 새로운 엘레멘트로 확장할 수 있습니다. 명세 웹 컴포넌트는 네 개의 주요 명세에 기반합니다. Custom E.. 웹 컴포넌트란? (Web Component, custom element, shadowdom, template...) 웹 컴포넌트란? 바닐라 JS/HTML/CSS 등 웹표준 기반 언어를 사용하여 재사용 가능한 구성 요소를 만드는 APIs 무엇을 할 수 있을 까? 프레임워크에 종속되지 않는 독립적이며 재사용 가능한 컴포넌트 라이브러리 만들기 장점 - 커스텀화 - 재사용화 - 캡슐화 필수 개념 Custom element HTML을 확장하여 새롭게 커스텀 엘레멘트를 만들 수 있도록 지원하는 JS APIs. 라이프사이클도 지원. class AppDrawer extends HTMLElement { ... } window.customElements.define('app-drawer', AppDrawer); Custom Elements LifeCycle Methods - constructor() : 엘레멘트의 인스턴스가 생성되거나 .. terminal에서 code . 으로 vscode 열기 터미널에서 해당 파일을 바로 vscode로 여는 방법 1. vscode를 켜고 command + shift + p를 눌러 'shell command'를 검색하면 아래의 그림처럼 code 로 path를 설정하기가 나온다. 2. 가이드를 따라 설치를 완료하면 끗! 해당 경로에서는 .으로 , 직접 파일명을 써줘도 된다. code . code ~/.zshrc 이전 1 2 3 4 다음
프론트엔드 개발자의 주머니에는 뭐가 들었을까?
