티스토리

궁금한게 많은 열아홉

검색하기

블로그 홈

궁금한게 많은 열아홉

goodgirlgonebad.tistory.com/m

끈기와 효율

구독자: 2

방명록 방문하기

주요 글 목록

[글또] Closure의 원리를 이용해서 useState 구현하기(2) 지난 시간에는 Closure의 원리를 이용해 useState를 간단하게 구현해보았다.이번주에는 조금 더 깊이 있게 들어가보려고 한다. useMyState 여러개 사용하면 정상적으로 동작하지 않는다?!우리가 지난 시간에 만들었던 useMyState를 여러개 사용하게 되면정상적으로 동작하지 않는 모습을 확인할 수 있다. // ... 생략function Component() { const [count, setCount] = React.useMyState(1) const [text, setText] = React.useMyState('apple') return { render: () => console.log({ count, text }), click: () => setCount(count + .. 공감수 0 댓글수 0 2024. 11. 10.
[글또] Closure의 원리를 이용해서 useState 구현하기(1) 1. Closure란 함수가 선언 될 때, 렉시컬 환경을 기억해 함수가 해당 스코프 밖에서 실행되어도 그 환경에 접근할 수 있는 현상이다.2. Closure의 핵심원리는 내부 함수의 생명주기가 끝났음에도 외부 환경의 변수에 대해 참조가 가능하다는 것이며 이를 활용해서 useState를 구현할 수 있다.3. useState를 통해 데이터를 관리하고 유지할 수 있다. 배경이번 면접의 사전 과제에서 Closure에 대한 개념과 어떻게 쓰이는지에 대한 내용을 작성하였다.그리고 사전 과제를 기반으로, 기술 면접 진행 과정에서 useState를 구현하는 시간을 가졌다.Closure을 아는 것에서 나아가 어떻게 활용되는지에 대해 추론해볼 수 있는 기회가 생겨 뜻깊었고,이를 떠올려보면서 최대한 기록해보려고 한다. Ja.. 공감수 1 댓글수 0 2024. 10. 27.
[글또] 글또를 시작하는 마음 글또를 시작하기 전 회고글을 적는걸 좋아했지만, 항상 적고 나면 아쉬웠다. 내가 적은 글이 잘 적은 글일까? 부족해보이진 않을까?와 같은 생각을 늘 했고, 글을 잘 적는 사람이 되고 싶었다. 여기서 말하는 잘 적는 글이란 많은 기준이 있겠지만, 3가지 정도만 꼽아보자면 조금 더 깊은 생각을 할 수 있는 글다양한 방향으로 생각이 넓혀지는 글가독성이 좋은 글이 정도로 정리할 수 있다. 글을 작성하면서 가독성은 어느정도 개선이 되었지만, 아직까지 깊은 생각을 이끌어낼 수 있는 글을 작성해보지는 못한게 아쉬웠다. 그리고 늘 저장된 글만 여러개 있고 세상 밖으로 나오지못한 글이 많아서, 이번 기회를 통해서 작성해보고 싶었다.글또를 참여하게 된 계기이 부분은 내 가치관과 관련있다고 말할 수 있다. 요즘, 내 가치관.. 공감수 8 댓글수 3 2024. 10. 6.
[인프콘 X 랠릿] 인프콘에 가고싶은 열여덟의 이력서 작성기 👉 서론이 조금 길어요! 이력서 작성법이 궁금하신 분들은,이력서 작성법 부터 읽어주시면 감사하겠습니다. 개요개발과 관련된 다양한 강의를 제공해주는 인프런에서는매년 인프콘을 개최해 다양한 세션과 네트워킹을 할 수 있는 자리를 마련해준다.아직 프론트엔드 주니어인 나는 개발을 잘 하고 싶은 마음이 커서이에 대한 조언을 얻을 수 있는 좋은 기회였다.그래서 인프콘에도 너무나 참여하고 싶은 마음이 컸는데, 아쉽게도 매년 떨어졌다.(올해도 역시나 ..) 다른 때보다 유독 올해는 더욱 속상했던게,나랑 여동생이랑 둘 다 지원을 했는데, 나만 떨어졌다는 것이다..(얄밉게 자랑하고 갔다...)아쉬운 마음에 인프콘 페이지만 계속 새로 고침하고 있었고,열심히 듣고 싶어서 짜낸 시간표만 애써 바라보고 있었다. 인프콘 20.. 공감수 1 댓글수 2 2024. 7. 16.
[Next.js] 프로젝트에 tailwindCSS가 안 먹히는 문제가 발생하다 .. 😢 개요현재 진행 중인 개인 기술 블로그 제작 프로젝트를 진행하면서Next.js + Typescript와 tailwindCSS를 사용하게 되었는데,tailwindCSS가 먹히지 않는 문제가 발생했다. 이 문제가 해결되길 바라는 마음으로,또 나랑 똑같은 문제를 겪게될 사람들을 위해 글로 남겨본다. 문제의 발견어쩌다 이 문제에 대해 발견하게 되었냐면,Header와 Footer 컴포넌트 제작 후 레이아웃에 적용을 시켰을 때아무런 변화가 나타나지 않고 그저 이미지만 나타나는 것을 보고 알게 되었다. 정말 ... 놀랍게도 컴포넌트를 만들면서 아무런 의심을 못했다.왜냐하면 전체 레이아웃을 책임질 Theme의 구조를 뒤늦게 잡았기 때문에이 구조가 잡히면 해결 될 거라고 생각했기 때문이었다. 하지만, 구조를 잡았음에도 불.. 공감수 0 댓글수 0 2024. 7. 11.
[Next.js] Linking과 Navigating 알아보기 Linking 그리고 NavigatingNext.js 라우터는 클라이언트 사이드 Navigation을 위한 서버 중심 라우팅을 사용한다.동시에 렌더링을 하거나 즉시 로딩이 가능하다. 이는 Navigation이 클라이언트 사이드 상태를 유지하며 비용이 많이 드는 재랜더링을 피할 수 있고, 중단이 가능하다는 것을 의미한다. 컴포넌트react의 태그를 확장하여 프리패칭과 라우트 간에 클라이언트 사이드 네비게이션을 제공한다.라우트 간에 이동하는 주요 방법이다. next/link로 부터 import해서 사용할 수 있다.import Link from 'next/link' export default function Page() { return Dashboard} a태그와 같이 herf속성을 사용하면 된다. 동적.. 공감수 0 댓글수 0 2024. 7. 4.
[Next.js] Next.js를 조금 더 파헤쳐 보았다. - (2) 개요지난 글에서 Next.js의 대략적인 구조와, CSR과 SSR과 관련해서 이야기해보았다.오늘은 Rendering에 대해서 조금 더 본질적으로 파악해보려고 한다.Next.js 공식문서의 Rendering 파트를 참고하였다.그럼 시~작! Rendering이란?내가 작성한 코드를 사용자에게 보여주는 것.어떻게 렌더링 하느냐에 따라 SSR, CSR 방식이 있다. 우리는 오늘 렌더링 환경과 요청-응답 생명주기그리고 네트워크 바운더리에 대해 이야기해볼 예정이다. Rendering Enviromrnts : Client와 Server우리가 작성한 코드는 서버와 클라이언트에서 실행할 수 있다.Client : 브라우저에 요청한 서버 속 코드를 보여주고 서버에서 받은 응답을 사용자가 볼 수 있도록 전환한다.Server.. 공감수 0 댓글수 0 2024. 6. 19.
[Next.js] Next.js 구조를 (약간) 파헤쳐 보았다. - (1) 개요Vercel에서 만든 React 프레임워크 Next.js는 가면 갈수록 많이 사용되고 있다.지난 몇 년간 꾸준히 발전하며,이 추이가 계속되면 하루 아침에 Next.js가 앞서있을 것 같다고 생각도 했다.필자 또한 프론트엔드 개발자로서 기본적인 이해도를 높이고,제대로 사용해보고 싶어서 Next.js를 나만의 방식으로 파헤쳐보자는 결심을 하게 되었다.이 글은 Next.js가 처음이신 분들께 조금이나마 도움이 될 수 있을 것이라고 생각한다. 사전 지식 정리Next.js에 대해 이야기할 때면 항상 같이 있는 키워드가 있다. 바로, SSR(Server Side Rendering), CSR(Client Side Rendering)이다.이야기 하기전 키워드에 대한 정의를 바로 짚고 넘어가보도록하자.SSR은 초.. 공감수 0 댓글수 0 2024. 6. 13.
[Typescript] 고급타입 (문자형 리터럴 타입 ~ 다형성 this 타입) 문자열 리터럴 타입 문자열을 하나의 타입으로 지정하여 사용하는 것. type selectedGroup = 'BTS' | '뉴진스' | '블랙핑크' | '세븐틴' | null; const GroupFilter = ({ selectedGroup, setSelectedGroup, }: { selectedGroup: 'BTS' | '뉴진스' | '블랙핑크' | '세븐틴' | null; setSelectedGroup: React.Dispatch; }) => { return ( setSelectedGroup('BTS')} > BTS setSelectedGroup('뉴진스')} > 뉴진스 setSelectedGroup('블랙핑크')} > 블랙핑크 setSelectedGrou.. 공감수 0 댓글수 2 2024. 2. 15.
[Typescript] 고급타입 - 타입 가드와 차별 타입 타입 가드 Typescript에서 변수의 타입을 좁히는데 사용되는 메커니즘 사용자 정의 타입가드 타입 서술어 사용 function isFish(pet: Fish | Bird): pet is Fish { return (pet as Fish).swim !== undefined; } 보통 타입 가드는 isFish 와 같이 is를 많이 붙인다. is 는 타입 가드에서 사용되는 키워드이다. pet is Fish 파라미터(pet)가 실재 해당 타입(Fish)인지 구분하는 키워드이다. return (target as Developer).swim !== undefined 는 pet에 swim 프로퍼티가 있으면 Fish 타입으로 취급한다. interface Bird { fly: () => void; layEggs: ().. 공감수 0 댓글수 0 2024. 2. 1.
[React] 파일 업로드 & 다운로드 기능 구현하기 개요현재 사내에서 진행 중인 프로젝트 CSVtoHex를 개발중이다. 해당 프로젝트는 회사 자제 솔루션 제품에 들어가는 CSV 파일을 Hex로 읽을 수 있는 프로그램을 만드는 것이 목적이다. 프로젝트 기능 명세는 아래와 같으며 오늘 구현했던 것은 CSV 파일 업로드 기능 그리고 변환 없이 다운로드 되는 과정을 구현해보려고 한다. 기능 세부 사항으로 쪼개기우선 이 기능의 목적을 기억하자. 파일을 업로드하는 기능이라는 것. 여러 방법이 있겠지만, 나는 크게 두 가지로 분류했다.파일 업로드 기능 구현하기"업로드" 버튼 혹은 이 기능을 하는 요소를 통해 파일 업로드하기drag&drop을 통해 파일 끌어와서 업로드하기업로드 한 파일 값 보여주기그리고 기본적인 UI를 만들어주었다. .. 공감수 0 댓글수 0 2023. 11. 16.
CSV 파일을 JSON으로 만들어서 활용하기 개요사내에서 진행 중인 프로젝트에 CSV 파일을 읽어들여서 데이터를 변환하는 프로그램을 제작 중이다. CSV 파일 내용을 가져와서 변환된 모습을 보여주어야 하기 때문에 내가 가장 보편적으로 다루는 형태로 내용을 가지고 있어야만 했다.가장 많이 쓰는 형태, JSON프로젝트를 하면서 가장 많이 쓰이는 데이터 형태가 어떤 형태일지 생각해보니, 객체 형태라는 것이 가장 많이 떠올랐다. 서버로 부터 데이터를 받았을 때도, 혹은 여러 정보를 하나의 객체로 표현할 때도 JSON 모양으로 받아오는 경우가 가장 많았고 이를 사용하기로 했다. 어떤 것을 고려해야할까?해당 파일의 샘플은 아래와 같다. 이 파일의 내용을 문자열 형태로 받을 것이다. 아직 진짜 파일 업로드 기능을 구현한 것은 아니기에, 파일.. 공감수 0 댓글수 0 2023. 11. 1.
[React+Typescript] 카카오맵 API를 활용하여 덕질지도 완성하기 개요지난 9월 UNITHON 10회차가 끝나고,회고록은 작성했지만 사용했던 기술에 대한 설명이 부족하다고 느껴져 작성하게 되었다.기획서는 여기를 참고하면 될 것 같고,지금부터는 내가 맡은 부분인 지도 부분을 어떻게 활용했는지 작성해보려고 한다. 기능 쪼개기우선 내가 하고자 하는 기능을 하나의 퀘스트를 깬다 생각하고 작성해보았다.그랬더니 아래와 같이 정리할 수 있었다.우리의 주 목적은 지도를 활용해 내 최애가 다녀간 장소,최애의 맛집 혹은 최애의 생일을 축하 할 수 있는 생일 카페에 대한 정보를 제공하는 것이다.나는 이 지도를 활용해 사용자에게 정보를 제공해야한다. 지도를 화면에 띄웁시다!첫 번째, 지도를 화면에 띄우기 위해 지도 API를 활용해야했다.네이버 지도, 구글 지도.. 등 다양한 지도 API가 .. 공감수 0 댓글수 0 2023. 10. 4.
[정보보안] 리버싱으로 취약한 프로그램 파일 분석하기 _ 코드엔진RCE1번 문제 풀이 어셈블리어 기계어와 대응되는 로우 레벨 언어이다. 컴파일이 빠르고 유지보수가 힘들어 거의 사용되지 않지만 하드웨어 디버깅을 할 때 유용하게 사용됨. 레지스터 소량의 데이터, 처리중인 중간결과를 일시적으로 기억해두는 고속의 저장영역이다. CPU는 자체 저장 기능이 없는데, 이를 보완하는 역할을 한다. 32비트는 E(AX) 64비트는 R(AX)와 같이 표현된다. Intel과 AT&T문법이 존재하며, 둘은 호환되지 않는다. Intel : 뒤에서 앞으로, 숫자를 그대로 사용, 명칭 그대로를 사용 AT&T : 앞에서 뒤로, 숫자 앞에 $를 붙여서 사용, 명칭 앞에 %를 붙임 !! 단순히 계산한 값은 동일하지만 저장되는 레지스터가 달라져 이후 계산 시 결과가 달라짐 범용 레지스터 EAX 사칙연산 등 산술에 사용되고.. 공감수 0 댓글수 0 2023. 9. 14.
[AI] Open cv에서 데이터 다루기 데이터 타입 확인 데이터 shape, size, dtype을 확인할 수 있다. 사용법 import cv2 img = cv2.imread('data/messi5.jpg') print(img.shape) print(img.size) print(img.dtype) 이미지 나누고 합치기 이미지 나누기 : 이미지 합치기 : import cv2 img = cv2.imread('data/messi5.jpg') b,g,r = cv2.split(img) cv2.imshow('b', b) cv2.imshow('g', g) cv2.imshow('r', r) img = cv2.merge((b,g,r)) cv2.imshow('image',img) cv2.waitKey() cv2.destroyAllWindows() 이미지 리사이.. 공감수 0 댓글수 0 2023. 9. 11.
[AI] Open cv로 영상 다루기 opencv 영상 파일 읽는 법 우선 OpenCV 라이브러리를 설치해야합니다. 다음 명령어를 입력하여 설치할 수 있습니다. pip install opencv-python OpenCV를 가져옵니다. import cv2 영상 파일을 읽을 땐 'cv2.imread()' 함수를 사용해야합니다. 이 함수는 이미지 파일의 경로를 입력으로 받고 이미지를 반환합니다. import = cv2.imread('영상파일경로.jpg') 읽은 이미지를 화면에 표시하거나 다른 작업을 수행 할 수 있습니다 OpenCV로 다양한 영상 처리 작업하기 예시 코드 cv2.imshow('이미지 창 제목', image) cv2.waitKey(0) cv2.destoryAllWindows() cv2.imshow() 함수 : 이미지를 화면에 표시하.. 공감수 0 댓글수 0 2023. 9. 4.
[알고리즘] 개념 정리하기 다이나믹 프로그래밍 연산 속도와 메모리 공간을 최대한으로 활용할 수 있는 효율적인 알고리즘을 작성하는데 해결할 수 있는 대표적인 방법. 큰 문제를 작은 문제로 나누어 푸는 문제를 일컫는 말 / 한 번 계산한 문제는 다시 계산하지 않도록 하는 알고리즘 DP는 다음의 조건을 만족할 때 사용할 수 있음 최적 부분 구조 (Optimal Substructure) 큰 문제를 작은 문제로 나눌 수 있고, 작은 문제의 답을 모아 큰 문제를 해결할 수 있는 경우를 의미 중복되는 부분 문제 (Overlapping Subproblem) 동일한 작은 문제를 반복적으로 해결해야 하는 경우 피보나치 수열 피보나치 수열이란 이전 두 항의 합을 현재의 항으로 설정하는 특징을 가진 수열이다. 점화식 풀이 _ 단순 재귀 함수 def f.. 공감수 0 댓글수 0 2023. 9. 2.
[JS] 엄격 모드(Strict Mode) Strict mode란? 우리는 개발할때 오타나 문법적 실수를 하곤한다. 이 오류를 줄이고 안정적인 코드를 생산하기 위해서는 조금 더 근본적인 접근이 필요하다. 즉, 잠재적 오류를 발생시키기 어려운 개발환경을 만들고 그 환경에서 개발하는것이 조금 더 근본적인 해결책이 아닐까. 예를 들어 아래와 같은 코드가 있다고 하자. 결과값은 어떻게 될까? function foo() { x = 10; } foo(); console.log(x); // ? 함수 내부에서 변수에 값이 할당되었기 때문에 console.log에는 에러가 발생할거라고 예상했을 수도있지만, 할당 된 값 10이 찍혔다. 그 이유는 자바스크립트의 암묵적 전역때문이다. 암묵적 전역 위 코드와 함께 설명하자면, 코드를 동작시켰을때 자바스크립트 엔진은 값.. 공감수 0 댓글수 2 2023. 8. 30.
[정보 보안] 체육을 잘하면 악성코드를 잘 분석할 수 있다?! (feat. PE) 아마 제목이 무슨 말인가 싶어서 들어와본 사람들이 많지 않을까 싶습니다. 악성 코드를 분석하기 위해 여러가지 방법을 활용할 수 있는데, 그중 하나가 이 PE라는 녀석입니다. Physical Education? 아니, Portable Excutable이라고 하죠. PE란? 영어 약자를 풀면 PE(Portable Executable) 즉, 말 그대로 옮겨다니면서 실행시킬 수 있는 파일을 뜻합니다. MS에서 다른 운영체제와 이식성을 좋게 하기위해 만든 파일 포맷입니다. 종류 실행, 드라이버, 라이브러리, 오브젝트 총 4개의 계열이 있습니다 실행계열: EXE, SCR 드라이버계열: SYS,VXD 라이브러리 계열: DLL, OCX, CPL, DRV 오브젝트 계열: OBJ PE구조는 파일이 실행되기 위한 모든 정보.. 공감수 0 댓글수 0 2023. 8. 27.
[AI] Anaconda 설치 및 가상환경 세팅하기 Anaconda 3란?Anaconda는 머신러닝이나 데이터 분석 등에 사용되는 여러가지 패키지가 기본적으로 포함된 파이썬 배포판입니다. 파이썬 가상환경 구축에 용이하게 사용되고, 내부적으로 conda라는 환경과 패키지 관리자가 존재합니다. 이 conda를 통해 패키지를 설치하거나 가상환경을 관리할 수 있습니다.Anaconda 가상환경이란?가상환경은 "프로젝트를 위한 격리된 환경을 만드는 것"입니다. Python을 포함하여 대부분의 프로그래밍 언어들은 패키지(또는 모듈)의 버전을 계속해서 최신화하고 있습니다. 버전마다 일부 기능들은 없어지거나 새로 생깁니다. 지금 저에게 필요한 특정 기능이 최신 버전에는 없을 수도 있기 때문에 최신 버전이 무조건 좋은 것은 아닐 수도 있다는 말입니다. 하지만 하나의 환경에.. 공감수 0 댓글수 0 2023. 8. 21.
[정보보안] ChatGPT를 조심하세요! 기사 요약 요즘 세상을 뜨겁게 달구고 있는 ChatGPT. 대기업은 사내에서 ChatGPT 사용에 대한 여부를 두고 고민에 빠졌다. ChatGPT특성상 데이터가 입력이 되면 외부 서버에 저장이 된다. 그리고 계속 학습을 해나가기 때문에 잘못했다가 사내의 기밀 정보에 대한 이야기가 흘러 들어갈 수 있다. 예를 들면 ChatGPT에게 기업의 기밀정보를 주고 더 좋은 방안에 대해 이야기 할때 누군가가 그 기업에 기밀정보에 대해 묻는다면 ChatGPT는 스스럼 없이 답을 해주게 된다. LG전자는 ChatGPT 사용에 대해 딱히 제안을 두지 않았다고 하지만 SK하이닉스, 삼성전자는 사용을 금지했다. 더불어 얘기하자면 삼성전자에서는 ChatGPT를 사용한 직원을 해고하기도 했다. 느낀점 ChatGPT 등장 이후 사.. 공감수 1 댓글수 0 2023. 8. 17.
[정보보안] 내가 접속한 사이트를 의심해봐야 하는 이유 기사 요약 2달 전 북한에서 네이버 포털 사이트를 실시간으로 복제한 피싱사이트를 만들어 해킹을 시도한 정황이 포착되었다. 북한은 정말 교묘하게 네이버 주소 뒤에 potal을 붙여서 naverpotal.com으로 지정해두었다. 접속해볼까도 싶었지만 해킹당할까 무서워 접속해보진 않았다.(나는 쫄보...)뉴스에 따르면 뉴스, 배너, 검색 탭 부분 모두 다 똑같이 코딩되어있다고 한다. 저렇게 똑같은데 해킹 당할 위험이 뭐가 있겠냐 싶겠지만, 핵심적인 문제는 로그인에 있다. 북한에서는 로그인하면서 넘어오는 사용자 정보를 탈취할 계획이었던 것이다. 놀랍게도 저 사이트에서 로그인도 된다고 한다. 국가정보원(이하 국정원)에서는 개인정보 탈취 가능성을 높이기 위해 해킹 공격 수법을 진화시킨 것이라고 한다. 또 현재 국정.. 공감수 0 댓글수 0 2023. 8. 17.
모든 프로젝트 관리의 기본, GIT & GitHub 파헤치기 개요필자의 동생은 곧 고등학교 입학을 앞두고 있는데, 나와 같은 고등학교에 입학할 예정이다. 학교에서 개발을 배우게 될 예정이긴 하지만, 이제 막 개발을 시작하는 단계이기 때문에 어떠한 베이스 지식도 없다. 그래서 동생에게 가장 공통적으로 많이 쓰이면서도 기본적인 GIT 사용법과 용어들에 대해 알려주기로 했고, 동생 뿐만 아니라 이제 개발을 시작한 분들에게도 조금이나마 도움이 되고자 이 글을 작성하게 되었다. GIT이란?컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 스냅샷 스트림 기반의 분산 버전 관리 시스템이다. - 위키백과 여기서 스냅샷 스트립 기반이라는 말을 제외하고 의미를 정리해보면, GIT은 변경사항 즉, 버전을 관리해주는 시스템을 말한다. GIT.. 공감수 0 댓글수 0 2023. 7. 30.
테스트 코드 작성에 대한 고찰 개요요즘 프로젝트를 하면서, 주변사람들에게 이런 말을 듣고는 했다. "그런데, 테스트 코드는 작성 안 하세요?" 혹은 "TDD는 해?" 와 같은 말들. 나는 그동안 프로젝트를 완성하는 것에 초점을 맞추다 보니, 테스트 코드를 크게 염두에 두진 않았다. 그래서 지금 부터라도 소프트웨어 테스트에 대해 알아보고 추후에 프로젝트를 진행할 때 작성해보려고 한다. 소프트웨어 테스트란?소프트웨어 테스트(software testing)는 주요 이해관계자들에게 시험 대상 제품 또는 서비스의 품질에 관한 정보를 제공하는 조사 과정이다. - 위키백과 즉, 소프트웨어가 의도한대로 동작한대로 동작하는지 테스트하는 행위를 일컫는다. 소프트웨어 테스트의 장점옛날에는 사람들이 직접 테스트를 하고 또 테스트를 하는 팀이 별도로 있었지.. 공감수 0 댓글수 0 2023. 7. 23.
[Next.js] react-qr-reader를 활용해 입소 인증 기능 구현하기 개요지난 포스팅에서 QR코드를 생성하고, 이를 이미지화 하는 작업까지 마쳤다. 그래서 오늘은 이를 활용해 입소 인증기능을 구현해볼 예정이다. 필자는 현재 프로젝트에서 Next.js와 Typescript를 활용해서 진행하고 있다.기능사항 쪼개기우선 내가 구현하고자 하는 기능을 세부사항으로 쪼갰다. 그랬더니, 아래와 같이 4가지 사항들로 정리할 수 있었다. react-qr-reader라이브러리 설치하기qr을 스캔하는 컴포넌트 생성하고, 설정해주기카메라를 통해 QR코드 인식하기결과를 확인하고 통과시키기그럼 이제 시작해보도록하자.react-qr-reader 설치하기npm i react-qr-readeryarn add react-qr-reader npm 혹은 yarn을 활용해 react-qr-reader 라이브러.. 공감수 0 댓글수 0 2023. 7. 16.
[Python] Base64로 문자열 인코딩해서 QR코드 만들기 필요성 바로 어제 Node.js로 node-cron을 활용해 주기적으로 문자열을 생성해주었다.(관련 글은 여기 있다.) 그 문자열을 Base64로 인코딩하여 QR이미지를 만들어 친구들이 조작 없이 실시간으로 인증할 수 있도록 만들어야 한다. 도입하기 Python3와 pip 설치는 사전에 준비되어있다는 가정하에 진행된다 폴더 및 파일 생성 우선 폴더 하나를 만들고, 안에 main.py를 생성한다 코드 작성 필요한 모듈을 import한다 # api 요청 import requests # base64 인코딩 import base64 # qr 이미지 생성 import qrcode # 대기 시간 설정 import time 서버가 켜져있는 동안 3초를 주기로 QR이미지를 생성해준다 # 참일 동안 while True:.. 공감수 0 댓글수 0 2023. 6. 30.
[Node.js] node-cron을 사용해서 일정 시간 마다 특정 작업해주기 필요성 현재 구현하고 있는 기숙사 입소 시스템은 입소 인증 방법에 대한 고민이 많았다. 우리 학교에서 입소를 인증한다는 것은, 다른 대학교에서 출석 인증을 하는 것과 다름 없기 때문에 그만큼 상당히 중요하다. 우회나 조작이 불가능해야 하고, 인증 요청자가 자기 자신이라는 것을 증명해야 한다. 그렇다 보니 인증은 보안에 매우 매우 중요하다. 그래서 여러 방법을 시도해보면서 어떤 방법을 쓰는 것이 적합할지에 대해 생각해보던 중 선생님을 통해 cron에 대해 알게되었다. 어떻게 쓸것인가 요즘 대학생들이 출석하는 모습을 본적 있는데, 이렇게 QR코드를 찍어서 앱에서 인증하도록 한다. 교수님께서 QR을 띄우면 학생들이 출석인증을 하는 방식인데, 우리가 그대로 적용하기엔 몇 가지 문제점이 있다. 우리는 사람마다 오.. 공감수 0 댓글수 0 2023. 6. 29.
[알고리즘] 알고리즘 개념 정리 그리디현재 상황에서 지금 당장 좋은 것만 고르는 방법,순간 가장 좋아보이는 것을 선택하며, 현재 선택이 나중에 미칠 영향에 대해서는 고려하지 않는다. 구현머릿속에 있는 알고리즘을 소스코드로 구현하는 과정.모든 경우의 수를 주저 없이 다 계산 하거나, 문제에서 제시한 알고리즘을 한 단계씩 차례대로 직접 수행하는 등의 유형있다. DFS깊이 우선 탐색으로 그래프에서 깊은 부분을 우선적으로 탐색하는 알고리즘. 스택을 사용한다.const graph = { A: ["B", "C"], B: ["A", "D"], C: ["A", "E"], D: ["B", "F"], E: ["C","G"], F: ["D","H","I"], G: ["E","J","K"], H: ["F","L.. 공감수 0 댓글수 0 2023. 6. 16.
[정보보안] bof Buffer Overflow 데이터를 버퍼에 저장할 때 개발자가 의도한 크기를 넘어서 값을 넣는 방식이다. 그럼 버퍼 데이터가 초과하고, 초과된 데이터는 인접 메모리에 영향을 미친다. 이때 제어 관련 구문도 포함될 수 있다. 프로그램의 실행 흐름을 바꿔 특정 코드가 실행되게 한다. 해결 방안 입력 값의 타입 확인 입력 값의 길이 확인 용어 정리 Stack Frame 모든 함수가 호출될 때 할당되는 자신만의 스택 공간이다. SFP: Stack Frame Pointer 이전 함수의 Stack Frame Pointer를 저장하는 영역이다. Stack Pointer의 기준점이 된다. SP: Stack Pointer SFP를 기준점으로 해서, 상대 주소 offset 을 저장해 메모리에 접근한다. RET: Retu.. 공감수 0 댓글수 0 2023. 6. 15.
[정보보안]시스템해킹 시스템 해킹 관리자 권한을 손 안에 넣는것이 목적이다. root 권한을 얻게 되면 서버를 쥐락펴락 할 수 있기 때문에, 시스템 해킹은 root 권한을 어떻게든 가져보겠다고 시도하는 것을 말한다. (궁극적인 목적임) 리모트 해킹 Remote Hacking 해킹하고자 하는 서버에 아이디를 가지고 있지 않을 대, 아이디를 얻고자 시도하는 것을 말한다. 로컬 해킹 Local Hacking 해킹하고자 하는 서버에 일반 계정을 가지고 있을 때, root 권한을 얻기 위해 시도하는 것을 말한다. 리모트 해킹을 성공해서 한 아이디를 손에 넣더라도, 별로 할 수 있는 것이 없기 때문에 바로 로컬 해킹을 하게 된다. 로컬 해킹의 원리 SetUID이다.일시적으로 자신의 ID를 변경하는 것 해킹 실습 로컬 해킹의 프로세스는 .. 공감수 0 댓글수 0 2023. 6. 15.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.