728x90 Web Frontend27 JS 알고리즘 테스트 환경 VS code로 세팅하기 자바스크립트 코딩 테스트 환경 만들기 아예 세팅을 처음한다면 VS code, npm, node.js 먼저 설치를 해주어야한다.Visual Studio Code 접속하여 설치node.js 설치npm 설치 , npm은 node.js 설치 시 자동으로 설치되므로 터미널에서 npm -v 명령어를 입력하여 npm이 제대로 설치되었는지 확인한다. 잘 생성되었을 경우 현재 설치된 npm의 버전이 출력된다.둘 다 설치가 돼있다면 node -v 와 npm-v 명령어로 각각 버전을 확인해준다. 버전이 잘 출력되면 설치가 잘 돼 있는 것.최종 설정한 package.json 파일 스크립트 보기아래 순서대로 설명해뒀지만 바쁜 사람들을 위해 최종 스크립트 먼저 작성해두었다. (lint 파일을 제외된 스크립트) package.js.. 2024. 8. 22. JSX 유의사항 ☑️ React 컴포넌트는 하나의 값만 출력할 수 있다.자바스크립트는 두 개의 값을 반환하지 않기 때문이다. 따라서 JSX는 반드시 단일 루트 요소만 반환되어야 한다. 모든 JSX요소는 하나의 요소안에 내포 요소로 포함되어있다. 아래는 잘못된 예시이다.const App = ()=> { return ( 모던 리액트 프로그래밍 개념 정리하기 좋은 책이다 ) // 단일 요소로 이루어져 있어야 한다.const add = (a, b) => { return ( a+b a-b ); // 자바스크립트는 2개의 반환값을 가질 수 없다.} JSX는 실제로는 React.createElement 호출로 변환되는데 이때 호출이 단일 객체를 반환해야 한다. 동적인 컨텐츠 출력을 위해 자바스크립.. 2024. 8. 9. 객체 지향 프로그래밍, 프로토타입 이해하기 해당 스터디 기록은 https://github.com/learning-with를 방문하시면 확인하실 수 있습니다. 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는멀티 패러다임 프로그래밍 언어이다.- 모던 자바스크립트 딥다이브 259P프로토타입이란?객체에 접근하기 위한 접근자 프로퍼티이다.모든 객체는 __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입 ([[prototype]]) 내부 슬롯에 간접적으로 접근할 수 있다.👨🏫 프로토타입 이해하기자바스크립트는 프로토타입 기반의 객체 지향 프로그래밍 언어이다.클래스 (ES6)는 프로토타입 기반 객체 생성 패턴의 새로운 객체 생성 메커니즘이다.프로토타입을 이해하기 전에 객체지향 프로그래밍 먼저 이해해보자.☑️ 객체지향 프.. 2024. 8. 2. useReducer로 useState 지옥 벗어나기 useReducer로 useState 지옥 벗어나기const [state, dispatch] = useReducer(reducer, initialQrg, init);useState 지옥에서 벗어나기기존 코드아래는 달력 이벤트를 업데이트하는 컴포넌트 예시입니다.import { useState } from "react";function EditCalendatEvent() { const [startDate, setStartDate] = useState(); const [endDate, setEndDate] = useState(); const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); cons.. 2024. 7. 26. Styled-components 태그에 속성 추가하는 법 매번 className으로 모달 관리하기 번거로울 때매번 className으로 모달 관리하기 번거로울 때는 Styled-components 태그에 속성을 추가할 수 있다. 단, 단순 string 타입으로 작성할 경우, 대문자로 작성이 안된다던지 string 값 작성이 안되는 에러가 발생함으로 html 태그에서 변수값으로 인식하지 못하게 하는 $문자를 입력해주면 에러없이 잘 속성으로 이용할 수 있다.예시 : 모달interface ModalProps { isOpen : boolean; onClose: ()=> void; onClick: ()=> void;}function Modal ({isOpen, onClose, onClick}:ModalProps) => { return ( .. 2024. 7. 10. 🎯 Trouble Shooting 컴포넌트 리턴 후 발생하는 렌더링 에러 페이지가 첫 렌더링 된 후에 새로고침을 하면 위와같은 에러가 발생하는 이슈가 생겼다.🚨 Rendered more hooks than during the previous render.채팅 페이지 정보를 가져오다 발생한 에러.페이지 렌더링 후 새로고침 시 바운더리 에러 발생.로직 순서는useParams를 통해 채팅방 정보를 가져온다.currentUser를 이용해 로그인한 유저의 정보를 가져온다.유저의 정보와 채팅방 정보가 없다면 그대로 return 한다.유저의 역할에 따라 이름, 채팅방 권한 상태를 관리한다.채팅방 페이지를 렌더링한다.에러가 발생한 지점은 if 조건문으로 리턴을 한 후, 아래 useState hook이 발생하여 일어난 에러다.☑️ 문제 코드const ChatRoomPage = ()=> {c.. 2024. 7. 1. 이전 1 2 3 4 5 다음 728x90
