개발 이야기6 Emotion css Prop 오류 문제 파악 개발 환경 NextJS: 14.1.0 React: 18.2.0 Emotion: 11.11.3 Typescript: 5.3.3 pnpm 문제 현상 emotion의 css Prop이 인식되지 않는 오류 발생 문제 원인 Typescript에서 @emotion/react/css-prop을 인식하지 못함 해당 prop이 존재하지 않는다고 판단하여 오류를 발생 해결 방안 타입스크립트 설정 파일(tsconfig.json)의 컴파일러 옵션('compilerOptions')에 css-prop 타입 추가 { "compilerOptions": { "types": ["@emotion/react/types/css-prop"] } } 결과 String Styles 적용 Object Styles 적용 2024. 3. 22. 로그인 기능 구현하기 해당 글은 학습한 내용을 정리하기 위해 작성한 것으로 오류나 내용상 부족한 점이 있을 수 있습니다. 사이드 프로젝트를 진행하면서 항상 필요했던 기능 중 하나가 바로 로그인 기능이었습니다. 기본적인 로그인과 깃허브, 구글 등을 통한 Oauth 기능을 적용해보았지만 클라이언트를 통해 백엔드로 넘어간 데이터가 어떻게 관리되고 구현되는지 알아보고자 학습하게 되었습니다. 기본적인 로그인 처리 방식 로그인 처리 과정은 크게 인증(Authentication)과 인가(Authorization) 두 단계로 구분됩니다. 인증은 사용자가 입력한 로그인 정보와 DB에 저장된 사용자 정보가 일치하는지 여부를 확인하는 과정이고, 인가는 사용자가 요청한 요청에 대해 권한을 가지고 있는지 여부를 확인하는 과정을 말합니다. 인증(Au.. 2024. 2. 19. 디자이너와 협업이 어려운 개발자를 위한 - 디자이너 설명서 📅 일시: 2023. 11. 23 📍 장소: 한빛미디어 👤 발표자: 권아영 / 커먼컴퓨터 UX Lead 🔗 링크: https://festa.io/events/4310 디자이너의 역할은 무엇인가? 디자인이란 목적에 맞는 가장 적절한 형태를 정의하는 것입니다. 제품에 포함된 요소들이 어떻게 관계를 맺고 정의하는가입니다. 따라서 디자이너는 형태와 색상에 대한 이해도를 바탕으로 디자인하게 됩니다. 디자이너의 근본 스킬 맛보기 케슈탈트(Gestalt) 이론 인간은 정보를 시각적으로 인지하기 위해 무의식적으로 요소들을 분류하고 연관성을 찾는다는 이론입니다. 구상화(Reification)는 우리의 감각이 실제로 인지하지 않아도 정보를 인지할 수 있다는 것입니다. 왼쪽의 그림을 보면 실제로 삼각형이 존재하지 않지만 우.. 2024. 2. 2. 2024 원티드 프리온보딩 | FE 챌린지 상황에 맞는 프론트엔드 개발 전략 이해하기 사전과제 1. SSR과 CSR의 주요 차이점은 무엇인가? 어디서 렌더링 작업을 수행하는가에 따라 SSR(서버 사이드 렌더링)과 CSR(클라이언트 사이드 렌더링)으로 구분할 수 있습니다. 먼저 SSR(Server Side Rendering)은 서버에서 페이지를 렌더링하고 클라이언트로 내려주는 방식입니다. 사용자가 웹 페이지에 접속하면 브라우저는 서버에 리소스를 요청합니다. 서버는 브라우저의 요청에 따라 초기 페이지를 렌더링하여 제공합니다. 사용자는 페이지를 볼 수 있지만 조작할 수 없는 상태(정적인 페이지)가 됩니다. 브라우저가 자바스크립트를 다운로드하여 컴파일이 완료되면 사용자가 웹 페이지를 조작할 수 있습니다. SSR은 FCP(First Contentful Paint), 즉 사용자가 웹 페이지를 로딩하고 나서 .. 2024. 1. 30. 이전 1 2 다음
