Ch1. CSS

1. Basic Reset using the universal selector

• box-sizing: border-box; 요소의 크기를 테두리와 패딩을 전부 포함해서 적용시킨다.
• universel selector를 통해 모든요소의 마진과 패딩을 없애준다.
• padding은 상속되지 않으므로, body에만 padding을 넣어준다
• 폰트와 색깔은 상속되므로, body에 선언해준다.

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: "Lato", sans-serif;

font-weight: 400;

font-size: 16px;

list-style: 1.7;

color : #777;

padding: 30px;

}

2. How to set project-wide font definitions

• body에 전체적으로 사용할 폰트와, 폰트사이즈, 색상등을 설정해준다.

3. How to clip parts of elements using clip-path

• clip path를 통해 다각형으로 요소를 자를수 있다. 설정한 svg를 통해서도 설정가능하다.
• #clip-path { clip-path: circle(40% at 50% 50%); background : url("http://resrc.devdic.com/img/bysize/below_200/01.png") center/cover; width : 350px; height : 350px; }
• https://bennettfeely.com/clippy : clip path를 시험해볼 수 있는 사이트

4. etc

• background-size : cover : 가로세로 비율을 맞추면서, 요소를 전부 덮을 수 있도록 확장시킨다.
• background-position : top : 백그라운드의 위치를 조정해주는 것으로, top은 키워드 밸류이다. 그 위치를 기준으로 짤리는 이미지를 결정한다.

import {Input} from 'antd'

export default function App(){
	const inputRef = useRef<Input>(null);
    return (
    	<Input ref={inputRef}/>
        )
    }

라고 쓰면 다양한 오류가 발생한다.

import {Input} from 'antd'
import type {InputRef} from 'antd'
export default function App(){
	const inputRef = useRef<InputRef>(null);
    return (
    	<Input ref={inputRef}/>
        )
    }

라 쓰면 된다.

출처 : https://stackoverflow.com/questions/72577119/type-a-is-not-assignable-to-type-b-in-typescript-with-antdesign

이 분도 같은 강의 들으면서 deprecated나,  unused된 사용법 때문에 질문 하신것 같다.(코드가 똑같다.)

그 강의가 리액트 강의를 한번에 들을 수 있어서 장점이지만, 보다보면 최신 버전에서 바뀐게 많고, 버전 병기가 안되어 있어서, deprecated나 unused된 부분을 고치면서 듣는게 힘들다.

뭐 이런 부분에 대해 찾아가면서 공부하는 것도 공부의 일환이지만,

초보입장에서 따라치면서 배우는데, 빨간줄이 보이고 취소선이 보이면 당황스럽다.

직접적으로 질문을 할수도 없고, 강의에 대해서 최신버전 업데이트가 안 보여서 최신버전을 원하는 사람에게는 비추하고 싶은 강의가 되었다.

• 설치하다보면 Storybook 명령어가 실행 안될때가 있다.
• 그 이유는 에러로그를 쳐보면 package.json의 type이 module이라 생기는 문제이다.
• 그래서 이 부분을 commonjs로 바꿔주거나 삭제해주면 되다.

• 그리고 스토리북을 실행해보면 스토리북 화면이 안보이고, 일반 react 실행했을때 화면이 뜨는 경우가 있다.
• 그때는 rm -rf node_modules/.cache 를 해주면 된다.
• 아니면 --no-manager-cache 라는 flag를 줘서 캐슁된걸 사용하지 못하게 하면 된다.

1. Union Type

function combine(input1 : number|string,input2 : number|string){
    // union type으로 했을시, 타입스크립트에서는 여러개의 타입이 있는 사실만 알지,
  // 그안에 무슨 타입이 있는지 몰라서 경고 문구가 나온다.
    //const result = input1 + input2;
    let result;
    if ( typeof input1 === 'number' && typeof input2 === 'number'){
        result = input1 + input2;
    } else {
            result = input1.toString() + input2.toString();
  }
    return result
}
const combineAges = combine(20,36);

• 서로 다른 종류의 값을 사용할 때 사용하는 타입
• union type으로 했을시, 타입스크립트에서는 여러개의 타입이 있는 사실만 알지,
  그안에 무슨 타입이 있는지 모른다.
• 그러므로 union 타입을 썼을 때, 다른 타입의 메소드를 쓸려면 타입가드로 타입스크립트에 무슨 타입인지 알려줘야한다.

