kasumil의 코딩 공작소

테슬라 클론을 진행중이다. 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..

- 오늘 학습한 내용. callback 함수 : 다시 부르는 함수. 해당 값을 조건을 제공하여, 특정조건이 구현되면 작동하는 함수이다. 주로 setTimeout 함수를 이용하여, 시간조건 등을 사용. 동기 문법 1,2,3의 순서대로 작동하는 방식이다. .then, .catch등으로 사용할 수 있다. 비동기 문법 1,2,3을 순서 상관없이 그냥 작동하는 방식이다. 쓸데없이 기다릴 필요가 없어 선호되는 방식. Promise state : pending(작동 중) → fulfiled or rejected 1. Producer // 새로운 promise 함수를 생성할때, 그 함수는 자동적으로 작동한다. // 즉, 클릭시 발생하는지 여부를 확인해야한다. const promise = new Promise((reso..

- 오늘 학습한 내용. api : 브라우저 내에서 작동하는 함수 (application programing interface) use strict : 자바스크립트 내에서는 할당하지 않아도 에러를 내지 않는다. 그렇기에 선언되지 않은 변수를 사용하는 문제를 에러를 나타내어 문제를 잡아 줄 때 사용된다. 'use strict'; async : 비동기로써 해당 기능을 불러올때, 작동한다. 그러나 자기 멋대로 순서 없이 작동하므로 오류를 낼 가능성이 있다. 불러올 때 순서가 다름에 따라서 해당 기능을 구현할 때, 에러를 낼 가능성이 있다. 2번째의 b.js가 2번째로 불러왔음에도 속도가 빨라 제일 먼저 끝났다. 하지만, 3번째는 아직도 불러오고 있는 상태. 그러므로 3번째의 기능을 유저가 건드렸을때, 기능이 있..

- 오늘 학습한 내용. hoisting (밑에서 top으로 끌어올리다) Var 변수나 function에 해당되는 기능으로 age = 1; console.log(age) var age; console.log(age) 분명 1번째 console.log에서 var 할당이 안되었음에도 이를 아래에서 선언하였기에 최상단에서 작동되게 끌어올려지는 것을 의미한다. 원래는 호출이 되지 않고 에러를 내어야 한다. 하지만, var는 에러 없이 정상 작동한다. 이를 해결하기 위해서 나온 let이나 const에서는 없는 기능. var의 경우 로컬스코프를 무시하는 게 가능하다.(이런 것을 방지하기 위해서 ES6에선 let이 나왔다.) { var age= 15; } console.log(age); // 15 왜 이러한 것이 문제..

- 오늘 해야할 일 리덕스 학습. - 평가 및 후기 예전 위코드 다닐때 학습을 하긴했는데, 솔직히 잘 적용한다고 할 수 없어서 이제 다시 복습하고 있다. 역시 복습하기 시작하니까 이해하는 건 뭐지 싶기도하고, 다시 보니 기존에 이해할 수 없는 것들을 제대로 이해하기 시작하였다는 것. 솔직히 이것만 보면 된다. 기존에 리액트 리덕스는 해당 내용이 바뀌면 render함수가 다시 render를 작동하게 할 수 있었다. 그런데, 리액트는 해당 한페이지에서 작동되는 것이 아니라 여러모로 찢어놓게 작동한다. 해당 컴포넌트에서 생기는 값들을 통제하는데 있어서, 해당 컴포넌트에서 동작은 자유롭다. 하지만, 다른 곳에서 해당 값을 보내기는 어렵다. 해당 컴포넌트에서 생기는 값을 반대편으로 보내기 위해서 엄청나게 고생을 ..