Den`s blog

Svelte 에서 스타일 유효범위/Hash/전역에 대해서 알아보려고 한다. 먼저 아래와 같은 두개의 코드를 가진 파일이 있다. App Shin Den People Component Shin Den 이 것의 결과는 오른쪽과 같다. Svelte 에서 Style Code 는 해당 컴포넌트 (파일) 내에서만 유효하다. 또한, 개발자 도구를 열어서 요소를 보면 조금더 특이 한 것을 알 수 있다. 위 사진에서 보는 것과 같이 스타일이 적용된 ul 태그에 people 클래스 외에 svelte-1367bgx 라고, 이상하게 적힌 클래스가 있는데 이것이 Style Hash 이다. 이것으로 유효범위를 만들어낸다. 그렇다면 전역으로 영향을 끼치게 하려면 어떻게 해야할까? 이렇게 선택자를 :global 로 감싸주면 된다 ! ..

LifeCycle 얘기할 때 tick 이 거론되기도 하는데, 나는 이걸 lifeCycle 에 넣어야 하나~ 애매하긴 하다. tick 에 대해서 알아보자. 1. Svelte 에서의 반응성 Svelte 에서 반응성을 갱신하기 위해서는 할당연산자 (=) 를 사용해야 한다. 즉 변수에 값이 새로 대입되면 화면이 갱신된다는 것이다. 아래와 같은 코드가 있다고 보자 Are you {name} 화면에는 처음에 Are you man 이 표기가 돼있을텐데, 이곳을 클릭하면 Are you man ? 으로 바뀌게 된다. h1 부분을 클릭하면 handler 가 작동되고 그 안에서 name 에 새로운 스트링을 할당 하게 되면서 반응성을 가지게 되고 화면이 갱신되게 된다. 그러면 로그를 찍는 부분 (console.log) 에서 ..

불변성 (Immutability) 이란, 문자 그대로 변하지 않는 것을 의미한다, let a = 1 란 것을 보면, a 라는 변수에 1을 대입하는 건데, 여기서 1은 원시데이터 이다. 1. 원시데이터 (Primitives) 와 불변성 원시데이터는 대표적으로 Number, String, Boolean, Null, Undefined, Symbol 등이 있으며, 이 원시데이터(타입)은 불변하다. 그래서 let a = 1를 할때, 1이 메모리에 들어가게 되고 a 라는 변수는 1 의 메모리주소를 참조할 뿐이다. 여기서 let b = a 를 하면, b는 a 가 바라보고 있는 메모리를 같이 바라보게 된다. 근데 여기서 a = 3 을 하게 되면, 3 이 새로운 메모리에 들어가고 a 는 3이 들어간 메모리주소를 참조하게..

오늘은 틸드 연산자 (~), Double tilde 에 대해서 알아보고자 한다. 1. ~ ~ 는 Bitwise NOT 연산자로 비트연산자이다. NOT 이기 때문에 모든 0 과1 을 뒤집는다. 이에 대해 설명해지면 이야기가 길어지니 중략하고 결과만 얘기하면, ~를 붙이면 -(n+1) 이 되게 된다. 이를 제일 잘 활용하는 방법은 -1 에 ~ 를 붙여 0을 만드는 것인데, indexOf 에 가장 잘 활용이 된다. indexOf 는 글자가 포함됐냐를 찾는 함수로 다들 알고있을텐데, 없는 경우에는 -1 를 반환한다. 그래서 여기에 ~ 를 붙이면 0. 즉, false 가 되기 때문에 활용이 좋다 if (!~"Foo".indexOf("find")) { // find 가 없는 경우에 BlahBlah } 2. ~~ ~..

Svelte LifeCycle 은 아래와 같다. 이 중, onMount 와 onDestroy 에 대해서 알아보고자 한다. onMount 는 간단하게 설명하면 Component 가 연결될 때 (화면에 보일때) 라고 생각하면 되고, onDestroy 는 연결이 해제될때, 정확하게는 해제(분리)되기 직전이라고 생각하면 된다. 백문이 불여일견, 코드로 보도록 하자! {toggle = !toggle}}>toggle {#if toggle} {/if} Something 위 와 같이 App 파일에서 toggle Boolean 값에 따라 Something 컴포넌트를 사용하는 간단한 프로그램이 있다. Toggle 버튼을 누를 때마다 Something 글자가 나타났다, 사라졌다를 반복할텐데 이 간단한 프로그램으로 onMou..

그리고 연산자 (이하 &&) && 는 조건을 덧붙일 때 보통 사용한다. 그러나 추가적으로 사용될 수 있고, 코드를 짧게 유지할 수 있는 부분이 있어서 알아보고자 한다. 배고프다면 밥을 먹어야 한다. 위의 글을 간단하게 코딩을 해보자 ! 1. 가장 보편적인 방법 if (areYouHungry()) { eatSomething(); } 가장 간단하게 구현할 수 있는 방법은 위와 같을 것이다. if 조건문을 활용해 조건이 충족됐는지 확인 후, 그에 따른 실행을 하는. 2. 삼항연산자를 활용한 방법 areYouHungry() ? eatSomething() : undefined; 함수를 이용하는 경우에 나는 잘 활용하지 않는 방법이지만 위와 같이 삼항연산자를 사용할 수도 있다. 3. && 를 활용한 방법 포스팅을 ..

React 에서 GraphQL을 사용할 때 보통 useQuery를 사용한다. useQuery 란, API 로 치면 API Call 을 하는 것이라고 보면 된다. const ITEMS_QUERY = gql` query allItemsQuery($input: AllItemInput!) { allItems { ok error items { name registeredAt } } } `; const { data, loading } = useQuery(ITEMS_QUERY, { variables: { input: { page: 1, } } }); 위 코드는 GraphQL 에서 allItemsQuery 의 Query가 있고 그 input 으로 AllItemInput 이 있을 경우다. (AllItemInput 은 p..

이번 포스팅에서는 React 에서 화면전환에 사용되는 react-router-dom 에서 useHistory 와 useLocation 에 대해 알아보려고 한다. 일단 react-router-dom 은 별도의 설치가 필요하므로 진행해준다. npm install react-router-dom Router 구성은 생략하도록 하겠다. 1. useHistory Hook const history = useHistory(); const onSearchSubmit = () => { const { searchTerm } = getValues(); history.push({ pathname: "/search", search: `?term=${searchTerm}`, state: { searchTerm, } }); } us..

API 만드는 프로젝트에 Swagger 를 붙여보자 GoLang 에서는 swaggo 를 활용해서 붙일 수 있다. Step1. Install # 복사 스크롤 용의성 go get -u github.com/swaggo/swag/cmd/swag go get -u github.com/swaggo/http-swagger go get -u github.com/alecthomas/template # 복사 스크롤 용의성 swag - Swagger 2.0 의 Go annotations 활용 http-swagger - Swagger UI 를 doc 으로 만들어 줌 template - 뭐 필수란다, 없으면 에러 뜬다고.. Step2. Definition type test struct { A int B string } // @..

M1 에서 Docker 가 되지 않았는데, Preview 버전이 나왔다는 소식을 듣고 헐레벌떡 Go 와 Docker 를 테스트 해보기로 ! 기존에 포스팅돼있던 글을 참고해서 HotReload 기능 까지... Step 1. Preview Download 하기 기존에 도커 설치하던 것과 동일하다. 간간히 버그가 있다고는 하니 언능 정식버전이 나오길 물 떠놓고 기도하자 Preview Download Apple M1 Tech Preview docs.docker.com Step2. Dockerfile 생성 HotReload 를 하기 위해서 reflex 를 이용한다. 여기서 삽질 잠깐했는데, alpine 버전으로 하지 않아서, apk 명령어를 못찾던 일.. 기초지만 늦게 배웁니다. alpine 은 linux 환경을..