🌱 → 🌳

2750 - 수 정렬하기 시간 복잡도가 O(n²)인 정렬 알고리즘 ex) 삽입 정렬, 버블 정렬 a = int(input()) arr = [] for i in range(a): arr.append(int(input())) arr = sorted(arr) for i in range(len(arr)): print(arr[i]) 2751 - 수 정렬하기 2 시간 복잡도가 O(nlogn)인 정렬 알고리즘 ex) 병합 정렬, 힙 정렬 등 아직 알고리즘을 배우지 않은 상태이므로 내장 함수 사용 → import sys를 하여 input()의 시간을 줄였음 import sys a = int(input()) num = [] for i in range(a): num.append(int(sys.stdin.readline()..

^,^

useState vs useRef vs Variable useState 의 state 그리고 useRef 의 ref 와 리액트 내부의 변수가 렌더링에 따라 어떤 식으로 변화할까 세 가지 버튼으로 각각 state/ ref / var 값을 올리는 컴포넌트를 구성 값의 변화 없이 컴포넌트 리렌더링을 위해서 하나의 버튼을 더 만듦 → 각 버튼을 클릭하면서 해당 값의 변화 관찰 import { useRef, useState } from "react"; const Comparing = () => { const [countState, setState] = useState(0); const [render, setRender] = useState(0); const countRef = useRef(0); let count..

React.Fragment 실제 리액트에서 컴포넌트를 조합할 때, 최상위에 div를 사용하지 않고 반환해야하는 경우가 생김 css가 깨진다거나, 테이블 요소 사이에 div요소가 들어가면 error가 발생하는 경우 React.Fragment로 return 값에서 최상위 tag 역할을 하는 div 없애기 import React from "react"; export default function ReactFragment() { return ( 안녕하세요! 반갑습니다! ); } (react 라이브러리의 기능이므로 react 라이브러리 추가 필요) React.Fragment는 로 대체 가능 ! import React from "react"; export default function ReactFragment() ..

📌 JSX(Javascript XML) : Javascript에 XML을 추가한 문법 개발자들이 과거 DOM 방식으로 html을 그리다보니 바로 납득이 안갔음 -> 그래서 만든 문법 보통 리액트에서만 사용 html 문서 구조를 JS에서도 사용이 가능함 -> 따라서 JS 내부에서도 html을 짜듯 코드 구성이 가능해짐 📍 기본 DOM 방식으로 html 그린 코드 function HelloWorldButton() { const [isClick, setClickState] = React.useState(false); const text = isClick ? "It's clicked" : "Hello, React world"; return React.createElement( "button", { onClick..

📌 MVC 패턴 : Model View Controller 웹 설계에 대한 구조 웹 설계를 3가지 단계로 구분하여 구조적 장점을 가지기 위한 수단 기능추가도 용이 (유지보수 및 확장이 편리) 🔍 model : DB view: 사용자가 보고 있는 화면 controller: DB와 view 사이 ✅ Model 어플리케이션의 데이터를 처리하는 역할 사용자가 볼 수 없는 곳에서 DB로부터 데이터를 읽고, 삽입, 수정, 삭제하는 역할 Controller 와 소통하며, View 와는 소통하지 X ex) 몽고 DB에서 데이터를 읽고, 삽입하고, 수정하는 역할 -> 단, 이 모든 기능을 하나의 mongo.js 에 묶어서 처리하는 방식 ✅ Controller Model 과 View 의 상호작용을 컨트롤 Model 로 부..

📌 passport : 로그인 기능을 다방면으로 도와주는 모듈 google, facebook, github 등 소셜 로그인 구현을 위한 기능 제공 ✅ passport 설치 소셜로그인이 아닌 local 방식 구현을 위해 passport-local도 같이 설치 npm i passport npm i passport-local 서버 코드에 모듈 추가(passport: 세션을 사용) const passport = require('passport'); const LocalStrategy = require('passport-local').Strategy; // Session app.use( session({ secret: 'bay', resave: false, saveUninitialized: true, cookie..

📌 session : 서버의 쿠키 📍 HTTP Session 이란? 브라우저가 아닌 서버에 저장되는 쿠키 사용자가 서버에 접속한 시점부터 연결을 끝내는 시점을 하나의 상태로 보고 유지하는 기능을 함 -> 로그인 유지 서버는 각 사용자에 대한 세션을 발행하고 서버로 접근(request)한 사용자를 식별하는 도구로 사용 쿠키와 달리 저장 데이터에 제한 없음 만료 기간 설정이 가능하지만, 브라우저가 종료되면 바로 삭제 📍HTTP Session의 동작 방식 사용자가 최초로 서버 연결을 하면 하나의 session-id(임의의 긴 문자열)가 발행 발행 된 session-id는 서버와 브라우저의 메모리에 쿠키 형태로 저장됨 서버는 사용자가 서버에 접근 시, 쿠키에 저장된 session-id를 통해 사용자를 구분하고 ..