본문 바로가기

전체 글402

[프로그래머스] 두 수의 곱 (함수 기본, 논리곱연산자(&&)) [level 0] 두 수의 곱 - 120804문제 링크성능 요약메모리: 33.4 MB, 시간: 0.03 ms구분코딩테스트 연습 > 코딩테스트 입문채점결과정확성: 100.0합계: 100.0 / 100.0제출 일자2024년 05월 10일 09:26:00문제 설명정수 num1, num2가 매개변수 주어집니다. num1과 num2를 곱한 값을 return 하도록 solution 함수를 완성해주세요.제한사항0 ≤ num1 ≤ 1000 ≤ num2 ≤ 100입출력 예num1num2result34122719513입출력 예 설명입출력 예 #1num1이 3, num2가 4이므로 3 * 4 = 12를 return합니다.입출력 예 #2num1이 27, num2가 19이므로 27 * 19 = 513을 return합니다.출처:.. Programing/CodeKata 2024. 5. 24.
[프로그래머스] 두 수의 합 구하기 (함수 기본) [level 0] 두 수의 합 - 120802문제 링크 성능 요약메모리: 33.4 MB, 시간: 0.02 ms구분코딩테스트 연습 > 코딩테스트 입문채점결과정확성: 100.0합계: 100.0 / 100.0제출 일자2024년 05월 20일 17:17:47문제 설명정수 num1과 num2가 주어질 때, num1과 num2의 합을 return하도록 soltuion 함수를 완성해주세요.제한사항-50,000 ≤ num1 ≤ 50,000-50,000 ≤ num2 ≤ 50,000입출력 예 num1num2result 2351002102 입출력 예 설명입출력 예 #1num1이 2이고 num2가 3이므로 2 + 3 = 5를 return합니다.입출력 예 #2num1이 100이고 num2가 2.. Programing/CodeKata 2024. 5. 24.
문자열 구분자 기준으로 구분하여 배열로 반환하기 // 문제 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.
042. React - 라이프사이클 개념리액트의 컴포넌트도 마치 인간처럼 생애주기(life cycle)을 갖는다. 탄생-변화-사망의 단계이다.리액트 컴포넌트의 경우, Mount - Update - Unmount로 표현한다.Mount (탄생)컴포넌트가 탄생하는 순간화면에 처음 렌더링 되는 순간Update (변화)컴포넌트가 다시 재 렌더링 되는 순간재 렌더링 될 때를 의미Unmount (죽음)컴포넌트가 화면에서 사라지는 순간렌더링에서 제외될 때를 의미컴포넌트의 라이프사이클을 관리해야 하는 이유성능을 최적화 하며 웹을 개발할 수 있다.예를 들어 Mount 될 때 서버에서 API를 받아올 수 있고, 컴포넌트가 Update 될 때 어떤 값이 변경되었는지 콘솔에 찍어보며 관리할 수 있고, 컴포넌트가 Unmount 될 때 컴포넌트가 사용하던 메모리를 .. Programing/React 2024. 5. 23.
052. React - 페이지 라우팅 - 동적 경로 동적 경로(Dynamic Segment)란?예를 들어 쇼핑몰에서 1번 상세페이지는 /product/1, 2번 상세피이지는 /product/2가 붙는 것처럼 동적으로 경로가 생성되는 것을 의미함.동적 경로의 방식 2가지URL Parameter/ 뒤에 id를 명시하는 방법.아이템의 id와 같이 변경되지 않는 값을 고유의 경로로 설정하기 위해 사용함.~/product/1~/product/2~/product/3Query String? 뒤에 변수명과 값을 명시하는 방법.포털 사이트에서의 검색어와 같이 수시로 변경되는 값을 주소로 명시하기 위해 사용함.~/search?q=검색어URL Parameter 사용 방법Route path에 :id 명시하기} />해당 컴포넌트로 가서 usePrams 커스텀 훅 import 하.. Programing/React 2024. 5. 23.
051. React - 페이지 라우팅 - 페이지 이동 Link로 이동시키는 법Link 컴포넌트 import하기// App.jsximport { Routes, Route, Link } from "react-route-dom";return문 내부에서 link 컴포넌트 호출하기function App() { return ( Home Diary Detail } /> } /> } /> } /> );}Button으로 이동시키는 법useNavigate 훅 import 하기// App.jsximport { Routes, Route, useNavigate } from "react-route-dom";useNavigate 훅을 변.. Programing/React 2024. 5. 23.

티스토리툴바