분류 전체보기 (137) 썸네일형 리스트형 [JavaScript] 코어 자바스크립트 4장 - 콜백 함수 아래 책을 읽고 정리한 내용입니다. http://www.yes24.com/Product/Goods/78586788 코어 자바스크립트 - YES24 자바스크립트의 근간을 이루는 핵심 이론들을 정확하게 이해하는 것을 목표로 합니다최근 웹 개발 진영은 빠르게 발전하고 있으며, 그 중심에는 자바스크립트가 있다고 해도 결코 과언이 아니 www.yes24.com 💡콜백 함수를 통해 자바스크립트의 비동기 처리 발전 과정을 이해할 수 있다. 콜백 함수란? 콜백 함수는 다른 코드(함수 또는 메서드)의 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다. 콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수 호출 시점에 대한 제어권을 가진다. 콜백 함수는 함수다. 콜백 함수로 어떤 객체의 메서드를 전달하더라도 그 메서드는 함.. [JavaScript] 코어 자바스크립트 3장 - this 아래 책을 읽고 정리한 내용입니다. http://www.yes24.com/Product/Goods/78586788 코어 자바스크립트 - YES24 자바스크립트의 근간을 이루는 핵심 이론들을 정확하게 이해하는 것을 목표로 합니다최근 웹 개발 진영은 빠르게 발전하고 있으며, 그 중심에는 자바스크립트가 있다고 해도 결코 과언이 아니 www.yes24.com 💡상황별로 this가 어떻게 달라지는지, 왜 그렇게 되는지 이해할 수 있다. 그리고 예상과 다른 대상을 바라보고 있을 경우 그 원인을 효과적으로 추적하는 방법을 알 수 있다. 상황에 따라 달라지는 this 자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때(실행 컨텍스트의 ThisBinding에서) 함께 결정된다. 일반적으로 실행 컨텍스트는 함.. [JavaScript] 코어 자바스크립트 2장 - 실행 컨텍스트 (feat. 호이스팅, 스코프 체인) 아래 책을 읽고 정리한 내용입니다. http://www.yes24.com/Product/Goods/78586788 코어 자바스크립트 - YES24 자바스크립트의 근간을 이루는 핵심 이론들을 정확하게 이해하는 것을 목표로 합니다최근 웹 개발 진영은 빠르게 발전하고 있으며, 그 중심에는 자바스크립트가 있다고 해도 결코 과언이 아니 www.yes24.com 💡실행 컨텍스트를 정확하게 알면 자바스크립트의 동작 방식을 이해할 수 있다. 특히 호이스팅과 스코프 체인에 대해 이해할 수 있다. 실행 컨텍스트란? 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 일반적으로 함수를 실행(호출)할 때 구성된다. 함수가 호출되면, 해당 함수에 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에.. [JavaScript] 코어 자바스크립트 1장 - 데이터 타입 아래 책을 읽고 정리한 내용입니다. http://www.yes24.com/Product/Goods/78586788 코어 자바스크립트 - YES24자바스크립트의 근간을 이루는 핵심 이론들을 정확하게 이해하는 것을 목표로 합니다최근 웹 개발 진영은 빠르게 발전하고 있으며, 그 중심에는 자바스크립트가 있다고 해도 결코 과언이 아니www.yes24.com 💡 자바스크립트가 데이터를 처리하는 과정을 통해 기본형과 참조형 타입이 서로 다르게 동작하는 이유를 이해할 수 있다. 데이터 타입의 종류자바스크립트의 데이터 타입은 크게 두 가지가 있다.기본형 (Primitive Type)Number, String, Boolean, null, undefined, Symbol참조형 (Reference Type)Object (Ar.. [나와 닮은 못난이 농산물 똑닮안] 5. 리팩토링2 (모달 컴포넌트, Layout Shift) 3. UX 개선 작업 구조적인 리팩토링 외에 UX 향상을 위한 업데이트도 있었다. 모달 컴포넌트 생성 기존에는 API 호출 후 에러 응답이 오면 alert로 에러 메시지를 보여주고 있었다. 그대로 가도 문제는 없었지만, 서비스의 이미지와 어울리는 모달을 통해 조금 더 완성도를 높이고자 모달 컴포넌트를 만들게 되었다. 모달로 에러 메시지를 노출할 경우 좀 더 명확하게 의도를 전달할 수 있는 것 같다. (에러 컴포넌트도 추가할 예정이다) const Modal = ({ contentText, buttonText, onClick }: ModalProps) => { return ( {contentText} {buttonText} ); }; 올바르지 않은 이미지를 넣었을 때 에러가 발생하면, 아래와 같은 모달이 뜬.. [나와 닮은 못난이 농산물 똑닮안] 4. 리팩토링1 (react-query, 로딩 컴포넌트) 개요 해커톤이 끝난 지 한 달이 조금 넘게 지났고, 그동안 꽤 많은 리팩토링이 진행되었다. 우선 지저분했던 코드들을 정리하며 폴더 구조 변경 및 로직을 개선했고, UX 향상을 위한 몇 가지 수정을 거쳤다. 이번 글에서는 리팩토링을 하며 직접적으로 와닿았던 4가지의 변화를 정리하고, 서비스의 기획/디자인 측면에서 대대적으로 변경된 결과 페이지를 소개하고자 한다. 1. React Query 도입 해커톤 당시 실패했던 react-query 도입. 너무 아쉬웠고 가장 빠르게 적용하고 싶었던 리팩토링 포인트였다. 근데 왜 도입하려고 했나? 1. react-query의 존재를 알게되었으니까! 프로젝트에 적용해보고 싶으니까! ( ?😮? ) 2. API 호출 시 로딩, 에러를 깔끔하게 처리할 수 있으니까! 3. 캐싱을.. [월간 회고] 2023년 4월 - 조급함 📌 이번 달 회고 이번 달은 조금 게으르게 보냈던 것 같다. 뒤늦게 취준생의 심정을 알아버리고, 마음이 조급해지니 오히려 아무것도 손에 안 잡혔다. 지원서를 작성하고 코딩 테스트를 보기 시작하면서, 부족한 모습만 보여 자신감이 똑 떨어졌던 것 같다. 😢 1. 개발 공부 뭐 그래도 그냥 해야지!라는 마음으로 지난달 진행했던 구름톤 프로젝트를 리팩토링하는데 꽤 많은 시간을 쏟았고, 코어 자바스크립트 2회독을 하고, 리액트 마스터 강의도 간간히 듣고, 알고리즘도 푸는 등 기계적으로 계속 뭔가 하긴 했다. 구름톤 프로젝트 리팩토링 지난달 말 구름톤에서 진행했던 프로젝트를 계속 이어가고 있다. 해커톤이 막 끝났을 당시에는 봐줄 수 없을 정도로 더러웠던 코드들을 싹 정리하고 로직을 조금씩 뜯어고쳤다. 이 과정에서 .. [나와 닮은 못난이 농산물 똑닮안] 3. 36시간 내에 MVP 완성하기2 3. 로직 개발 단계 전역 상태 관리 전반적인 레이아웃을 잡고, 프론트 단 로직 개발에 들어갔다. 서비스 특성상 API를 연동하는 부분이 결과 페이지 하나였기에, 대부분의 상태는 프론트에서 관리되었다. 각 선택지에서 사용되는 질문들도 프론트에서 static으로 가지고 있었다. (거의 하드코딩..?) 결과 페이지에 도달하기 전까지 사용자의 모든 선택을 가지고 있다가 API 호출할 때 넘겨주어야 했고, 이를 위해서는 전역 상태 관리가 필요했다. 아래와 같이 네개의 선택지 결과와 이미지 데이터를 하나의 객체로 묶어서 관리했다. (Recoil 최고다 최고 🤩) export const selectedAtom = atom({ key: 'selected', default: { season: '', weather: '.. 이전 1 2 3 4 5 6 ··· 18 다음
