본문 바로가기

Programing375

문자열 구분자 기준으로 구분하여 배열로 반환하기 // 문제 1)// snake_case로 구분되어있는 문자열 my_string이 매개변수로 주어질 때, // my_string에 나온 단어를 앞에서부터 순서대로 담은 문자열 배열을 return 하는 solution 함수를 작성해 주세요.// 제한사항// my_string은 영소문자와 공백으로만 이루어져 있습니다.// 1 ≤ my_string의 길이 ≤ 1,000// my_string의 맨 앞과 맨 뒤에 글자는 공백이 아닙니다.// 예시// "i_love_you" => ["i", "love", "you"]// "hello_world_this_is_snake_case" => ["hello", "world", "this", "is", "snake", "case"]const first = (my_string)=.. Programing/CodeKata 2024. 5. 24.
112. [MAX] Styled-Components 기본 사용법 Styled-Components란?리액트로 넘어오면서 CSS를 설정할 때 기존의 방식은 사용이 불가능하고, CSS를 객체 형태로 만들어야 하기 때문에 CSS의 값을 문자열로 설정한다든지, background-color 등을 대쉬를 빼고 camelCase 등의 방식으로 backgroundColor처럼 명명해야 한다든지 불편한 점이 있어 등장한 패키지이다. CSS를 별도의 CSS 파일에서 지정하지 않고, 컴포넌트 내에서 바로 작성이 가능하도록 도와준다.사용 방법패키지 설치하기 npm install styled-componentsimport 하기import { styled } from 'styled-components';스타일링 하기함수형 컴포넌트가 선언된 곳 위, Import문 아래에서 바로 스타일링을 하면.. Programing/React 2024. 5. 23.
2024-05-23 React의 상태관리 상황React는 변수를 state로 정의하고 값이 계속 바뀔 때마다 그 부분만 화면을 재 렌더링 해주기 때문에 사용성도 좋고 빠르다고 이해했다.그런데 이 상태가 너무 자주 변경되면 상태가 바뀔 때마다 전체를 재 렌더링하기 때문에 성능 저하가 올 수 있고 렌더링이 씹힐 수 있다.// Button.jsx(자식 컴포넌트)// TODO: FilterButtons 컴포넌트를 작성하세요. 필터링 옵션을 선택하는 버튼들을 포함해야 합니다.function FilterButtons(/* 필요한 props를 여기에 전달하세요 */ { initialStudents, filteredStudents, setFilteredStudents}) { const filterByAge = (minAge) => { setFilte.. Programing/TIL 2024. 5. 23.
로컬스토리지 기본 사용법 1. 데이터 저장localStorage.setItem(key, value)를 사용하여 데이터를 저장할 수 있다. 여기서 key는 문자열로 된 키, value는 문자열로 된 값이다.localStorage.setItem('username', '장원영');2. 데이터 읽기localStorage.getItem(key)를 사용하여 데이터를 읽을 수 있다. 해당 키가 존재하지 않으면 null을 반환한다.let username = localStorage.getItem('username');console.log(username); // 장원영3. 데이터 삭제localStorage.removeItem(key)를 사용하여 특정 키의 데이터를 삭제할 수 있다.localStorage.removeItem('username');.. Programing/JavaScript 2024. 5. 23.
043. React - useEffect useEffect란?리액트에서 컴포넌트의 사이드 이펙트를 제어하는 훅.사이드 이펙트는 직역하면 '부작용'이고, 리액트에서 표현하는 사이드 이펙트는 어떤 기능에서 '의도하지 않은 부수적인 효과', 내지 '파생되는 효과' 정도의 개념이다.사용방법import하기// state import 하기import { useEffect } from "react";원형 작성하기const [count, setCount] = useState(0);useEffect(()=>{},[]);// 두 개의 인자를 받는데 첫번째는 콜백함수, 두번째는 의존성 배열(Dependency Array)// 해석은 Deps의 값이 변경되면 콜백함수가 실행됨.위와 같이 useState 훅과 동시에 사용 가능. 카운트 앱에서 사용되는 count st.. Programing/React 2024. 5. 23.

티스토리툴바