오늘은 Lighthouse에 대해 알아보자!먼저, Lighthouse란 무엇일까?Lighthouse구글에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴. Lighthouse는 성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 사용자는 어떤

오늘은 Hashing, Token에 대해 알아보자!먼저, Hashing이란 무엇일까?가장 많이 쓰이는 암호화 방식중에 하나인 해싱복호화가 가능한 다른 암호화 방식들과 달리, 해싱은 암호화만 가능하다.해싱은 해시 함수(Hash Function)을 사용하여 암호화를 진행하

오늘은 Cookie, Session에 대해 알아보자!먼저, 쿠키란 무엇일까?쿠키클라이언트에 영속성있는 데이터를 저장하는 방법서버가 원한다면 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있다.그러므로 쿠키를 이용하는 것은 단순히 서버에서 클라이언트에 쿠키를 전

오늘은 HTTPS에 대해 알아보자!지금 내가 접속한 사이트가 보안된 웹 사이트인지 가장 쉽게 확인할 수 있는 방법은 무엇일까? 위 이미지처럼 화면의 주소 바 옆에 있는 자물쇠 아이콘을 눌러보면 된다.해당 아이콘을 누르면 아래와 같이 “이 사이트는 보안 연결(HTTPS)

오늘은 웹 접근성에 대해 알아보자!웹 접근성(Web Accessibility)일반적으로 웹 접근성은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 뜻한다.비장애인도 정보 접근에 제한을 받는 불편함을 겪을

오늘은 웹 표준에 대해 알아보자!먼저, 웹이란 무엇일까?여러 가지로 표현될 수 있겠지만, 두 글자로 정의한다면 ‘공간’으로 정의할 수 있다.문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간이 ‘웹’이다.여기서 주의!인터넷과 웹을 혼동하지 말자!

오늘은 React 상태 관리에 대해 알아보자!상태관리가 왜 중요할까?React는 상태 관리를 위한 라이브러리는 아니다. 그러나 상태 관리의 주요 원칙을 배우고 이를 따라간다면, 컴포넌트 간 서로 느슨하게 결합된(loose coupled), 구조적으로 아름다운 코드를 작

오늘은 redux에 대해 알아보자!Redux란 무엇일까?ReduxReact 없이도 사용할 수 있는 상태 관리 라이브러리React에서는 상태를 다루기 위해 컴포넌트 안에서 상태 변경 로직이 복잡하게 얽혀있는 경우가 많았는데 상태 변경 로직을 컴포넌트로부터 분리하면 표현에

오늘은 styled components, storybook, useRef에 대해 알아보자!CSS 코드를 다룰 때 다음과 같은 불편함을 느껴보신 적 있으신가요?class, id 이름을 짓느라 고민한 적이 있다.CSS 파일 안에서 내가 원하는 부분을 찾기 힘들었다.CSS

오늘은 Component Driven Development에 대해 알아보자!Component Driven Development란 무엇일까?예를 하나 들어보자...페이지가 모두 완성되었는데, 다른 페이지에 적용되는 버튼에 대한 추가적인 기획안이 도착했다. 어? 그런데 기

오늘은 Figma Clone 과제를 진행했다!모바일 인스타그램을 피그마를 이용해 클론 해보았다!!참 좋은 툴이긴 하지만 아직 어렵다... 그리고 무엇보다 화면 움직임을 구현 하려면 경우의 수까지 모두 계산을 해야 해서 복잡하다...하지만 익숙해지면 정말 좋은 툴인것 같

오늘은 Figma에 대해 간단하게 알아보자!Figma는 2016년 9월에 출시된 UI 디자인&프로토타이밍 툴로, 출시 이후로 꾸준히 점유율을 높여가다가 지금은 UI/UX 업계에서 가장 인기 있는 툴이다.UX tools에서 2021년에 진행한 UX/UI 툴 통계 자료를

오늘은 UI & UX에 대해 알아보자!먼저 UI에 대해 알아보자!UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다.화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스

오늘은 JSON.stringify에 대해 알아보자!JSON은 JavaScript Object Notation의 줄임말로, 데이터 교환을 위해 만들어진 객체 형태의 포맷이다.네트워크를 통해, 어떤 객체 내용을 다른 프로그램에게 전송한다고 가정해보자... 객체 내용을 일종

오늘은 javascript의 재귀함수에 대해 알아보자!재귀란 무엇일까?사전에서는 재귀(再歸) : 원래의 자리로 되돌아가거나 되돌아옴. 라고 정의되어 있다.위 정의를 참고하여 재귀를 코드로 표현하면 다음과 같이 작성할 수 있을 것이다.예를 하나 들어보자... 이 함수를

오늘은 Refactor Express에 대해 알아보자!MERN stack은 JavaScript 생태계에서 인기 있는 프레임워크인 MongoDB, Express, React, Node.js를 지칭한다.이 중에서 Express는 Node.js 환경에서 웹 서버, 또는 AP

오늘은 web server 기초에 대해 알아보자!혹시 코드를 작성할 때 콘솔창에서 다음과 같은 에러를 본 적 있나?웹 개발을 하다 보면, 이 에러를 적어도 한 번 쯤은 겪게 되고, 그리고 높은 확률로 이 에러 때문에 골머리를 앓는 경험을 하게 될건데, 이 에러는 바로

오늘은 Effect Hook에 대해 알아보자!Effect Hook이란 무엇일까?React 컴포넌트 외부에서 데이터를 처리하고 받아오는 과정이다.함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기 한다.React에서

오늘은 지난번에 작성했던 React 데이터 흐름에 대해 더 알아보자!앞서 정의한 데이터를 기반으로 위치를 정해보면... "전체 트윗 목록" 상태는 어디에 위치하는 것이 좋을까?전체 트윗 목록은, Tweets에서 필요로 하는 데이터이다.만약 새 글을 추가하는 경우 어떻게

오늘은 Rest API에 대해 알아보자! > REST API “Representational State Transfer”의 약자로, 로이 필딩 (Roy Fielding)의 박사학위 논문에서 웹(http)의 장점을 최대한 활용할 수 있는 아키텍처로써 처음 소개되었다 웹