분류 전체보기

개요 매번 slide 작업할 때마다 까먹어서 찾아다니기 귀찮아서 글로 남기기.. CSS .qa-wrap .qa-box { cursor: pointer; } /* active 들어가는 부분 */ .qa-wrap .qa-box .contents { display: flex; flex-direction: column; gap: 12px; height: 0; margin-top: 0; overflow: hidden; transition: all .3s; } .qa-wrap .qa-box.active .contents { height: auto; margin-top: 16px; } JS const tabList = document.querySelectorAll('.qa-wrap .qa-box'); for(var ..

Today I Learned 이번에 듣게 된 특강은 리액트가 바라보는 컴포넌트란 무엇인가란 주제로 강의를 듣게 됐다. 1. React로 사고하기 컴포넌트를 분류할 때 어떤 식으로 구성하면 좋을지, 왜 그렇게 나누는지에 대해서 학습했다. 기존에 퍼블리싱을 하면서 따로 배운건 아니지만 작업하기 수월해서 그렇게 진행했던 것들이 이론과 대부분이 일치했다. 그래서 그런지 왜 그럴까? 란 생각보단 맞게 해왔구나라고 생각하는 시간이었다. 2. 컴포넌트를 분리하는 기준과 방법 내가 이해한 바로는 재사용의 유무, 공통의 주제 등 묶고 나누는 방법은 다양하지만 의미는 일맥상통한다고 느꼈다. 두 강의를 들으면서 느낀 점은 컴포넌트를 그냥 내가 작업한 순서가 아닌, 이유가 있는. 만약 공통작업이 아닌 혼자 작업하게 된다면 왜..

프로젝트 정보 배포 사이트 : https://vercel.com/laluniaxs-projects/outsoursing-project-8ue3 프로젝트 깃 레파지토리 : https://github.com/laluniax/-outsourcing-project 발표 노션 자료 : https://www.notion.so/8-8llow-Me-5b36891f6fcd41edb99a04758fdb30be Keep - 현재 만족하고 있는 부분 민용 1.계발 초기 단계의 와이어 프레임, 프로젝트 구조 구성등 작업을 진행하는 것이 프로젝트를 완성하는 중요한 틀이 되어, 이후 작업 시 작업을 수월하게 할 수 있도록 많은 도움이 되었다. 인준 서로 편하게 피드백을 주고 받을 수 있는 룰이 만들어져서 분위기가 너무 좋았고 초반..

요약 리액트 아웃소싱 프로젝트 - 크롤링 kakao map 데이터 크롤링 작업 고민한 내용 처음 기획 단계에서 고민한 내용은 네이버에서 검색한 리스트들을 불러와서 별점과 리뷰수를 보여주는 것이었다. 근데 네이버지도 API, 카카오맵 API 둘 다 별점과 리뷰는 보여주지 않는다는 것이었다. 그래서 내린 결정은 데이터를 크롤링해와서 뿌려주는 걸로 결정을 했다. 네이버지도 같은 경우 리스트들이 iframe으로 하나씩 데이터를 다른데서 불러오기 때문에 크롤링에 어려움이 있었다. 그래서 데이터 긁어오기 용이한 카카오지도를 크롤링 하기로 했다. 1. index.js 일단 리액트로만으론 크롤링이 불가능했다. 정적인 페이지에서 크롤링이 가능한데, 리액트는 동적프레임워크다보니 호환이 되지 않았다. 그래서 백엔드로 nod..

1. 프로젝트 개요 프로젝트 인원 : 4 프로젝트 참여자 : 김범수, 김지예, 윤호준, 진영호 2. 프로젝트 명칭 산책어때? 3. 소개 오래 앉아 있어서 약해진 당신의 무릎을 지켜줄 산책 원하는 위치에 맞는 산책로를 추천순이나 리뷰순으로 정리해서 보여주는 웹사이트 4. 프로젝트 일정 23/12/05 - 23/12/11 5. 프로젝트 기능 계획 필수 구현 기능 위치 API : 사용 API (네이버 : https://navermaps.github.io/maps.js.ncp/) 검색 기능 네이버 리뷰 데이터 크롤링 (cheerio) 페이징네이션 or 더 보기 버튼 선택 구현 기능 댓글 기능 로그인 기능 별 명소 편의점, 카페 체크박스해서 같이 보여주기 6. 와이어 프레임

요약 Ract로 Fan Letter App 만들기 - thunk로 리팩토링 기존에 만든 팬레터 앱에서 redux에서 react-toolkit을 활용해 react-thunk로 리팩토링하는 작업 고민한 내용 props와 context api는 이해가 잘 되서 금방 적용했는데 기존 redux를 작업한게 많지가 않는게 가장 큰 문제였다. 일단 기존 redux할 것들까지 찾아서 툴킷화하는데 시간이 꽤 많이 걸렸다 1. JSON-SERVER 기존인 더미데이터를 활용해서 화면에 보여주는 형식이었다면, 이번엔 json-server 모듈을 활용해 db.jsoin 파일로 직접 넣어줬다. .env 파일에 url을 집어넣어서 전역으로 사용했었다. 2. React Thunk 기존 이름에서 -Slice.js로 파일들을 만들었고 ..

요약 React, Firebase 활용한 뉴스피드 프로젝트 뉴스 피드란? 내 게시물을 포함한 모든 게시물을 볼 수 있는 공간( 커뮤니티(o), 뉴스(x) 사용된 주요 기능 react, firebase, redux 고민한 내용 처음 팀장을 맡아서 뼈대 만드는 작업을 하는 것부터 쉽지 않았다. 다들 작업을 바로 할 수 있게 빠르게 넘겨줘야하는데 무엇들이 필요할지 몰라 고민을 많이했다. 그리고 뼈대를 넘겨줬지만 디자인 작업을 추후에 하자곤 했지만 뼈대만 두고 작업하기엔 다들 너무 힘이 들거같았다. 그래서 큰 틀을 잡으면서 아예 로고나 전체적인 UI는 대략적이지만 잡은 상태로 넘겼다. 메인 컬러나 서브 컬러 등도 다들 컴포넌트로 사용하기 좋게끔..그래서 언제든 바꿀 수 있게.. 나중에 시간이 나는 누군가가 바꾸..

내가 보기 위한 axios 에러 정리 새롭게 작업 들어갈 때 에러문이 필요할 때 가져다 쓰기 위한 정리 const url = "https://jsonplaceholder.typicode.com/todos"; // axios 요청 로직 axios .get(url) .then((response) => console.log(response.data)) .catch((err) => { // 오류 객체 내의 response가 존재한다 = 서버가 오류 응답을 주었다 if (err.response) { const { status, config } = err.response; // 없는 페이지 if (status === 404) { console.log(`${config.url} not found`); } // 서버 ..

메타 태그란? 메타 태그(Meta Tag)는 HTML 문서의 태그 내에 포함되는 태그로, 웹페이지의 정보를 설명하고 브라우저와 검색 엔진에게 추가적인 정보를 제공하는 역할을 합니다. 메타 태그는 웹페이지의 제목, 설명, 키워드, 문자 인코딩 등을 설정할 수 있으며, 이러한 정보는 검색 결과에 표시되거나 소셜 미디어에서 공유될 때 미리보기로 제공됩니다. 자주 사용되는 메타 태그에는 다음과 같은 것들이 있습니다: : 웹페이지의 문자 인코딩을 설정합니다. UTF-8은 대부분의 문자를 표현할 수 있는 인코딩 방식입니다. : 모바일 장치에서의 뷰포트 설정을 지정합니다. 이를 통해 웹페이지가 모바일 기기에서 올바르게 표시될 수 있도록 도와줍니다. : 웹페이지의 간단한 설명을 설정합니다. 이 설명은 검색 결과에 페이..