스터디기록일지

해야 할일 개발 Header 검색 기능 구현하기 찜 버튼 만들기 Morebtn 만들기 이미지, 버튼 사이즈 조절하기 map 함수로 데이터 구현 서버에서 데이터 가져오기 figma admin page만들기 자신의 티켓 페이지 만들기 인프 노션만들기 깃허브만들기 초기셋팅 와이어프레임 검색어 검색창에 유지되게 하기 const handleSearch = (event) => { event.preventDefault(); filterResults(searchTerm); // URL 변경 const queryParam = queryString.stringify({ q: searchTerm }); navigate(`/all?${queryParam}`, { replace: true }); }; handleSearch 함..

해야 할일 개발 Header 검색 기능 구현하기 찜 버튼 만들기 Morebtn 만들기 이미지, 버튼 사이즈 조절하기 map 함수로 데이터 구현 서버에서 데이터 가져오기 figma admin page만들기 자신의 티켓 페이지 만들기 인프 노션만들기 깃허브만들기 초기셋팅 와이어프레임 Problem 카테고리 버튼을 누른 후 웹에서 나갔다가 다시 돌아오면 localstorage에 저장된 값 때문에 버튼이 눌린 상태가 유지 된다. 하지만 localstorage를 설정하지 않으면 버튼을 눌렀을 때 해당화면에서 새로고침 될때 버튼 상태가 초기화된다. Solve 그렇다면 웹에서 나갈때 버튼을 초기화(null)값으로 설정해주면 어떨까. 사용자가 웹 사이트를 나갈 때, selectedButton 상태를 null로 업데이트..

내가 지금 만들 페이지는 카테고리 버튼을 누르면 카테고리 버튼에 따른 더미데이터를 불러오는 페이지를 만들어야 한다. 우선 버튼을 누를 때 마다 다른 더미데이터가 나오는 것과 상관없이 페이지 부터 만들어 볼 것이다. 더미데이터는 임시로 내가 만든 것이고 나중에 서버에서 데이터를 가지고 와야 한다. {categoryDummy.map((item) => ( {item.ticket_name} {item.ticket_state} {item.ticket_place} {item.ticket_date} {item.ticket_price}원 {item.ticket_detail} 구 매 하 기 ))} 그리고 위에 날짜순, 가격 낮은 순, 가격 높은 순 이라는 버튼을 클릭하면 각 순서에 맞춰 더미데이터가 배열 되게 해야 한다..

styled-components 더 유용하게 이용하기 Styled-component의 props전달 const All = styled.div` position: relative; width: 1000px; height: 90px; /* height: ${(props)=>props.height}; */ margin: 0px auto; ` styled-component.attrs 이미지에 같은 alt를 반복적으로 추가해야 할 때가 있다. 그럴 때 사용하면 좋다. const Logo = styled.img.attrs({alt : "로고"})` width: 124.85px; height: 44.42px; ` styled-component를 확장하여 사용하기 새로운 element를 생성할 때 이전에 선언한 변수 ..

Git으로 협업하기 협업할때 루틴을 까먹지 않도록 기록해보겠다. 먼저 상대방의 코드를 로컬 저장소로 가져온다. git clone 레포지토리 url 가져온 코드가 최신 버전인지 확인한다. git pull origin 브랜치 새로운 브랜치를 생성한다. git checkout -b 새로운 브랜치 변경사항을 작업 디렉토리에 추가한다. git add . git commit -m "메세지" 새롭게 작성한 브랜치에 push한다. git push origin 작업한 브랜치 깃허브에서 pr을 생성히여 코드리뷰 요청. 수정요청이 있다면 반영하여 다시 커밋하고 push한다. 변경 승인하면 merge를 클릭하여 병합한다. 이후 메인 브랜치에서 pull하여 최신 버전으로 업데이트한다. Github issues사용하기. 협업이다..

CRA -> Vite 로 React 설정하기 나는 여태껏 Create React App을 통해 React를 설정했는데 같은 프론트엔드 팀이 Vite라는 것을 알려주었다. Vite는 프런트엔드 툴인데 CRA 대신 Vite를 사용하면 개발할 때 속도가 더 빠르고 메모리도 적게 잡아먹는 등의 장점을 가지고 있다고 한다. Vite 설정하기 npm create vite@latest cd vite-project npm install npm run dev 이후 요 3개를 추가로 실행시켰다. cra와 다르게 5173포트를 사용한다. 찾아보니 vite는 cra보다 개발 서버가 빠르다고 되어 있다. 이유를 한 블로그에서 가져와 봤다. CRA는 webpack으로 번들링 하는데요. 코드가 바뀌면 모든 자바스크립트 코드를 새로..

나선형 매트릭스 처음에 문제를 이해하고 코드를 이해하는 데 어려웠지만 여러번 들어 끝까지 이해하려 했다. //나선형 매트릭스 const t1=[[1,2,3],[4,5,6],[7,8,9]] const t2=[[1,2,3,4],[5,6,7,8],[9,10,11,12]] function Matrix(matrix){ const result=[]; let left=0; let right=matrix[0].length-1; let top=0; let bottom=matrix.length-1; while(left7과 7->4->5는 if문으로 left

내가 피그마로 디자인한 ui와 erd를 보고 다른 프론트 분께서 기획부분에서 질문을 여러개 주셨다. 답변해주면서 나 스스로도 기능 같은 걸 정리할 수 있어서 질문이 많았지만, 많아서 좋았다ㅎ 아래는 기획 단계에서 받은 질문들이다. 건의사항 (OOO) - 23.03.21 안녕하세요 프론트맡은 OOO입니다! erd, 3/16에 공유해주신 발표자료, 피그마 확인했고 전체적인 일정과 우선순위를 산정하기 위해 기획상의 질문 남겨두고 갑니다. 위에 “기본 틀/기능” 토글을 기준으로 정리했고 확인 후 아래에 답변 남겨주시거나 회의때 디코나 줌으로 불러주셔도 됩니다! 질문 리스트 [메인페이지] 발표자료상으로는 캠핑족만 타겟팅한 줄 알고 있었는데 카테고리가 숙소, 캠핑, 공연, 기타로 나뉘어져 있네요 티켓베이 같은 티켓..

올바른 괄호 (){}[]이 3개의 괄호가 올바르게 짝 지어지는 지 확인하는 것이다. //올바른 괄호 //괄호가 올바른게 Paired 되었다는 것은 "(", "{", "[", 등의 괄호가 열렸으면 //반드시 짝지어서 ")","}","]"가 닫혀야한다는 말 function vp(input){ const stack=[] for(let char of input){ if(char==="[" || char==="{"||char==="("){ stack.push(char) }else{ const last=stack.pop() if(last === "{" && char!=="}"|| last === "[" && char !== "]" || last === "(" && char !==")"){ return false }..

보호되어 있는 글입니다.