kasumil의 코딩 공작소

- 오늘 학습한 내용. 이전에 언급했던 절대 경로의 문제 해결. 결국 오늘 챕터5에서 해결이 안되길래, 저자한테 직접 문의했다. github.com/dev-yakuza dev-yakuza - Overview [frontend] react, reactnative, typescript [backend] laravel, django, nodejs, rails [infra] docker, kubernetes, gcp [blog] https://dev-yakuza.github.io/ - dev-yakuza github.com 저자의 깃허브. 설정대로 다 하면 작동되어야 하는데, 특이하게도 작동이 안되었다. 왜지? 하다가 문의했는데, 원인으로 추정되는 이유로는 내가 바벨 플러그인을 인스톨하지 않았다는 점과 그리고 ..

- 오늘 학습한 내용. 타입스크립트를 적용하여 리액트 네이티브를 통해서 만들어보았다. 코드의 내용은 간단하다. 그러나, 타입스크립트를 적용하는 것도 해봤지만 내가 직접 짤 수 있는 능력은 늘어나고 있는 것인가? 그리고 작동에러가 너무 많다. 상대경로에서는 작동이 잘되는데, 절대경로에서 왜인지 에러가 너무 잦다. 못 찾아서 일일히 상대로 잡아서 바꾸어주었다. youtu.be/wQ0L7w54RTY - 소감 이건 완전 버그와의 싸움이다. 절대 경로했다고 에러가 뜨는데 node창을 보면서 원인 파악을 해야한다. 그래도 expo보단 편해서 좀 낫다고 생각한다. ++ RN의 절대경로 문제는 5장에서 해결했다.

- 오늘 학습한 내용. VIEW = div Text = 문장들은 꼭 text컴포넌트로 감싸야한다. 리액트는 글자 이렇게 쳐도 되었는데, RN은 감싸야한다. Image = img 태그 Textinput = input태그 ScrollView = 스크롤기능이 리액트는 자동으로 생겼지만, RN은 생기지 않기에 꼭 감싸줘야한다. StyleSheet = 리액트에선 css를 통해 css를 설정했지만, RN은 Stylesheet를 통해서 사용한다. Button = RN에도 Button 태그가 있지만, 커스텀이 까다롭기에 touchableopacity를 사용한다. NavigationContainer = 리액트에서는 ROUTER의 역할이고 RN에서는 NavigationContainer로 사용한다. navigation.na..

위코드를 다니면서 느낀 불편함을 알리기 위해서 적는다. 혹시 노트북을 뭐 사야할지 고민한다면 일말의 주저함이 없이 맥북 프로를 추천한다. 필자는 이전 기수에서 서피스를 쓰고 있길래 필자도 동일하게 서피스프로4를 들고 갔다. 지금 최근의 서피스 프로 시리즈가 7인걸로 아는데, 필자가 등록 당시만해도 6이 주류이고, 7이 갓 출시한 상태였음. 서피스 프로 시리즈의 경우 필자는 추천하지 않는다. 최소 서피스 북급은 되어야 편하다.(성능적으로 8GB는 모자르다.) 맥북이 없고, 백엔드 개발자라면 최소 리눅스는 먼저 설치하고 가자. 맥북이 있고 백엔드라면 그냥 들고가면 된다. 프론트는 맥이면 좋고, 아니어도 상관은 없다. 추천 노트북 사양 최소 램 16GB. 8GB로는 크롬 켜고 코드 작동하는데 빡세다... (개..

테슬라 클론을 진행중이다. svg의 색상반전을 하고 싶으면 filter : invert(1); 먹이면 된다. 하지만, svg에서 호출에서 막혀버렸다. 무슨 오류인지 svg라서 해당 이미지가 불러와지지 않는다. img를 불러내서 색상반전을 먹이면 되는데, 왜 안되는건가 싶어서 찾아보니 svg는 컴포넌트로 바꾸어서 호출해야한다고 한다. 이거 편리해지라고 만든거 같은데, 어째 더 불편하다;;; 그리고 로그인 버튼은 왜 문제가 생긴건가? 해결했다. 백그라운드 이미지로 설정했을때, 이상한 테두리가 생기는데 img태그로 사용시에는 그냥 테두리 없이 잘나온다. 이유는 모르겠다...?????!!! 오른쪽 테슬라 계정 부분은 position에 이상한 -40이 있길래 뭐지 싶어서 찾다보니 css부분에 margin-bott..

- 오늘 학습한 내용. 자바스크립트는 스크립트 언어라 즉석에서 코드를 작동할할 수 있다. REPL라는 콘솔을 제공 Read 읽고 Evaluate 평가하고 Print 출력하고 Loop 반복한다. 모듈 모듈이란? 특정한 기능을 하는 함수나 변수들의 집합. 리액트 컴포넌트처럼 기능마다 코드를 분리하여 작성하는 것. 해당 함수를 재사용이 가능하다. function require() { } // require함수를 쓰려면 위처럼 따로 함수를 작성해야하는데, // node에서 require함수를 기본으로 제공해줘서 그냥 써도 된다. const { odd, even } = require("../var.js"); node에는 import와 export 하는 문법이 있고, 자바스크립트에도 ES2015가 들어오면서 imp..

- 오늘 학습한 내용. github.com/kasumil/Redux_tutorial kasumil/Redux_tutorial Contribute to kasumil/Redux_tutorial development by creating an account on GitHub. github.com 리덕스 튜토리얼 인덱스.js는 두번 만든다. 하나는 실질적으로 1번은 index.js이고, 다른 하나는 2번이 루트 리듀서의 역할을 한다. 후자는 ducks타입으로 해당 액션(modules) 폴더에 포함되어있다. 이름만 index.js이고 rootreducer로 설정한다. 실제로는 rootreducer로 해도 된다. 프레젠테이션 컴포넌트(components)는 단순 ui만 표시한다. 해당 컴포넌트에 useState를..

- 오늘 학습한 내용. 1. void란 무엇인가? 값을 반환하지 않는 함수는 반환타입이 void 2. 함수 시그니처 변수에도 타입이 있다. 함수도 타입이 있는데, 그것을 함수 시그니처라고 한다.

위코드에서부터 이거 적용하려다가 계속 에러나서 끙끙거렸다. 결국 eslint만 적용해서 썼는데, 이에대한 포스팅을 하려고 한다. velog.io/@velopert/eslint-and-prettier-in-react#eslint-%EA%B2%80%EC%82%AC-%EB%AC%B4%EC%8B%9C%ED%95%98%EA%B8%B0 리액트 프로젝트에 ESLint 와 Prettier 끼얹기 ESLint 와 Prettier 를 리액트 프로젝트에서 제대로 적용하여 코드를 깔-끔-하게 관리해보는 방법을 배워봅시다. velog.io 솔직히 몇시간동안 헤맨거 이거 한방에 해결. 그리고 사용된 프로퍼티와 값에대한 자세한 설명이 들어있어서 해당 링크를 추가함. velog.io/@mayinjanuary/Next.js-%EC%8..

- 오늘 학습한 내용. CSS 선택자 종류 universal * type tag ID # class . state : Attribute [] display block : 화면에 보이도록 하는 고정. none : 화면에서 숨기는 것. 렌더링 하지 않음. null : 화면에 존재하나 보이지 않는다. position 2020/06/23 - [코딩/위코드 코딩과제] - position 속성 - relative, absolute, fixed position 속성 - relative, absolute, fixed Position 속성 relative absolute fixed static(앞서 코딩학습 2일차에서 잘 안쓴다는 속성이 static이다.) static static은 기본값입니다. position: st..