Den`s blog

gitHook 실행 오류 githook 을 처음에 설정하다보면 아래와 같은 메시지를 볼 경우가 있다. hint: The '.git/hooks/pre-commit' hook was ignored because it's not set as executable. hint: You can disable this warning with \`git config advice.ignoredHook false\`. 실행할 수 없다는 것인데, 이는 권한부여를 해주면 된다. 아래 명령을 입력해주자. chmod ug+x .git/hooks/\*

오늘은 Custom Button 을 만들어보고자 한다. UI를 만들다 보면, 컴포넌트를 만들텐데 만들고자 하는 서비스에 따라서 Custom Component 를 만들고자 하는 니즈가 생길 것이다. 오늘은 Custom Button 을 만들기 위한 핵심 기능 두가지를 알아보고자 한다. 1. $$restprops Element 들이 가지는 기본 속성들이 있고, 더 나아가 UI Library 를 사용하다 보면 그 곳에서 활용할 수 있는 props/속성 들이 있을 것이다. 예를 들어, attraction Library 를 보면, Button 에서 filled, outline 등 여러가지 속성을 활용할 수 있는 데, Library 그대로 사용하는 것이 아닌 Custom 을 하고자 한다면 어떻게 해야 할까. 아래 코..

오늘은 Svelte 를 typescript 그리고 svelte materialUI 설치까지 진행해보고자 한다. 1. Svelte 설치 하기 명령어를 통해 svelte project 를 설치하면 끝 ! npx degit sveltejs/template your-project cd your-project 그런 다음 package 설치해주고, 실행해 보자. npm i npm run dev 하고 나면 (보통 8080 포트) localhost:8080 에서 아래 화면을 볼 수 있다. 이렇게 설치~실행까지 완료해 보았다. 2. Typescript 설치 나는 typescript 를 좋아하기 때문에 svelte 에 ts 를 적용하고자 한다. 이미 프로젝트에서 준비가 다 되어 있는 상태이기 때문에 아래 명령어를 입력해주..

Singleton Pattern 은 가장 흔하게 볼 수 있는 디자인 패턴 중에 하나이다. 정의를 간단하게 보자면 아래와 같다. 클래스를 하나의 객체로만 제한하는 것 간단하게 Go 코드로 보면 아래와 같다. type User struct { name string } var user *User func init() { user = &User{name :"den"} } func GetUser() *User { return user } user 라는 변수는 init 이라는 함수안에서만 생성이 되고, GetUser 를 통해서만 접근이 가능한 코드이다. Go 에서는 다른 패키지의 함수를 호출할 수 있는 조건이 대문자로 시작하는 경우이기 때문에 다른 패키지에서는 GetUser 만 호출이 가능하다. 그렇다면 init ..

Go 에서 변수를 생성/할당하는데는 익히 알고 있듯 2가지 방법이 있다. := 와 = 를 활용하는 것인데, 검색하면 쉽게 나오는 두 방식의 차이에 대해서 먼저 간단하게 설명해보면 아래와 같다. 1. = var a int = 5 var 키워드로 변수임을 알려주고, 변수명을 작성하고, 타입을 작성한 뒤, 선택에 따라서 값을 할당해주면 된다. 2. := a := 5 1번의 예제와 동일한 효과를 짧게 내는 구문이다. := 의 공식 명칭은 short assignment stament 이다. 그런데, 2번에는 원래 재할당이 되지 않는다. 재할당을 하는 경우에는 아래와 같은 에러를 보게 될 것이다. := 의 왼쪽이 새 변수가 아니라는 뜻이다. 이 말인즉슨, 이미 선언된 변수에는 사용이 불가하다는 것인데, 2개, 3개..

아직 개발자가 되었다고 말하기도 힘든데, 어떻게 하다보니 파트를 이끌게 된지도 시간이 많이 지났다. 이제는 공식적으로 "부"이긴 하나 팀을 이끌게 되었다. 스스로를 잘 돌보지 못한다고 생각하는데, 어떻게 해야하지 고민이 많았는데, 고민만 하지 말고 책이면 책, 강의면 강의 혹은 이미 이끌고 있는 사람들에게서 학습을 하려고 하는 중이다. 해당 태그의 글들은 그런 학습들을 정리하는 것이고, 나를 바꿀 수 있는 열쇠가 될 것이다. 초보 리더에게 필요한 핵심역량 리더십이란, 리더의 영향력에 대한 타인(추종자)의 평가 즉, 추종력 스스로 얘기하는 것이 아닌 타인의 평가 비전을 설정하고, 구성원들의 행동에 영향을 미치고, 구성원들이 기꺼이 실행하도록 개인과 조직을 변화시키는 과정 리더십 필수역량 1. 커뮤니케이션 ..

오늘은 Golang Version을 최신화 하는 법에 대해서 알아보고자 한다. 나는 Homebrew 를 통해 Go 를 설치하였다. 일단 현재 Go Version 을 확인해보자. $ go version go version go1.16 darwin/arm64 현재 깔려 있는 것은 1.16 Version 이다. 그렇다면 최신 버전은 몇일까 ? brew info 명령어를 통해 확인하니, 1.17.3 이란다. 하자! 일단 brew 를 최신버전으로 update 해주고, upgrade go 를 해주면 된다. $ brew update // 시간이 많이 소요될 수 있음 $ brew upgrade go 최종 확인!

오늘은 Cypress 를 이용하여 E2E 테스트를 해보고자 한다 1. cypress Cypress 란, 간단히 설명해서 프론트엔드에서 E2E 테스트를 할수 있게 도와주는 것이다. 바로 아래와 같이 일단 내가 해본 환경은 React + typescript 환경이다. 2. cypress 설치 및 환경설정 npm install cypress 그러고 나면 cypress 폴더가 생길텐데 그 아래에 나는 typescript 로 진행을 하니, tsconfig.json 를 생성해준다. { "compilerOptions": { "allowJs": true, "baseUrl": "../node_modules", "types": [ "cypress" ], "outDir": "#" }, "include": [ "./**/*...

컴포넌트/페이지 Testing 프론트엔드쪽 작업을 할때에 접하게 되는 것 중에 @testing-library 라는 것이 있다. 오늘은 프론트엔드 테스팅을 할 때 페이지 렌더 테스트 하는 방법에 대해서 알아보려고 한다. 필자는 React (w/ Typescript) 로 진행하였다. 테스팅환경 개요 컴포넌트를 테스트할 예정이고, 해당 컴포넌트가 하는 일은 로그인 상태에 따라서 렌더링할 라우터를 결정한다. 간단한 코드 샘플을 보자 export const App = () => { return isLoggedInVar ? : } 위와 같이 렌더링을 하는데, 내가 테스트 할 것은 isLoggedInVar 에 따라서 분류가 잘 되나 만하고 싶다. 저 라우터들 안에서 지지고 볶고 하는 것은 의미가 없다. 그러려면 저 ..

테스트 요새 테스트, 더 나아가 TDD 는 개발자의 필수 덕목처럼 여겨지고 있고, 그에 따른 강의가 나오거나 채용조건에 필수로 분류하는 곳이 많아지고 있다. 테스트를 왜 해야하는지에 대해서는 나중에 다뤄보도록 하고 오늘은 테스트를 진행하다가 보면 만나게 될 Mock 에 대해서 알아보자. Mock 구글 번역기에 돌려보면 "모조품" 이라고 해석이 된다. 테스트에서도 동일하다 실제 객체를 만들기엔 테스트하려는 것의 본질을 해치거나 커플링이 너무 많이 돼 구현이 어려운 경우, 데이터베이스 연동이 필요 한 경우, 가짜를 만들어 사용해야 하는데 이것을 Mock이라 합니다. 간단한 예제 const myMock = jest.fn(); console.log(myMock()); // > undefined myMock.mo..