Den`s blog

Clicked {count} {count === 1 ? 'time' : 'times'} 버튼을 클릭 시 마다 count 가 증가하고 그게 버튼에 반영돼 변하는 코드이다. 해당 개념은 React 던 Svelte 건 조금이라도 해보면 익숙할 것이다. 여기에서 더 나아가 count 가 변화할때마다 다른 변수가 변화하게 할 수 있다 Clicked {count} {count === 1 ? 'time' : 'times'} {count} doubled is {doubled} $: 를 활용하면 (신기하게도 JS에 유효한 문법이라고 한다) count 가 변경될때마다 double 도 변경되고 이에 따라 맨 아랫줄 p 도 변경이 된다. 더 나아가 뭉쳐있기도 가능하고 조건도 달 수 있다. Clicked {count} {cou..

저장소를 만들고 커밋을 하고 하다보면, 오른쪽 사진과 같이 Javascript, HTML, CSS 이런 것들이 대표 언어가 되버리는 경우가 있다 (사실 많다..) 난 분명 Svelte 로 작성한 것이라구 ㅠㅠ 난 이런거에 되게 예민한 편이라서 어떻게든 바꾸고 싶다. 이를 해결하기 위해서는 .gitattributes 를 활용해야 한다. Attribute로 Merge는 어떻게 할지, 텍스트가 아닌 파일은 어떻게 Diff 할지, checkin/checkout 할 때 어떻게 필터링할지 등 여러가지를 정해줄 수 있다. 이런 것들이 있기는 하지만, 이번에 배워보기에는 너무 양이 방대해서 넘어가도록 하고 글을 작성한 이유만 일단 해결해보자. 굉장히 간단한데, linguist-detectable 만 활용하면 된다. 나..

React 에서도 Component 를 사용하고, 당연히 Svelte 에서도 Component 를 사용한다. 프론트엔드 프레임워크에서 가장 기본적으로 볼 수 있기 때문에 포스팅을 먼저 진행해본다. 내가 React를 Deep 하게 해보진 않아서 모르는 걸 수도 있는데, component 를 만들고 가져다 쓴다고 하더라도 스타일이 적용되지는 않더라, 또한 html 코드 자체를 rendering 해야 하는 경우도 있는데 이때는 @html이 필요하다. This is a paragraph {@html string} This is another paragraph. 이렇게 되면 내 생각에는 p 로 들어가기 때문에 스타일이 같이 적용될거라 생각했는데, Nested.svelte 에서 넘어온것은 먹히지 않더라 또한 내포되..

Truly reactive Svelte 에 대해서 알아보도록 하기 위해 공식 문서를 번역해보도록 했다. (잘할 수 있을런지 모르겠다.. 오역은 따끔하게 알려주세요) After several months of being just days away, we are over the moon to announce the stable release of Svelte 3. This is a huge release representing hundreds of hours of work by many people in the Svelte community, including invaluable feedback from beta testers who have helped shape the design every step o..

Svelte 에 대해서 알아보도록 하기 위해 공식 문서를 번역해보도록 했다. (잘할 수 있을런지 모르겠다.. 오역은 따끔하게 알려주세요) No virtual DOM Let's retire the 'virtual DOM is fast' myth once and for all '가상 DOM은 빠르다'라는 오해를 완전히 없애자. If you've used JavaScript frameworks in the last few years, you've probably heard the phrase 'the virtual DOM is fast', often said to mean that it's faster than the realDOM. It's a surprisingly resilient meme — for e..

이전 포스팅에서 ReactJS 의 Class Component 를 살펴보면서 가장 기초적인 부분들을 확인해 보았다. 이번에는 Updating과 State 에 대해 알아보도록 하자. ReactJS 에서는 State 라는 것을 가지고 있는데, 이 아이는 유동적인 데이터를 사용할 때 써먹는다. 기본적으로 this.state = {}; 위와 같이 사용을 하는데, 이는 private 처럼 사용해야한다, 직접 조작해서는 안되는 뜻! 변경이 필요할 때는 마치 다른 클래스의 setter 를 사용하듯 setState 메소드를 활용해주어야 한다. 그 이유는 Updating과 관련이 있는데, state 가 변경될때마다 ReactJS는 렌더링을 다시 하는데, setState 메소드를 사용하지 않는다면 이 부분을 감지 못하므로..

깃헙 블로그를 만들어보면서 제대로 공부를 시작하기로 했고, 그 일련의 작업들로 기초부터 다지고 있다. 그래서, ReactJS 를 공부를 시작했는데 그 시작에 앞서 ReactJS 에서 가장 많이 사용되는 거로 알고 있는 Component의 생명주기에 대해서 알아보자. 핵심은 render() 함수 인데, 이 함수가 가상돔에 HTML 코드를 써준다 라고 생각하면 된다. ReactJS 의 개념? 이라고 이해했다. render() 를 기준으로 전/후로 나뉘고, 간략하게 표현하자면 mount -> render -> mounted 와 같다. (unmount 는 제외하고.) 이를 함수로 자세히보자면 마운트되면서 constructor() 가 render() 되기전에 실행되며, render() 되고 나면 component..

Channel 은 데이터를 주고 받는 통로라고 볼 수 있다. make 를 통해 선언을 한다 type job struct { title string salary int } func main() { c := make(chan job) } type job struct { title string salary int } func main() { c := make(chan job) } 채널로 값을 전달해준고 받는다고 보면 된다. // 넘기기 (받기전용) chan

Go 에서 Struct 를 주로 이용한다고 했는데, 여기에 메소드도 추가가 가능하다. 말로 설명하면 길어지니 코드부터 보자. // Account account Structure type Account struct { owner string balance int } var errNoMoney = errors.New("can't withdraw") // NewAccount Creates Account func NewAccount(owner string) *Account { account := Account{owner: owner, balance: 0} return &account } // Deposit x amount on your account func (theAccount *Account) Deposit..

Go 에서는 타 언어에서 주로 사용하던 Class 와 Object 가 없다. 그래서 이제 알아야 할 Structure 가 중요한데, 그 전에 Map 에 대해서도 알아보자. Map 기본적으로 key - value 의 형태를 가지고 있고, key 와 value 도 타입이 필요하다. den := map[string]string{"name: "den", "age": "31"} 위의 예제처럼 대괄호 [] 안에 key에 대한 타입을 명시해주고, 그 뒤에 value에 대한 타입도 지정해준다. 그러면 사실 나이는 int 형이어야 하고, 실질적으로는 유동적으로 여러 타입이 가진게 유용할텐데, 그런 것들은 어떻게 해야할까? Structure 위의 문제를 해결해줄 수 있는 것이 Structure 이다. 코드로 살펴보자 ty..