본문 바로가기

전체 글

 (152)
tailwind-styled-components ✅ 왜 쓰게 되었는가 tailwind-css 를 배우고 적용시키는 공부를 하던 중, tailwind를 쓰기 전 styled-components 를 쓸 땐 몰랐던 단점을 알게 되었다. Home Prologue Wines MyPage Log in Resister 😶😶😶😶😶😶😶😶😶😶😶😶😶😶😶😶😶😶😶😶😶 ❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔ 지저분하다. 정말.. 따로 css 와 분리하지 않고 바로 적용할 수 있다는게 tailwind의 장점이긴한데.. 이건 좀 아니지않나싶다. 그래서 찾은게 tailwind-styled-components 이다. ⛏ 설치하는 방법 Using npm npm i -D tailwind-styled-components Using yarn yarn add -D tailwi..
dotenv란? ✅ 환경변수란? 환경변수는 OS 입장에서 해당 프로세스를 실행시키기 위하여 참조하는 변수 우리가 컴퓨터로 하는 모든 작업들은(게임, 메모장 등등..) OS라는 프로그램에 의하여 실행되는 자식프로세스인데 이 프로세스들을 실행시킬 때 OS 입장에서 참조하는 변수가 바로 환경변수임 ✅ dotenv란? dotenv는 환경변수를 .env 파일에 저장하고 process.env로 로드하는 의존성 모듈임 dotenv를 사용하는 이유는 개발을 하는 과정에서 서버주소, 고유 API KEY 값 등 필요한 정보들을 저장하게 된다. 그리고 이러한 정보들의 보안은 굉장히 중요하다. dotenv 패키지를 이용하여 환경변수 파일(.env) 을 외부에 만들어 접근할 수 있게한다. ✅ dotenv 주의사항 꼭 .gitignore 파일에..
모듈(module) 시스템 정리 ✅ 모듈 시스템이 왜 필요한데? 기존에는 html 파일에서 태그를 이용하여 필요한 자바스크립트 파일을 불러왔다. 이렇게 하니 html 파일에서 불러온 여러 자바스크립트 파일들이 서로 다름에도, 서로가 의존적이게 되었고 이에 더해 파일들을 로드하는 순서까지 중요해졌다. 이러한 여러 단점을 보완하기 위해 등장한 것이 모듈 시스템이다. 외부에서 사용할 수 있게 특정 함수나 오브젝트 등을 모듈화 하고, 해당 모듈을 사용하려는 쪽에서는 필요한 모듈만 불러와서 사용하면 되는 것이다. 모듈 시스템에는 AMD, CommonJS, ES6 등이 있다. ✅ CommonJS CommonJS 포맷은 Node.js 의 표준이다. 내보내기의 경우 expors 및 module.exports를 사용하고, 가져오기의 경우 require..
Nullish Coalescing (?? 연산자) 와 Optional Chaning(?. 연산자) nullish coalescing은 ES2020에서 추가된 새로운 문법이다. 왜 추가되었을까? || 연산자를 통한 기본값 처리의 문제점 우선 Javascript의 falsy 값엔 다음과 같은 것들이 있다. undefined, null, false, 0, "", NaN ... 등등 || 연산자는 좌항이 falsy 한 모든 경우에 우항을 선택하게 된다. 0 || 3 // 3 undefined || "unknown" // "unknown" 그래서 위와 같은 예제의 경우 0 의 결과를 원하더라도 무조건 3을 반환하게 된다. ?? 연산자를 통해 위의 결과를 방지하자 ?? 연산자를 사용하면 nullish 즉, undefined와 null 에 대해서만 기본값 처리를 할 수 있다. 즉, 좌항이 undefined와 nu..
Swagger 왜 스웨거를 사용해야하는가? How to model RESTful API? => Swagger Editor How to document RESTful API? => Swagger UI How to keep code and docs in sync? => Swagger Codegen How to make API adoption easy? => Swagger Codegen OpenAPI Specification OpenAPI 3.0 : API의 버전정보 info : General API information. description, contact, url 등등 servers : Provides server connectivity information. 서버에 대한 정보 security : Declares se..
3. 헷갈리는 용어 정리 upstream 가장 근본이 되는 레포 fork 당한 레포 origin fork로 인해 생성된 내 계정에 있는 레포를 origin 이라함 위 그림을 보면, Larry/Recipes = upstream 이고 Myaccount/Recipes = origin git remote add origin 형식으로 원격저장소를 추가하는데, origin은 에 해당하는 레포를 의미함 main( =master) 레포에서 default branch를 main branch로 명명함 checkout 깃에서는 항상 작업할 브랜치를 미리 선택해야한다. 맨 처음에는 메인 브랜치가 선택되어 있는데 다른 브랜치로 전환하여 작업할 때 사용하는 명령어가 checkout이다. - (1) git branch 브런치 생성 - (2) git che..
2. Fork 와 clone 의 차이점 Fork GitHub에서 오픈소스 프로젝트에 기여하거나, 협업을 진행할 때 fork를 이용하게 된다. fork는 다른 사람의 repository를 내 소유의 repository로 복사하는 일이다. 따라서 원래 소유자의 remote repository와 내가 fork한 remote repository 사이에도 upstream 과 downstream이라는 관계가 형성된다. 그래서 보통 원래 소유자의 remote를 말할 때 upstream, 내가 포크한 remote를 말할 때 origin 이라는 용어를 사용한다. 1. local과 origin의 관계에선 local이 downstream, origin이 upstream이었는데, 2. fork한 repository를 기준으로 보면 origin이 downstream..
1. remote repository 와 upstream 들어가기 전 Git 은 '분산 버전 관리 시스템' 중 하나이다. 버전 관리 시스템에서 '분산'이란 사용자가 원격 서버를 거치지 않고도 버전을 관리할 수 있다는 뜻으로, 중앙집중식인 서버-클라이언트 모델과 비교했을 때 갖는 가장 큰 특징이다. Gi! != Github Github는 Git을 바탕으로 하는 코드 호스팅 플랫폼이다. GitHub, GitLab 처럼 보통 네트워크 상의 서버에 있는 저장소를 remote repository 라고 부른다. 그리고 이런 remote에 있는 저장소를 git clone 하거나, git init 으로 생성해서 로컬에 존재하는 repository를 local repository 라고 한다. Local & Remote 편의상 로컬 머신에 존재하는 모든 repository는 l..

티스토리툴바