본문 바로가기

728x90

👩‍💻 개발 공부

(43)

[처음 만난 리액트] React 책읽기 : Chapter 9-12 정리 [ 참고 서적 : 소플의 처음 만난 리액트(2판) - 한빛미디어 ] ✅ 조건부 렌더링 (Conditional Rendering)조건에 따라 렌더링 결과가 달라지도록 하는 것🔹 1. 엘리먼트 변수리액트 엘리먼트를 변수처럼 저장해서 조건에 따라 선택적으로 렌더링 let button;if (isLoggedIn) { button = ;} else { button = ;}return {button};🔹 2. 인라인 조건▶ 인라인 If조건문을 코드 안에 직접 집어넣는 방식논리 연산자 && (AND) 사용앞의 조건이 true일 때만 뒤의 엘리먼트가 렌더링됨{isLoggedIn && }▶ 인라인 If-Else삼항 연산자 ? : 사용조건이 true면 첫 번째, false면 두 번째 항목을 렌더링서로 다른 두 가지..

[처음 만난 리액트] React 책읽기 : Chapter 6-8 정리 [ 참고 서적 : 소플의 처음 만난 리액트(2판) - 한빛미디어 ] 🔹 React State 정리✅ State란?리액트 컴포넌트의 변경 가능한 데이터개발자가 직접 정의하여 사용State가 변경되면 컴포넌트가 재렌더링됨렌더링이나 데이터 흐름에 사용되는 값만 State에 포함해야 함🎯 State의 특징JavaScript 객체 형태직접 변경 불가능 → 반드시 지정된 방법(set 함수)으로 변경해야 함⚛️ 클래스 컴포넌트에서 State 사용법생성자에서 State를 한 번에 정의State 변경 시 setState() 함수 사용⚡ 함수 컴포넌트에서 State 사용법useState() Hook을 사용하여 각각의 State를 정의각 State별로 제공되는 set 함수를 사용하여 변경🔹 React 생명주기(Life..

[처음 만난 리액트] React 책읽기 : Chapter 0-5 정리 토스뱅크 멘토님 조언을 따라서 요즘 전공서적(?) 개발서적(?) 책들을 읽고 있는데,오래 기억하려면 내용을 요약해두면 좋을 것 같아 정리한다. 이 책은 입문자 기준이라, 설명이 꽤 자세하다.프론트엔드 개발자들은 개념을 탄탄히 다지는 데에 도움이 될 것 같다. 지금 읽고 있는건 React 도서랑 Node JS 도서인데,이번 달 내로 완독하고 Next JS와 Springboot 책도 읽어보고 싶다. 어릴 땐 책을 참 좋아했는데, 요즘은 읽을 시간이 많이 없어서 아쉽다 🤓📖요약은 깔끔하게 하려고 chatgpt의 도움을 받았다![ 참고 서적 : 소플의 처음 만난 리액트(2판) - 한빛미디어 ] 🔹 웹 개발 기본 개념 정리🏗 HTML (HyperText Markup Language)웹사이트의 뼈대를 구성하..

[한경xToss] 🍑추가공부) Node JS, MySQL 서버 트러블슈팅 / API 만들기 ER_NOT_SUPPORTED_AUTH_MODE 에러 mysql 트러블슈팅 기록터미널에서 node mysql-server.js 로 서버를 실행했을 때, 아래와 같은 오류가 났다.code: 'ER_NOT_SUPPORTED_AUTH_MODE',errno: 1251,sqlMessage: 'Client does not support authentication protocol requested by server; consider upgrading MySQL client',sqlState: '08004',fatal: true 분명 몽고디비 쓸때는 잘됐는데..!!!이 오류는 MySQL 서버의 인증 방식이 현재 사용 중인 MySQL 클라이언트에서 지원되지 않기 때문에 발생한다고 한다 MySQL 8.0 이상에서는 기본 인증 플러그인이 caching_sha2_passwor..

[한경xToss] Fullstack 개발 - 중간 프로젝트 회고 📚👩‍💻 [한국경제신문 with toss bank] Tech 우수인재 양성을 위한 풀스택 과정 2기 약 3주 동안 진행한 중간 프로젝트 후기.지난 주에 발표가 끝났는데, 더 미뤘다가는 기억이 휘발될 것 같아 서둘러 작성해보려 한다 ⬇️ 플젝 소스 ⬇️ https://github.com/inthhh/bufl_fe GitHub - inthhh/bufl_fe: 버플 - 월급 쪼개기 자동화 서비스버플 - 월급 쪼개기 자동화 서비스. Contribute to inthhh/bufl_fe development by creating an account on GitHub.github.com 목차 1. 팀 빌딩2. 주제3. 기획안 작성4. 개발 - 개발 진행 - 사건사고5. 발표 준비 1. 팀 빌딩팀은 강사님께서 임의로..

[한경xToss] 8주차 요약 : Typescript + 중간 팀플🥷 * 개인의 학습 내용 기록 중, 극히 일부의 내용만 작성되었습니다. typescript 팀플 시작 당시 팀원들에게 react ts로 개발을 진행하자고 했었는데,마침 강사님이 강의를 진행해주셨다.ts를 경험해보지 않은 팀원들이 있었기에 다행이었음!! //타입 단언(Assertion) : 형변환과 유사type Person = { name: string age: number} //타입좁히기function func1(value: number | string) { //value.toFixed() //실수형으로 바꾸기 //value.toUpperCase() //대문자로 바꾸기 if (typeof value === 'number') { value.toFixed() } else if (typeof v..

[한경xToss] 6-7주차 요약 : React.js 심화, NodeJS 기초 개인의 학습 내용 기록 중, 극히 일부의 내용만 작성되었습니다. React 기초List & Key리스트(List): 배열 데이터를 동적으로 렌더링하기 위해 사용되는 JSX 요소들의 집합 React에서는 배열의 각 항목을 JSX 엘리먼트로 변환하여 화면에 출력합니다.키(Key): 리액트에서 각 리스트 항목을 고유하게 식별하기 위해 사용하는 속성입니다. 키는 리액트가 어떤 요소가 변경되었는지, 추가되었는지, 제거되었는지를 빠르게 파악하여 DOM을 효율적으로 업데이트하는 데 중요한 역할을 합니다.Form리액트에서 입력폼(input form)은 사용자의 입력을 받아 상태(state)로 관리하는 중요한 요소입니다. 입력폼을 만들 때는 리액트의 상태(state)와 이벤트 핸들러를 사용하여 입력 데이터를 관리합니다..

[React] Redux 개념 및 역할, 파일 구조 디렉토링 개발을 처음 진행할 때는 리덕스 내용을 한 파일에다가 모아두다가,인턴 하면서 디렉토링 하는 방법을 배웠었는데 또 써먹을 일이 생겨 기록해둔다. Redux는 애플리케이션의 상태를 한곳에서 관리하는 라이브러리이다. 여러 컴포넌트에서 같은 데이터를 공유할 때 유용하다. 1️⃣ Redux 파일 구조 (in React typescript) /redux /actions # 액션 정의 (이벤트 발생 시 필요한 데이터 정의) categoryActions.ts /reducers # 리듀서 정의 (상태가 어떻게 변경될지 결정) categoryReducer.ts store.ts # 스토어 설정 (전체 상태 관리) 각 파일은 Redux의 핵심 요소인 액션(Acti..

이전 1 2 3 4 ··· 6 다음

728x90

티스토리툴바