Wii Pointer #1 Tilt Normal
본문 바로가기
728x90

전체 글343

No Image 📷 [React .hook] Why must we use 'useId( )'? Before we start 2024.02.16 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React .hook] What is useId( ) ? [React .hook] What is useId( ) ? Before the start React hook은 여러가지가 있다. 2024.02.15 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React] React's State Management [React] React's State Management - React 상태 관리 useState jrogrammer.tistory.com 전 게시글을 읽고 왔다면 대부분의 개발자라면 한번쯤은 의문을 품었을 왜 굳이 useId( ) hook을 사용해야 할까? Math.. 2024. 2. 16.
No Image 📷 [React .hook] What is useId( ) ? Before we start React hook은 여러가지가 있다. 2024.02.15 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React] React's State Management [React] React's State Management - React 상태 관리 useState Hook 함수형 컴포넌트에서 상태를 관리하는 가장 기본적인 방법. 컴포넌트 내에서 간단한 상태를 다룰 때 사용됩니다. import React, { useState } from 'react'; function ExampleComponent() jrogrammer.tistory.com 대표적인 React hook들을 정리해 놓은 게시글이니 참고하자. So what is userId ? 각설하고 오늘 처.. 2024. 2. 16.
No Image 📷 [일간회고] 24.02.15 5개월만의 복귀 5개월만의 기록이다. 사실 기록하는 것 보다 실질적으로 사용하는 기술들을 익히는데 중점을 둔 나머지 나의 기록하는 습관은 철저하게 배제되었다. 그렇게 5개월이 흘러 실제로 필드에서 개발을 하는 개발자들이 하나같이 중요하게 외치는 것은 매일 기록하는 습관이 제일 중요하다고 한다. 반성하고 또 반성한다. til의 중요성, 기록해 나아가는 나의 모습으로 전환 이미 지나간 시간들을 다시 되돌릴 수도 없는법. 다만, 지금부터 다시 내게 주어진 시간들을 잘 주워담아 나의 시간들로 재편성 해 나아가야겠다는 마음가짐을 가진다. 2024. 2. 15.
No Image 📷 [React] React's State Management - React 상태 관리 useState Hook 함수형 컴포넌트에서 상태를 관리하는 가장 기본적인 방법. 컴포넌트 내에서 간단한 상태를 다룰 때 사용됩니다. import React, { useState } from 'react'; function ExampleComponent() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } useReducer Hook 복잡한 상태 로직을 다룰 때 유용. 컴포넌트 내에서 여러 상태를 관리하거나, 상태 갱신이 이전 상태에 의존적일 때 사용됩니다. import React, { useReducer } from 'react'.. 2024. 2. 15.
No Image 📷 [React] React's file structure - Create React App으로 프로젝트 생성 시 React 프로젝트의 파일 구조 my-react-app 프로젝트 생성시 node_modules 프로젝트에서 사용하는 모든 패키지 및 종속성이 설치되는 디렉토리. public 정적인 자원들이 위치하는 디렉토리. src 애플리케이션의 소스 코드가 있는 디렉토리. package.json 프로젝트의 메타데이터 및 의존성 정보가 있는 파일. README.md 프로젝트에 대한 문서 및 설명을 담고 있는 파일. .gitignore Git으로부터 무시할 파일 및 디렉토리를 지정하는 설정 파일. .eslintrc ESLint(JavaScript 및 JSX 코드의 정적 분석 도구) 설정 파일. 2024. 2. 15.
No Image 📷 [React] How to use React ? - React를 사용하는 방법 Create React App 설치 - Create React App은 React 애플리케이션을 손쉽게 생성할 수 있도록 도와주는 도구입니다. 터미널 또는 명령 프롬프트에서 다음 명령을 실행하여 Create React App을 설치합니다. npx create-react-app my-react-app 프로젝트 디렉토리 이동 cd my-react-app 애플리케이션 실행 npm start 2024. 2. 15.
No Image 📷 [React] What is React ? What is React ? - React란 무엇인가? Facebook에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스를 만들기 위한 목적으로 만들어진 라이브러리입니다. 재사용 가능한 UI 컴포넌트 를 구축하고, 이를 조합하여 복잡한 UI를 만드는 데 중점을 둡니다. 선언적이고 효율적인 방식으로 UI를 설계할 수 있도록 도와주며, 단일 페이지 애플리케이션(SPA) 개발을 쉽게 만들어줍니다. - React의 주요 특징과 개념 컴포넌트 기반 구조 React는 UI를 작은 독립적인 컴포넌트로 나누어 개발하는 컴포넌트 기반 구조를 가지고 있습니다. 각 컴포넌트는 자체적으로 상태(state)와 생명주기(lifecycle)를 관리하며, 필요에 따라 재사용이 가능합니다. 가상 DOM (Virtual D.. 2024. 2. 15.
No Image 📷 [알고리즘] 코딩테스트 연습코딩 기초 트레이닝접미사 배열 접미사 배열 문제 설명 어떤 문자열에 대해서 접미사는 특정 인덱스부터 시작하는 문자열을 의미합니다. 예를 들어, "banana"의 모든 접미사는 "banana", "anana", "nana", "ana", "na", "a"입니다. 문자열 my_string이 매개변수로 주어질 때, my_string의 모든 접미사를 사전순으로 정렬한 문자열 배열을 return 하는 solution 함수를 작성해 주세요. 제한사항 my_string은 알파벳 소문자로만 이루어져 있습니다. 1 ≤ my_string의 길이 ≤ 100 입출력 예my_stringresult "banana" ["a", "ana", "anana", "banana", "na", "nana"] "programmers" ["ammers", "ers", "gr.. 2023. 9. 12.
No Image 📷 [알고리즘] 코딩테스트 연습코딩 기초 트레이닝x 사이의 개수 x 사이의 개수 문제 설명 문자열 myString이 주어집니다. myString을 문자 "x"를 기준으로 나눴을 때 나눠진 문자열 각각의 길이를 순서대로 저장한 배열을 return 하는 solution 함수를 완성해 주세요. 제한사항 1 ≤ myString의 길이 ≤ 100,000 myString은 알파벳 소문자로 이루어진 문자열입니다. 입출력 예myStringresult "oxooxoxxox" [1, 2, 1, 0, 1, 0] "xabcxdefxghi" [0, 3, 3, 3] 입출력 예 설명 입출력 예 #1 "x"를 기준으로 문자열을 나누면 ["o", "oo", "o", "", "o", ""]가 됩니다. 각각의 길이로 배열을 만들면 [1, 2, 1, 0, 1, 0]입니다. 따라서 [1, 2, 1, 0,.. 2023. 9. 11.
No Image 📷 [알고리즘] 코딩테스트 연습코딩 기초 트레이닝공백으로 구분하기 2 공백으로 구분하기 2 문제 설명 단어가 공백 한 개 이상으로 구분되어 있는 문자열 my_string이 매개변수로 주어질 때, my_string에 나온 단어를 앞에서부터 순서대로 담은 문자열 배열을 return 하는 solution 함수를 작성해 주세요. 제한사항 my_string은 영소문자와 공백으로만 이루어져 있습니다. 1 ≤ my_string의 길이 ≤ 1,000 my_string의 맨 앞과 맨 뒤에도 공백이 있을 수 있습니다. my_string에는 단어가 하나 이상 존재합니다. 입출력 예my_stringresult " i love you" ["i", "love", "you"] " programmers " ["programmers"] 입출력 예 설명 입출력 예 #1 예제 1번의 my_string은 ".. 2023. 9. 8.
No Image 📷 [알고리즘] 코딩테스트 연습코딩 기초 트레이닝배열 비교하기 배열 비교하기 문제 설명 이 문제에서 두 정수 배열의 대소관계를 다음과 같이 정의합니다. 두 배열의 길이가 다르다면, 배열의 길이가 긴 쪽이 더 큽니다. 배열의 길이가 같다면 각 배열에 있는 모든 원소의 합을 비교하여 다르다면 더 큰 쪽이 크고, 같다면 같습니다. 두 정수 배열 arr1과 arr2가 주어질 때, 위에서 정의한 배열의 대소관계에 대하여 arr2가 크다면 -1, arr1이 크다면 1, 두 배열이 같다면 0을 return 하는 solution 함수를 작성해 주세요. 제한사항 1 ≤ arr1의 길이 ≤ 100 1 ≤ arr2의 길이 ≤ 100 1 ≤ arr1의 원소 ≤ 100 1 ≤ arr2의 원소 ≤ 100 문제에서 정의한 배열의 대소관계가 일반적인 프로그래밍 언어에서 정의된 배열의 대소관계와.. 2023. 9. 8.
No Image 📷 [알고리즘] 코딩테스트 연습코딩 기초 트레이닝배열의 길이에 따라 다른 연산하기 배열의 길이에 따라 다른 연산하기 문제 설명 정수 배열 arr과 정수 n이 매개변수로 주어집니다. arr의 길이가 홀수라면 arr의 모든 짝수 인덱스 위치에 n을 더한 배열을, arr의 길이가 짝수라면 arr의 모든 홀수 인덱스 위치에 n을 더한 배열을 return 하는 solution 함수를 작성해 주세요. 제한사항 1 ≤ arr의 길이 ≤ 1,000 1 ≤ arr의 원소 ≤ 1,000 1 ≤ n ≤ 1,000 입출력 예arrnresult [49, 12, 100, 276, 33] 27 [76, 12, 127, 276, 60] [444, 555, 666, 777] 100 [444, 655, 666, 877] 입출력 예 설명 입출력 예 #1 예제 1번의 arr의 길이는 5로 홀수입니다. 따라서 arr의 짝.. 2023. 9. 8.
No Image 📷 [알고리즘] 코딩테스트 연습코딩 기초 트레이닝뒤에서 5등 위로 뒤에서 5등 위로 문제 설명 정수로 이루어진 리스트 num_list가 주어집니다. num_list에서 가장 작은 5개의 수를 제외한 수들을 오름차순으로 담은 리스트를 return하도록 solution 함수를 완성해주세요. 제한사항 6 ≤ num_list의 길이 ≤ 30 1 ≤ num_list의 원소 ≤ 100 입출력 예num_listresult [12, 4, 15, 46, 38, 1, 14, 56, 32, 10] [15, 32, 38, 46, 56] 입출력 예 설명 입출력 예 #1 [12, 4, 15, 46, 38, 1, 14, 56, 32, 10]를 정렬하면 [1, 4, 10, 12, 14, 15, 32, 38, 46, 56]이 되고, 앞에서 부터 6번째 이후의 수들을 고르면 [15, 32, 38, 4.. 2023. 9. 8.
No Image 📷 [알고리즘] 코딩테스트 연습코딩 기초 트레이닝공백으로 구분하기 1 공백으로 구분하기 1 문제 설명 단어가 공백 한 개로 구분되어 있는 문자열 my_string이 매개변수로 주어질 때, my_string에 나온 단어를 앞에서부터 순서대로 담은 문자열 배열을 return 하는 solution 함수를 작성해 주세요. 제한사항 my_string은 영소문자와 공백으로만 이루어져 있습니다. 1 ≤ my_string의 길이 ≤ 1,000 my_string의 맨 앞과 맨 뒤에 글자는 공백이 아닙니다. 입출력 예my_stringresult "i love you" ["i", "love", "you"] "programmers" ["programmers"] 입출력 예 설명 입출력 예 #1 예제 1번의 my_string은 "i love you"로 공백 한 칸으로 나누어진 단어들은 앞에서부터 .. 2023. 9. 8.
No Image 📷 [es6] 배열 기초 index.html 더보기 2023. 9. 7.
No Image 📷 [es6] var, let, const var scope는 호이스팅 O, 중복선언 O, 함수형스코프 let 호이스팅 X, 중복선언 X, 블록스코프 const 호이스팅 X, 중복선언 X, 값변경 X, 블록스코프 스코프의 종류에 따라 클로저가 다르게 적용됨 var 버튼 let 버튼 const 버튼 함수형 스코프 var 버튼 블록 스코프 let 버튼 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 JavaScript더보기 document.querySelec.. 2023. 9. 5.
728x90