2. Literal type

• literal의 사전적 정의는 정확한이다. number string같이 넓은 범위의 타입을 지정하는 것이 아닌 특정 데이터 변하지 않는 데이터를 지정하는 것이 Literal type이다.
• 추가적인 공부 : Template Literal https://toss.tech/article/template-literal-types

3. Type aliases

• 사용자가 지정한 타입을 만들어준다.
• 자주 쓰이는 union type들을 타입 별칭으로 동일한 유형을 설정 해줄수 있다.

type 타입별칭 = 타입1 | 타입2 | 타입3 ... | 타입N

4. function type

• 함수에 매개변수에 type을 설정하는 것 뿐만 아니라, return되는 반환값에도 설정이 가능하다.

function add(n1 : number, n2: number) : number {
        return n1+n2
}

• 타입스크립트가 추론이 가능한 반환 타입이면, 반환 타입을 명시하는 것보다. 타입스크립트가 타입을 추론하는게 좋다.
• 아무것도 반환하지 않을때에는 void 로 한다.
• undefined 라는 타입이 타입스크립트에는 존재하지만, 함수에서 반환문이 없으면, 기술적으로는 undefined 가 되지만 반환타입에는 void를 써야한다.
• 만약 함수에서 return 으로 아무 반환값을 주지 않는 것을 반환할때에는 undefined 를 함수타입으로 쓸순 있지만, 이때에도 void 도 적용이 가능은하다.

5. functions as type

// Bad situation
function add(a : number, b: number) : number{
    return a+b;
}
let combine;
combine = add;
console.log(combine(5,3)); // 8
//cursor on combine : combine type is any;
combine = 5;
// therefore combine can insert any type

• 위와 같은 상황에서 함수를 할당했을때, 변수에는 별다른 타입을 병기하지 않았기 때문에 any 타입이 되고, 우리가 원치 않는 타입으로 변화할수가 있다.

let combine : Function;

let combine : (a:number,b:number)=> number;

• 해결방법은 2가지 이다.
• 첫번째는 Function 타입이라고 명시하는것이다.
• 하지만 이 방법은, 어느 함수가 와도 되므로, 좋지 않은 방법이다.
• 두번째는 함수형태의 타입을 지정해주는 것이다.
• 화살표 함수와 비슷하게, 인수로 들어오는 타입과 return 되는 타입을 명시해주면 된다.
• 매개변수는, 실제 함수의 매개변수 이름과 동일할 필요가 없다.
• 위와 같은 구조의 함수 모양일때에만 할당할수 있게 된다.

6. callback

function addAndHandle(n1 : number, n2 : number, cb : (num :number)=>void){
        const result = n1 + n2;
      const notUsed = cb(result);
}

addAndHandle(10,20,(result)=>{
    console.log(result) 
    return result})

• 콜백함수 의 타입을 결정지어, 미리 콜백함수의 인자값으로 무엇으로 들어오고, 반환되는지 알수 있는 이점이 있다.
• 그리고 반환하는 타입에 void가 있는데, return 되는 값이 있는데 괜찮다.
• 그 이유는 return 타입을 void로 함으로서, 이 함수의 반환값을 쓰지 말라고 명시적으로 되어있고
• 반환된 값 또한 void 타입이기 때문에, 다른거와 쓸 수 없게 된다.

7. unknown Type

• any와 다르게 어떤 값이 들어올지 모를때 사용할수 있다.
• any는 어떤 값이여도 상관이 없는거고,
• undefined는 어떤 값이 들어올지 모르고, 나중에 타입을 정할때 사용이된다.
• 그러므로 undefined를 할당한 변수는 메소드나 변수등에 아예 접근이 안된다.
• 이 undefined를 해결을 할려면, typeof와 같은걸로 타입가드를 통과해야지만 사용을 할 수 있다.

8. never Type

function generateError(message : string, code : number) : never{
      throw {message : message, errorCode : code }
}

generateError('An error occurred',500)

• 절대 리턴값을 절대로 내보내지 않거나 항상 오류를 출력하는 타입일때 never Type을 쓴다.
• error를 thorw 하거나 무한반복문이 걸렸을때와 같이 아무값이 절대 반환이 안될때 사용한다.

그림은 귀찮고..

작년 11월즈음에 플레2를 달성했다.

