2024/1221

• 백준 1181 단어정렬 실버5 (sort) 문제 설명알파벳 소문자로 이루어진 N개의 단어가 들어오면 아래와 같은 조건에 따라 정렬하는 프로그램중복된 단어는 하나만 남기고 제거길이가 짧은 것부터길이가 같으면 사전 순으로 입력값단어의 개수 N~N : 단어(길이 13butiwonthesitatenomorenomoreitcannotwaitimyours 출력값조건에 따라 단어들 출력iimitnobutmorewaitwontyourscannothesitate  정답 코드# 114312KB, 152ms(PyPy3)N = int(input())sentence = set() # set으로 중복 제거for _ in range(N) : word = input() sentence.add(word)sentence = sorted(senten.. 개발새발개발 2024. 12. 31.

• 

  React - 컴포넌트 반복(map, callback, key, list, 값 추가 삭제) 자바스크립트 배열의 map() 함수map() : 파라미터로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성arr.map(callback, [thisArg])arr.map(name, index, array, [thisArg])callback : 새로운 배열의 요소를 생성하는 함수. 3가지의 파라미터를 받음currentValue : 현재 처리하고 있는 요소index : 현재 처리하고 있는 요소의 index 값array : 현재 처리하고 있는 원본 배열thisArg(선택 항목) : callback 함수 내부에서 사용할 this 레퍼런스const numbers = [1, 2, 3, 4, 5];const processed = numbers.map(functi.. 개발새발개발/React 2024. 12. 30.

• 

  React - ref PreviewHTML에서 id 를 사용해 이름을 다는 것처럼 React에서는 ref(reference)를 이용해 DOM 에 이름을 붙여준다id를 사용할 경우 컴포넌트가 반복될 때, 고유해야할 id 값이 여러번 사용될 수 있으므로 ref를 사용하는 걸 권장한다ref는 컴포넌트 내부에서만 작동한다 refDOM을 직접적으로 건드려야 할 때 사용한다비밀번호 검증 페이지 만들기 실습ValidationSample 컴포넌트 만들기input에 ref 달기버튼을 누를 때마다 input에 포커스 주기 1. 예제 컴포넌트 생성input에서 onChange 이벤트가 발생하면 handleChange 호출하여 state의 password 값을 업데이트button에서 onClick 이벤트가 발생하면 handleButtonClick.. 개발새발개발/React 2024. 12. 29.

• 

  React 이벤트 핸들링 이벤트 핸들링사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것onmouseover, onclick, onchange 등 이벤트를 사용할 때 주의사항1. 이벤트 이름은 카멜 표기법으로 작성한다onclick (X) onClick(O)onkeyup(X) onKeyUp(O) 2. 이벤트에는 함수 형태의 값을 전달한다실행할 자바스크립트 코드를 직접 전달하지 않고, 함수 형태의 객체를 전달한다화살표 함수를 바로 만들어 전달해도 되고, 렌더링 부분 외부에 미리 만들어서 전달해도 된다 3. DOM 요소에만 이벤트를 설정할 수 있다div, button, input, form, span 등의 요소에는 DOM 이벤트를 설정할 수 있다하지만 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다ex) MyComp.. 개발새발개발/React 2024. 12. 28.

• 

  백준 7569 토마토 골드5 (BFS) 문제 설명- 가로 M, 세로 N, 높이 H의 토마토 상자- 보관 후 하루가 지나면 익은 토마토의 위, 아래, 왼쪽, 오른쪽, 앞 뒤 여섯 방향의 토마토는 익는다- 보관된 토마토들이 모두 익는데 소요되는 최소 일수입력값1. M, N, H ( 2 ≤ M ≤ 100, 2 ≤ N ≤ 100, 1 ≤ H ≤ 100 )2. N개의 줄까지 하ㅏ의 상자에 담긴 토마토의 정보- 1은 익은 토마토 0은 안익은 토마토 -1은 빈 공간- 토마토가 하나 이상 익은 경우만 입력으로 주어진다출력값- 토마토가 모두 익는데 걸리는 최소 일수- 저장될 때부터 모두 익어있으면 0 출력- 토마토가 모두 익지 못하는 상황이면 -1 종합 결과   첫번째 시도import copydef mature(h,r,c) : global time, t.. 개발새발문제 2024. 12. 27.

• 

  백준 30804 과일탕후루 실버2 (투포인터, defaultdict) 문제 설명N개의 과일이 꽂혀 있는 과일 탕후루과일은 1번부터 9번까지 번호가 있음한 꼬치에 과일을 두 종류 이하로 사용해야함앞에서 a개 뒤에서 b개를 빼서 N-(a+b)의 최댓값은?입력값N (1탕후루에 꽂힌 N개의 과일 번호출력값과일의 개수가 가장 많은 탕후루의 과일 개수  처음 생각한 풀이 코드# 반례발견! 오답# 반례 : 1 1 3 7 8 9 9 9import syssys.stdin = open('백준/test.txt')# 앞에서 제거def front(lst) : lst.pop(0) return lst# 뒤에서 제거def back(lst) : lst.pop() return lstN = int(input())tang = list(map(int,input().split()))# 탕후.. 개발새발문제 2024. 12. 26.

• 

  React state, 클래스형 컴포넌트와 함수형 컴포넌트에서의 state와 주의사항 state컴포넌트 내부에서 바뀔 수 있는 값 클래스형 컴포넌트의 state  컴포넌트에 state 설정하기 :  constructor 메서드 사용class Counter extends Component { constructor(props) { super(props); //state의 초기값 설정하기 this.state = { number: 0, }; }반드시 super(props)를 함께 호출해야 한다this.state 를 사용해 초기값을 설정한다 render render() { const { number } = this.state; //state를 조회할 때는 this.state로 조회 return ( {number} .. 개발새발개발/React 2024. 12. 25.

• 

  React 컴포넌트(Component), 화살표 함수, Snippet 목차클래스형 컴포넌트 컴포넌트를 선언하는 방식 2가지 1. 함수 컴포넌트import "./App.css";function App() { const name = "리액트"; return ( {name} );}export default App; 장점선언하기 편리하다메모리 자원을 덜 사용한다최종 배포 후에도 파일 크기가 더 작다(근소한 차이. 성능과 크기면에서 큰 차이는 없음)단점state와 라이플사이클 API의 사용이 불가능하다 => v16.8이후 Hooks 라는 기능이 도입되며 해결됨리액트 공식 메뉴얼에는 함수 컴포넌트와 Hooks의 사용을 권장함 2. 클래스형 컴포넌트import { Component } from "react";class App extends Component.. 개발새발개발/React 2024. 12. 24.

• 

  React JSX 문법과 ESLint, Prettier 적용법 JSX 문법1. 부모 요소 하나로 감싸기컴포넌트에 여러 요소가 있다면 반드시 하나의 부모 요소로 감싸야 한다function App() { return ( 부모요소가 없으면 잘 작동하지 않아요 )}export default App;위와 같이 작성하면 아래와 같은 오류가 발생한다  아래와 같이 div 태그 혹은 태그(fragment tag)를 활용하여 감싸줘야 한다.function App() { return ( 부모요소는 반드시 하나! )}export default App; virtual Dom에서 컴포넌트 변화를 효율적으로 감지할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야한다는 규칙이 있기 때문이다. 2. 자바스크립트 표현식 사용하기cons.. 개발새발개발/React 2024. 12. 23.

• React JSX란? 감사하게도 선배가 김민준 개발자님의 "리액트를 다루는 기술(개정판)" 책을 주셨다(정말 감사해요!)오늘부터는 이 책을 공부하며 얻은 React 지식을 요약정리해볼 예정이다 :)  목차  App.js 코드 이해하기import logo from './logo.svg';import './App.css';function App() { return ( Edit src/App.js and save to reload. Learn React );}export default App; import logo from './logo.svg';import './App.css';  Nod.. 개발새발개발/React 2024. 12. 22.

• 

  React로 간단한 홈페이지 만들기3(Component) 오늘할 것 :상세페이지 영역 만들기   Componentdiv가 많아지면 지저분해짐이를 개선하기 위해 component를 사용함App()도 사실은 컴포넌트임  Component 만드는 방법1function 생성function App(){} 밖에 만들어야 함함수명은 영어 대문자로 시작return() 안에 html 축약할 담기 쓰기  컴포넌트를 사용하면 좋은 상황반복적인 html 축약할 때큰 페이지로 전환할 때자주 변경되는 UI  컴포넌트 사용 시 주의사항state 가져올 때 주의state는 다른 함수에서 저장되어 있기 때문에 데이터바인딩이 안됨  컴포넌트 만드는 법2(참고)function 함수 밖에 변수 선언  let Modal = () => { return( ) }   참고1굳이 하나의.. 개발새발개발/React 2024. 12. 21.

• 

  React로 간단한 홈페이지 만들기2(state, onClick) 참고terminal 창에서 warning message 삭제하는 법/*eslint-disable*/ 오늘 할 것 :좋아요버튼과 좋아요 개수 UI 만들기  좋아요 버튼 만들기onClick Eventhandler클릭했을 때 {} 안의 함수가 실행됨사용법onClick={funcName} 후 funciotn 정의onClick={function() {console.log(1)}}onClick={() => {console.log(1)}}{} 안에는 함수가 들어가야 함 좋아요 개수 UI 만들기State 변경state는 등호로 변경 금지(html에 반영 안됨)useState()에서 변수 선언할 때 두번째 파라미터를 이용해 수정해야 함ex) let [like, likeController ] = useState(0)변경하.. 개발새발개발/React 2024. 12. 20.