Aiden Tech Blog

[풀스택 100시간 과정] #4 - 세션, 쿠키, API, 페이징

이번 수업에서는 로그인 구현의 핵심인 쿠키와 세션, 서버와 클라이언트가 데이터를 주고받는 규칙인 REST API, 그리고 대용량 데이터를 다루는 페이징까지 한 번에 다뤘다.쿠키 (Cookie)쿠키는 서버가 브라우저에 심어두는 작은 텍스트 파일이다. 브라우저에 저장되기 때문에 유저가 직접 열어볼 수 있다. 그래서 보안에 민감한 정보는 넣으면 안 된다.주로 이런 상황에 쓰인다: "오늘 하루 보지 않기", "아이디 저장", 쇼핑몰 장바구니. HTTP는 기본적으로 Stateless(상태 없음), Connectionless(연결 없음) 특성을 가지는데, 쿠키가 그 공백을 메운다.// 쿠키 저장 (만료일 포함)const setUserInfoCookie = (username, expirationDays) => { ..

[풀스택 100시간 과정] #3 - 서버와 HTTP

이번 수업에서는 웹 개발의 가장 기본적인 개념인 클라이언트-서버 구조와, 둘 사이에서 데이터를 주고받는 방식인 HTTP를 다뤘다.Next.js로 이미 개발을 해본 입장에서 개념 자체는 낯설지 않았지만, 구조를 정리해서 언어로 설명하는 건 또 다른 일이다.클라이언트와 서버개념설명클라이언트서버에 요청을 보내는 프로그램 또는 장치 (ex. 웹 브라우저)서버요청을 받아 처리하고 응답을 돌려주는 컴퓨터 시스템 클라이언트는 장군, 서버는 성, 그 안의 왕이 웹 서버다. 장군이 성에 물 100L 보급을 요청하면, 왕이 허가하고 처리하는 구조다.이 비유를 전체 개념에 매핑하면 이렇다.비유실제 개념장군클라이언트성서버왕웹 서버좌표IP 주소도로명주소도메인성문포트 (0~65535)성벽방화벽마패인증 (Authentication..

JavaScript는 브라우저에서 웹을 동적으로 구현하기 위해 만들어진 언어이다. 이를 웹 브라우저가 아닌 환경에서 실행하게 해주는 런타임 환경이 Node.js이다.앞서 말했다싶이, JS는 원래 웹 브라우저에서 돌아가는 언어이기 때문에, 입력을 받으려면 npm에서 readline-sync을 다운받아야 한다.npm install readline-sync 입출력 예제 코드는 다음과 같다.import readlineSyncModule from 'readline-sync'const name = readlineSyncModule.question('이름 입력 : ')console.log('입력받은 이름 : ' + name)const age = parseInt(readlineSyncModule.question('이름..

오늘부터 차세대 SW혁신인재육성 아카데미에서 진행하는 AI 풀스택 웹마스터 과정 (100시간)에 참여하게되었다. 「AI 활용 풀스택 웹마스터 과정」은 학생들이 실무 중심의 기술 역량을 기르고 진로 멘토링을 통해 SW 전문 역량을 강화할 수 있도록 운영되는 교육 프로그램으로, 전에 독학으로 Next.js, React등을 배우고 ToDit 까지 운영해본 경험이 있지만, 생기부도 채울 겸 전문적으로, 풀스택 기술을 익히고자 신청했다. 7월에는 강남구청에서 해당 사업을 진행하는, 대덕디자인고, 단대소고, 수도공고, 로봇고 4개학교가 모여, 프로젝트를 발표하고 해커톤을 진행한다. 첫날은 오리엔테이션과 아이스브레이킹이 주로 이루어졌다. 프로그램의 전반적인 커리큘럼 소개와, 강사님 소개가 있었다. 쉬는 시간을 이용하..

최근 조코딩 x OpenAI x Primer AI 해커톤에 내가 만들고 있던 서비스 Actonix를 출품했다.이번 해커톤은 단순히 “아이디어를 내는 자리”라기보다, 내가 만들고 있는 AI 서비스가 실제로 어떤 문제를 해결하려는지, 그리고 그 방향성이 시장과 사용자 관점에서 설득력이 있는지를 다시 점검해볼 수 있었던 기회였다.왜 Actonix를 들고 나갔나나는 원래부터 “정보를 읽는 AI”보다, 정보를 행동으로 바꾸는 AI에 더 큰 관심이 있었다.이미지, 문서, 포스터, 안내문처럼 비정형으로 흩어져 있는 정보는 사람 입장에서는 이해할 수 있어도, 실제로 바로 행동으로 옮기기는 불편한 경우가 많다.예를 들어 수행평가 안내문을 보면 사람은 대충 이런 흐름으로 생각한다.무엇을 해야 하는지 파악하고준비 과정을 쪼..

이번 포스트는 Vercel 서버리스 환경에서 파일 업로드 시 발생하는 4.5MB 페이로드 제한 문제를, Presigned URL 아키텍쳐로 구조적으로 해결한 과정에 관한 것이다.이슈ToDit(todit.app)에 이미지 업로드 기능을 붙이던 중 이런 에러가 떴다.413 FUNCTION_PAYLOAD_TOO_LARGE 처음엔 multipart/form-data로 인코딩 방식을 바꾸면 되겠거니 했다. 소용없었다.Vercel 공식 문서를 뒤져보니 원인이 명확했다.Vercel Serverless Function은 요청 본문과 응답 본문 모두에 4.5MB 하드 제한을 적용한다. 이 값은 설정으로 변경할 수 없다.multipart/form-data든 application/octet-stream이든 상관없다. 파일 ..

이번 포스트는 Next.js 서버의 자동 정적 최적화 (Implicit Static Optimization) 에 관한 것이다. 최근 진행한 웹 프로젝트인 ESSENTIA Science 홈페이지 (essentia-sci.org). 게시판 기능부터, 특정 사용자(임원진)에게는 PATCH 권한을 부여하여, 회원과 조직도를 수정 할 수 있게 구현하였다. 구조는 다음과 같다. 일반적인 공개 페이지인 Member Page와, 조직도는 어떠한 인증 없이 단순 GET 요청으로 DB에서 데이터를 받아올 수 있다.다만 PATCH가 포함된 Admin Page는 GET, PATCH 등 모든 요청이 로그인 여부와 관리자 권한 여부를 OAuth를 통해 받아와 인증해야 요청을 할 수 있는 구조이다. 이슈이러한 구조에서 다음과 같은..