주변 아는 고인물들의 날먹이라면서 다이아 문제를 주는것을 풀다보니 우연치 않게 되는데

실제 내실력은 플5에서 더이상 안 는것 같다.~~

플5일때랑 지금이랑 비슷무리하다.

알고리즘을 이론을 공부안 한 죄..

어차피 지금 목표는 기업코테이고, 기업코테 수준에서는 통용될수 있는방법인데.. 흐음 아쉽다..

나중에 제대로 공부를 하는 날이 오길 기대한다(취업하고)

친구에게 토스뱅크에 좋은 통장이 있다고 해서

개설을 할려고 했다.

그 통장은 연 2% 통장개설이었다.

다른 배너도 없고, 통장 2% 통장개설을 찾아 탭을 뒤적뒤적였다.

그러다가 발견한 곳이 전체탭이었다.

지금은 만들어서 그런지 사라져서 다른 이미지를 부랴부랴 가져왔다.

만들려고 눌렀는데

??? 통장이 개설이 안된다..

내가 문제인가 싶어, 껐다 켰다. 토스 업데이트도 해봤다

근데 해결이 안되길래 채팅상담을 통해 

문제를 해결하고자했다.

처음에는 네트워크 환경을 바꿔보라기에 와이파이 LTE,5G 전부 바꿔서 시도했다.

그리고 다음으로는 인증서를 만들어보라고 해서

내가 필요하지도 않았지만, 토스 인증서를 만들었다.

근데도 안 만들어졌다.

그리고 난뒤에는 토스인증서 만들어주는 별도의 링크를 주길래, 들어갔더니...

위와 같은화면이 똑같이 뜨는 상황이 되었다.

나중에는 채팅상담 1시간만에 해결이 됬는데

문제는 단순한거였다.

토스앱은 깐지는 오래였지만, 토스의 다른 계열사에 들어가본적이 없었다.

그리고 우리가 아는 토스앱은 슈퍼앱으로 모든계열사가 있지만, 계열사별로 별도의  최초 동의가 필요한 것이었다.

문제를 해결한 방법은 토스뱅크에 들어가서 사용자를 등록하고, 정보 제공에 동의하는 것이었다.

단순히 이런 에러였는데, 에러에 대한 결과가 사용자 정보를 가져오는 중에 문제가 발생했다고만 떠서,

고치는데 힘들었다.

이 와 별개로

고객센터를 이용하면서 몇가지 불편한 점이 있었다.

1) 토스앱에서 보안과 관련된 사항인지 몰라도 드래그를 하고 복사가 안된다.

   - 보안이 중요한거 알겠지만, 문제를 해결하는 도중에 링크를 직접 주셨는데, 복사가 안되서 숏링크이기 하지만 전부 직접쳤다. 

2) 숏링크의 소문자 l과 대문자 I가 구분이 가지 않는다.

- 위와 연계된 문제였다. 복사가 안되니 일일히 직접쳐야하는데, l과 I가 구분이 안갔다. 그래서 처음에 잘못입력해서 error링크가 뜨길래 뭐지 했다가, 설마 하는 심정으로 대문자 I로 바꾸니 되었다.

- 복사가 되었으면 문제가 없겠지만, 복사가 안되니 수동으로 쳐야하는데, 그마저도 l하고 I가 구분이 안가서 여러번 쳐야했다.

- 아니면 하이퍼링크라도 있었으면

3) 토스 상담내역이 사라졌다.

- 모든 해결이 된후에 1시간뒤에 다시 고객센터 문의 내용을 복기를 할려고 들어갔더니, ??? 위의 최초 문의 내역만 있고 그 뒤로, 링크를 주고  해결을 하고 대화를 나눈 내용이 있었는데 전부 다 사라졌다.

- 처음 안내할때 채팅내용은 3년 보관후 파기라고 공지되어있었다.

- 뭐 그게 자기 서버에는 저장되고 사용자의 상담내역은 삭제되는게 토스 조항인지 잘 모르겠다.

- 하지만 위와 비슷한일이 있을까, 혹시나 말실수를 하지 않았을까 하는 마음에 다시 채팅을 친 내역을 볼려고 들어가니

  아예 다 사라졌다.

- 기억상 2시50분에 내용을 전달받고, 모든 방안을 해결한뒤에 3시50분에 문제가 해결되었다. 카톡 내용에도 그게 있었으니, 저뒤 약 10분 안되는 사이에 모든 해봤지만 안됬다고 이야기를 나눈뒤, 본격적인 인증서를 만들라는 상담사의 내용과, 링크를 주고받은 내용, 문제를 해결한 것까지가 흐름이었다.

