connecting dots

프로젝트 배포까지 깃허브에서 간단하게 끝낸 후 그룹 스터디, 토이 프로젝트 1 팀원들 그리고 강사님께도 공유 드려서 피드백을 부탁드렸다 ! 역시나 아직 배울게 많고 배웠어도 적용이 안되는 것이 많구나 ,, ㅎ  1. HTML 코드에서 각 스크립트가 서로 데이터나 함수를 공유하는 부분이 없어서 순서대로 호출될 필요가 없어 보입니다. 그래서 defer 처럼 HTML 요소가 준비되면 실행하지만, 동기가 아닌 비동기로 각 스크립트가 호출될 수 있는 async 속성을 사용하는 게 현재 프로젝트에서는 더 좋은 방법입니다.기존 코드 피드백 코드 ==> defer와 async의 공통점과 차이점은 뭐지 ? (여태 defer만 알고 있어서 정말 새로운 정보였다) async는 스크립트가 다운로드되는 즉시 실행되며, 문서 파..

부트캠프에 참여한지 두달 반 정도된 이 시점, 여태까지는 개인적으로 '무언가 만들어보자' 라는 생각을 안 했던 것 같다.비기너반 프로젝트가 3주가 남지 않은 이 시점에 슬슬 작은 프로젝트라도 시작해보고 싶었는데마침 그룹스터디에서 앞으로의 스터디 방향성을 의논하다가 각자 개인 프로젝트 만들어서 공유하는 시간을 갖는건 어떤가 하는 의견이 나와서 본격적으로 프로젝트를 시작해보게 되었다 !웹 개발을 배우면 거의 처음해보는 프로젝트로 굳어진 것 같은 (?) 투두 앱 만들기 !어떤 주제로 뭘 만들까 고민하다가 ,, 이러다가는 고민하고 기획하다가 일주일이 다 갈 것 같아서 스터디 같이하는 분이 예전에 비기너 시절 해보셨다고 소개해주신 nomadcoder todo app 을 수강하며 만들어나가기 시작했다 !강의의 경우..

if (!res.ok) { throw new Error(`HTTP error! status: ${res.status}`);}  그런데 ! 객체가 만들어질 때 마다 메모리에 저장됨 --> 더 효율적인 방법은 없을까 ? 자바스크립트의 Class this 예제 일반함수를 호출할 때와 화살표 함수를 호출할때의 차이점--> 일반함수는 '호출 위치' 화살표 함수는 '선언된 함수 범위'가 중요함 ! heropy.normal(); // Heropy// 여기에서 normal 함수가 호출됨. 이 위치에서 앞에있는 객체데이터가 heropy이므로 this는 heropy를 가리킴// 따라서 this.name은 heropy.name과 같음heropy.arrow(); // undefined// 선언된 범위 외부에 함수가 없으므..

fetch 함수에서 옵션 넣기async function getTodos() { try { // await new Promise(resolve => setTimeout(resolve, 2000)) const res = await fetch( 'https://~~~~', { headers: { 'content-type': 'application/json', apikey: '~~~', username: '~~~' } } // 수강생 전용 정보는 '~~~'로 처리함 fetch('주소', { headers: {}, body: {}. method:..

팩토리함수(Factory Function)객체 데이터(참조형 데이터)를 반환하는 함수function getUser() { return { name: "John", age: 30, };}const user = getUser();console.log(user); // { name: 'John', age: 30 }console.log(getUser()); // { name: 'John', age: 30 }console.log(user.name); // Johnconsole.log(getUser().name); // John// 모든 함수는 호출되면 return으로 반환하는 값을 가지고 있다. 고차함수함수를 인수로 전달하거나(콜백함수) 반환값으로 사용하는 함수function useUser() { ..

예외 처리하기 실습 코드 설명 export interface User { id: string name: string age: number isValid: boolean emails: string[] photo?: Photo} const [users, setUsers] = useState([]) const [message, setMessage] = useState('') useState([]): • useState 훅을 호출하여 초기 상태를 설정 • User[]는 TypeScript에서 제네릭(generic) 타입으로, users 상태가 User 객체들의 배열임을 명시 • []는 초기 상태값으로, 빈 배열을 의미함. 즉, 컴포넌트가 처음 렌더링될 때 users 상태는 빈 배열로 시작함...

원래라면 ....let name = 'apple store'let tv1 = { name: 'noona tv', price: 200, size: '56inch'}let tv2 = { name: 'ultra tv', price: 200, size: '27inch'}let tv3 = { name: 'grand tv', price: 200, size: '36inch'}// and so on ... --> tv가 추가될 때 마다 하나하나 만들어야 된다고 ???? 너무 번거롭고 실수 확률도 너무 높아 ... Class객체의 설계도(like 작업지시서)객체의 속성과 메서드를 정의함TV를 만들 때는 name, price, size 속성이 반드시 필요하다는 것을 명시class TV{ construc..

즉시실행함수(IIFE)익명함수를 ( )로 감싸고 그 전체를 바로 (호출)하는 방식--> 원래 익명함수는 호출할 수 없음 (이름이 없으니까). 이를 가능하게 해주는 방식 ! 세미콜론을 명령 뒤에 안 붙이는 경우에는 위쪽의 명령과 섞이지 말라는 의미로즉시실행함수 앞에 ';'을 붙여줌. 이렇게 하면 오류가 나지 않음  비동기 처리 용어 쉽게 이해하기상황: 빵을 사러 서울에서 1시에 출발 ! 사고 다시 서울로 돌아온 시간 9시 !1. 대기(pending)- 1시부터 9시까지, 출발해서 다시 돌아올 때 까지, 8시간동안의 시간이 대기상태 (기다리고 있는 것)- 가져오고 있는 중 (ing)- 도착했으면 대기 끝 2-1. 이행(fulfilled)- 빵을 잘 사왔으면 '빵을 사러 다녀오다' 미션이 제대로 이행됨 -->..