거의 시간 맞춰갔더니 굳즈는 거의 스티커만 남은 상태! 살짝 기대했는데 아쉬웠다. 1시간은 일찍 가야한다고 한다

시간을 맞춰가서 앞부분은 잘 못들었는데, 리액트는 컴포넌트 구조여서 애니메이션 구현할 때 어려웠던 부분이 있었다. 스벨트에서 transition API 를 사용하면 훨씬 수월하다는 내용이였던 것 같다.

부모 컴포넌트가 리랜더링 될 때 자식도 같이 리랜더링되는 것을 막기 위하여 useMemo 를 쓰지만, 많이 쓰면 오버헤드가 발생할 수도 있다. 개발자가 기준을 가지고 사용해야하는데 React Compiler를 사용하면 Compiler 의 기준으로 자동으로 적용된다. 메모리의 과한 사용없이 성능 향상될 수 있다.

퍼블리셔로 오래 일하다보니 CSS에 관심이 많고, 가장 관심이 있었던 섹션이였는데 내용이 살짝 아쉬웠다. (살짝 자랑만 하다 끝난 느낌.) 오픈소스 아카데미라는 프로그램에 대해 공유 받았는데 이걸 진행해보고 싶기도 하다.

SEO는 매출하고 관련되어 있으니 가장 중요한 신경써야하는 부분 중 하나라고 생각한다 그런데 지표가 빠르게 상승하지 않아서, 항상 내가 하고 있는 게 맞는 지 의문스럽고 확실한 정답이 없다고 느껴져서 들었던 섹션이다. 그런데 발표 내용이 명료하고 많은 고민을 하셨던게 느껴져서 발표자분과 함께 일하고 싶고 강남언니에서 일하고 싶어질 정도였다.

• 동일하게 SEO를 적용해도 PC와 모바일의 차이가 있는데, 이것을 어떻게 해결해야할 지
• 퀼리티가 높은 페이지가 우선 노출된다고 했는데, 퀼리티가 높은 페이지의 기준이 어떻게 되는 지 를 테스트 해보고 싶다.

화면단에서 고화질 이미지 사용이나 컨텐츠가 많아지면서 성능 이슈를 항상 고민해서 들었던 섹션이다. GPU 사용은 생각하지 못 했던 방식이였다.

똑똑하고 정말 개발 좋아하신다고 느꼈던 분..

데이터 만 개 까지는 CPU 가 더 빨랐으나 그 이상은 GPU를 사용하는 것이 더 성능이 좋았다.

이전에 웹빌더 구축 퍼블리싱도 했었고, 웹빌더 관련된 기능 제작도 진행했던지라, 심지어 지금 웹빌더 회사에서 근무하고 있어서 들었던 섹션이다.

발표자는 웹에디터를 텍스트/블럭/그리드 에디터로 중 그리드 에디터를 구현하셨다. 항상 블록 에디터만 보다가 그리드 에디터를 처음 알게 되었는다. 이커머스에서 오래 일하다보니 이 에디터가 판매자에게 더 많은 수익을 가져다줄 수 있는 에디터일까? 를 고민했는데, 디자인이 중요한 웹빌더에서는 더 유용할 것 같고 개발코드를 모르더라도 커스텀이 더 자유로울 것 같았다.

인터넷 프로토콜의 4계층 4층 - 애플리케이션계층 : HTTP,FTP 3층 - 전송 계층 : TCP, UDP 2층 - 인터넷 계층 : IP 1층 - 네트워크 인터페이스 계층

프로토콜

IP

• IP 주소에 패킷이라는 통신 단위로 데이터 전달.

패킷정보

• 출발지 IP, 목적지 IP,
• 전송 데이터

한계점

1. 서비스가 불능이여도 패킷 전송,
2. 패킷이 사라질 수 있고, 순서대로 오지 않을 수도 있음
3. 같은 IP에서 여러개의 앱을 사용하는 경우 어디로 도착할지 구분하기 어려움.

TCP/IP

• IP 방식의 한계점을 극복한 프로토콜, 대부분의 애플리케이션에서 사용하는 프로토클
• TCP 3 Way handshake - 가상연결 : 연결이 되었는 지 확인하고 데이터를 보냄
• 데이터 전달 보증 : 데이터를 받았는 지 받은 서버가 이야기 함.
• 순서 보장 : 순서가 잘 못되면 받은 서버에서 재전달 요청을 보냄

패킷정보

• 출발지 IP, 목적지 IP,
• 전송 데이터
• 출발지 port, 목적지 port
• 전송 제어, 순서, 검증 정보

UDP

• IP 와 거의 같음
• 포트, 체크섬이 추가된 개념
• 필요하면 애플리케이션내에서 UDP 를 수정/확장할 수 있고 TCP 3 Way handshake 최적화 등이 필요할 때 여기서 수정함.

