본문 바로가기

전체 글

 (347)
프로그래머스 데브코스 76일차 with. TS 웹 풀스택 📚요약지난 시간에 이어 프로젝트를 진행하겠습니다. 오늘은 도서 상세 페이지를 구현해 보겠습니다. 📖Book Store 프로젝트도서 상세 페이지 화면은 상품의 상세 내용 보여주기, 좋아요 기능, 장바구니 추가 기능을 구현해야 합니다. 📄상세 내용 보여주기상세 내용은 단순하게 서버에서 받아온 정보를 화면에 그려주는 것입니다. 이때 중요한 포인트는 디자인과 같은 화면으로 나타내는 것도 나타내는 것이지만 포맷을 재사용이 가능하도록 분리해 주는 작업입니다.🍯tip! 날짜 포맷 함수를 직접 만들어도 좋지만, 기존에 있는 라이브러리 dayjs를 사용해 보면 좋습니다. 날짜 포맷부터 다양한 유틸리티 함수를 제공합니다.📄좋아요 기능좋아요 기능은 쉽게 생각되는 일반적인 좋아요 기능과 동일한 기능입니다. 해당 기능..
[VSCode 꿀팁] 나만의 Code Snippet 만들기 개발자가 코드를 작성하는 것을 돕기 위해 나온 많은 IDE 중 VSCode에서 제공하는 기능을 알려드리고자 합니다. Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.code.visualstudio.com VSCode를 모르고 개발하신다면 이 기회에 알아가시면 좋을 것 같습니다. 이번 시간에는..
프로그래머스 데브코스 75일차 with. TS 웹 풀스택 📚요약지난 시간에 이어 프로젝트를 진행해 보겠습니다. 오늘은 로그인부터 메인 화면의 도서 목록 화면을 구현해 보겠습니다. 📖Book Store 프로젝트📄Zustand이전 프로젝트에서 사용했던 Redux와 같은 전역 상태 관리 도구입니다. Redux와 같은 용도이지만 사용 방법이 다릅니다. 자세한 내용은 공식 홈페이지에서 확인할 수 있습니다. Zustand DocumentationZustand is a small, fast and scalable bearbones state-management solution, it has a comfy api based on hooksdocs.pmnd.rs 📄로그인로그인을 하게 되면 token을 받아 저장하게 되는데 이를 localSotrage와 zustand를 ..
프로그래머스 데브코스 15주차 회고 with. TS 웹 풀스택 회고⏲71일차 (07.15)알고 있던 내용까먹었던 내용새로 배운 내용  - CRA와 Vite의 차이- npm 스크립트에서 eject새로운 시작을 하는 주였는데 리액트 프로젝트를 생성해 주는 툴을 비교해서 보았다. 어떤 차이가 있을지 고민만 했었는데 강사님의 설명으로나마 간단하게 알게 되었다. 개인적으로 더 찾아봐야겠다. 72일차 (07.16)알고 있던 내용까먹었던 내용새로 배운 내용 - Context API를 활용한 전역 데이터 만들- CSS in JS, CSS in CSS- reset css의 여러 방- styled components 기능(테마)오늘은 매번 이름만 듣던 styled components를 써보게 되었는데 하나의 tsx 문서에서 스타일을 적용시킬 수 있고 이를 다른 css 파일 없이 작성..
[CORS 에러] nodejs에서 발생한 cors 에러 해결하기 에러 배경백엔드를 개발해두고 프론트를 개발하던 도중에 CORS 에러가 발생했다. 정확한 원인은 모르지만 과거의 경험을 통해 해당 에러가 존재한다는 사실을 알고 있었고, 백엔드에서 해결할 수 있다고 알고 있었다.에러 그 잡채CORS란 Cross-Origin Resource Sharing의 약자로 HTTP header에 기반한 메커니즘으로 origin(도메인, 스키마 또는 포트)을 조사하고 로딩가능하도록 허락된 것인지 확인한다. 그렇기에 기본적으로 허용되지 않거나 동일한 origin이 아닌 경우 에러가 발생한다. 이는 보안상의 이유로 문제를 삼는 것이다. CORS에 대한 자세한 내용은 MDN에서 확인할 수 있습니다. Cross-Origin Resource Sharing (CORS) - HTTP | MDNCr..
프로그래머스 데브코스 74일차 with. TS 웹 풀스택 📚요약지난 시간에 이어 프로젝트를 진행해 보겠습니다. 오늘은 라우팅을 시작하고, 모델(타입)을 작성하며 서버와 통신까지 진행해 보겠습니다. 📖Book Store 프로젝트📄라우터화면을 이동하기 위해서는 url을 사용합니다. 개발자가 알아보기 쉽게 url과 화면을 일치시키는 작업이 필요합니다. 이를 하기 위해서 React-Router-Dom을 활용합니다.npm install react-router-dom위 명령어를 사용해 설치를 하는데 타입스크립트를 사용하려면 타입이 필요하기 때문에 추가로 @types/react-router-dom 패키지도 설치합니다. createBrowerRouter() 함수를 사용해 path와 element를 묶고 RouterProvider 컴포넌트를 사용해 화면을 그립니다. 자세..
데브코스 스터디(알고리즘, 코테) 22회차 ✍문제 풀기초록색은 성공, 빨간색은 실패, 주황색은 이전에 풀었지만 실패, 회색은 이전에 풀었지만 시간 부족브론즈 2 : 반복문.실버 4 : 반복문.lv2 : 맵 + 반복문.실버 2 : 시간 부족. 로직 구현 실패.lv3 : 시간 부족. 문제를 못 봄.📢리뷰 시간 & 🙄느낀 점이번 시간은 4문제를 다 풀 수 있을 거라고 생각했지만, 마지막 한 문제에서 구현하다가 구현이 잘 안 돼서 시간이 부족했다. 아쉽지만 단순한 문제는 이제 잘 푸는 것 같다.
프로그래머스 데브코스 73일차 with. TS 웹 풀스택 📚요약지난 시간에 이어 프로젝트를 진행하는데 오늘은 컴포넌트를 테스트하는 방법, forwardRef 컴포넌트 생성 및 기타 프로젝트를 진행해 보겠습니다. 📖Book Store 프로젝트📄테스트 코드테스트 코드란 기능과 동작을 테스트하는 데 사용되는 코드입니다. 쉽게 말해 요구사항을 구현한 함수 또는 기능이 예상한 대로 동작을 정상적으로 하는지 확인하기 위한 코드입니다. 자바스크립트를 사용하면 JEST라는 프레임워크를 사용해 테스트를 진행할 수 있습니다. 📑컴포넌트 테스트리액트에서 컴포넌트에 대한 테스트 코드를 작성하기 위해서는 JEST 뿐만 아니라 React Testing Library를 함께 사용하게 됩니다. 확인할 수 있는 테스트 내용렌더 확인props 적용 확인css 적용 확인ref 확인pro..

티스토리툴바