프로젝트

🏷️들어가며 해당 글은 "next": "14.2.6", "@storybook/nextjs": "8.4.1" 버전을 바탕으로 한 프로젝트입니다.  🤗Storybook 이란? Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.공식문서에서 찾아보면 "스토리북은 UI 구성 요소와 페이지를 독립적으로 제작하는 프론트엔드 작업 환경입니다. 수천 개의 팀이 UI 개발, 테스트, 문서화를 위해 Storybook을 사용하고 있으며, 오픈 소스..

📌프로젝트 소개 ✅ 식물을 키우고 싶지만 어떤 식물이 나에게 맞는지 모르는 사람들!!✅ 여러 식물들을 한꺼번에 비교해보고 고르고 싶은 사람들!!을 위해 제작하게 된 웹이다. 🤗 ※ 프론트엔관련 기술이 담겨 있는 회고록입니다. 📌프로젝트 시작! react로 사용한 프로젝트, next.js랑 고민을 많이 했는데 next.js 도 react 기반으로 작동한다는 점을 고려하여, react 에 대한 기본적인 이해를 더 깊게 다지고자 react 를 선택하기로 결정했다.  🧐배운것✅ 의존성 배열(Dependency Array) 과 조건부 할당을 이용한 검색 기능 사용자가 입력한 검색어를 보내고navigate("/search_result", { state: { plants: filteredPlants, s..

📌기존 프로젝트 문제점 찾기 HTML, CSS , Javascript를 통해 제작한 웹, 아모레퍼시픽 미술관에 있는 전시를 토대로 만들었다. 클론 코딩은 아니어도 처음 프론트엔드 과정을 배우고 만든 프로젝트였기에 창의성보다는 학습성에 초점을 두어 기존 웹을 참고하며 만들었다. https://spectacular-shortbread-0fa617.netlify.app/exhibtion.html EXHIBTION spectacular-shortbread-0fa617.netlify.app  시간이 흐르고 다시 봤을 때는 처음 만든 거 너무너무 티를 내는 웹이여서 부끄러워졌다. 말도 안돼는 form디자인 , main페이지는 page not found, 사용자를 전혀 고려하지 않은 브라우저까지 총제적 난국이라 수..

진행중이던 프로젝트를 하면서 로그인 회원가입 UI를 짜고 서버와 연결을 하려고 했는데 계속 해서 뜨는 CORS 정말정말 며칠을 이거 때문에 고생했다..... 🚫CORS란? CORS(Cross-Origin Resource Sharing)는 출처가 다른 자원들을 공유한다는 뜻으로, 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념이다. 직역하면, 교차되는 출처 자원들의 공유이다. 다른 출처에 있는 자원을 요청한다고 하면, 이를 교차 출처 요청이라고 부른다. 여기서 나온 origin 출처는 무엇일까? Origin은 URL에서 프로토콜, 호스트(도메), 포트 번호를 합친 부분을 의미한다. 3가지가 같으면 동일 출처(Origin)라고 한다. ✅ http or https → 프로토콜 ✅ nav..

AJAX란? Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 즉, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 비동기 방식으로 요청하는 것이다. 비동기방식이란? 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며 Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포하고 있다 동기방식의 예로 form 안에 action = "url" type = "ge..