이 글은 ‘우아한 테크코스 6기’ 과정의 Level3 글쓰기 과제로 작성한 글입니다.서문레벨 2 글쓰기에서 저는 낭만에 대한 주제로 ‘마음가짐을 드러내기’에 대해서 이야기하였습니다. 이전 글을 읽으시면서 낭만에 대해 조금 사유하는 시간을 가졌으면 좋겠다는 바램입니다. 자신만의 낭만을 조금이라도 찾으셨을까요? 아니면 아직 낭만이라는 것이 현실과 동떨어진 허울로만 느껴지시나요?어떻게 생각하시던 좋습니다. 조금이나마 사유하셨다는 것만으로 저에게 큰 의미가 있습니다.이번 글에서는, 낭만을 통해 어떻게 더 유연한 사람이 될 수 있는지, 성숙한 사람이 될 수 있는지에 대해서 이야기하려 합니다. 어찌 보면 낭만과 동떨어질 수 있는 이야기로 느껴질 수도 있겠습니다.성숙우리는 모두 각자만의 방법으로 성숙해지기 위해 노력..
[FE] 디자인 시스템에 아토믹 디자인 패턴 도입하기크루루 서비스는 리액트 웹 어플리케이션으로 Emotion-Styled를 사용하는 구조를 사용하고 있습니다.서비스 개발 초기 단계에서 우리는 컴포넌트 분리에 대한 명확한 기준을 가지지 않았습니다.이는 서비스 도메인에 따라 컴포넌트 구조가 변경될 사항이 많을 것이라 예상했기 때문입니다. 이러한 이유로 우리는 유연하게 변화에 대응할 수 있는 컴포넌트를 만들고자 했습니다.하지만 서비스가 확장됨에 따라 공통 컴포넌트의 수가 늘어나고, 복잡한 컴포넌트들이 생기기 시작했습니다. 이로 인해 코드의 관리가 어려워졌고, 각 컴포넌트 간의 역할과 책임이 모호해지는 문제가 발생했습니다.우리는 다음과 같은 컴포넌트 구조를 가지고 있었습니다.📦components ┣ 📂app..
Minify주석 공백, 줄바꿈 등을 삭제하여 소스코드의 사이즈를 줄이는 것을 말합니다.가독성에는 문제가 생기지만, 단순히 불필요한 코드를 제거하는 것이므로 코드 구조는 변하지 않습니다.// Before minificationfunction add(a, b) { return a + b;}// After minificationfunction add(a,b){return a+b;}Uglify코드의 크기를 줄이는 것뿐만 아니라, 변수명 축약과 같은 난독화 과정을 포함합니다.코드를 읽기 어렵게 만들어서 보안성을 강화하는 동시에 파일 크기를 더 줄이기 위한 목적으로 사용됩니다.// Before uglificationfunction addNumbers(a, b) { return a + b;}// After..
기본적인 skeleton을 구현한다면, 이미지를 불러오는 동안 (로딩 되는 동안) 스켈레톤 UI가 잘 작동 하지만, 이미지를 불러오고 나서, 렌더되는 사이에 오른쪽에서 왼쪽으로 버벅거리며 렌더되는 현상이 있습니다.Image의 src를 Control할 수 있게 state로 변경하여, 이를 개선해보고자 합니다.import { useEffect, useState } from 'react';import styles from "./index.module.css";function ImageComponent(props) { const [imageBlob, setImageBlob] = useState(null); const [isLoading, setIsLoading] = useState(false); useEf..
HTTP 통신 중 사용자의 중요 정보를 담고 있는 쿠키를 보호하기 위한 방법으로, 여러 쿠키 플래그가 있습니다. 그 중에서도 HttpOnly, Secure, 그리고 SameSite 플래그에 대해 자세히 알아보고자 합니다.1. HttpOnly 플래그의 역할HttpOnly 플래그는 웹 어플리케이션에서 쿠키를 더 안전하게 관리할 수 있게 도와주는 설정입니다. 이 플래그가 설정된 쿠키는 클라이언트 사이드 스크립트, 즉 자바스크립트를 통한 접근이 차단됩니다.사용자가 웹 페이지에 접속할 때 서버에서 HttpOnly 플래그를 포함한 쿠키를 전송하면, 해당 쿠키는 브라우저에 저장되지만 document.cookie를 통한 직접적인 접근은 불가능해집니다.이러한 특성 덕분에, HttpOnly 쿠키는 Cross-Site Sc..