본문으로 건너뛰기

정보처리기사 필기 후기

· 약 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이다.

SEO 관련 포스팅

· 약 11분
brown
FE developer

우리 회사 사이트는 flynt다.

신생사이트는 일단 대중에게 노출되는 것이 무엇보다 중요하다. 이는 마케팅의 영역일 것이다.

이 점에 대해 프론트엔드 개발자로 기여 할 수 있는 부분은 SEO 관련 부분일 것이다.

검색엔진은 SEO가 잘 된 사이트에 더 높은 점수를 부여하고 사용자에게 더 잘 노출될 수 있게 한다.

SEO는 사실 복잡한 개념은 아니라고 생각한다.

  1. 사이트가 HTML 문서라는 점을 이해
  2. 메타태그로 사이트에 대한 설명
  3. Semantic한 태그를 사용
  4. 반응형 페이지 제공(다양한 기기에 대응)
  5. 콘텐츠가 사용자에게 빠르게 도달하게 노력

이정도면 충분하다고 생각한다. 과거에는 백링크의 수가 검색 결과 순위를 결정하는 주요 요인이었지만, 최근에는 실제 트래픽이 더욱 중요해졌다.

프론트에서 할 수 있는 부분을 놓치지 말고 진행하자.