react25 [TypeScript] TypeScript 타입스크립트 | 기술적 분석 + 사용해본 후 느낀점 TypeScript 타입스크립트 | 기술적 분석 + 사용해본 후 느낀점 [index] 1. 타입스크립트란? 2. 타입스크립트의 등장배경 3. 타입스크립트 장점과 단점 4. 타입스크립트와 자바스크립트 비교해보기 5. 타입스크립트와 자바스크립트 중 하나를 고른다면? 6. 사용해본 후 느낀점 1. 타입스크립트란? https://www.typescriptlang.org/ JavaScript With Syntax For Types. TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before y.. 2023. 12. 6. [CSS] Tailwind CSS 분석 + 실제로 프로젝트에 적용해보며 느낀점 Tailwind CSS 분석 [index] 1. Tailwind CSS란? 2. Tailwind CSS 장점 3. Tailwind CSS 단점 4.실제로 프로젝트에 적용해보며 느낀점 1. Tailwind CSS란? https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. tailwindcss.com Tailwind CSS는 utility-first CSS 프레임워크로서 핵심 개념.. 2023. 11. 21. CSS-in-JS Library | styled-components란? ( + 직접 사용해본 후 느낀점 ) styled-components란? [ index ] 1. styled-components란? 2. styled-components의 장점과 단점 3. 왜 styled-components를 사용해야 할까? 4. styled-components를 직접 사용해보며 느낀 장점과 단점 5. 결론 1. styled-components란? https://styled-components.com/docs styled-components: Documentation Learn how to use styled-components and to style your apps without stress styled-components.com styled-components is the result of wondering how w.. 2023. 11. 16. SPA(Single Page Application)란? SPA(Single Page Application)란? [INDEX] 1. SPA란 무엇인가 2. SPA 장점 3. SPA 단점 + SPA의 단점인 SEO 문제를 보완할 수 있는 여러가지 방법들 1. SPA란 무엇인가 SPA란 'Single Page Application'의 약자로 단일 페이지로 구성된 웹 애플리케이션을 말합니다. 초기 페이지 로드 후 서버가 더 이상 HTML을 보내지 않습니다. 처음부터 HTML을 모두 다운로드하면 됩니다. 서버는 쉘 페이지를 보내고 브라우저는 사용자 인터페이스(UI)를 렌더링합니다. 그런 다음 클릭하면 SPA가 데이터 및 마크업에 대한 요청을 다시 보냅니다. 서버는 필요한 원시 자료를 다시 전송하고 브라우저는 이를 받아 업데이트된 UI를 렌더링하여 전체 페이지를 새로 .. 2023. 10. 10. [ React ] React Select library를 사용해 태그 생성 및 태그 추가 기능 구현 React Select library를 사용해 태그 생성 및 태그 추가 기능 구현 해당 기능을 개발하게 된 배경 인플루언서와 클라이언트를 매칭하는 광고 플랫폼 회사에서 인턴으로 근무할 당시 사내의 TF팀에서 진행하는 admin system 개발 프로젝트에 참여하게 되었습니다. 해당 프로젝트는 인플루언서 데이터를 효율적으로 관리하기 위한 내부용 admin page 개발이 목표였습니다. 기능을 개발하는 중간에 기획이 변경되어 동료가 맡았던 인플루언서 태그 기능의 볼륨이 초반 계획보다 커지게 되었습니다. 그러한 이유로 태그 생성하는 select box와 관련된 기능들을 구현해서 동료에게 전달하는 방식으로 업무가 수정되었습니다. 따라서 태그 생성과 관련된 코드들이 기존에 동료가 작성했던 코드를 수정하거나, 추가.. 2023. 7. 31. [ React ] textarea text 높이 따라 자동으로 높이 조절하기 (with Tailwind css) textarea text 높이 따라 자동으로 높이 조절하기 with Tailwind css 이 글은 비교적 동적 스타일 적용이 번거로운 tailwind css를 사용하는 과정에서 textarea의 높이를 자동으로 조절하는 방법에 대해 다루고 있습니다. tailwind css가 아니라면 이것보다 더 편리한 다른 방법도 있을 것 같습니다만, 우선 해당 조건에서 실행되어야만 하는 상황이기에 최선을 다해 방법을 찾아보았습니다. 이점 참고하시기 바랍니다. onChange 이벤트 리스너를 이용해 scrollHeight를 textarea.style.height에 직접 적용하는 방법 위와 같이 적용 한 후 콘솔로그로 높이를 확인해보면 이렇게 event.target.scrollHeight가 정상적으로 확인됩니다. 그리고.. 2023. 7. 30. 날짜 및 시간 예약 기능 구현하기 / with react-datepicker 1. 날짜 및 시간 선택 기능 구현하기 구현하려는 기능 1. 현재 날짜를 기준으로 6일 뒤까지만 예약이 가능하도록한다. 2. 예약하고자 하는 날짜를 선택하면 해당하는 날짜의 타임테이블을 불러온다. 3. 전체 타임 테이블 중에서 예약이 가능한 시간만 버튼이 활성화 되도록 한다. 4. 시간을 선택하고 예약하기를 누르면 예약 날짜와 시간을 서버로 보낸다. 내가 생각한 로직 1. 현재 날짜를 기준으로 예약 가능한 날짜 활성화 2. 예약 날짜 선택과 동시에 해당하는 날짜의 타임테이블 불러오기 3. 예약 가능한 시간만 버튼 활성화 4. 예약 시간 선택 5. 날짜와 시간이 모두 선택 될 때만 예약하기 버튼 활성화 6. 예약하기 버튼을 누르면 결제 단계로 이동 2. 구현에 필요한 라이브러리 비교하기 필요한 라이브러리 .. 2023. 7. 6. React / 컴포넌트 재사용 / Button component 컴포넌트 재사용 / Button component 구현하려는 기능 프로덕트 내에서 사용될 버튼을 컴포넌트로 반들고 재사용 가능하도록 구현 내가 생각한 로직 1. 버튼 컴포넌트를 만들고 props로 변경될 값을 받는다. 2. className을 다르게 주어 스타일에 변화를 준다. 처음 작성했던 코드 처음 작성했던 코드는 bigButton 과 smallButton이라는 두개의 컴포넌트로 분리해서 만들었다. 그러나 className으로 색상을 변경할 수 있다면 사이즈도 마찬가지로 className으로 관리할 수 있다는 생각이 들었다. 그래서 버튼 컴포넌트를 하나로 합치고 스타일 속성으로 사이즈를 분리해서 만들었다. import react from "react"; import "./Button.scss"; co.. 2023. 5. 18. React / useNavigate를 사용해서 경로 이동을 해야할 때 발생하는 페이지 공백 오류 해결 useNavigate를 사용해서 경로 이동을 해야할 때 발생하는 페이지 공백 오류 해결 페이지 전환 시 보이는 로딩 페이지 구현 구현하려는 기능 useNavigate를 사용해서 경로 이동을 해야할 때 페이지 공백이 발생한다. 결제페이지에서 인보이스 페이지로 넘어가는 과정에서 페이지 공백이 잠깐 발생했다. 이때 notFound 화면이 나오게 되는데 사용자는 결제가 완료되지 않았다고 오해할 수 있는 상황이었다. 그래서 결제페이지에서 인보이스 페이지로 이동하는 사이에 보여질 로딩페이지를 구현하고자 했다. 내가 생각한 로직 1. 로딩 페이지를 만들어서 path경로를 /invoice 로 지정한다. 2. orderId를 전달받아서 새로운 페이지를 불러오기 전에는 /invoice가 기본 경로로 설정되어 loading.. 2023. 5. 17. 이전 1 2 3 다음
