profile
리엑트 프론트엔드 개발자
post-thumbnail

SSL 101 (Secure Socket Layer)

👉 SSL 클라이언트와 서버간의 데이터가 암호화 되지 않는다면 비밀번호와 같은 민감 정보를 통신 중간에 해킹당하기 쉬울 수 밖에 없습니다.브라우저 사용자는 서비스 제공자가 위와 같은 해킹에 취약한지 주소창에 있는 자물쇠 모양으로 쉽게 파악할 수 있습니다. html과

2020년 5월 19일
·
0개의 댓글
post-thumbnail

ssr 삽질기 - styled-component가 잘 렌더링되지 않아요!

찰나의 시간동안 스타일이 전혀 입혀지지 않은 plain text들이 화면에 표시되는 것이 문제였습니다. SSR과 코드스프리팅의 특성상 첫 화면을 렌더링하고 동적임포트 한 chunk된 javascript들이 hydrate 되는데요, hydrate 되기 이전에 첫 렌더링

2020년 5월 17일
·
0개의 댓글

주소창에 velog.io를 입력했을때 무슨 일이 일어날까? -2 ( 렌더링 )

본 포스팅을 보기 전에 이전 포스팅 - 네트워킹 을 보시는 것이 도움이됩니다. 🙂 브라우저는 서버로 부터 요청한 html과 css, javascript 파일을 받아 렌더링을 한 후 사용자에게 픽셀로 내용을 표시해줍니다. 브라우저가 수행하는 일련의 렌더링과정을 rend

2020년 5월 11일
·
0개의 댓글

주소창에 velog.io를 입력했을때 무슨 일이 일어날까? -1 ( 네트워크 )

유알엘 이라고 불리는 이 것은 아이피 주소를 대신해서 사람에게 기억하기 쉬운 문자로 만들어졌습니다. 사람에게 친숙한 이 도메인 이름과 ip 주소를 domain name server에서 데이터베이스로 관리합니다. 이러한 시스템을 Domain Name System이라고 합

2020년 4월 29일
·
0개의 댓글
post-thumbnail

html 101 - 웹 렌더링

콘텐츠라 함은 HTML ,XML과 같은 document와 image, pdf 와 같은 데이터를 포함합니다. 인터넷 익스플로러는 Trident, 파이어폭스는 Gecko(게코) , 크롬, 사파리는 Webkit(웹킷) 이라는 엔진을 사용합니다. 렌더링 엔진이 하는 일을 크

2020년 4월 19일
·
1개의 댓글
post-thumbnail

html 101 - DOCTYPE 과 Semantic

스마트 폰을 사용해 보지 않는 사람은 있어도 html을 접해보지 못한 사람은 없을 것 같습니다. html은 프로그래밍 언어인가? 에 대한 유머 글은 웹 프로그래머라면 한번 쯤은 봤을 법한 아티클입니다. 사진출처오늘은 저한테는 너무나도 친숙하지만 공부하다보니 놓치고 있

2020년 4월 17일
·
0개의 댓글
post-thumbnail

javascript runtime 101

이번 글은 javascript를 사용해봤다면 한번쯤은 들어봤을 event loop, 그리고 CS 수업시간에 흔히 들어봤던 stack이 어떻게 javascript 런타임 구성요소와 연관이 있는지 주니어 개발자의 시선에서 알아보려고 합니다. 혹시 제가 잘못 이해한 부분이

2020년 4월 14일
·
0개의 댓글
post-thumbnail

SSR- CSR 101

CSR / SSR 참고 이미지 우리가 사용하는 크롬과 같은 브라우저를 UI, 그리고 React를 웹팩과 같은 번들러로 빌드하고 이를 뿌려주는 node.js 와 같은 JS Runtime , 마지막으로 없어서는 안될 서버가 위의 도식과 같이 있습니다. 클라이언트 사이드 렌

2020년 4월 13일
·
2개의 댓글
post-thumbnail

class 형식으로 Mobx 사용해보기

👉 Mobx? 리엑트에서 state 관리를 위한 전략은 여러가지입니다. 가장 널리 알려진 redux, useState hooks를 이용한 각 컴포넌트 레벨에서의 관리, contextAPI 를 이용한 컴포넌트들 간의 state 관리, 그리고 mobx를 이용한 관리 등

2020년 4월 9일
·
1개의 댓글
post-thumbnail

next.js 프로젝트 초기설정하기

본 글에서는 다음을 다룹니다. next.js 는 SSR 을 사용할 수 있게 해주는 모듈입니다. React.js에 SSR을 이용해 SEO(Search Engine Optimization)을 적용할 수 있게 해주며 SEO가 적용된 프로덕트는 구글과 같은 사용자가 많이 사용

2020년 4월 7일
·
0개의 댓글
post-thumbnail

한 컴퓨터에서 여러 개의 깃허브 계정 사용하기

😀안녕하세요😀 프론트엔드 개발자 영일윤입니다. 코딩할때 파일을 어디다가 저장하시나요? 로컬환경에 폴더하나를 만들어 저장할 수도 있지만 공동의 작업을 위해서 작성한 코드를 합치거나 데스크탑에서 작성하던 코드를 원격으로 노트북을 이용해 작업을 이어가고 싶을 때 (너 일

2020년 2월 28일
·
0개의 댓글