나의 개발일지

✔️문제 영어 알파벳으로 이루어진 문자열 str이 주어집니다. 각 알파벳을 대문자는 소문자로 소문자는 대문자로 변환해서 출력하는 코드를 작성해 보세요. ✔️제한 사항 1 ≤ str의 길이 ≤ 20 str은 알파벳으로 이루어진 문자열입니다. ✔️ 입출력 예 입력 #1 aBcDeFg 출력 #1 AbCdEfG 💡풀이 const readline = require("readline"); const rl = readline.createInterface({ input: process.stdin, output: process.stdout, }); let input = []; rl.on("line", function (line) { input = [line]; }).on("close", function () { str ..

useState  리액트 훅에는 여러가지 종류가 있는데우선 공부할 것은 이젠 나름 익숙한 useState 이다! useState의 기본 형태는const [state, setState] = useState(initialState);  ❗ ⭐ useState에서 짚고 넘어가야 할 포인트 1️⃣state는 변수, setState를 이용해 state의 값을 수정한다!그리고 state가 만약 원시데이터가 아닌 객체 데이터 타입인 경우그토록 강조하는 불변성을 유지해야 한다!  // 가장 기본적인 Hook// 함수형 컴포넌트 내에서 가변적인 상태를 갖게 함// 카운터 , TodoList// const[state, setState] = useState(초기값);// 함수형 업데이트란?import "./App.css";..

styled component 외에 스타일링 할 수 있는 또 다른 방법이 있는데 바로 🔥 GlobalStyles (전역스타일링) 이다 ▼ TestPage.jsx 우선 TestPage.jsx 라는 컴포넌트에 스타일을 적용한다 import React from "react"; import styled from "styled-components"; //부모 컴포넌트에서 받은 정보를 props한다 function TestPage(props) { return ( //리렌더링 {/* Title 컴포넌트에서 정보를 받아서 렌더링 {} 안에 부모컴포넌트 정보 받아서 렌더링 */} {props.title} {props.contents} ); } const Title = styled.h1` font-size: 1.5rem;..

본격적인 React 수업이 시작되었다 이건 커리큘럼은 정말 실무적인 내용이 담겨 있다고 해서 얼마나 어려울까 하는 긴장감을 가지고 시작했다 우린 자바스크립트 내에 있는 className 태그를 사용해서 css를 꾸며주었다. (혹은 인라인을 이용해서!) 하지만 이 방식은 많은 컴포넌트를 생성해야 한다는 점에서 불편함을 느껴 CSS-in-Js라는 방식을 만들었다고 한다. 💡 CSS-in-Js 방식이란? 단어 그대로 js 코드로 CSS코드를 작성하여 컴포넌트를 꾸는 방식이다 우선 styled-components 설치하고 터미널에서 yarn add styled-components 의 명령을 입력해서 패키지를 설치한다! ❗styled-components : CSS-in-Js 방식으로 컴포넌트를 꾸밀 수 있게 도와..

Module not found: Error: You attempted to import ../App.css which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/. 개인 과제 마무리 단계 중에 이런 위 문구의 오류가 자꾸 떴다. 검색해보니 CRA(create-react-app) 에서 컴파일은 src 내부에서만 일어나는데 src 폴더 안에 app.css 파일이 들어가 있지 않아서 발생했던 것이었다 하지만...! 난 src 폴..

나는 todoList에서 새로운 리스트를 작성할 때마다 할당하는 id 값을 Date.now()를 써서 중복되지 않도록 했었다 하지만 개인과제 해설영상을 보고 새로운 함수를 알게 되었다 💡UUID란 ( Universally Unique IDentifier ) 범용 고유 식별자의 약자로 고유한 아이디 값을 생성할 때 사용할 수 있다 특히 컴포넌트에 고유한 키를 요구하는 리액트로 개발할 때 유용하게 사용할 수 있는데 react-uuid라는 모듈과 함께 uuid 함수 생성할 수 있도록 제공한다 ✔️How to use npm install react-uuid 혹은 yarn add react-uuid 로 모듈 설치 후 id 값을 할당해주어야 하는 파일 내에서 import 를 받아 함수를 실행시키면 된다

//React 강의 복습 import React from "react"; function App() { const name = "상위컴포넌트이름"; return ; // 새로운 이름을 정하고 App에서 User로 정보를 전달한다 } //컴포넌트는 대문자 function User(props) { return {props.comp_name}; // props.로 정보를 전달받는다! {} 필수! } export default App; //------------------------------------------------------------------------------ import React from "react"; //부모 function App() { return 안녕하세요 //컴포넌트 사이에 낀 ..

🔥React 입문주차 개인과제 🔥 다시 돌아온 개인과제 Time~ ^^.. 이번엔 끝낼 수 있을지 걱정이다! 강의에서 배운 그대로 해보려고 하는 데도 잘 되지 않는다 일단 진행과정을 코드를 통해 적어볼 계획이다. ✔️ 구현해야 할 기능 · UI 구현하기 · Todo 추가하기 · Todo 삭제하기 · Todo 완료 상태 변경하기 💡Hint · 사용한 hook은 오직 useState · 기능 구현을 위해 생성한 함수는 2개(onChangeHandler, onSubmitHandler) · 사용한 자바스크립트 내장 메서드는 map, filter · todo의 initial state는 {id : 0, title: "", body: "", isDone: false} ▼App.jsx import React from..

불변성을 지키는 것이 중요하다! 불변성은 메모리의 있는 값을 변경할 수 없는 것을 말한다 자바스크립트의 원시 데이터는 문자열, 숫자, 불리언 타입 등이 있는데 우선 결론적으로 말하자면 원시데이터는 불변성이 있다 반대로 원시데이터가 아닌 배열, 객체, 함수는 불변성이 없다! ▶ 불변성이 있다! let num = 1; 메모리에는 1이 라는 값이 저장되고 , num이라는 변수는 메모리에 있는 1을 참조! 그리고 재선언 let num2 = 1; num === num2 의 결과값은 true이다! 즉, num의 메모리 주소에 이미 1이라는 값이 할당이 되었고 같은 값으로 재선언을 해도 메모리 주소가 변하지 않고 이미 생성되어 있는 1이라는 값을 참조한다! --> 같은 메모리 값을 바라보고 있는 것이다 즉, 기존 메..

오류 발생 및 문제 해결 / 주의할 점 1. 컴포넌트를 만들었는데 랜더링이 되지 않고 오류만 떴다 오류를 보니 리액트 컴포넌트 이름의 시작은 대문자로 해야 한다고 한다 오류를 고치고 나니 그제서야 강의해주신 것이 떠올랐다,,!! 잘 기억해두자 2. 절대경로와 상대경로 Child.js 파일을 만들고 import를 했는데 오류가 났다 튜터님께 도움을 요청하니 절대경로 파일을 만들지 않았고 Child 파일의 경로 표기가 잘못되었다고 하셨다 같은 디렉토리에 위치해있으니 내가 수정해야 하는 것은 "Child" 에서 "./Child" 로 수정 이건 기본 중에 기본인데 이제서야 생각나서 조금 민망했다^^ ./ : 현재 디렉토리 위치 ../ : (상대경로) 상위 위치 (한 단계 뒤로 가기) 그리고 절대경로 파일을 만드..