5월 05일 커피챗

주제

• 이번주 주제는 나의 성장 곡선 위치 나누기입니다!

• 나의 성장 곡선을 그려보기 → 지금 나의 위치 이야기하기

• 멘토님과 다른 사람의 객관적인 이야기 듣기

나의 성장 곡선 위치

6주차 과제

export default class App {
	
	// Interface
	class Inode { 
		click(node) : void {}
		
		static createNode(node: any) : void {
			switch(node.type) {
				case "DIRECTORY":
					return new Directory();
				case "FILE":
					return new File();
			}
		}
	}

	class Directory extends Inode {
		click(node) : void {
			...
		}
	}

	class File extends Inode {
		click(node) : void {
			...
		}
	}
	
		onClick: async (id) => {
			...
			Inode.createNode(node).click.bind(this)(node);
		}
	}
	...

	async fetchNodes(id = "") {
    this.setState({
      ...this.state,
      isLoading: true,
    });
    const nodes = await request(id);
		const inodes = nodes.map(Inode.createNode);

    this.setState({
      ...this.state,
      isRoot: id === "",
      isLoading: false,
      nodes,
    });
  }
}

• 의존성 주입?

• node.type 체크를 직접하지 않고 Inode 객체에 캡슐화

fetch (형진님)

const BASE_URL = 'https://kdt-frontend.programmers.co.kr/documents';

const request = async (url, options = {}) => {
	try {
		const res = await fetch(`${BASE_URL}${url}`, {
			...options,
			headers: {
				'Content-Type': 'application/json',
				'x-username': 'joohyeongjin',
			},
		});

		if (res.ok) {
			return await res.json(); // await로 무조건 반환하는 방법은 좋지 않음. 프로미스로 넘겨서 all을 사용하는 비동기 제어 방식으로 사용할 수 있기에!
		}

		throw new Error('API 처리 중 오류가 발생하였습니다!');
	} catch (e) {
		console.log(e.message);
		history.replaceState(null, null, '/404');
		window.location = `${window.location.origin}/404`;
	}
};

const createDocument = async document => {
	return await request(
		'', 
		{ method: 'POST', body: JSON.stringify(document) }
	);
};

const readDocuments = async id => {
	const url = id ? `/${id}` : '';
	return await request(
		url, 
		{ method: 'GET' }
	);
};

const updateDocument = async (id, document) => {
	return await request(
		`/${id}`, 
		{ method: 'PUT', body: JSON.stringify(document) }
	);
};

const deleteDocument = async id => {
	return await request(
		`/${id}`, 
		{ method: 'DELETE' }
	);
};

export { createDocument, readDocuments, updateDocument, deleteDocument };

개선, API 모듈화

const BASE_URL = 'https://kdt-frontend.programmers.co.kr/documents';

const request = async (url, options = {}) => {
	try {
		if ("body" in options) {
			options.body = JSON.stringify(options.body);
		}
		const res = await fetch(`${BASE_URL}${url}`, {
			...options,
			headers: {
				'Content-Type': 'application/json',
				'x-username': 'joohyeongjin',
			},
		});

		if (res.ok) {
			return res.json();
		}

		throw new Error('API 처리 중 오류가 발생하였습니다!');
	} catch (e) {
		console.log(e.message);
		history.replaceState(null, null, '/404');
		window.location = `${window.location.origin}/404`;
	}
};

// api 모듈화👍
// api 명세를 보지 않고 작업할 수 있음👍👍
const api = {
	createDocument: async document => {
		return request(
			'', 
			{ method: 'POST', body: JSON.stringify(document) }
		);
	},
	readDocuments: async id => {
		const url = id ? `/${id}` : '';
			return request(
				url, 
				{ method: 'GET' }
			);
		}
	},
	updateDocument: async (id, document) => {
		return request(
			`/${id}`, 
			{ method: 'PUT', body: document }
		);
	},
	deleteDocument: async id => {
		return request(
			`/${id}`, 
			{ method: 'DELETE' }
		);
	}
}

export default api;