25G.story

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

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

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

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

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

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

검색엔진 기초대부분의 검색엔진을 위해 필요한 기능의 기초는 다음 네개면 해결할 수 있다.색인 생성파일, 웹사이트, 데이터베이스 레코드를 검색가능하게 만든다. 색인이라는 뜻이 와닿지 않으면 모든 책장의 소개 부분에 목차가 있는데 이와 비슷한 것이라고 생각하면 이해가 빠르다.사용자 입력사용자가 무엇을 검색할지 입력하고, 입력 인터페이스를 제공하기도 한다.순위화결과를 사용자가 입력한 것과 가까운 순으로 정렬한다.결과 보여주기사용자가 입력한 내용을 보여준다.색인화색인화는 보통 문서를 분석한뒤 토큰 단위로 나누고 선택적으로 각 토큰을 색인어라고 하는 정규화된 토큰을 만들기 위한 하나이상의 변경 작업으로 구성된다. 색인어를 만들기 위해선 어간 추출, 소문자화, 완전한 제거를 포함하여 토큰 변경을 정하고 (혹은 정..

텍스트 길들이기 사전 준비이는 수학을 배우기전에 마치 사칙연산을 공부하는 것과 같다.토큰 분리어간 추출품사구 와 절컴퓨터가 언어를 이해하게 하려면 원시 문자열을 개별 단어로 나누는 기능, 각 단어가 문자에서 수행하는 역할(품사)과 같은 질문을 이해하고 질문을 분석해서 답이 고유명사라는 것과 단어가 출현한 문장에서 답을 찾아야 함을 알아내야 한다."민수의 삼촌은은 누구인가" 라는 질문을 이해하고 "민수"와 삼촌이 출현한 문장에서 답을 찾아야 함을 알아내야 한다.단어와 범주단어는 소수의 어휘 범주 또는 품사로 나뉜다. 이 범주는 명사, 동사, 형용사, 한정사, 전치사, 접속사 등을 포함한다.형용사명사를 수식하거나 서술하기 위해 명사에 추가되거나 문법적으로 연결돼 속성을 지정하는 어휘나 구부사다른 어휘범주를 ..

개인적으로 생성형 인공지능의 등장으로 텍스트 길들이기의 중요도가 떨어졌다라고 생각이 들지만... 그래도 잘 생각해보면 여전히 인터넷 세상에는 엄청나게 많은 텍스트 데이터들이 있고 생성형 인공지능을 사용하는 데에 어려움을 느끼거나 혹인 생성형 인공지는이란것을 사용하여 정보를 얻는다는 것이 대중들에게 익숙해지기 까지는 시간이 더 필요하며 기술적 해결점도 아직까지는 많은것같다. 그렇기때문에 자연어를 핸들링하고 분류하는 기술은 웹 개발자로써 중요한 덕목이라고 생각한다.애플리케이션에 조회를 할때 사용자들은 검색했을때 결과페이지를 뒤져서 원하는 정보를 얻기보단 알고싶은 것에 대한 답을 곧바로 알고싶어 한다.결국 궁극적으로 사용자는 본인의 삶과 일에 집중하게 도와주는 도구를 원할 뿐이지 기술이 뭔지는 알필요도없고 알..

웹팩(Webpack)은 웹 개발에서 널리 사용되는 정적 모듈 번들러입니다 정적 모듈 번들러? 프로젝트가 작을때는 필요없을 수 있습니다 정적파일에 대한 관리 어려움이 없기때문. 하지만 프로젝트가 점점 고도화되고 커질수록 정적파일에대한 관리가 아주 지옥같아진다 경험해 본 분들은 해당 문제에 대해서 공감과 고민을 안 할 수가 없는 부분인것 같습니다. 정적 모듈 번들러는 정적 모듈들을 번들링해준다. 쉽게말해 webpack은 정적 모듈들을 한번에 관리 할 수 있는 것에 초점이 맞춰진 프로젝트이다. . 웹 애플리케이션을 구성하는 자바스크립트, CSS, 이미지와 같은 다양한 자산(assets)을 모아 하나 또는 여러 개의 번들로 결합하고 최적화하는 도구입니다. 웹팩의 주요 목표는 웹 사이트의 로딩 시간을 줄이기 위해..