안녕하세요, 피터팬입니다! 오늘은 동기 처리와 비동기 처리에 대해 알아볼건데요! https://peter-coding.tistory.com/264 [React] fetch를 통해 HTTP 요청 보내기 안녕하세요, 피터팬입니다! 오늘은 fetch에 대해 배워볼건데요. fetch는 서버에 HTTP요청을 보내 데이터를 받을 수도, 보낼 수도 있습니다. JS는 필요할 때 서버에 네트워크 요청을 보내고 새로운 정 peter-coding.tistory.com 위 fetch글에서, async와 await를 이용해 fetch(비동기 함수)를 동기 처리하도록 바꾸었는데요. 그럼 동기 처리와 비동기 처리가 무엇일까요? 동기 처리 ; 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있음 비동기 처리 ; 요..
안녕하세요, 피터팬입니다! 오늘은 fetch에 대해 배워볼건데요. fetch는 서버에 HTTP요청을 보내 데이터를 받을 수도, 보낼 수도 있습니다. JS는 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있습니다. 이는 HTTP 요청에 최적화 되어있고 상태도 잘 추상화 되어있고, Promise를 기반으로 되어있기 때문에 상태에 따른 로직을 추가하고 처리하는데 최적화 되어 있기 때문입니다. fetch의 기본 문법은 다음과 같습니다. let promise = fetch(url,[options]) .then(response => response.json()) // 정보 받는 방식 (아래는 JSON) .then(response => data.filter(item=>item.isReq..
오늘은 Visual Studio Code 단축키들을 정리해볼 건데요! 아래 Reference에서 자주 쓰일 것 같은 것들만 정리해보겠습니다. Ctrl+Enter ; 커서가 위치한 곳 아래 줄에 빈 행 삽입 Alt + 방향키(위/아래) ; 커서 위치한 행이 방향으로으로 이동 Ctrl + BS ; 단어 부분 삭제(커서 왼쪽) Ctrl + DEl ; 단어 부분 삭제(커서 오른쪽) Ctrl + Shift + \ ; 대응하는 괄호에 점프 Ctrl + L ; 행을 선택하여 커서를 아래 행으로 이동 요즘은 어떤 프로그램을 쓰든 어느정도 익숙해지면 단축키부터 검색해서 익히는 거 같아요. 단축어만 알면 자주 사용하는 프로그램일수록 프로그램 사용의 질이 올라가고, 그에 따라 삶의 질이 올라간답니다. 처음 2~3번만 메모해..
안녕하세요, 피터팬입니다! 오늘 배워 볼 것은 React의 메모이징 기법인데요. React의 메모이징 기법에는 React.memo, useCallback, useMemo 이렇게 3가지가 있습니다. 1. React.memo React.memo란? 부모 컴포넌트가 렌더링 될 때 해당 컴포넌트에 속하는 모든 자식 컴포넌트 또한 렌더링됩니다. 하지만, 부모 컴포넌트에서 자식 컴포넌트로 내려주는 props가 바뀌지 않았다면, 해당 자식 컴포넌트를 리렌더링하지 않아도 될 것입니다. 컴포넌트에서 리렌더링이 필요한 상황에서만 해주도록 설정할 수 있는데 이 때 사용하는 함수가 바로 React.memo 함수입니다. 사용 예시 const Output = () => {return()}; export default **Reac..
안녕하세요, 피터팬입니다! 오늘은 Modal을 작성해볼건데요. 모발(Modal)이란 화면 위에 하나의 작은 화면을 만들어 부가적인 일들을 처리할 수 있게 만드는 기능입니다. vs 팝업 ; 현재 화면에 다른 화면을 하나의 창으로 보여주는 기능 예시 index.js Modal.js import { Fragment } from 'react'; import ReactDOM from 'react-dom'; import classes from './Modal.module.css'; const Backdrop = (props) => { return ; }; const ModalOverlay = (props) => { return ( {props.children} ); }; const portalElement = do..
안녕하세요, 피터팬입니다! 오늘은 localStorage에 대해 배워볼건데요. localStorage는 개발자 도구(F12 혹은 ctrl+shift+i)에서 보실 수 있습니다. 개발자 도구 > 애플리케이션 > 로컬 스토리지 > chrome-extension/.... 브라우저가 열려있는 동안 유지되는 sessionStorage와 달리, localStorage는 브라우저를 닫았다 열어도 데이터가 남아있습니다. localStorage ; 유효기간 없이 데이터를 저장하고, JS를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라짐 - localStorage환경에 객체를 저장하려면 JSON.stringify를 통해 직렬화를 시켜주어야 함 - localSotrage환경에서 객체를 가져오려면 JSON...
오늘은 Component에서 Component로 배열을 전달한건데요 ! 일단, 배열을 보낼 파일을 만들어보겠습니다. emotion정보들이 담긴 배열을 전달 해 볼 것입니다. # src > util > emotion.js emotionList배열을 정의하여 export시켜주었습니다. 객체로 구성되엉 있으며, 각각의 객체는 id,img,descript로 작성되어있습니다. export const emotionList = [ { emotion_id: 1, emotion_img: process.env.PUBLIC_URL + `/assets/emotion1.png`, emotion_descript: "완전 좋음", }, { emotion_id: 2, emotion_img: process.env.PUBLIC_URL ..
1. 다음은 오지 않는다. '이번만, 다음에!' 하지 않기 3의 법칙 ; 비슷한 일을 세 번째 하게 되면 리팩토링 한다. 2. 깨어있기(사고하기) 하루 열심히 일한다고 해도, 내가 실제로 '사고'한 시간은 몇 분 안됨 3. 메모하기 ; 내가 필요한 지식들 정리하기 - 내가 필요한 지식들 꼭 메모해놓기 !! 하던거 하고, 메모해 놓은 것들 따로 블로그에 정리하기 4. 우선 순위 정하기 ; T자로 공략해 나가기 주력 나무만 키운다고 좋은 개발자가 될 수 있냐? NO 잘성장하고 튼튼하게 자라나기 위해서는 토양이 잘 갖춰져 있어야함 튼튼 토양 ; Git 명령어, 개발툴 효율적, 터미널 명령어 등 깊은 토양 ; 자료구조, 알고리즘, 리팩토링 5. 일정관리 ; 균형 있게 공부하기 하나하나씩, 차근차근, 즐기면서 공..