본문으로 건너뛰기

검색에 관해서

· 약 6분
brown
FE developer

지난주까지 정말 바쁘게 보냈다.

대략 2년 정도 개발 및 운영된 기존의 코드베이스를 전부 재작성하는 작업을 마무리했고, 친구들과 진행하던 운영체제 공부도 진도를 다 나갔다.

글을 쓸만한 내용은 계속 생기는데 바빴다 보니 또 포스팅을 띄엄띄엄 하게 된다.

시간 날 때 관련된 내용을 포스팅하기로 다짐하면서, 오늘 생긴 주제인 검색에 관한 간단한 포스팅을 작성하겠다.

정보처리기사 실기 후기

· 약 7분
brown
FE developer

오늘 정처기 실기 시험을 치고 왔다.

최근에 바쁘다보니 주제는 많아도 포스팅 할 여유가 없었는데, 간단하게 작성할 수 있는 컨텐츠라서 써본다.

공부할 시간이 정말 부족했고, 올 주관식이라 솔직히 합격할 자신이 없었다.

그래서 뭔가 더 하기 싫었던 건지, 시간을 허비하다 막판에 후회하며 후딱 공부했는데, 시험 치는데 왠걸 생각보다 쉽게 나왔다고 생각했다.

떨어지면 과거의 나를 때리고 싶을 것 같다.

대문은 또승수 stove-league

정보처리기사 필기 후기

· 약 9분
brown
FE developer

본인은 과거에 무역3종(국제무역사 1급, 무역영어 1급, 유통관리사 2급) 자격증을 단기간에 딴 경험이 있다.

그래서 자격증을 따는 것과 해당 영역을 잘 아는건 다르다고 생각한다.

그럼에도 관련 공부를 개인적으로 계속 해왔다보다 자격증을 취득했다가 더 근거 있는 서술같아,

5월 3일에 2회차 필기 빈자리 신청기간에 신청했고 12일에 시험을 치고 왔다.

stove-league

브라우저와 클립보드

· 약 11분
brown
FE developer

특정 버튼이나 텍스트를 클릭 시, 관련 텍스트를 clipboard에 복사해주는 기능을 제공하는 사이트들이 있다.

본인도 첫 회사에 입사 한지 얼마 안된 시점에서 뿜뿜(기능의 이름)이라는 비슷한 기능 구현을 요청 받았었는데

  1. 특정 버튼 클릭
  2. 수익률 관련 모달 팝업
  3. 팝업에 복사 버튼 클릭시 이미지를 클립보드에 복사

이런 동작을 요구 했었다.

관련해서 전반적인 내용을 학습해보자.

메모리에 대해

· 약 30분
brown
FE developer

본인 초딩 시절 카트라이더을 하는데 너무 렉이 심해서, 어떻게 해야하지 알아보다 램을 사서 끼웠던 기억이 있다.

요즘이야 램이 기본적으로 기가 단위지만, 그 당시(2000년대 초중반)는 하드 10 ~ 25기가에 램은 256MB ~ 512MB가 일반적이었다.

그 후에도, 학창시절 당시 신작 게임들(아이온,마영전 같은)이 출시되면 꼭 플레이 했었는데, 렉이 걸리거나 실행이 안되면, 한번 해보겠다고 그래픽카드도 바꿔보고, 드라이버도 업데이트하고, 포맷도 하는 등 다양한 시도를 했었던 기억이 난다.

그때 메모리가 부족해서 게임이 꺼지기도 가상메모리 사이즈를 올리라는 경고도 봤던 기억이 나는데, 글의 주제와 연관성이 있어 적어봤다 ㅎㅎ.

웹 브라우저 렌더링

· 약 26분
brown
FE developer

Intro

지난 게시글에서는 클라이언트에게 전달되는 콘텐츠(HTML, CSS, JS)가 어떤 과정을 거쳐 현재의 모습으로 발전해 왔는지 알아봤다.

그러니 이번 주제는 자연스럽게 서버에서 전달 받은 HTML 문서를 브라우저가 어떻게 그려내는지(rendering)일 것이다.

바로 시작하자.

웹 개발의 발전 과정

· 약 34분
brown
FE developer

Intro

지난 게시글에서 클라이언트의 요청 진행 과정과 서버의 응답이 네트워크를 통해 어떻게 클라이언트로 도달하는지에 대해 알아봤다.

그러면 다음 주제는 자연스럽게 서버에서 전달 받은 HTML 문서를 브라우저가 어떻게 그려내는지(rendering)일 것이다.

하지만 그전에, 클라이언트에게 전달되는 콘텐츠(HTML, CSS, JS)가 어떤 과정을 거쳐 현재의 모습으로 발전해 왔는지 그 역사를 먼저 알아보자.

웹에서 요청과 응답의 전반적인 과정

· 약 20분
brown
FE developer

Intro

월드 와이드 웹(World Wide Web)은 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간이라고 한다.

브라우저는 url로 해당 하는 서버에서 네트워크를 통해 html문서, 필요한 파일들을 받아와 내 화면에서 보여주는 역활을 한다.

그리고 프론트엔드 개발자의 역활은 어떤 기술을 사용하든 결국 서버에서 제공해줄 html,css,js를 작성하는 것이다.

우리가 작성한 파일이 사용자에게 가기까지의 긴 여정을 정리해보자.

블로그 개선 - Algolia Doc Search

· 약 4분
brown
FE developer

Intro

예전에 블로그를 처음 만들고, 기본 프로젝트 상태에서 포스트만 작성했었다.

그러다 한번 리뉴얼 해볼까 하는 마음으로 확인해보니 docusaurus 버전도 2에서 3로 올라 갔더라.

그래도 algolia Doc Search 기능은 붙여 놨었는데, 이번에 전반적으로 리뉴얼 해볼 겸 다시 붙이는 과정을 정리해보려고 한다.

web-ui 정리 및 사용 후기

· 약 10분
brown
FE developer

[web-ui 정리 및 사용 후기]

최근에 sora AI라는 동영상 생성 AI 영상을 보았다. 놀랍고 무섭더라... ChatGPT(GPT-3.5) 처음 쓸때도 놀라웠고, Stable Diffusion때도 놀라웠고 sora도 놀랐다. AI 관련으로 엔디비아 주식도 놀랍다. 놀라움의 연속이다.

대부분 개발자들(연관 사무직)은 AI가 자신을 대체하지 않을까라는 생각을 다들 한번은 해봤을 것 같다.

그만큼 AI의 발전속도는 놀랍다.

피할 수 없으면 즐기라했던가, 늦었다고 생각했을 때가 가장 빠른때라던가, AI 관련 프로덕트를 뭐라도 사용 해봐야 할 것만 같다. 그래도 ChatGPT는 자주 사용하니까 이번에 Stable Diffusion으로 이미지 생성을 해보기로 했다.

Stable Diffusion: 텍스트 및 이미지 프롬프트에서 고유한 실사 이미지를 생성하는 생성형 인공 지능(생성형 AI) 모델 web-ui: 웹 기반 유저 인터페이스

가장 대중적인 방법인 web-ui로 이미지 생성을 해보자!! 본인의 기기는 M1 max이다.