전체 글
-
[Javascript] bind 알아보기WEB Dev/Javascript | REACT | Node.js 2023. 3. 8. 00:44
bind 알아보기 해당 예시는 코어 자바스크립트의 '함수 바인딩'을 참조하였습니다. 📌 들어가며 유데미 강의 중 bind에 대해 설명하며 'bind는 향후 실행을 위해 함수를 사전에 구성한다. 기본적으로 함수가 실행될 때 받을 인수를 미리 구성할 수 있다.'라고 설명하는데, bind에 사용법에 대해 추가로 더 알아본다. 📌 bind란 bind는 자바스크립트 메소드로 호출되면 함수처럼 호출 가능한 '특수 객체(exotic object)'를 반환한다. 이 객체를 호출하면 this가 참조하는 변수(context)로 고정된 함수가 반환된다. let exFunc = func.bind(context); 📌 사용하기 1. 먼저 객체에 변수와 함수가 존재할 때 객체 내의 함수를 다른 변수에 할당해 실행하면 예상한 대로..
-
[React] 원티드 프리온보딩 프론트엔드 Day1WEB Dev/StudyNote 2023. 3. 6. 21:43
😃 원티드 프리온보딩 프론트엔드 Day1 3월 프론트엔드 챌린지 로그인 기능 구현, 하나부터 열까지! 실제 동작하는 서버를 바탕으로 프론트엔드에서 로그인 기능을 구현해 봅니다. 배포된 서버와 로컬 서버 등을 호출해 보면서 인프라와 백엔드에 대해서도 알아봅니다. 보안이나 프로젝트 디렉토리 구조 등 현업에서 조금 더 나은 프로젝트를 위해 해볼만한 고민들을 함께해 봅니다. 📍 개요 1강. 로그인의 개념과 어플리케이션 구조 알아보기 - 로그인의 기술적 정의와 실제 서비스에서의 사용도 - 직접 로그인 화면과 Mock API를 세팅 - 구성해본 로그인 로직이 실제 서비스에 적용되기 위해서 필요한 부분 확인 ➕ 로그인이란? 📌 로그인의 정의 알아보기 1) 시스템에 엑세스 하기 위해 2) 제한된 파일과 시스템에 엑세스..
-
[React] 리액트 포탈 React Portal을 통해 모달 만들기WEB Dev/Javascript | REACT | Node.js 2023. 3. 5. 00:30
해당 내용은 Udemy | React 완벽 가이드 with Redux, Next.js, TypeScript 강의에서 일부 발췌하였습니다. 가독성을 위해 일부 코드삭제가 있어 그대로 따라하면 문제가 생길 수 있습니다. 📌 들어가며 유데미 리액트 강의를 들으면서 Portal 사용법을 익혀두면 좋을 것 같다고 생각해서 별도로 작성한다. 유데미 강의는 별도로 필기를 하면서 듣고 있는데, 포탈 강의때는 쉽네 하고 넘겼다가 혼자서 못하겠어서 다시 한 번 복습 겸 정리! 📌 리액트 포탈이란 Portal은 JSX를 새 창이 아니라 화면 최상단으로 띄워야 할 때, 리액트가 렌더링되는 div#root 내부가 아닌 그 위로 렌더링 할 수 있게 해주는 방법이다. 보통 우리가 흔하게 아는 모달, 그러니까 정보를 가진 JSX를 ..
-
[에러대백과] yarn 으로 create-react-app 설치 중 에러 (n 명령어로 node 버전 수정)WEB Dev/에러대백과 2023. 2. 26. 21:01
yarn 으로 설치를 하다 아래와 같은 에러가 발생했다. 번역하면 노드가 모듈과 호환되지 않는 버전으로 버전을 변경하라는 이야기.. 그 정도로 오래전 노드를 쓰고 있었나....!! 요즘 계속 노드 호환성이 불량하다는 에러 메시지가 나오고 있다 흑흑.. 1. 버전 변경을 위해 npm 으로 n 을 설치해준다. 2. node 최신 버전을 설치한다. lts로 설치하기 위해 n lts을 입력한다. 바로 lts 최신 버전의 node 가 설치된다. 버전이 필요한 경우 n 16.15.1 처럼 입력한다. 만약 node: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.28' not found (required by node) 과 같은 오류가 발생한다면 버전을 낮추는 방법도 있다...
-
[React] npm 대신 yarn으로 create-react-app 시작하기WEB Dev/Javascript | REACT | Node.js 2023. 2. 26. 20:51
yarn 으로 create-react-app이 익숙하지 않아서 터미널 명령어 복습 겸 기록! ♪(´▽｀) yarn으로 create-react-app 설치하기 1. yarn 이 설치되지 않은 경우 yarn 을 npm을 통해 설치한다. (-g는 글로벌 global이란 뜻으로 붙이면 로컬 전역에 설치한다) npm install -g yarn * 만약 npm도 설치되어 있지 않다면 별도로 설치해야함! node 설치 바로가기 2. 터미널을 열어 아래 명령어를 입력하여 create-react-app을 yarn으로 설치한다. yarn create react-app 새폴더명 * npm은 npx install create-react-app을 입력하면 되지만 yarn은 create를 명령어로 사용해서 설치한다는 점을 기억..
-
[React] Udemy 강의 노트 11-2WEB Dev/StudyNote 2023. 2. 26. 01:41
리액트 Portal 을 통해 모달 추가하기 - 리액트 포털로 컴포넌트를 내가 원하는 DOM 트리의 특정 위치에서 렌더링 하여 사용할 수 있다. - 포털을 이용하기 위해 public 폴더에 index.html에서 수정을 해주어야 한다. -div.root 위에 overlays라는 id를 갖는 div를 추가해 모달과 백드롭을 포털한다. 카트 및 모달 State 관리 - 장바구니가 보이는 state와 보이지 않는 state가 있다. - state 가 둘 이상이면 리액트로 state를 관리해야 한다. - 리액트가 이 컴포넌트에 대해 state를 관리하고 최신 state 스냅샷에 접근한다. - 함수를 갖는 프롭스 이름에 대한 규약은 on으로 시작하는 것이다. 장바구니 컨텍스트 추가 - 장바구니 데이터를 컨텍스트로 ..
-
[React] Udemy 강의 노트 11-1WEB Dev/StudyNote 2023. 2. 20. 01:22
설정 시작하기 - 이전까지 useEffect, useReducer 등의 훅을 살펴보았다. - 모든 핵심 리액트 기능을 활용하여 음식 주문 앱을 만든다. - 일반적인 ui를 위한 UI 폴더와 header등을 넣는 Layout 폴더, 아이템을 담는 Meals 폴더와 장바구니인 Cart 폴더를 만든다. "헤더" 컴포넌트 추가하기 - 헤더는 상단에 있는 툴바 - 이미지도 import 할 수 있다. import mealsImage from '../../assets/meals.jpg'; , - 임포트 하면 완성된 애플리케이션에 이미지가 포함되도록 반환된다. - 서버에 배포하여 해당 이미지에 대한 링크를 만들 수 있고 그 링크는 만들어진 코드에 동적으로 삽입된다. "장바구니" 버튼 컴포넌트 추가하기 - "식사" 컴포..
-
[CSS] SCSS @for 반복문으로 순위 숫자 리스트에 삽입하기WEB Dev/HTML | CSS 2023. 2. 15. 21:02
상품 판매 순위를 list에 1,2,3,4 하드코딩 하거나 스크립트 처리 하지 않고 SCSS의 반복문을 이용하여 가상요소로 삽입하는 방법 위와 같이 작은 원 안에 숫자를 순차적으로 넣어야 할 때 사용할 수 있다. @for 변수 from 시작숫자 through 끝 숫자 를 선언하고 중괄호로 감싸준다. {} 그리고 가상요소의 content에 #{$i}를 사용해 숫자를 적용해주면 된다. 내부에 숫자를 텍스트로 넣지 않고 별도로 배열을 선언해서 적용하는 방법은 검색하면 다수 나오는데 이렇게 순서를 순차적으로 적용하는 방법이 없어 공유한다. ul { li{ position: relative; //순위 표시 //$i라는 변수가 1부터 10까지 (순위를 표시할 것이 더 많다면 10을 더 늘려주면 된다) @for $i..
-
[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 06WEB Dev/StudyNote 2023. 2. 12. 22:18
⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-02-12 21:00 6일차 안내 - 책 요약 정리 4장 프로젝트 개발 4.2 레이아웃 네비게이션 바 chakra-ui를 이용해 네비게이션 바 UI 생성 4.2 개별 영화 상세 정보 영화 상세 정보 리졸버 영화의 자세한 개별 정보를 보여주기 위해서는 목록이 아닌 각 영화 하나에 대한 요청을 처리하는 필드가 필요 이를 위해 film 쿼리 필드를 생성 개별 영화 페이지 구성 영화 개별 UI를 보여주기 위해 영화별 페이지 구성 react-router의 URL 파라미터를 통해 동적으로 구성하고 파라미터 값으로 film 필드에 대한 쿼리를 실행 react-router의 컴포넌트에서 ..
-
[React] Udemy 강의 노트 10-2WEB Dev/StudyNote 2023. 2. 9. 22:56
useReducer & useEffect - 입력은 전체 폼의 일부이다. - 코드가 너무 일찍 실행된 경우에는 useEffect는 state 업데이트 후에만 실행됐었다. - 의존성은 state 전체이지 유효성이 아니다. - 객체의 특정 속성을 추출하는 객체 디스트럭처링을 이용할 수 있다. - const { isValid: emailIsValid } = emailState; 로 emailState의 isValid state를 emailIsVaild라는 상수로 별칭할당을 할 수 있다. 중첩 속성을 useEffect에 종속성으로 추가하기 - useEffect()에 객체 속성을 종속성으로 추가하기 위해 distructuring을 사용 const { someProperty } = someObject; useEff..