port

• 같은 IP 내에서 프로세스를 구분하는 것.
• 0 ~ 65535 : 할당가능
• 0 ~ 1023 : 잘 알려진 포트 ,사용하지 않는 것이 좋음
• 20, 21 : FTP
• 23 : TELNET
• 80 : HTTP
• 443 : HTTPS

DNS (Domain Name System)

• IP 에 이름을 부여하여 DNS 서버에 저장.

URI

URI (Uniform Resource Identifier)

URL (Uniform Resource Locator)

• 리소스가 있는 위치 지정

형식

    scheme://[userinfo@]host[:port][/path][?query][#fragment]

• scheme : 주로 프로토콜 사용
• userinfo : url 에 사용자 정보를 포함할 때 사용하나 거의 사용하지않음
• host : 도메인명, ip명
• port : http/https 는 port 생략 가능
• path : 리소스가 있는 경로
• query
  • key-value 형태,
  • ? 로 시작하고 &로 추가 가능
  • query paramether/query string 으로 불림
• fragment
  • 잘 사용하지 않음
  • HTML 내부 북마크 등에서 사용하고 서버에 전송되지 않음

URN (Uniform Resource Name)

• 리소스에 이름 부여
• 보편적이지 않은 방법

웹 브라우저 요청 흐름

https://google.com

1. 브라우저에 URL 을 입력한다.
2. 브라우저가 DNS 서버를 조회하여 IP 를 찾는다.
3. 브라우저가 scheme를 참고하여 port 정보를 찾는다 (HTTP 80/HTTPS 443)
4. 브라우저가 HTTP 요청 메시지를 생성한다.
5. 브라우저가 구글 서버에서 데이터를 받을 수 있는 지 확인한다 (TCP 3 Way handshake)
6. 브라우저가 소켓 라이브러리를 통해 데이터를 전달한다.
7. 구글 서버가 소켓의 HTTP 요청 메시지를 확인하고 내용을 해석한다
8. 구글서버가 HTTP 응답 메시지를 만든다.

HTTP (Hyper Text Transfer Protocol)

• 모든 형태의 데이터를 전송할 수 있다.
• 서버 간의 데이터 통신할 때도 사용한다.

버전

HTTP 1.1

• TCP 프로토콜 사용
• 가장 많이 사용하는 버전

HTTP 2

• TCP 프로토콜 사용

HTTP 3

• UDP 프로토콜 사용

특징

클라이언트 서버 구조

• Request Response 구조

1. 클라이언트는 서버에 요청을 보내고 대기
2. 서버가 요청에 대한 결과를 만들어서 응답
3. 응답받은 내용을 브라우저에 노출

• 캡틴판교 : 타입스크립트 입문 - 기초부터 실전까지

강의록

type

튜플

배열의 특정 index 의 타입을 지정하는 것

const address: [string, number]

ts config

{
  "compilerOptions": {
    "allowJs": true,             // js 사용 여부
    "checkJs": true,            // js 파일에서 type 체크 여부
    "noImplicitAny": false        // any 타입 허용 여부
  },
  "include": ["./src/**/*"]
}

• 노마드코더 : 타입스크립트로 블록체인 만들기

몇 번 시도하다가 드디어 완강!

블록체인을 실제로 만든다고 생각했는데, 그런 건 아니었고, 타입스크립트에 좀 더 중점을 둔 강의였다.

• 데이터 타입,
• 접근제어자
• type, interface, class
• javascript 와 typescript 호환
• ts config
• 기능 만들기 (블록체인)

내용은 다른 강의와 비슷한데. 깊게 설명해줘서 유익했다.

강의록

접근제어자

• static 은 javascript 문법

read-only

• 외부에서 접근은 가능하지만 수정은 불가능.

     public read-only food: strong = 'kimchi';

타입(Type) 과 인터페이스(Interface)

• 타입을 지정하는 것보다 타입스크립트가 타입을 추론하게 하는 것이 좋다.
• 타입스크립트에서는 클래스와 오브젝트의 타입을 정의할 때는 interface 를 그 외에는 type 을 사용할 것을 권고함.

타입(Type)

• 복합 타입, 유니언 타입등 다양한 타입 정의 가능
• 같은 이름의 타입을 새로 정의하면 에러 발생

// type 으로 변수 타입 지정
type food = string
type StringOrNumber = string | number;  // 유니언 타입

// type 으로 객체 타입 지정
type food = {
    snack : string,
    meal : string
}

// 확장
type food = snack & {
    meal: string
}

인터페이스(Interface):

• 다른 인터페이스를 상속하여 확장할 수 있다.
• 추상클래스로도 클래스의 형태를 정의할 수 있지만 javascript 로 변환한 뒤에도 코드가 남아있기 떄문에 인터페이스로 작성하는 것이 더 가볍다.
• 같은 이름의 인터페이스를 새로 정의하면 각 인터페이스가 결합됨.

