22/08/24 [모각코] 11일차

오늘은 grid 를 써봤습니다 css 중 제가 자주 쓰는 flex는 한 방향 레이아웃 시스템이고 grid는 두 방향 레이아웃 시스템입니다. 그래서 grid는 flex보다 복잡한 구현이 가능합니다. .container { display: grid; } grid-template-rows - 행에서의 배치 grid-template-colunms - 열에서의 배치 예를 들면 grid-template-columns: 100px 100px 200px; 이면 열이 100px , 100px, 200px 로 만들겠다는 것이고 grid-template-rows: 1fr 1fr 1fr 이면 행이 1:1:1 비율을 차지한다는 것입니다.

→2022.08.26

TIL

22/08/20 [모각코] 10일차

네캔만원 일단 배포 완료

→2022.08.21

TIL

22/08/13 [모각코] 8일차

useEffect를 통해 비동기함수를 다룰수 있다. const result = filteredCollected(); console.log(result); const getBeerList = async (e) => { console.log("GetBeerList Called"); const request_data = { beerTypeList: result }; // type of -> Object let response = await axios({ method: "post", url: "/api/filter", headers: { "Content-Type": "application/json" }, data: JSON.stringify(request_data), }); console.log("respons..

→2022.08.15

TIL

22/08/10 [모각코] 7일차

useEffect 와 props 뿌시기 useEffect()에서 console.log()를 믿지말자 데이터는 setBeerData()로 잘 변경되었는대 단지 console.log에만 안보일 뿐 즉, 바로 props로 넘기면 잘 된다. // Search.jsx const Search = (props) => { const [beerData, setBeerData] = useState([]); let navigate = useNavigate(); useEffect (() => { const getBeerList = async () => { console.log('Search.jsx'); let response = await axios.get('/api/search'); console.log('response...

→2022.08.11

TIL

22/08/06 [모각코] 6일차

랜덤추천을 끝으로 페이지 구현작업은 어느정도 마무리 되었습니다. 설명을 하자면 1초간 로딩 시간이 있고 시간이 지나면 백엔드에서 가져온 랜덤한 맥주를 추천해주는 페이지입니다. 이제 남은 기간동안에는 백엔드와 연동해서 api도 사용해서 모든 구현을 마무리할 계획입니다. 이제부터 시작입니다.

→2022.08.08

TIL

22/08/03 [모각코] 5일차

오늘은 Like 페이지를 구현해봤습니다. 아직 서버가 만들어지지않아 data.json 을 임의로 설정해줍니다. // data.json { "beer_list": [ { "id": "1", "image_url": "/img/example.png", "beer_name": "곰표밀맥주", "total_point": 4.5, "information": "좋은맥주입니다." }, { "id": "2", "image_url": null, "beer_name": "필스너우르켈", "total_point": 4.0, "information": "너무 맛있는 맥주입니다." }, { "id": "3", "image_url": null, "beer_name": "필스너우르켈dsdd", "total_point": 5.0, "..

→2022.08.04

분류 전체보기