이영훈닷컴

안녕하세요, 오늘은 JavaScript를 이용해 로컬 스토리지를 활용한 간단한 메모 앱을 만드는 방법을 소개하려고 합니다. 이 프로젝트는 JavaScript, HTML, CSS의 기본적인 지식을 활용하여 실제로 동작하는 웹 애플리케이션을 만드는 재미를 느낄 수 있는 좋은 예제입니다. 지금부터 코드를 하나씩 살펴보면서 어떻게 구현되는지 알아보겠습니다.1. 로컬 스토리지와 메모 저장 기능로컬 스토리지는 브라우저에 데이터를 저장할 수 있는 기능입니다. 이 프로젝트에서는 사용자가 메모를 작성하고 저장 버튼을 누르면, 해당 메모가 로컬 스토리지에 저장되도록 구현되었습니다. 아래는 주요 JavaScript 코드입니다:saveBtn.onclick = function() { if (text.value == '') {..

웹 개발자로서 여러 작업을 동시에 처리해야 하는 상황, 익숙하시죠? 예를 들어, 음악을 재생하면서 🎶 파일을 다운로드하고 📥 사진을 업로드 📤하는 것처럼 말이에요. 이런 여러 작업을 하나씩 순차적으로 처리한다면 너무 느리고 비효율적이겠죠. 바로 여기서 멀티스레딩이 등장합니다! 멀티스레딩은 브라우저가 여러 작업을 동시에 처리할 수 있도록 도와주는 기술입니다. 이를 통해 사용자는 빠르고 원활한 경험을 누릴 수 있죠. 예를 들어, 음악이 끊기지 않으면서 파일 다운로드와 업로드가 동시에 진행되는 것처럼요. 멀티스레딩의 기본 개념은 작업을 작은 단위로 쪼개어 여러 개의 '스레드'로 나누고, 이 스레드들이 병렬로 실행되도록 만드는 것입니다. 이렇게 하면 CPU 자원을 더 효율적으로 사용할 수 있어 성능이 대폭..

오늘날의 개발자들에게 가장 큰 도전 중 하나는 확장 가능한 애플리케이션을 구축하는 것입니다. 특히, 대규모 사용자 기반, 복잡한 기능, 높은 트래픽을 다뤄야 할 때 그 중요성은 더욱 커집니다. React와 Node.js는 이러한 문제를 해결하기 위한 강력한 조합으로, 빠르고 유지 관리가 용이한 확장 가능한 애플리케이션을 구축할 수 있습니다. 이 글에서는 React를 프론트엔드로, Node.js를 백엔드로 활용하여 확장 가능한 애플리케이션을 만드는 방법을 알아보겠습니다.React와 Node.js를 선택해야 하는 이유React는 동적이고 효율적인 사용자 인터페이스를 구축할 수 있는 프론트엔드 JavaScript 라이브러리입니다. 특히, 변경된 부분만 업데이트하고 렌더링하도록 설계되어 대규모 애플리케이션에서 ..

웹 개발을 시작하면서 가장 먼저 배우게 되는 것 중 하나가 바로 '링크'를 만드는 방법입니다. 링크는 웹 페이지 간의 연결을 가능하게 해주는 중요한 도구이며, 사용자가 원하는 정보를 더 쉽게 탐색할 수 있도록 돕습니다. 오늘은 Skillcrush 강의를 기반으로 초보 개발자가 알아야 할 링크 제작 팁과 기술들을 소개합니다.1. 앵커 태그와 속성 이해하기링크를 만들기 위해서는 HTML의 a 태그를 사용합니다. 이 태그에는 href 속성을 활용하여 이동할 URL을 지정할 수 있습니다. 또한, target 속성을 사용하면 링크를 새 탭에서 열도록 설정할 수 있습니다. 예를 들어:예시 사이트위 코드는 사용자가 링크를 클릭하면 새 탭에서 '예시 사이트'를 열도록 설정합니다. 하지만 코드를 작성할 때 속성값에 따옴..

JavaScript 개발자라면 한 번쯤 들어봤을 ES6(ECMAScript 2015)! 이 버전은 JavaScript의 강력한 기능들을 확장하고 개발자 경험을 대폭 개선한 여러 API를 도입했습니다. 오늘은 ES6에서 제공하는 몇 가지 주요 API를 살펴보고, 이를 활용해 코드 작성이 얼마나 간편하고 효율적으로 변할 수 있는지 알아보겠습니다.API란 무엇인가요?API(Application Programming Interface)는 소프트웨어 구성 요소 간의 상호작용을 가능하게 하는 도구와 프로토콜의 집합입니다. JavaScript의 ES6 API는 개발자에게 내장된 새로운 기능들을 제공해 데이터 구조 작업, 객체 조작, 비동기 작업 등을 단순화합니다. 이제 주요 ES6 API를 하나씩 살펴볼까요?1. M..

웹 개발을 하다 보면 HTTP 상태 코드를 마주치는 일이 많습니다. 서버가 클라이언트의 요청에 대해 어떤 결과를 반환하는지 알려주는 이 코드들은, 성공적인 요청뿐만 아니라 문제가 있는 경우도 알려줍니다. 이번 포스트에서는 자주 등장하는 HTTP 상태 코드와 그 의미, 발생 원인, 그리고 해결 방법을 알아보겠습니다.  301 Moved Permanently의미: 요청한 리소스가 영구적으로 새 URL로 이동했습니다.발생 원인: 웹사이트 구조 변경, 도메인 변경 등으로 URL이 바뀜.해결 방법: 북마크, 하드코딩된 URL을 새 주소로 업데이트하세요. 서버의 리다이렉션 설정(.htaccess 등)을 확인하세요.400 Bad Request의미: 클라이언트 요청에 오류가 있어 서버가 처리할 수 없습니다.발생 원인:..

커리큘럼 추측 영상 3개 추가 그리고 장고 기초 심화 구분 이전 수업에 대한 커리큘럼 추측을 남긴 적 있다.1차와 2차 부분에서 장고 기초와 심화 구분이 있는데 시간표 공유 된 거 보니 추측은 맞았다.https://blog.leeyounghun.com/23 쿼리큘럼 예측 그리고 듣고 싶은 강의 물어보기 플라스크 SQL 웹서버 복습쿼리큘럼 설명회 듣고 수업이 이렇게 진행되지 않을까?깃허브파이썬알고리즘SQLCS웹개발플라스크장고기초심화프로젝트취업준비(이력서)쿼리큘럼 설명회에 AI관련 언급은 있었지만 6번~ 8번 사blog.leeyounghun.comhttps://blog.leeyounghun.com/entry/%ED%94%8C%EB%9D%BC%EC%8A%A4%ED%81%AC-%EC%A0%95%EC%A0%81-..

Flask의 세션 관리Flask 애플리케이션 생성 및 Secret Key 설정Flask에서 세션을 사용하려면 먼저 애플리케이션을 생성하고 secret_key를 설정해야 합니다. 이 secret_key는 세션 데이터를 안전하게 보호합니다.from flask import Flask, sessionapp = Flask(__name__)app.secret_key = 'supersecretkey' 세션에 데이터 저장세션에 데이터를 저장하려면 session 딕셔너리를 사용합니다. 예를 들어, 사용자의 이름을 세션에 저장할 수 있습니다.from flask import request@app.route('/set_session/')def set_session(): session['username'] = reques..

두 프레임워크를 직접 비교하고 있음을 나타냅고 있으며 주요 비교 포인트인 '비동기 처리'를 명시 합니다. Flask의 비동기 처리 Flask는 기본적으로 동기 방식으로 동작합니다. 이는 한 번에 하나의 요청만 처리할 수 있다는 뜻입니다.from flask import Flaskapp = Flask(__name__)@app.route('/')def hello_world(): # 이 함수가 실행되는 동안 다른 요청은 대기합니다 return 'Hello, World!'if __name__ == '__main__': app.run() Flask에서 비동기 처리를 하려면 추가적인 라이브러리(예: Celery)를 사용해야 합니다.FastAPI의 비동기 처리 FastAPI는 기본적으로 비동기 방식을 ..