react29 [세미나] 왜 리액트인가? 사내에서 진행했던 세미나 발표 자료, 스크립트 정리0. 왜 리액트인가?오늘 주제는 "왜 리액트인가?"입니다. 리액트는 웹 개발에서 가장 인기 있는 기술 중 하나로, 전 세계의 수많은 개발자들과 기업들이 선택하고 있는 기술입니다. 2024년 스택오버플로우 개발자 조사에 따르면, 지난 1년 동안 어떤 웹 프레임워크와 웹 기술로 광범위한 개발 작업을 했으며, 내년에 어떤 작업을 하고 싶으신가요? 라는 설문에서 약 40%가 React를 선택했습니다. 2024년 뿐만 아니라, 리액트는 등장 이후로 꾸준히 순위가 증가하여, 현재까지도 높은 순위를 유지하고 있습니다.이런 통계는 리액트가 단순히 유행으로 많이 사용되었던 것이 아니라, 현재까지도 발전하며 많은 사람들에게 사용되고 있다는 것을 보여줍니다. 따라서 오늘 발.. 2024. 8. 29. [TIL] Redux-Toolkit, Redux-Persist 에러 A non-serializable value was detected in an action, in the path: `register`. 프로젝트 테스트 중 Redux-Toolkit과 Redux-Persist를 함께 사용하니 콘솔창에 계속 에러가 났다.chatGPT에게 물어보니 아래와 같은 답을 주었고 이해는 안 됐지만 에러는 해결함...const store = configureStore({ reducer: persistedReducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: { // 직렬화 확인을 무시할 액션 타입들을 설정합니다. ignoredActions: ["persist/PERSIST"], }, }),}); 2024. 6. 16. [TIL] Vite-React-Eslint Prop-Types 검사 에러 없애기 프로젝트 프론트 테스트 중 Vite로 구축한 React 환경에서 컴포넌트에 props를 넘기는데'error' is missing in props validationeslintreact/prop-types위 에러가 계속 나서 내가 처음에 타입스크립트로 잘못 선택했나 싶었는데 에러창을 잘 살펴보니 eslint 에서 문제가 있는 것 같아 찾아봤다. 이유는 vite로 프로젝트 구축할 때 자동으로 생성되는 .eslintrc.cjs 파일의 extemds 부분에 있는 "plugin:react/recommended" 가 문제였다. 이 설정은 React 컴포넌트에서 PropTypes를 사용하여 props의 타입을 검사하도록 권장해서 PropTypes를 정의하지 않았을 때 경고 또는 오류를 발생시킨다고 한다. (출처 Ch.. 2024. 6. 14. [React, JavaScript] ChatGPT 질의응답 - styled-components와 JavaScript 표현식 styled-components에 대해서 공부하다가 props 사용 중에 해당 문법이 어떻게 동작하는지 궁금해져서 물어봤다.딥다이브 스터디 할 때 분명 배운 것들인데 또 헷갈린다 ㅠㅠ역시 JavaScript에 대해서 잘 알아야 하겠다... Q1. background-color: ${(props) => props.bgColor}; 이런 식으로 css 코드에서 $과 {}를 사용하는 이유와 동작 방식이 궁금해A1. styled-components에서 CSS 코드 내에서 $와 {}를 사용하는 것은 JavaScript 표현식을 문자열 템플릿(template literals) 내에 삽입하기 위한 ES6(ES2015) 문법의 일부입니다. 이러한 문법은 태그된 템플릿 리터럴(tagged template litera.. 2024. 1. 17. [리액트 숙련주차] 2-21~23 비동기 프로그래밍 2-21 비동기 프로그래밍 입문 1. 동기 방식과 비동기 방식 동기적(synchronous) 방식 - 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식 - 일반적 프로그래밍 세계에서 코드는 모두 동기적으로 실행됨 비동기적(not synchronous) 방식 - 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식 - setTimemout, addEventListner 등 - 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드 - 대표적으로 서버 통신과 관련된 로직들을 포함함 ex) 중식집에서 배달 후 배달원이 다먹을때까지 기다렸다가 그릇을 회수하지 않고, 다른 집도 갔다가 다시 찾으러 오는 것과 비슷함 2. 콜백지옥 - 콜백함수를 익명함수로 전달하는 과정이 반복.. 2023. 7. 11. [WIL] Week 4 - 230630 ~ 0706 주특기 2주차 회고 Fact : 이번주 있었던 일, 내가 한 일 Feeling : 나의 감정적인 반응, 느낌 Finding : 그 상황으로부터 내가 배운 것, 얻은 것 Future : 배운 것을 미래에 어떻게 적용할 것인가 Fact 0630(금) - 리액트 숙련주차 redux 까지 수강 - JS 스터디) 발표 준비 0701(토) - 리액트 숙련주차 React Router Dom 까지 수강 - JS 스터디) 4. 객체 : 기본 1-3 발표 0703(월) - CS 스터디 발제 - 주특기 Lv.2 구현 - JS 스터디) 개인 공부 0704(화) - CS 스터디) 자료구조 개념공부 - 주특기 Lv.2 과제 구현 - JS 스터디) 발표 준비 0705(수) - CS 스터디) 자료구조 개념공부 - 주특기 Lv.2 과제 제출 - 주특기 .. 2023. 7. 10. [WIL] Week 3 - 230623 ~ 29 주특기 1주차 회고 Fact : 이번주 있었던 일, 내가 한 일 Feeling : 나의 감정적인 반응, 느낌 Finding : 그 상황으로부터 내가 배운 것, 얻은 것 Future : 배운 것을 미래에 어떻게 적용할 것인가 Fact 0623(금) - 주특기 주차 발제 - 리액트 입문 강의 수강 - 개인 스터디) 클론코딩 완강 0624(토) - 리액트 입문 강의 완강 - Lv.1 과제 시작 - 개인 스터디) 2주차 발제 JS 딥다이브 계획 수립 0626(월) - Lv.1 과제 제출 - 개인 스터디) 스터디 발표 준비 0627(화) - Lv.1 과제 페어 리뷰, 페어 제출 - 개인 스터디) 스터디 발표 준비 0628(수) - 실전 프로젝트 팀빌딩, CS 스터디 발제 - 스터디 발표 준비 0629(목) - 주특기 1주차 테스트 .. 2023. 7. 10. [TIL] 230707 - CS 스터디 질문 제출, Lv.3 과제 진행, JS스터디 오늘 한 일 - CS 스터디 질문 제출 - Lv.3 과제 진행 - JS 스터디 - CS 스터디 알고리즘 풀이 - 깃허브 레포 합치기 CS 스터디 질문 키워드 1 : 자료의 표현 1. 질문 : ASCII와 유니코드&UTF-8에 대해 서술해주세요. 아스키코드 (ASCII)는 영문 알파벳과 일부 특수문자를 표현하기 위한 7비트 인코딩 방식입니다. 유니코드는 전 세계 모든 문자를 표현하기 위한 코드 체계입니다. UTF-8은 유니코드를 인코딩하는 방식 중 하나이며, 아스키 코드와 유니코드 문자를 호환 하면서 효율적인 인코딩을 제공합니다. 1-1. 꼬리질문 : 위의 인코딩 방식이 사용 되는 예시에 대해 설명해주세요. 아스키 코드는 이메일 주소와 파일명에서 사용 되고, 유니코드는 멀티언어 문서 및 웹 페이지에서 사용.. 2023. 7. 8. [TIL] 230706 - 주특기 2주차 테스트, Lv.2 과제 페어 리뷰, JS 스터디 오늘 한 일 - 주특기 2주차 테스트 - Lv.2 과제 페어 리뷰 - JS 스터디 주특기 2주차 테스트 제출 답안 1. 추가하기 버튼을 클릭해도 추가한 아이템이 화면에 표시되지 않음. - List 컴포넌트에서는 redex로 생성한 전역 데이터 todos를 useSelector로 가져와서 보여주고 있지만, Form 컴포넌트에서 addTodo라는 action creator를 import했음에도 사용하지 않아 redux의 데이터를 정상적으로 추가시켜주지 않고 있습니다. - 따라서 dispatch변수를 선언해 useDispatch()를 선언하여 사용해주고, 제출 버튼을 클릭했을 때 dispatch로 addTodo({...todo, id})를 실행하여 state를 변경할 수 있도록 합니다. const dispat.. 2023. 7. 8. [TIL] 230703~0705 - CS스터디, 주특기 Lv.2 과제 제출, 스터디 한 일 230703 - CS 스터디 발제 - 주특기 Lv.2 구현 - 스터디 개인 공부 230704 - CS 스터디 자료구조 개념공부 - 주특기 Lv.2 과제 구현 - 스터디 발표 준비 (+ 모던 자스 딥다이브 드디어 샀다... 🐕 비 싸 오늘 왔음) 230705 - CS 스터디 자료구조 개념공부 - 주특기 Lv.2 과제 제출 - 주특기 Lv.3 찍먹 시작 - 스터디 발표 준비 더보기 이번주는 집중력이랑 의욕이 레전드로 바닥나서 놀고 자고 ,,, 정말 최소한의 요구사항만 했던 나날들,,, 너무 한 게 없어서 많아보이라고 합쳐두기 ! ^^ WIL 적으면 아주 볼만할듯 싶다 세상에 이렇게나 얼레벌레인 인간이 있을까 미뤄놓은 덕분에 할 게 산더미군요 여기다 대충 순서대로 적어두고 가겠습니다 여기서 오늘은 7/.. 2023. 7. 6. [TIL] 230701 - 리액트 숙련주차 수강, 스터디 발표 오늘 한 일 - 리액트 숙련주차 React Router Dom 까지 수강 - vscode 리액트 익스텐션 설치 - 스터디 발표 리액트 관련 vscode 익스텐션 1. Auto Import - ES6, TS, JSX, TSX - 사용 가능한 모든 가져오기에 대한 코드 작업 및 코드 완료를 자동으로 찾아 구문 분석하고 제공합니다. (익스텐션 공식설명) - 자동으로 컴포넌트나 파일의 import 해주는 익스텐션 - 맨날 임포트 치기 귀찮았는데 짱짱 편함 2. Reactjs code snippets - 형식 자동 입력 스니펫 - 함수형 컴포넌트 만들 때 : rfc - 화살표형 컴포넌트 만들 때 : rsc - 다른 것도 많던데 참고해서 적절히 사용하면 좋을 듯 https://breathtaking-life.tis.. 2023. 7. 6. [리액트 숙련주차] 2-19~20 React Router Dom (1), (2) 1. React Router Dom 이란? - 페이지를 구현할 수 있게 해주는 패키지 - routing 2. React Router Dom 설치 yarn add react-router-dom 3. React Router Dom 사용하기 1. 페이지 컴포넌트 작성 - src 폴더에 pages 폴더를 만들고, 내부에 여러 페이지가 될 컴포넌트 파일을 만든다. 2. Router.js 파일 구현 - 브라우저에 url을 입력하고 이동했을 때 원하는 페이지 컴포넌트로 이동하게끔 만들어주기 -> 즉 url 1개당 페이지 컴포넌트를 매칭해주는 것 Route - src 폴더에 shared 폴더를 생성하고, Router.js 파일을 생성한다. import React from "react"; import { BrowserR.. 2023. 7. 1. 이전 1 2 3 다음
