📖 (160) 썸네일형 리스트형 [Tailwind CSS] Tailwind CSS의 지시어, @tailwind @layer @apply에 대해 이해해보자 ✏️ 이 글은 사이드프로젝트 "스무디"를 개발하며 배운 점을 정리하여 기록한 글입니다. 개인 프로젝트에서 Tailwind CSS를 처음 사용해보았고, 신세계를 맛보았다.누군가는 선호하지 않는다했던 Tailwind. 나 또한 클래스명의 나열으로 지저분해지는 코드가 싫어 사용해보기도 전에 불호를 택했었다.하지만 생각을 바꾸어 사용해보니 생각보다 편리하고 빠른(물론 시간이 필요했다..) CSS 작성에 이것이 신세계구나 싶었다. 학습의 시간은 필요하지만, 배워두면 잘 사용할 Tailwind CSS.이번 글에서는 Tailwind CSS에서 사용되는 지시어, @tailwind @layer @apply에 대해 정리해보려 한다. https://tailwindcss.com/docs/functions-and-dire.. 비공개 임시글 보호되어 있는 글입니다. [원티드 프리온보딩 FE 챌린지 3월] React 실전 가이드: 면접 및 실무 기술 [원티드 프리온보딩 FE 챌린지 3월] React 실전 가이드: 면접 및 실무 기술 🗓️ 2024.03.04 ~ 2024.03.17 원티드에서 진행하는 프리온보딩 FE 챌린지 수강 후 정리한 글입니다. 👩🏻💻 [STUDY NOTE] ⭐️ 코스 둘러보기 - 4번의 코스에서 다루어 볼 이야기 • 1차 • web의 역사 (browser 렌더링, AJAX, DOM, Virtual DOM) • react 기본 기념 (render(), jsx, hooks) • 이력서 관련 팁 • 2차 redux-toolkit 상태관리 • 3차 현업 프로젝트에 적용하는 패턴 (project structure, error handling) • 4차 coding convention, 이력서 feedback 📚 노션에 정리한 스터디 노.. [원티드 프리온보딩 FE 챌린지 2월] 상황에 맞는 프론트엔드 개발 전략 이해하기 [원티드 프리온보딩 FE 챌린지 2월] 상황에 맞는 프론트엔드 개발 전략 이해하기 🗓️ 2024.02.05 ~ 2024.02.18 원티드에서 진행하는 프리온보딩 FE 챌린지 수강 후 정리한 글입니다. 👩🏻💻 [STUDY NOTE] ⭐️ 코스 둘러보기 - 4번의 코스에서 다루어 볼 이야기 • SPA의 원리를 배우고, 사용자 경험을 향상시키는 방법을 탐구합니다. • SSR과 CSR의 차이를 이해하고, 각각의 장단점을 비교합니다. • 웹으로도 앱처럼 사용가능한 PWA를 알아봅시다. • 브라우저가 아닌 데스크톱 환경에서 사용되는 애플리케이션을 구현하는 방법을 알아봅시다. 📚 노션에 정리한 스터디 노트 이번 스터디 노트는 비공개합니다. 🫢 제 방식으로 좀 더 정리된다면 공개하겠습니다! ► 챌린지 전, 🔥 목표 .. [원티드 프리온보딩 FE 챌린지 1월] 포트폴리오 작성을 위한 리액트 프로젝트 고도화 [원티드 프리온보딩 FE 챌린지 1월] 포트폴리오 작성을 위한 리액트 프로젝트 고도화 🗓️ 2024.01.02 ~ 2024.01.15 원티드에서 진행하는 프리온보딩 FE 챌린지 수강 후 정리한 글입니다. 👩🏻💻 [STUDY NOTE] ⭐️ 코스 둘러보기 - 4번의 코스에서 다루어 볼 이야기 • 전역변수를 설정하는 기준과 방법 • 테스트코드를 활용한 효율적인 리팩토링 • 백엔드 코드를 수정할 수 없을때 프론트엔드가 할 수 있는 최적화방법 • 실전 리팩토링 📚 노션에 정리한 스터디 노트 1️⃣ 전역변수를 설정하는 기준과 방법 2️⃣ 테스트코드를 활용한 효율적인 리팩토링 3️⃣ 백엔드 코드를 수정할 수 없을때 프론트엔드가 할 수 있는 최적화방법 4️⃣ 실전 리팩토링 ► 챌린지 전, 🔥 목표 및 다짐 현재 취.. [Mini Project] 프론트엔드 과제테스트로 만난 Note-App 구현 과정 정리 (3) [Mini Project] Note-App 👩🏻💻 Github Repository https://github.com/sw2377/note-app 작업 기간 : 2024. 01. 09 ~ 2024. 01. 16 프론트엔드 채용 과제로 수행한 Note-App 구현 과정 (구현 중 에러사항 & 고민한 부분)을 정리한 글입니다. 🔗 시리즈 이어보기 Note-App 구현 과정 정리 (1) Note-App 구현 과정 정리 (2) 현재글 : Note-App 구현 과정 정리 (3) 📖 목차 1. 외부 타입정의 파일 만들기 2. 노트 삭제시 비동기 코드 작성하기 (async / await) 3. 반복되던 handleCreateNote 커스텀 훅으로 만들기 4. TypeScript의 Date 타입 5. vercel 배포.. [Mini Project] 프론트엔드 과제테스트로 만난 Note-App 구현 과정 정리 (2) [Mini Project] Note-App 👩🏻💻 Github Repository https://github.com/sw2377/note-app 작업 기간 : 2024. 01. 09 ~ 2024. 01. 16 프론트엔드 채용 과제로 수행한 Note-App 구현 과정 (구현 중 에러사항 & 고민한 부분)을 정리한 글입니다. 🔗 시리즈 이어보기 Note-App 구현 과정 정리 (1) 현재글 : Note-App 구현 과정 정리 (2) Note-App 구현 과정 정리 (3) 📖 목차 1. lexical text editor 사용하기 2. 헷갈렸던 부분 1, props type 정의 방법 3. 헷갈렸던 부분 2, JSX를 반환하지 않는 React component의 return null 4. 생각보다 어려웠던 .. [Mini Project] 프론트엔드 과제테스트로 만난 Note-App 구현 과정 정리 (1) [Mini Project] Note-App 👩🏻💻 Github Repository https://github.com/sw2377/note-app 작업 기간 : 2024. 01. 09 ~ 2024. 01. 16 프론트엔드 채용 과제로 수행한 Note-App 구현 과정 (구현 중 에러사항 & 고민한 부분)을 정리한 글입니다. 🔗 시리즈 이어보기 현재글 : Note-App 구현 과정 정리 (1) Note-App 구현 과정 정리 (2) Note-App 구현 과정 정리 (3) 📖 목차 1. 기술 스택의 선택 (TypeScript, Styled-components를 사용한 이유) 2. 레이아웃 고민하기 3. Vite로 React + TypeScript 조합으로 프로젝트를 생성 후,main.tsx 파일의 docum.. 이전 1 2 3 4 5 ··· 20 다음
