JudithHopps JudithHopps

SLASH21 프론트엔드 특강 정리 발표자료 및 이미지 등은 'Slash21'에 올라온 자료입니다. 프론트엔드 비동기 처리 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기 API를 호출하거나 네이티브 앱과 통신할 때 프론트엔드 웹 서비스에서는 반드시 비동기 작업이 일어나게 됩니다. 일상처럼 다루고 있지만 정작 UI에서 다루기 힘든 비동기 프로그래밍. React Suspens toss.im Q. 웹 서비스에서 가장 다루기 어려운 부분은? 발표자인 박서진님(토스코어 Frontend Developer) 은 비동기 처리부분이 가장 어려운 부분 중 하나라고 답변하셨습니다. 웹에서는 10여 년 전 jQuery와 같은 라이브러리를 쓰면서 명령형으로 프로그래밍을 해왔다. 그러다 React/Vue.js와 같이 선언적인..

코드 수정하다 발견한 새로운 에러..! 뭘 잘못 건들였을까... 에러 명: Warning: validateDOMNesting(...): cannot appear as a descendant of . 처음 보는 에러였지만, 역시나 친절한 개발자 도구! 에러 워인은 태그 안에 태크를 추가했기 때문이다. => 태그 끼리 구별하면 해결!!

와 은 HTML에서 사용되는 두 가지 중요한 태그입니다. 이들의 주요 차이점과 언제 어떻게 사용해야 하는지에 대해 설명하겠습니다. 태그: 는 "division"의 줄임말로, 웹 페이지 내에서 구획을 나누는 역할을 합니다. 태그는 블록 레벨 요소로, 즉 한 줄 전체의 너비를 차지하며 다음 줄로 넘어가는 특성을 가지고 있습니다. 주로 아래와 같은 상황에서 사용됩니다: 레이아웃 구성: 웹 페이지의 다양한 영역을 나누고 배치하는 데 사용됩니다. 예를 들어, 헤더, 사이드바, 본문, 푸터 등의 섹션을 나눌 때 를 활용할 수 있습니다. 스타일링과 디자인: CSS 스타일링을 적용하고 레이아웃을 조정하기 위해 를 사용합니다. 는 CSS 클래스나 ID와 함께 사용되어 스타일을 적용하는 용도로 활용됩다. Header Si..

5장 any 다루기 타입 스크립트의 타입 시스템은 선택적이고 점진적이기 때문에, 정적이면서 동적인 특성을 가지고 있다. item 38. any 타입은 가능한 한 좁은 범위에서만 사용하기 - Blink 예시 ) any 로 선언을 하지만 @ts-ignore을 사용해서 강제로 타입 오류를 제거 class Form extends React.Component { constructor(props: any) { super(props) const initialState: any = { goodsName: '', moid: '', amount: '', buyerName: '', buyerTel: '', buyerEmail: '', returnURL: '', ReqReserved: '', ediDate: '', hashS..

localhost에서 cors 에러뜨는데, 서버 담당자가 자리를 비웠을 때 , 임의로 로컬에서 수정할 수 있다. MAC(맥북)에서 hosts파일을 수정하는 방법 Windows에서 와 같이 MacOS에서도 hosts파일을 수정할 수 있습니다. hosts파일이란? hosts 파일은 운영 체제가 호스트 이름을 IP 주소에 매핑할 때 사용하는 컴퓨터 파일이다. 이 hosts 파일은 플레인 텍스 blog.stories.pe.kr 1. terminal sudo vim /private/etc/hosts 2. 내용 추가 127.0.0.1 localhost.getmiso.com (원하는 주소) 3. 주소창 localhost.getmiso.com:port번호

https://www.figma.com/dev-mode/ Dev Mode: Design-to-Development | Figma Figma's Development Mode helps developers transfer design into code. Streamline workflows between design and development so that there is more clarity on what's being built. www.figma.com 디자이너님은 피그마 개발자 모드 관련 해서 ppt 발표를 해주셨다.

3장 타입 추론 타입 스크립트는 타입 추론을 적극적으로 수행한다. 아이템 24 일관성 있는 별칭 사용하기 별칭은 타입 스크립트가 타입을 좁히는 것을 방해하기 때문에 일관성 있는 별칭을 사용해야 한다. 별칭을 남발해서 사용하면 제어 흐름을 분석하기 어렵다. 타입 스크립트는 함수가 타입 정제를 무효화하지 않는다고 가정한다. 비구조화 문법을 사용해서 일관된 이름을 사용하는 것이 좋다. // 객체 비구조화 예시 const person = { name: 'John', age: 30, address: 'Seoul' }; const { name, age, address } = person; console.log(name); // 'John' console.log(age); // 30 console.log(addres..

3장 타입 추론 타입 스크립트는 타입 추론을 적극적으로 수행한다. 아이템 19. 추론 가능한 타입을 사용해 장황한 코드 방지하기 코드의 모든 변수에 타입을 선언하는 것은 비생산적이며 형편없는 스타일로 여겨진다. 타입 추론이 된다면 명시적 타입 구문은 필요하지 않다. 방해만 될 뿐이다. 함수 매개변수에 타입 구문을 생략하는 경우도 간혹 있다. 예를 들어 기본값이 있는 경우를 예로 들자. TypeScript에서 함수 매개변수의 타입 구문을 생략하는 경우, 타입 추론을 통해 매개변수의 타입을 유추하도록 할 수 있습니다. 이를 "타입 추론"이라고 합니다. 타입 추론은 변수의 할당값이나 함수의 반환값을 기반으로 해당 변수 또는 매개변수의 타입을 추론하는 TypeScript의 기능입니다. 예를 들어, 다음과 같이 ..