interface food = {
    snack : string,
    meal : string
}

interface food = {
    snack : string,
    meal : string
}

// 확장
interface worldFood extends food {
    koreafood: string
}

typescript 에서 javascript 를 사용하는 법

• d.ts 파일 사용 (Declaration File)
• 패키지나 라이브러리는 js 로 개발된 경우가 많아서 타입지정이 필요하다 .node_modules/@types 에 관련된 타입이 지정되어있다.

javascript 를 typescript 처럼 사용하는 법

• jsdoc 을 사용하면 js 소스에서 type hint를 볼 수 있음
  • https://jsdoc.app/
• @ts-check 주석은 type 이 맞지 않을 경우 에러를 표시함

    // @ts-check

    /**
     * show error 
     * @param errorMessage 
     * @returns 
     */

tsconfig.json

{
  "include": ["src"],
  "compilerOptions": {
    "outDir": "build",
    "target": "ES6",          // target 버전으로 컴파일됨
    "lib": ["ES6"],              // es6 에 대한 정보를 가지고 있음. 메서드 자동 완성 등을 지원함.
    "strict": true,              // javascript 사용 어려움. d.ts 파일 사용 등 타입 정의 필요
    "esModuleInterop": true,
    "module": "CommonJS"      // node.js 에서 사용하는 모듈 시스템 사용 가능 
  }
}

crypto module

• node 의 내장 모듈인 crypto 모듈을 사용하여 SHA-256 해시를 생성

    crypto.createHash("sha256").update( {해시로 변경하고 싶은 문자} ).digest("hex");

• crypto.createHash("sha256") : SHA-256 해시 객체를 생성.
  • SHA-256 : 256비트(32바이트) 길이의 고유한 해시 값을 생성하는 암호화 알고리즘
• .update( {해시로 변경하고 싶은 문자} ) : 데이터를 해시 객체에 추가합니다.
• .digest("hex") : 최종 해시 값을 계산하고, 16진수 문자열 형식으로 반환.

일감 등록/수정

• react-datepicker 라이브러리를 사용하여 날짜 선택 기능 제공

list

• 등록된 일감을 바그래프로 확인 가능.
• 등록된 날짜가 지나면 바그래프의 색상이 달라짐
• 등록된 일감은 상세일정으로 나눠서 표시할 수 있음.
• 일감을 완료시킬 수 있음.

history

• 수정 날짜와 수정내역을 확인할 수 있음

filter

• 미완료/완료된 일감을 구분하여 확인 가능

타고난 J 라 계획+일정짜는 것을 좋아하는데, 간트차트를 만들려면 엑셀로 한땀한땀만들거나 돈을 내고 서비스를 이용해야한다.
엑셀로 만드는 것은 너무 번거로워서 웹사이트로 만들어보려고 한다.

[STACK]

• vite
• react, react-query, typescript, zustand
• styled-components
• supabase

[기능]

[phase1]

• 일감 등록/수정
• list
  • 등록된 일감을 바그래프로 확인 가능.
  • 등록된 날짜가 지나면 바그래프의 색상이 달라짐
  • 등록된 일감은 상세일정으로 나눠서 표시할 수 있음.
  • 일감을 완료시킬 수 있음.
• history
  • 수정 날짜와 수정내역을 확인할 수 있음
• filter
  • 미완료/완료된 일감을 구분하여 확인 가능

[phase2]

• excel 다운로드
• excel을 email 로 발송

[phase3]

• 여러 프로젝트를 만들고 프로젝트마다 다른 사람을 초대할 수 있음.
• history
  • 수정한 사람 표시
• 로그인, 회원가입

[프로젝트 구조]

    npm create vite@latest

npm 을 이용하여 Vite + React + Typescript 로 Scaffolding 하였다.

src/
│   ├── assets/             # 이미지, 폰트 등 정적 리소스
│   ├── components/            # 리액트 UI 컴포넌트
│   ├── env/                # 환경 변수 위치
│   ├── model/                # 타입 정의 
│   ├── pages/                # 페이지 컴포넌트
│   ├── pipe/                # 데이터 변환을 위한 코드 
│   ├── sevice/                # 외부 API 호출, 비즈니스 로직과 관련된 코드
│   ├── store/                # 상태관리를 위한 파일 
│   ├── App.tsx
│   └── main.tsx
├── package.json
└── tsconfig.json

그 외에 미들웨어, hook 폴더 등 이후에 폴더가 추가되면 프로젝트 구조도를 업데이트 할 예정이다 .

📅 Ver. 2024.09

1. a 태그

• 이슈 플랫폼 : 네이버

[문제]

• a 태그 style 속성에 height, line-height, width 속성이 적용되지 않는다.

