이번주 회고는 4F 기법으로 작성해보았다. - 메모어 회고 방법 예시- Vallista님 2022년 상반기 회고 Fact1. SPA 일기예보 앱프로젝트 세팅이전에 자바스크립트로 프로젝트를 구축할 때, webpack과 babel을 활용했었다. 공식문서를 보고 따라가면 어렵지 않게 세팅할 수 있는데 빌드 툴인 vite를 활용하면 명령어 한 줄로 빠르게 세팅 할 수 있음을 알고 있어 큰 고민 없이 vite로 프로젝트를 세팅했다. 라우터 구현처음에 설계할 때 라우터에 필요한 것은 라우터 정보, navigate 메서드, url로 들어왔을 때 대응이라고 정의했다. history API에 대해 다시 리마인드 하고 구현했다. 동적 라우팅 기능 추가서울의 일기예보 페이지 경로를 /weather/:name 형식으로 바꾸면..
![]()
이번 주에 한 것유닛테스트에 대해 공부하고 과제에 적용 (jest 사용)숫자 업앤다운 게임 콘솔 view에서 웹 브라우저로 전환 🔗 링크목표 설정브라우저 DOM, Event, Event Loop, Critical Rendering Path 등 공부 지난 주 개선점어떤 개발자가 되고 싶은지, 어떤 환경에 들어가고 싶은지, 내가 부족한 점이 무엇이고 어떻게 채워나갈 것인지 고민할 것세 개 중에 마지막 것만 했다. 내가 관심있는 회사들의 채용공고, 블로그, 면접 후기 같은 것을 보고 객관적으로 내가 필요한 경험이 무엇인지 찾고자 했다.아래 세 개가 내가 뽑아낸 것이다. 2, 3번은 이전 회사에서의 경험으로도 어필할 수 있겠지만 조금 더 자신있게 나 이런 사람이에요! 말할 수 있도록 조금 더 경험을 쌓으면 좋..
이번 주에 한 것자바스크립트 프로토타입, 클래스 개념 공부숫자 업앤다운 게임 리팩토링 (도메인과 UI 로직 분리, 기능 추가) 지난주 개선점을 잘 수행했나?과제 수행 목적에 대한 고민하기 (구현에만 집중할 것이 아니라)이론 공부 시, 스스로 질문하고 답해보기과제를 진행하면서 틈틈이 이 과제를 왜 해야 하는지, 왜 이런 요구사항이 나왔는지 고민을 했다. 도메인과 UI 로직에 대한 고민을 해보라는 게 가장 큰 목적이었다고 생각한다. 도메인 로직을 분리해 놓으면 여러 View에서 재사용하기 좋다. 각 각의 역할은 주요 데이터 관리 및 기능 정의, 사용자와의 상호작용이므로 신경 써야 하는 부분이 분리되어 유지보수도 용이할 것이라고 생각했다. 그 외에는 학습한 클래스 개념을 직접 사용해 보며 체득시키기 위해, 기..
회고목적멘토링을 더 잘 받기 위해, 공부와 과제를 잘 수행했는지 부족한 점이 있으면 어떻게 개선할지 찾기 위해. "나" 보고서. 내가 어떻게 했을 때 공부가 잘 되는지 등을 찾기 위해 이번주는 좋은 것과 나쁜 것이 무엇이 있었나요?숫자 업앤다운 게임 과제를 기간 안에 수행한 것이 좋았다.여행과 약속으로 멘토님과 과제 PR 핑퐁을 한 번 밖에 못한 것이 아쉬웠다. 이번주 진행했던 학습/개발 내용은 무엇이었나요?자바스크립트 개념 학습 - 비동기 (콜백함수, promise, async/await), 클로저, this과제 - 숫자 업앤다운 게임 가장 기본적인 동작 구현 가장 고민을 했던 부분은 무엇이었나요?1. 공부 방법지난 주에 코어 자바스크립트만 읽고 공부했더니 개념 이해도가 부족했다고 느껴서 이번에는 m..
한 것코어 자바스크립트 1~2장 (데이터 타입, 실행 컨텍스트 부분) 공부가상 이력서 만들면서 학습 목표 스스로 설정하기 느낀점책 붙들고 대학교 때 시험 준비하듯이 공부 했더니 이해를 확인하는 질문에 대답을 잘하지 못했다. 또, 질문의 의도를 파악하기 어려웠다. 불변성, 불변 객체 부분 공부할 때 개념을 깔끔하게 이해하지 못했는데 얼추 아는 지식이기 때문에 대답을 잘 할 수 있을 거라고 생각했는데 그렇지 않았다. 불변에 대한 개념 정리를 더 확실히 해야겠다고 느꼈다.화, 수, 목, 총 3일 시간을 내서 공부 했는데 화요일에는 주로 금요일 모의면접 때 털리면 어떡하지? 나 못하는 것 보고 멘토님께서 실망하시면 어떡하지 이런 말도 안되는 고민과 생각을 하느라 시간을 보냈다. 화요일에 일일 회고를 하면서 내일..
![]()
리액트의 Suspense를 활용해 선언적으로 UI를 작성해보자 React에서 데이터를 fetch하고 로딩중인지 에러가 발생했는지를 판별하고 그에 맞는 UI를 보여주는 작업은 자주 반복되는 일이다. 이번에 회사에서 React 18로 업그레이드 하면서 일부분에 이것을 선언적으로 작성할 수 있게 도와주는 Suspense를 도입했다. 이 글에서는 Suspense가 무엇인지 알아보고 실제로 적용하는 예시를 보여주려고 한다. Suspense란? React에서 제시한 동시성 컨셉과 관련된 것이다. Suspense는 비동기적으로 데이터를 불러오거나 컴포넌트를 dynamic import할 때 발생할 수 있는 지연 시간을 더 효과적으로 관리할 수 있도록 도와준다. Suspense를 활용하면 비동기 로직을 컴포넌트의 상위 ..
SPA란? 참고 개요 WEB API로 제공되는 HashChangeEvent, History를 활용해 브라우저 이동을 감지하거나 조작할 수 있다. HashChangeEvent 페이지 내 특정 위치로 스크롤할 때 사용되는 API이다. URL에 붙은 해시값(#)의 변경을 감지할 수 있다. 예시) function locationHashChanged() { if (location.hash === "#somecoolfeature") { somecoolfeature(); } } window.addEventListener("hashchange", locationHashChanged); History 브라우저의 세션 히스토리를 조작할 수 있게 해주는 API이다. 글로벌 객체인 history로 접근 가능하다. back, ..
버블링 한 요소에 이벤트가 발생하면 최상단 조상 요소를 만날 때까지 이벤트가 위로 전파되는 현상 아래 예시코드를 실행하면 1번!, 2번! alert 창이 차례로 뜬다. 요소에 발생한 이벤트가 까지 위로 전파된 것이다. 클릭해 주세요. 이벤트가 전파되지 않게 막고 싶다면 stopPropagation을 활용할 수 있다. 클릭해 주세요. 캡쳐링 이벤트가 최상위 조상에서 시작해 아래로 전파되는 현상 우리가 자주 쓰는 addEventListener의 capture 옵션을 줘서 캡쳐링 단계에서 이벤트를 잡아낼 수 있다. removeEventListener로 이벤트를 지울 때도 capture 옵션을 똑같이 줘야 한다. // 캡쳐링 element.addEventListener("click", foo, true); //..
HTML (Hypertext Markup Language) 웹 페이지를 표시하기 위해 개발된 언어이다. 구조적인 문서를 만들 수 있는 방법을 제공한다. 브라우저는 HTML 문서를 해석해서 웹페이지로 보여주는 역할을 한다. DOCTYPE Hello World! HTML 최상단에 형태로 작성한다. 웹 브라우저에 해당 문서의 버전이나 타입을 알려주는 역할을 한다. DOCTYPE을 선언하지 않으면 브라우저는 쿼크모드로 문서를 해석한다. 💡 쿼크모드 - 브라우저 하위 호환성을 위해 존재하며 현대의 웹 표준과는 다르게 동작할 수 있다. : 문서의 제목을 정의 : 불러올 자바스크립트 파일을 정의 그 외 , 등 리소스를 연결한다. 문서의 메타데이터를 나타낸다. 인코딩 방식, 저자, 뷰포트 설정, 페이지 설명과 같은 정..
![]()
자바스크립트 스코프 개념을 정확히 알아야하는 이유는 현재 사용되는 변수가 어디에서 선언된 변수인지 정확히 알 수 있기 때문이다. 스코프는 식별자의 유효범위를 말한다. 여기서 식별자에는 변수, 함수, 매개변수 등이 있다. 스코프는 연결리스트 형태로 함수 객체 안에서 [[Scope]] 프로퍼티에 저장된다. 이렇게 관리되는 것을 스코프 체인이라고 한다. 함수가 실행되면 새로운 실행 컨텍스트가 만들어지는데 이 실행 컨텍스트는 자신이 사용할 스코프 체인을 이렇게 만든다. 현재 실행되고 있는 함수 객체의 [[Scope]] 프로퍼티를 복사 새롭게 생성된 변수 객체를 해당 체인의 제일 앞에 추가 예시 코드를 보자. const a = 1; const outer = function () { const b = 2; cons..
![]()
목적 개발 내용을 바로 확인할 수 있는 환경 소스 관리가 쉬운 환경 일관된 코드 스타일을 유지할 수 있는 환경 (extra) 타입스크립트를 사용할 수 있는 환경 폴더를 생성하고 프로젝트를 만들어주자. npm init -y 1. eslint, prettier 설정 eslint와 prettier 세팅을 먼저 해보자 eslint는 일관된 코드 스타일을 가져가기 위해 사용한다. prettier는 eslint와 다르게 indent, tabSize 등을 통일시켜 코드를 보기 좋게 만드는데 도움이 된다. eslint 먼저 eslint 관련 의존성을 설치해보자 npm i -D eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plug..
![]()
프로토타입의 정의 자바스크립트는 프로토타입 기반 언어이다. 프로토타입 객체를 통해 객체의 메서드와 속성들을 상속한다. 자바스크립트에서는 객체를 생성할 때 자신의 부모 객체와 연결되는 링크를 가지게 된다. 프로토타입의 이해 프로토타입을 알아보기 위해 간단한 Person 생성자를 만들어보겠습니다. function Person(name, age) { this.name = name; this.age = age; this.sayHi = function () { console.log("HI"); }; } console.dir(Person); // 1 const person1 = new Person("heeji", 100); console.dir(person1); // 2 1의 결과 2의 결과 생성된 person1 ..
