도입 배경 현재 진행하기로 한 프로젝트는 STAY MATE라는 프로젝트로, 기숙사 입소 인증을 돕기 위한 플랫폼이다. 해당 프로젝트에서 학생들의 정보를 관리하기 위해 로그인 및 회원가입 기능이 필요하다. 그래서 정보를 관리하고 저장할 브라우저 저장소가 필요했고, 쿠키와 세션 그리고 토큰(JWT) 중 이번에 토큰(JWT)을 활용하기로 하였다. 왜 JWT 여야만 할까? 이전에 쿠키를 사용해서 로그인과 회원가입 기능을 개발한 적 있다. 그 경험을 토대로 이번에도 똑같이 적용하려고 했으나, 쿠키를 사용하기엔 큰 문제점이 있었다. 바로, 정보 탈취의 위험성 이 있다는 것이다. 쿠키에 대해 공부하던 중 아래와 같은 단점에 대해 알게 되었다. 보안에 취약하다. (요청 시 쿠키의 값을 그대로 보내어, 유출 및 조작당할..

🚨 본 글은 필자가 AI수업을 듣고 생각하게 된 내용을 정리한 글입니다. 주관적인 견해가 포함되어있습니다. :) 요즘 AI시장을 정말 뜨겁게 달구고 있는 ChatGPT. 이제는 인공지능이 우리 삶에서 점차 중요한 역할을 맡기 시작하고 있다. 이러한 AI 기술의 발전이 계속되면서 우리는 사람이 할 수 없는 일들을 더욱 효율적으로 처리할 수 있게 되었지만, 이에 따라 사람과 AI의 역할 분담과 함께 일부 직업들은 사라져 가고 있다. 그렇다면, 우리는 미래에 "사람의 시대"가 끝나고 AI만이 우리 삶을 지배할 수 있을까? 내가 가진 궁금증에 대해 얘기하려면 인공지능이란 무엇이고 또 어떻게 발전해왔는지 알아야 한다. 인공지능(Artificial Intelligence)의 정의 & 역사인간의 학습 능력과 판단 ..

들어가기 전... 블로그를 작성하지 않은 약 4개월 간 많은 변화가 일어났다. 어떤 프론트엔드 개발자가 되고 싶은지, 꿈은 무엇인지 조금씩 윤곽을 드러냈고, 선명하게 그려나가기 위해 하루 하루를 채워나가는 중이다. 결국 스스로 바꿀 수 있는 건 나 자신 뿐이라는 걸 깨달았다. 이제 성장 속도가 조금씩 빨라지는게 느껴진다 작년 10월 부터 12월까지의 이야기 10월 작년 10월 연합 해커톤 회고록을 보면 알겠지만 그야말로 생각의 변화라는 것이 일어나는 시점이었다. 그동안 프로젝트에 단 한 번도 적용해본 적 없던 타입스크립트를 사용했고, 지난 몇 달간 공부한 내용의 절반 분량을 단 며칠만에 배웠다. 정말 주변 환경이 얼마나 중요한지에 대해 깨닫는 순간이었다. 그리고 그 이후로 해커톤에 재미가 들렸다. 상을 ..

🚨 본 글은 기본적인 내용(서버-클라이언트가 요청과 응답을 보내는 과정)을 알고 있다는 전재하에 작성한 글 입니다. 간단히 정리했습니다 :) 우리는 검색창에 주소를 찍음으로써 서버에 페이지를 요청하게 된다. 요청을 받은 후 웹페이지를 렌더링 하고 처리하여 브라우저를 통해 사용자에게 보여주는 과정을 거치게 되는데, 이 렌더링하는 방식은 어떤 라이브러리 혹은 프레임워크를 썼냐에 따라 달라질 수 있다. 어떤 렌더링 방식을 사용했냐에 따라 최고의 웹사이트가 될수도, 최악의 웹사이트가 될수도 있다. 우리는 상황에 맞춰 어떤 것을 이용할 것인지 잘 선택해야 한다. 그래서 오늘은 각 렌더링 방식에 대해 알아보고, 어떤 상황에 어떤 방식을 사용할지 같이 고민해볼 것이다. 렌더링 하는 방식에는 총 3가지가 있다. 1. ..

🚨 본 글은 필자가 발표를 위해 기록한 글입니다. 1. 쿠키(Cookie) [1] 정의 ➡️ 쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일 하나의 쿠키당 4kb를 저장함. 웹사이트에서 쿠키를 설정하게 될 시 그 이후 모든 웹 요청은 쿠키 정보를 포함해 전송. 인증 기한이 있고, 키-값으로 이뤄져있음. 쿠키를 상실하면 정보를 상실하는 것과 같다. 2. 세션(Session) [1] 정의 ➡️ 쿠키와 달리 사용자 정보를 서버에 저장하여 서버측에서 세션ID파일을 생성해 관리함. 세션 ID로 클라이언트를 구분 ➡️ 요구에 맞는 서비스를 제공 사용자가 많아질수록 서버 메모리를 많이 차지하게 됨 +) 쿠키와 세션의 차이점 정보가 저장되는 위치(세션 - 서버, 쿠키 - 클라이언트) ..