[해결방법]

• a 태그 내에 span 으로 한 번 감싸서 span 에 style 을 적용해야한다.

2. Background

• 플랫폼 : Gmail, Outlook

[문제]

• Gmail 에서 background-size 속성이 적용되지 않는다.
• Outlook 에서 background 를 축약형으로 기입했을 때, 아웃룩 버전에 따라 적용되는 속성이 다르다.

[해결방법]

• Gmail 과 Outlook 모두를 고려할 경우, 아래와 같이 축약형과 모든 속성 모두 기입한다.

background: url('이미지') repeat position;
background-image: url('이미지');
background-repeat: repeat; 
background-position: position;

3. img 태그

• 이슈 플랫폼 : IOS Gmail 앱/Yahoo 앱, 안드로이드 앱, PC Yahoo 앱

[문제]

• height 속성만 사용하면 사이즈 조절이 되지 않는다.

[해결방법]

• 이미지 크기를 조절할 때 width 를 사용해야 한다.

4. 모바일에서 자동 텍스트 조절

모바일 클라이언트에서는 "가독성"이 떨어지는 경우 폰트 사이즈를 임의로 재정의하고 있다. 텍스트는 글자가 커져도 줄넘김이 되기 때문에 문제가 되지 않는다고 판단하는 것 같다.

모바일에 최적화되지 않은 뉴스레터는 글자가 너무 커져서 레이아웃이 틀어지는 등의 문제가 될 수 있다. PC 와 동일하게 보이게 하려면 결론적으로 폰트 사이즈를 키웠을 때 줄넘김이 되지 않는 등 문제가 발생할 수 있다고 판단하면 글자 크기가 재정의되지 않는다.

방법 1.

• width가 이메일 사이즈와 동일하고 height가 1px인 투명 이미지를 넣으면 크기가 재정의되지 않는다.

방법2.

• white-space: nowrap; 을 적용하여 텍스트가 줄넘김 되지 않도록 변경한다.

방법3.

• 이메일 사이즈와 동일한 길이로 공백이 없는 텍스트 (ex, '------')를 문서 가장 아래에 적용해 둔다.

결론

• 모든 플랫폼에 최적화시키기에는 시간이 오래걸리고 유지보수 할 때 문제가 생길 수 있음
• 모바일 기기의 시스템 폰트 사이즈를 조정한다면 레이아웃에 문제가 생길 수 있음
• 가급적 모바일에 최적화된 디자인으로 변경하는 것이 좋아보임

    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;

Ionic 프레임워크를 사용하는 프로젝트에서 위와 같이 css를 기입하였음에도 아래 이미지와 같이 -webkit-box-orient"가 미적용되는 이슈를 확인했다.

해결방안

• 참고 : https://github.com/ionic-team/ionic-framework/issues/10723

1. 태그에 스타일 속성으로 css를 넣기

   <div style="-webkit-box-orient: vertical;">

2. autoprefixer 주석 달기

  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */

두 가지 모두 이슈 해결되는 것으로 확인하였고, css 분리 목적으로 2번으로 적용하였다.

규칙

대부분의 블로그에서 이야기하는 내용은 아래와 같이 이야기하고 있다.

권장 사이즈

• 크롬 : 48px의 배수
• safari : 32px

사용 규칙

1. 권장 사이즈보다 큰 경우에는 권장 사이즈로 줄어서 들어간다.
2. 여러가지 사이즈의 favicon 이 있을 경우 권장 사이즈를 사용한다
3. ico 파일을 가장 먼저 가져간다.

테스트

16, 32, 48, 64 크기의 png 파일과 icon 파일을 사용했다.

Mac OS 크롬 :

탭

북마크

Window OS 크롬 :

탭

북마크

safari

탭

즐겨찾기

ie 엣지 :

탭

즐겨찾기

웨일

ico 파일이 가장 먼저 보였고, .ico 가 없는 경우 32px png 파일이 노출되었다.

결과

1. 권장 사이즈보다 큰 경우에는 권장 사이즈로 줄어서 들어간다. -> Yes, 64px 이미지로도 잘 적용되었다.
2. 여러가지 사이즈의 favicon 이 있을 경우 권장 사이즈를 사용한다 -> No, Chrome 에서는 64px을 사용한다고하나 실제로는 32px사용했다.
3. ico 파일을 가장 먼저 가져간다. -> No, png 파일을 가장 먼저 가져갔다.

가장 많이 사용하는 favicon 사이즈는 32px 이였다.

https://stackoverflow.com/questions/77563528/search-event-stopped-firing-in-ios-17-2-beta-versions

비표준인 것을 처음 알았다. mdn 한국 사이트에서는 비표준 표시가 없었는데, 외국 사이트에서는 비표준이라고 노출된다. 외국 사이트로 검색해야겠다.