- 이게 사용자 동의 없이 전부 사라지니, 이게 맞는건가 싶다.

위 3가지는 토스 고객센터를 이용하면서 개인적인 불편한점이었고, 오늘의 주제였던 문제점은 단순한 에러 처리였는데, 그거에 대한 명시적인 상태코드?를 보여주지 않아서 생긴 문제였다.

ps) 위의 사진 2개가 토스뱅크로 이동중입니다 -> 문제가생겼어요 순서인데 토스뱅크가 12분 더 늦은이유는

 2시 50분에 해결법을 보고 전부 안된뒤 상담사가 문제가생겼어요 전에 뭐가 뜨냐고 물어봐서 해당 이미지를 올려준거였다.

그러면 3시부터 채팅로그가 다 사라진건데..?

ps) 근데 왜 토스인증서 만든거지.. 필요없는데

티스토리 자동로그인으로 쓰고 있는데,

어느 순간 갑자기 글쓰기 및 개별 블로그를 제외한

tistory가 운영하는 메인, 수정 글쓰기 등 공통적인 부분에 전부 400 에러가 뜨는 버그가 발생했다.

시크릿모드에서는 정상적으로 로그인 후 모든기능이 작동하는데

원래 쓰는 자동로그인된 크롬 브라우저에서 갑자기 모든 기능이 안됬다.

심지어, 우상단의 아바타를 클릭하면 나오는 운영중인 블로그도 전부 사라졌다.

며칠간 뭐가 문제인가하다가 우연치 않게 고쳐졌는지, 잘 모르겠지만 고치긴했다. 자동로그인이 안 풀린상태로

시크릿모드에서 로그인 했을때와 자동 로그인의 쿠키를 비교를 했는데,

_ga 즉 구글 애널리틱스 쿠키가 한 페이지를 가득 채울정도로 많이 있었다.

그리고 한 도메인당 쿠키제한이 있는게 생각이 났고, 한번 지워보니, 정상작동했다.

후헤... 근데 이게 맞는 해결인지는 잘모르겠다.

1. Number Type

• 숫자
• All numbers, no differentiation between integers or floats

2. String Type

• 백틱, 작은따옴표, 큰 따옴표
• All text values

3. boolean Type

• true of false
• Just these two, no “truthy” or “falsy”

4. Object

• 객체 타입 (컴파일 단계에서 명시적으로 선언을 해주거나, 기본적으로 할당되었을때 타입스크립트가 인식한다)
• 중첩 객체 또한, 객체 안에 객체에 대한 타입을 명시해주면 가능하다.
• Any Javascript object, more specific types are possible

5. Array

• [1,2, 3]
• Any javascript array type can be flexible or strict
• 가변적인 길이를 가질 수 있으면 유연한 특성을 가지고 있다.

6. tuple

• [1, 2]
• Added by Typesciprt : Fixed-length array
• 타입스크립트에서 추가된 타입으로, 길이와 타입이 고정된 배열이다.

const person : {
name : string;
age : number;
hobbies : string[];
role : [number, string];
} = {
name : 'mmm',
age : 30,
hobbies : ['Sports', 'Cooking'],
role : [2, 'author']
// role : string|number[]
// union type으로 추론을 한다.
}

• 하지만 튜플로서 값을 잘못된거 넣거나, 재할당은 막아주지만, 배열의 메소드인 push pop은 막지 못한다.

7. Enum

• enum {NEW, OLD}
• Added Typescirpt : Automatically enumerated global constant identifiers
• 매직 넘버로 숫자로 할 시, 이게 무엇인지 알기 어려워진다. 그러므로, 이걸 관리하기 위한 방법으로 Enum을 사용한다.

// 사용자가 만든 타입이므로 대문자로 시작
enum Role {
 ADMIN,READ_ONLY,AUTHOR
};
// 위와 같이 할시 앞에서부터 0
// 기본값은 0 으로 시작
// 초기값을 다른 숫자로 할시 그 숫자를 기준으로 값이 증가
// 별도로 추가적인 값을 할당할수도 있다.

8. Any

• *
• Any kind of value ,no specific type assignment
• 와일드카드 같은..
• any는 쓰지말자