우리가 많이 다루는 이벤트에 대해 확실하게 정리한 글입니다. 1. 이벤트란 ? 자바스크립트 안의 이벤트는 클릭, 스크롤 내리기 등 사용자와 웹페이지가 상호작용을 하며 브라우저가 감지하는 것. * 이벤트 리스너, 이벤트 핸들러를 통해 처리 함. ex) click, contextmenu, keydown, keyup, submit 등... 2. 등록 방법 - 인라인(inline) : 이벤트를 HTML요소로 직접 지정하는 방식. -> 유지 보수에 좋지 못함. Plz Click! - 프로퍼티(Property) : 선택자를 이용함. -> 인라인 방식의 단점은 보완하지만, 한 번에 하나의 이벤트만 가능함. click - addEventListener() : 1개 이상의 이벤트가 가능하고, IE9이상 동작함. clic..

목표 타입스크립트에서 사용되고 있는 기본 타입에 대해 정리하고, 이해하는 것 불리언 (Boolean) 가장 기본적인 데이터 타입으로 참/거짓 값을 나타낸다. 활용 예시) let isComeIn: boolean = false; // 기숙사 입소 여부 확인 변수 숫자 (Number) 모든 숫자 값에 쓸 수 있는 타입으로 10진수, 16진수, 2진수, 8진수 다 가능함 활용예시) let personCount: number = 0; // 사람 숫자 세는 변수 let crc: number = 0xffff; // crc 기본 값 초기화(16진수) let binary: number = 0b1010; // 2진수 let octal: number = 0o725; // 8진수 문자열 (String) 텍스트 데이터를 다룰 ..

10일 전 SW 마이스터고 연합 해커톤을 하러 광주에 다녀왔다. 다녀와서 바로 적으려고 했지만, 바쁜 현생 때문에 잠시 잊고있었다. 그치만 내일의 나보다 오늘의 내가 적는게 기억력이 더 좋을 것 같아 지금이라도 쓰려고 한다. 해커톤 참가 & 팀 빌딩 학교마다 다른 것 같았지만 우리학교에서는 마역량이라는 제도를 활용해서 해커톤에 참가할 학생을 뽑았다. 20명까지만 가능했는데, 그동안 마역량 점수를 열심히 채워온 보람이 있었다. 그리고 일전에 토크 콘서트에서 인연이 있던 친구가 함께하자고 제안해준 덕분에 나는 지금의 우리팀과 합류할 수 있게 되었다. 주제 선정 위와 같이 주제는 총 4가지로 이뤄져있었고, 세분화되어있었다. 우리팀은 의논을 통해 지속 가능한 기술을 선택했고, 그 중 선배-동기-후배들이 기술 노..

계획 9월은 행사와 연휴가 많다... 9월은 중요한 행사가 2가지 있었다. AI Expo, SW 연합 토크 콘서트. 이걸 고려해서 계획을 해야겠다. 리액트 200제 공부하기 학교에서 받은 책인데, 리액트 기본에 대한 정리가 잘되어있다. 이걸 꾸준히 하루 한 파트씩 끝내보자. 수행평가 지금 점점 수행평가 시즌이 오고있다... k-고딩의 의무를 다 하기 위해 수행평가 점수를 잘 받을 수 있도록 노력할 것이다. 인문과목이든 전문 과목이든 내가 할 수 있는 최선을 다 하자. 마인드 하루 무너져 내렸다고 해서 포기하지 말자. 작은 것 부터 하나씩 바꿔나가자. 쉽지는 않겠지만, 휴대폰 사용을 줄이고 조금 더 개발에 집중하는 시간을 가지는 내가 되었으면 좋겠다. 컨퍼런스도 보면서 다른 사람들은 어떻게 개발하는지 보자..

운영체제의 특징 파악 사용자 편의성을 위한 인터페이스 제공 컴퓨터의 구성을 잘 알고 있지 않더라도 아이콘/버튼을 통해 컴퓨터를 다룰 수 있는 것을 의미함. 다양한 자원을 관리함 CPU 등과 같이 컴퓨터 자원의 속도를 관리함 윈도즈 계열 운영체제의 특징 장점 : 고객 지원이 체계적임 단점 : 문제점을 발견했을 때 수정에 시간이 걸림 ➡️ 시간적인 차이가 있음 리눅스/유닉스 계열 운영체제 특징 장점 : 다수의 개발자가 수정에 참여해 빠른 업데이트가 가능함 단점 : 체계적인 지원이 상대적으로 부족해 일반인들보다는 전문가들이 사용함. 운영체제의 역할과 목표 운영체제 기본 명령어 제어 방법 CLI : 사용자가 직접 명령어를 입력해 컴퓨터에게 명령을 내리는 방식 GUI : 마우스로 화면을 클릭해 컴퓨터를 제어하는 ..