Opal1031

이번 글에서는 정렬을 간단히 짚고, 이분 탐색을 중심으로 다룹니다. 정렬은 이분 탐색을 위한 전제 조건이 되는 경우가 많습니다.그래서 정렬 자체는 짧게 보고, 이분 탐색의 원리와 활용에 더 집중해보겠습니다. 정렬에 대한 세부적인 내용은 기초 트랙을 참고하시면 되겠습니다.[Python] Basic #03: 정렬 [Python] Basic #03: 정렬Python에서 정렬을 다루는 방법을 다룹니다. 리스트를 정렬할 때 자주 사용하는 sort()와 sorted(), 정렬 기준을 바꾸는 key, 간단한 함수를 만드는 lambda, 그리고 역순 정렬까지 함께 살펴보겠습니다.1.opal1031.tistory.com1. 정렬은 왜 필요한가이분 탐색은 정렬된 데이터에서만 제대로 사용할 수 있습니다.데이터가 정렬되어 있..

Python에서 정렬을 다루는 방법을 다룹니다. 리스트를 정렬할 때 자주 사용하는 sort()와 sorted(), 정렬 기준을 바꾸는 key, 간단한 함수를 만드는 lambda, 그리고 역순 정렬까지 함께 살펴보겠습니다.1. sort()와 sorted()sort()와 sorted()는 모두 데이터를 정렬할 때 사용합니다. sort()리스트 자체를 직접 정렬nums = [5, 2, 9, 1, 3]nums.sort()print(nums) # [1, 2, 3, 5, 9]list형의 method 중 하나이므로 list.sort()의 형태로 작성한다. sorted()정렬된 새로운 리스트를 반환nums = [5, 2, 9, 1, 3]result = sorted(nums)print(result) # [1, 2, ..

들어가면서…2025년 복학을 하면서, 개발자로 성장하고 싶다는 마음이 더욱 커졌다.그래서 꼭 개발자들을 위한 동아리에 가입해야겠다고 다짐했다. 하지만 1학기에는 이전에 활동하던 동아리에서 회장직을 맡게 되었다.개인의 성장을 잠시 미루더라도, 다수와 함께하는 책임을 다하는 것이 우선이라고 생각했다.그래서 그때는 개발 관련 동아리 가입을 잠시 뒤로 미루기로 했다. 그리고 마침내 회장 임기를 마치고 나서, 바로 GDGoC PKNU에 지원하게 된 것이다.이 글은 많은 사람들이 GDGoC에 관심은 있지만, 중앙 동아리가 아니다 보니 정보가 부족한 경우가 많은 것 같았다.그래서 직접 지원하며 겪은 과정을 되돌아보며 정리하게 되었다.GDGoC PKNU를 선택한 이유사실 이 내용은 면접 때도 받았던 질문이다. 나의 희..

비동기 통신Axios를 사용하여 서버와 HTTP 통신을 수행하고 데이터를 주고받을 수 있다. 1️⃣ 비동기 통신 개요동기 vs 비동기구분동기 통신비동기 통신처리 방식요청 → 응답 대기 → 다음 작업요청 → 다른 작업 진행 → 응답 처리적합한 경우은행 서비스 (정확성 중요)SNS 타임라인 (속도 중요)사용자 경험응답 대기 중 화면 멈춤응답 대기 중에도 다른 작업 가능동기 통신: 브라우저가 서버에 요청을 보낸 후 응답이 올 때까지 다음 동작을 실행하지 않음비동기 통신: 브라우저가 서버에 요청을 보낸 후 응답을 기다리는 동안 다른 작업을 수행할 수 있음웹 브라우저는 HTTP 요청을 통해 서버와 통신한다.서버는 JSON, HTML, 이미지 등의 형식으로 응답을 반환한다.웹 페이지에서는 사용자 경험을 고려하여 비..

React Router와 전역 상태 관리React Router를 사용하여 SPA를 구현하고, useContext로 전역 상태를 관리할 수 있다.1️⃣ React RouterReact는 SPA(Single Page Application) 방식으로 동작한다.SPA는 하나의 HTML 파일로 여러 화면을 구현하기 때문에, URL과 화면을 연결하는 라우팅 관리가 필요하다.React Router는 URL 경로에 따라 적절한 컴포넌트를 렌더링해주는 도구다.페이지 새로고침 없이 화면을 전환할 수 있다. 설치npm install react-router-dom 기본 설정import { BrowserRouter, Routes, Route } from 'react-router-dom';import Home from './pa..

State와 HooksReact Hooks를 사용하여 함수형 컴포넌트에서 상태 관리와 부수 효과를 처리할 수 있다.1️⃣ State (useState)State는 컴포넌트 내부에서 관리되는 동적인 데이터다.State가 변경되면 React는 자동으로 컴포넌트를 리렌더링한다.일반 변수는 변경되어도 UI가 업데이트되지 않지만, State는 변경 시 자동으로 화면을 갱신한다.import { useState } from 'react';function Counter() { const [count, setCount] = useState(0); // 초기값 0 return ( 현재 카운트: {count} setCount(count + 1)}>증가 setCount(count - ..

들어가면서...React는 처음 다뤄보는 내용이었기에, 제공된 학습 자료 이외에도 Github Copilot등을 통해 다양한 예제를 알아보는 방식으로 공부하였다.ReactReact는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리다.React 소개React는 Facebook(현 Meta)에서 개발한 오픈소스 JavaScript 라이브러리로, 컴포넌트 기반으로 UI를 구성하고 상태 관리를 효율적으로 수행한다.SPA(Single Page Application) 개발에 주로 사용되며, Virtual DOM을 통해 빠른 렌더링 성능을 제공한다.React의 주요 특징컴포넌트 기반 구조: 재사용 가능한 독립적인 UI 조각으로 구성단방향 데이터 흐름: 상태 변화를 명시적으로 관리하여 인과 관계 파악이..

들어가면서...JS는 생활코딩 및 제출했던 과제를 예제로 삼아 문법 위주로 복습하려고 한다.1️⃣ JavaScriptJavaScript는 동적인 웹 페이지를 만들기 위한 필수 스크립트 언어다. JavaScript 소개JavaScript는 HTML과 CSS로 구성된 정적인 페이지에 동적인 기능을 추가하는 언어다. 브라우저에서 실행되는 클라이언트 기반 언어로, 사용자와의 상호작용을 관리하거나 서버와 데이터를 주고받는 데 주로 사용된다.JavaScript의 주요 특징인터프리터 언어: 브라우저가 즉각적으로 소스를 해석하여 실행.이벤트 기반: 사용자와의 이벤트(클릭, 입력 등)에 반응.크로스 플랫폼: 어떤 운영체제에서든 브라우저를 통해 실행 가능.자바스크립트 포함 방법HTML 내부에 자바스크립트를 작성하거나 외부..

들어가면서...기존에도 알고 있었던 HTML/CSS는 생활코딩을 참고하여 간단하게 짚고 넘어가는 방식이었기에, 제출했던 과제를 돌아보며 기본 문법 및 구조를 다시 한 번 짚고 넘어가려고 한다. 1️⃣ HTML (HyperText Markup Language)HTML은 웹 페이지의 구조를 정의하는 언어다.HTML의 기본 구조: 문서가 HTML5임을 명시: HTML 문서의 최상위 태그 Welcome to My Page This is an example of an HTML structure. 태그(Tag)HTML은 여러 태그를 사용하여 내용을 구분하고 역할을 정의한다. 제목 태그: ~ 제목 1제목 2 단락 태그: 이것은 단락입니다. 링크 태그: Click Here 이미지 태그: 리스트 태..