전체 글 414

JS 비동기 프로그래밍 최종 정리

비동기 프로그래밍비동기 프로그래밍 탄생 배경CPU와 I/O 속도의 차이CPU는 매우 빠르게 연산을 수행하지만, 디스크, 네트워크, DB 등 I/O 작업은 상대적으로 느림.동기(Synchronous) 방식으로 실행하면 I/O 대기 시간 동안 CPU가 낭비됨.멀티태스킹과 병렬 처리의 필요성하나의 요청이 완료될 때까지 기다리면 다른 작업을 동시에 처리할 수 없음.여러 작업을 동시에 실행하기 위해 스레드 기반의 멀티태스킹이 등장.하지만 스레드 생성 비용이 높고, 컨텍스트 스위칭이 성능 저하를 초래함.이벤트 기반 & 논블로킹 방식 등장효율적인 리소스 사용을 위해 이벤트 루프(Event Loop)와 콜백 기반의 비동기 처리가 개발됨.대표적으로 Node.js, JavaScript Promise, Java의 Compl..

JavaScript 2025.02.14

내가 체크 해 봐야할 API들의 보안 취약점들

OWASPOWASP 웹 애플리케이션 보안을 목표로 무료 콘텐츠와 도구를 만드는 비영리 재단. 가장 일반적인 API취약점 10가지를 정리하여 발표했다.정보 누출API응답, 코드 저장소, 검색 결과, 소셜 미디어, 대상의 웹사이트, 공개 API 디렉터리 같은 공개된 소스를 통해 누출될 수 있다.불필요하게 자세한 응답메시지"제공된 사용자 ID가 존재하지 않습니다"라는 메시지를 통해 다른 ID를 넣어서 계속 시도를 했는데 만약 "잘못된 비밀번호입니다"라는 메시지가 나왔다면? 아! 이 메시지를 뱉으면 ID는 있는데 비밀번호만 찾으면 되겠네?! 하는 힌트를 주게된다.API응답시 사용자 이름을 반환하여 공격자가 응답을 통해 취한 사용자 이름으로 무차별 비밀번호 대입, 비밀번호 스프레이등으로 로그인시도BOLABOLA(..

보안 2025.02.03

API 침투 프로세스

API 보안테스트 범위를 정하기 위해서는 방법론, 테스트 규모, 대상 기능, 테스트 제한, 보고서 작성 요건, 개선 테스트 진행 여부같은 몇 가지 요인을 결정해야한다.API 침투 순서1. 권한 받기API 공격하기 전 공격범위를 명확히 정하고 정해진 시간동안 클라이언트를 공격해도 된다는 권한 부여 계약서에 서명을 받아야한다. 즉 해커가 아닌 보안태스트를 위한 침투계획에는 명확히 대표혹은 챔임자와 상의하에 권한을 부여받고 어떤일이 벌어질지 어떻게 침투할지에 대한 조율 및 협의가 이루어져야한다.2. API 테스트의 위협 모델링위협 모델링은 API 공급자에 대한 위협을 모델화하는 프로세스입니다. 관련된 위협을 기반으로 API 침투 테스트모델을 만들어 해당 공격에 대응책을 마련할 수 있도록 위협들을 모델링하는것이..

보안 2025.01.20

11/27일 부산 센텀 디지털 워크

AI시대에 개발자로 살아남기인공지능 증강 개발지금 프로그래머들의 위치? 자동차가 발명되기 전 마차를 운전하던 마부의 위치와 같다. 곧 자동차의 시대가 오고있음을 예감한 지금 어떻게 생존해야할까?야생 학습이제 생성형 AI의 발달로 어떠한 기술에 대해 정통화된 커리큘럼에 대한 중요성은 점점 사라지고 있다. 또한, 어떠한 기술이 업로드되고 정석적인 튜터가 나오기전에 이미 새로운 버전이나오거나 상위벨류의 기술이 나오게 되낟. 그렇기 때문에 앞으로는 그때 그때 필요한것 배우고싶은것을 생성형 AI로 빠르게 시작하여 경험을 먼저 쌓아나가는 것이 중요하다.효율적인 야생학습법협력적 활용기술블로그, 스터디 등등 내가 야생학습 한 것에 대한 아웃풋을 만들어라비순차적필요한것을 그때그때 학습하고 빠르게 나아가라 (사전을 처음부..

카테고리 없음 2024.11.27

2024부산 센텀 디지털 테크밋업 "센디톡"참여

부산에는 오프라인 네트워킹기회가 잘 없는데 이런 태크밋업이 열려줘서 부산에 계시는 여러 개발자분들과 소통할 수 있는 장이 열려서 너무 좋다.평범한 개발자가 aws자격증을 12개를 따면 벌어지는 일들(두실청년 김태우 님)https://dev.classmethod.jp/articles/epilogue-in-korean-aws-12x-certified/위 블로그에 발표하신 내용이 잘 정리 돼 있었다. 발표를 들으며 느낀 점은 회사 혹은 혼자서 고민하고 공부하는 것도 물론 좋지만, 다양한 개발 행사들을 참여하고 다양한 개발자들과 소통하면서 지금 내가 어디로 가고 있는지 나는 어떤 점이 부족한지 에 대한 메타인지를 키워가는 점이 커리어에 좋은 영향력이 생긴다는 점이다.그렇게 다양한 사람들이 하는 고민을 들어보며 ..

카테고리 없음 2024.08.17

useContext 쭉쭉 파보기

리엑트의 Context리엑트는 트리구조를 갖고 있다. 그래서 부모가 자식에게 데이터를 물려줄때 props로 데이터를 넘겨주는데 먼 자식일수록 코드가 복잡해 진다. 첫째한테 알려주고 둘째한테 할려주고.. 셋쩨...어쩌구.. 이렇게 멀어질수록 코드가 복잡해 진다. 이걸 props drilling이라고 함이때 Context를 사용하면 props전달 없이도 선언한 하위 컴포넌트 모두에서 원하는 값을 사용할 수 있다. 사용법1. 생성import React, { createContext, useState, useContext } from 'react';const MyContext = createContext();2. 사용const MyProvider = ({ children }) => { const [value,..

React 2024.06.27

useRef 훅 좀 더 깊게 쑥쑥 파보자

useRefuseRef는 useState와 비슷하지만 useRef의 반환값인 객체 내부에 있는 current로 값에 접근 또는 변경할 수 있고, 값이 변하더라도 렌더링을 발생시키지 않는 특징이 있다. 리엑트의 흐름 시스템에서 벗어난 느낌의 훅이다. 즉 컴포넌트가 다시 렌더링 될 때에도 유지되는 변수를 만들 수 있는것.이를 활용해서 DOM요소에 접근하거나 컴포넌트 간의 데이터 공유, 또는 상태를 유지하는 데 유용하다. 그럼 외부 변수 활용하면 되는거 아님? 할 수 있지만. 몇가지 문제가 생긴다.컴포넌트가 실행되어 렌더링되지 않았음에도 값이 존재하게 돼서 메모리 낭비발생.컴포넌트가 여러번 생성되는데 하나의 값을 바라보기 때문에 일반적으로 인스턴스하나당 하나의 값으로 표현하는 것이 일반적이다.DOM요소 접근i..

React 2024.06.27

리엑트 렌더링 원리

프론트 엔드 입장에서 렌더링은 html과 css로 웹페이지에 UI를 그리는 과정을 의미한다. 리엑트에서도 렌더링이라는 과정이 존재한다. 리엑트의 렌더링- 브라우저가 렌더링에 필요한 DOM트리를 만드는 과정을 의미한다. - 리엑트 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에게 던질지 계산하는 일련의 과정을 뜻함 렌더링 발생 타이밍1. 최초 렌더링 : 사용자가 처음 애플리케이션에 진입시2. 리렌더링: 최초렌더링 이후 발생하는 모든 렌더링클래스형 컴포넌트의 setSteate가 실행될떼클래스형 컴포넌트의  forceUpdate가 실행될때함수형 컴포넌트의 useState()의 setter가 실행될..

React 2024.06.19

RDS 기본적인 생성 순서

RDS 클러스터 생성AWS console에 RDS검색후 서비스 입장데이터베이스 선택데이터베이스 생성 데이터베이스 생성시사용할 RDB 선택 (Mysql)인스턴스 옵션 선택평균 트래픽이 적당히 있는 경우가 아니라 운영을 위한 정도라면 트래픽이 많지 않기때문에 인스턴스 유형을 *.micro로 해도 충분VPC 선택고가용성을 위해 서브넷그룹을 필요로 하며 그룹내에 서브넷을 기본 네개를 권장합니다.보안그룹은 2개가 필요합니다.보안그룹 1에서 1에서 생성한 서브넷 그룹을 RDS로 인바운드 설정합니다.보안그룹 2에서는 인바운드된 데이터를 서빙하기위한 통로를 만들어주기위해 1에서생성한 서브넷 그룹을 아웃바운드에 등록합니다.자동 백업 체크인증방식 선택단일 DB 클러스터일때는 암호인증다중 AZ DB클러스터 일때는 IAM와 ..

AWS 2024.06.05

리액트 파이버

리액트 파이버리액트에서 관리하는 평범한 자바스크립트 객체, 파이버는 파이버 재조정자가 관리. 즉 리액트에서 어떤부분을 새롭게 랜더링 하는지 가상 dom과 실재 dom을 비교하는 알고리즘, 리엑트 파이버의 모든 작업은 비동기로 일어난다. 왜냐하면 싱글스레드로 운영되는 js의 단점을 완화하기 위함.렌더링 단계에서 사용자에게 노출되지 않는 모든 비동기 작업 수행하고 우선순위지정, 작업 폐기 등을 실행DOM에 실제 변경사항을 반영하기 위한 작업 진행파이버는 컴포넌트가 최초로 마운트 되는 시점에 생성돼 가급적 재사용된다.new FilberNode() 로 구현체 생성가능리액트 파이버 트리리액트 파이버 트리는 리액트내부에 두개가 존재한다. 하나는 현재 모습을 담은 파이버 트리, 또 하나는 작업 중인 상태를 나타내는 ..

React 2024.06.03