홍장군의 기록

웹 개발의 꽃 promise... 제대로 공부해보자. 단순히 감으로 axios 쓰면서 땜빵했는데, 제대로 공부할 필요성을 느꼈다. 코드잇 인강을 듣고 fetch 함수와 promise 객체에 대해 공부한 것을 기록한 글이다. 주요 키워드는 JSON, promise, fetch, async, await 이다!! 1. 목차 2. 배운 것 1. fetch 함수 fetch 함수는 서버로 request를 보내고 response를 받아오는 함수이다. fetch는 기본적으로 js 내장 메소드지만, 외부 라이브러리인 axios에 비해 기능이 좀 빈약하다. 그래서 보통 실무에선 axios 라이브러리를 많이 사용하는 모양이다. 어쨌거나 fetch 자체는 웹 통신의 기본 함수라는 것. fetch("https://www.goo..

코드잇 인강을 들으면서 개인적으로 정리한 글입니다. 모던 자바스크립트 기본 문법 정리. 0. 목차 모던자바스크립트란 데이터 타입 AND, OR 연산 null 병합 연산자 변수와 스코프 함수 문장식과 표현식 spread 옵셔널 체이닝 구조분해 모듈 1. 정리 1. 모던 자바스크립트? js 를 공부하다보면 ECMAScript 에크마 스크립트라는 용어를 보게 된다. ECMAScript: 자바스크립트 표준 명세서, 즉 js 언어의 표준이라 이해하면 됨. js가 점점 발전되고 여러 기능이 추가되면서, ECMA라는 국제 표준화 기구가 표준 룰을 관리하게 되는데 그 때 이 룰을 ECMA-262 라는 이름의 문서로 관리함. 이 문서의 내용이 바로 ECMAScript 인 것이다!! 시간에 따라 표준 룰도 바뀌고 js의 ..

0. 문제 상황 지금 만들고 있는 프로젝트에선 모달 종류가 굉장히 많다. 간단히 말하자면, 웹사이트 링크를 모아서 북마크하고 모아두는 웹 사이트인데, (그냥 즐겨찾기의 시각화.. 정도임.) 폴더를 생성, 삭제, 수정하는 모달, link를 각 폴더에 추가, 삭제, 수정하는 모달 등, 큼직한 모달창이 6개씩이나 있다. 이걸 각 컴포넌트에서 각자 관리하려니 코드가 너무 복잡해지고, 관리하기 힘들어지는 느낌이었다. 그래서 이번에는 전역적으로 모달을 관리하는 코드를 짜보려 한다. 미리 만든 모달 디자인. ㅎㅎ 이쁘다. 1. 과정 전역적으로 모달을 관리하기 위해서는, useContext 를 활용해 전역 상태 관리. client side 상태 관리 라이브러리를 활용하기. (예를 들면 zustand) 간단한 코드라 u..

0. 오늘의 배울 것. 리액트 훅의 종류에 대해 알아보자. 사실 나는 강의에서 배운 useState, useEffect, useCallback, useMemo 정도만 알고 있었는데 생각보다 다양하더라. 여러 가지 알아보고 써먹어보자. 참고로 custom hook 말고 리액트에 내장된 훅만 써보았다. 커스텀 훅은 나중에! 1. 목차 useState useEffect useReducer useImperativeHandle useLayoutEffect 2. 훅의 종류 useState 값이 바뀔 때마다 화면을 리렌더링하게 하려면 값을 state로 만들어 관리해야 한다. useState의 인자: state의 초기값. useState가 리턴하는 값: state변수와 변수를 갱신하게 해주는 함수를 배열에 담아 반환함..

0. 오늘의 배울 것 리액트로 프론트 개발을 하다보면 input 을 다룰 일이 정말 많은데, 최근에 이 인풋을 짱 편하게 다룰 수 있게 하는 api를 알아냈다. 바로 react hook form!!!!! 라는 폼 관리 라이브러리다. 각 input 마다 useState로 값을 맞춰야 하고, 정규식을 각각 둬서 validation도 체크해야 하고, 값이 있는지 없는지도 체크해야 하는 등 여러 경우의 수가 많은데, 이걸 단번에 체크해주는 게 바로 react hook form이었다. 이번 포스팅에서는 로그인, 회원가입 폼을 만들면서 react hook form을 공부했던 내용에 대해 적어보고자 한다. 기능에 집중하기 위해 css 적인 부분은 빼고, js 코드만 보겠다. 1. 왜 react hook form을 쓸..

0. 오늘의 배울 것 프로젝트를 짜다보면 폴더 구조를 어떻게 나눠야 할지 자꾸 고민이 된다. 물론 리액트 공식문서 측에서는 폴더 구조에 대해 너무 신경을 쓰지 말라고는 하지만, (폴더 구조에 너무 시간 들이느라 다른 일을 미루는 멍청한 짓 - 배보다 배꼽이 커지는 일 - 을 하지 말라는 뜻인듯.) 그래도 난 여전히 신경이 쓰인다. 그러다 알게 된 개념이 바로 관심사 분리, seperation of concerns 이다. 이번엔 이 관심사 분리가 무엇인지 알아보고 이를 폴더 구조에 적용하는 방법에 대해 알아볼 것이다! 그런데 양이 많으니 쪼개서 1편은 관심사 분리의 개념, 2편은 수직 분리를 폴더 구조에 적용하기, 3편은 수평 분리를 볼더 구조에 적용하기 내용으로 써보겠다. 1. 관심사 분리? 관심사 분리..

0. 오늘의 배울 것 프로젝트를 짜다보면 클래스 이름을 지을 때가 가장 난감하다. 조악한 영어 실력으로 단어 더듬더듬 이어가며 클래스 이름을 지으니 자꾸 이름이 겹치고 헷갈리고 만다. 그래서 이번 포스팅에서는 네이밍 방법론 중 하나인 BEM에 대해 알아보려 한다!! 클래스든, 변수든, 함수든, 남들이 (+ 미래의 나) 알아보기 쉽게 이름을 짓는 것은 매우 중요하다! 이렇게 네이밍하는 데에 사람들이 만들어둔 규칙들이 있다. 여러가지 방법론이 있지만, 오늘은 그 중에서도 많은 곳에서 채택된 BEM 방법론에 대해 알아볼 것이다. 1. BEM이란? B lock E lement M odifier 의 줄임말로, 클래스 이름을 지을 때 block - element - modifier 순으로 이름을 짓자는 방법론이다...

0. 오늘의 배울 것. 비동기 실행 코드에서 쓰이는 async 와 await 키워드에 대해 알아보자!! 이 키워드를 쓰지 않아도 비동기문을 쓸 수는 있지만, 이걸 쓰는 게 더 가시적으로 좋다. 잘 알아보고 활용하자. 1. async와 await async와 await를 쓰면 우리가 앞에서 쓴 fetch then 문보다 더 간단하게 쓸 수 있다. 우리가 이때껏 배운 코드 fetch("url") .then((response)=>response.text()); .then((result)=>{console.log(result);}); 위의 코드를 async await로 바꾸기 async function fetchAndPrint() { const response = await fetch("url"); const ..

0. 오늘의 배울 것. promise 객체가 비동기 실행을 하게 해주는 객체임을 배웠다. 오늘은 좀 더 심화 내용을 배워보자. 왜 promise 객체가 필요한지, promise 객체를 직접 만들어볼 수는 없는지 등!! 1. promise 객체는 왜 있는 걸까? fetch 함수에 그냥 바로 콜백 함수를 인자로 주면 안되는 걸까? 함수에 콜백을 직접 넣는 방식은 콜백 헬 callback hell이라는 문제를 일으킬 수 있다. 지옥의 피라미드라고도 불리는 콜백 헬은 코드 가독성이 겁나 떨어지는 현상을 말한다. promise 객체를 활용하면 가독성이 좋아지고 여러 비동기 작업을 순차적으로 처리하면서 callback hell 문제를 해결할 수 있다 뿐만 아니라 promise 객체에는 비동기 작업에 관한 세밀한 개..

0. 오늘의 배울 것. 코드가 실행되는 방식에는 비동기 실행과 동기 실행으로 나뉜다. 일반적으론 동기 실행이지만, fetch 함수 같은 건 비동기적으로 실행된다. 이번 시간에는 비동기 실행이 무엇인지 알아보고!! 그다음 fetch 함수가 리턴하는 promise 객체가 무엇인지, fetch함수의 원리는 무엇인지 더 자세히 알아볼 예정이다. 1. 비동기 실행이 무엇인가? 웹 통신은 비동기적으로 실행된다. 즉, 순차적으로 실행되는 게 아니라 console에서 작동하는 와중에 request와 response가 와리가리 병렬적으로 지들끼리 통신하는 것이다. // 1번 실행 console.log("start"); // 리스폰스 받아야 실행되므로 기다림... 그 와중에 밑에 console end가 먼저 실행되고, 그..