주니어 기초 코딩공부 257

리액트 오류 [DOM] Input elements should have autocomplete attributes

오류메시지 : [DOM] Input elements should have autocomplete attributes (suggested: "new-password")  Google Chrome과 같은 최신 브라우저에서 권장되는 사항중 하나는 바로 바로! 비밀번호 자동완성 입니다! 코드를 다 작성하고 돌려보면 저런 warning이 생기곤 하는데, 절때 저런 warning을 노출 시키고 납품할 순 없죠?  input 태그를 사용하시고 비밀번호를 인풋 값으로 받으신다~ 하시면 필수로  autocomplete 속성을 넣어주시면warning 이 사라집니다! Material-UI(MUI) 또는 다른 UI 라이브러리를 사용할 때 기본적으로 autocomplete="off"가 설정되거나, 생략될 수 있기 떄문에 확인 ..

[React] 기초 App.tsx > npm start

원래 처음 리액트 다운로드 받으면 App.tsx 파일에 (타임스크립트버전) 이렇게 뜹니다. App.tsximport React from 'react';import './App.css'; // 필요하면 유지, 불필요하면 삭제 가능import Board from './components/Board'; // Board 컴포넌트를 임포트function App() { return ( Welcome to My Board! {/* Board 컴포넌트를 사용하여 게시판 표시 */} );}export default App;  이랬던 코드를 이제 my-board를 사용할 수 있도록 변경해야합니다. import React from 're..

[React] 기초, 게시판 초기 버전 Board.js

Board.js import React, { useState } from 'react';import './Board.css';// 더미 데이터를 위한 임시 배열const initialPosts = [ { id: 1, title: '첫 번째 게시글', content: '이것은 첫 번째 게시글의 내용입니다.' }, { id: 2, title: '두 번째 게시글', content: '이것은 두 번째 게시글의 내용입니다.' }];const Board = () => { const [posts, setPosts] = useState(initialPosts); const [newPost, setNewPost] = useState({ title: '', content: '' }); // 게시글 추가 핸들러 ..

[React] 처음 리엑트를 하라고 하셨다... Node.js 및 npm 설치하기

뭐부터 해야할까? 일단 VSCODE를 깔고리엑트 테스트라는 이름의 빈 폴더를 엽니다. 1. Node.js 및 npm 설치React와 TypeScript를 사용하려면 Node.js가 필요합니다. Node.js가 설치되어 있지 않다면 Node.js 공식 웹사이트에서 설치하세요. 설치가 완료되면 터미널에서 다음 명령어로 설치 여부를 확인할 수 있습니다..  이것은 vsCode를 키고 터미널에 배쉬 터미널을 열어 명령어들을 쓰면 됩니다.  2. Create React App으로 프로젝트 생성터미널을 열고, 새로운 React 프로젝트를 생성합니다. TypeScript 템플릿을 사용할 수 있습니다. 다음 명령어를 입력하세요. npx create-react-app my-board --template typescrip..

[PCCE] 프로그래머스 자바 기초 05 심폐소생술

배열의 길이는 length리스트의 길이는 size    01 나의 코드class Solution { public int[] solution(String[] cpr) { int[] answer = {0, 0, 0, 0, 0}; String[] basic_order = {"check", "call", "pressure", "respiration", "repeat"}; for(int i=0; i 제 코드에는 문제점이 있습니다. 잘보세요!!!  02 다른 사람 코드class Solution { public int[] solution(String[] cpr) { int[] answer = {0, 0, 0, 0, 0}; String[] bas..

[part1] 웹 로딩 시간 복잡도를 줄이기 위해서 무엇을 할 수 있을까?

안녕하세요 jju_developer 입니다. 개발을 하다보면 웹 페이지 로딩 시간을 줄이는 방안으로코딩을 하곤 하는데... 웹 페이지의 로딩 시간을 줄이기 위해서 종합적인 방안을 생각해 보겠습니다. 종합적으로 최적화 방안이 뭐가 있을까요?데이터베이스 인덱스 사용: 가장 먼저 데이터베이스에서 검색 성능을 향상시키기 위해 적절한 인덱스를 생성합니다.효율적인 쿼리 작성: 필요하지 않은 데이터를 가져오지 않도록 쿼리를 최적화합니다. >> 개인적으로 깊게 파면 팔수록 어렵다고 생각하는 부분입니당...캐싱 전략 적용: 자주 조회되는 데이터는 캐싱하여 데이터베이스 접근을 최소화합니다.>> 예를 들면 서적을 검색하는 페이지 일 경우에 1-10 랭킹은 자주 검색할 것이기 때문에 캐싱하여 저장합니다.자바 측면의 최적화: ..

[자주 쓰는 알고리즘 문법 정리] Stack, Queue, Collection Binary Search

안녕하세요!퇴근하고 돌아온 jju_developer입니다. 오늘은 자바에서 자주 사용하는 코딩 기초 알고리즘 문법을 정리해보려고 합니다. 예시로는 'jju 서점'이라는 웹 페이지를 가정하여 설명드리겠습니다. 이번시간에는 Stack, Queue, Collection Binary Search에 대해 정리하려고 합니다~! 그럼 시작하겠습니다~1. Stack (스택)정의스택은 후입선출(LIFO, Last In First Out) 방식의 자료구조입니다. 즉, 가장 나중에 들어간 데이터가 가장 먼저 나옵니다. 책을 쌓는 것과 같은 방식으로 생각할 수 있습니다. 알고리즘이 필요한 이유 및 성능 개선점스택은 웹 페이지의 '뒤로 가기' 기능이나 수식 계산기 등에서 많이 사용됩니다.성능 면에서는 삽입과 삭제가 O(1)로 ..