connecting dots

실행 컨텍스트 (Execution Context) - Record와 Outer를 중심으로record/outer는 실행컨텍스트와 크게 관련 없음lexical 은 실행 컨텍스트보다 상위개념이라고 볼 수 있음설명이 어렵게 되어 있음 - 전반적으로 더 읽기 좋게 풀어서 설명해보기 (어렵게 썼는데 틀리면 ? 신뢰도 하락)독자 입장에서 글의 흐름이 뭉쳐있다, 쉽게 풀고 더 흐름을 자연스럽게 고쳐보기 실행 컨텍스트는 실행 가능한 코드에 제공할 환경(코드 실행에 영향을 주는 조건이나 상태) 정보를 모아놓은 객체입니다.해당 객체에는 변수 객체, 스코프 체인, this 정보가 담겨있습니다.자동으로 전역 컨텍스트가 생성된 후 함수 호출시마다 함수 컨텍스트가 생성되고, 컨텍스트 생성이 완료된 후에 함수가 실행됩니다. 함수 실..

TS 유틸리티 타입객체 데이터에 있는 모든 내용을 선택적으로 만듬interface User { name: string age: number}const user: User { name: 'suhyun'}// 오류 발생// 'age: 85' 없으면 필수인데 없기 때문에 오류 ! Partial을 붙여주면 interface 내용이 필수적이 아니라 선택적으로 설정된 것과 같이 작동 !user에서 name, age를 사용하지 않아도 오류가 발생하지 않음'처음부터 선택적으로 만들면 안되는가 ?'--> 모든 것에 필수여야 하는 경우에 대응하기 힘듬만들 때는 필수 --> 선택적으로 ? 붙여서 사용하는 것이 일반적 !interface PartialUser { name?: string age?: ..

자바스크립트에서의 this 키워드일반함수: 호출 위치에서 this가 정의됨화살표 함수: 선언 위치에서 this가 정의됨일반함수 Function.prototype.call()--> call() 메소드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출합니다. 화살표 함수this를 가지고 있는 함수를 감싸는 함수가 있는지 봐야 함 !   (1) 방법은 보안에 취약(2) 방법을 통해 안전성을 높여야 함 !우리 프로젝트에서는 Vercel의 Serverless Functions를 사용해서 api 구현 엔드포인트 = {updatedtodo.id}https://asia-northeast3-heropy-api.cloudfunctions.net/api/todos/${updatedTodo.id} API 코드서버..

store 코드 수정기존 코드 수정코드 기존 코드의 경우 특정 속성이 다른 속성을 가지고 와서 쓸 수 없기 때문에 밑 사진처럼 함수 안에서 다른 함수를 호출할 수 없음수정 코드의 경우 선언되는 유효범위 안에 다른 함수도 포함되어있어서 호출하는 것이 가능 Vercel프론트엔드 웹 애플리케이션을 배포하고, 관리하기 쉽게 만들어주는 클라우드 플랫폼 1. Hosting Serverhtml, css, js, img, font --> 정적 파일들을 저장(like 하드디스크), 연산이 되지 않음 2. Computing Server (연산 기능이 필요할 때)- Serverless Functions 서버가 없는 데 동작하는 함수(기능)24시간 서버가 켜져있지 않아도 켜져있는 것 처럼 동작 가능  npm i -D verc..

화살표 함수 코드 축약 Main.tsx 파일에 있던 setTodo(), deleteTodo() 함수 store로 이사 시키기데이터를 불러 오는 getTodos()를 store로 이동시켜주었기 때문에투두 리스트를 새로 수정하는 setTodo(), 투두를 삭제하는 deleteTodo() 역시 store로 이사를 시켜야 한다 !데이터 권한이 이제 Main -> store로 넘어간 상황이니 수정, 삭제하는 부분도 store에서 제어해줘야 한다. 기존 Main.tsx store에서 가지고 올 수 있도록 TodoItem 파일 수정 옮긴 후 똑같이 작동하는 화면 모달에 삭제, 수정기능 추가전체 코드import styles from './TodoItemModal.module.css'import { useNavigate..

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

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

모달 CSS .modal { position: fixed --> 화면 전체를 덮어야 할 때(화면을 기준으로) width: 100vw --> 화면의 가로너비 100%, height: 100vh --> 화면의 세로너비 100%}.overlay { position: absolute --> 부모요소인 modal을 기준으로 (position을 갖는 것이 우선순위를 갖는다 !) width: 100% --> 뷰포트 쓰지 않아도 됨. 부모요소에 영향을 어차피 받기 때문에.contens { calc(100vh-40px) --> 전체 뷰포트 height에서 위아래 20px씩 공간 남겨놓겠다 overflow: auto --> 자동으로 넘치면 스크롤} z-index- position이 설정된 element에서만..