🎉 성과 완성한 부분 flex-flow를 이용하여 정렬하기 사각형을 감싼 상자 360px로 고정하기 사각형 개수 변화때마다 사각형 크기 조절 ✨ 느낀점 👍 알게 된 점 사각형 개수 변할때마다, 사각형 크기 조절 사각형을 flex-wrap하기위해 계산식에 사용할 row변수를 1로 지정한다. 그리고 초기 사각형 크기로 176px을 지정한다. 색깔이 같은 사각형과 다른 색깔을 가진 사각형의 style에 boxsize 변수를 넣는다. 사각형 크기는 BoardCalculate 함수를 이용해 계산한다. 계산한 값을 setBoxsize를 이용해 동기화한다. BoardCalculate 함수에 사용되는 row변수값은 사각형의 개수(변수 count)가 변화하면 +1씩 더한 값을 가진다.

✨ 느낀 점 👍 알게 된 점 UseEffect를 사용하면 deps에 넣는것에 따라 실행 횟수를 조절할 수 있다. useEffect(함수, [deps]); [deps]안에 useState의 변수를 넣으면, 변수가 변할때마다 useEffect에 넣은 함수가 실행된다. 만약 빈 배열인경우에는 mount될때 딱 한번만 실행된다. useEffect(() => {}, [deps]); 추가적으로 useEffect안에 넣을 함수는 미리 함수를 정의한것을 넣을 수 있지만, 현장에서는 정의한 함수를 쓰지않고 바로 함수를 작성해 넣는다고 한다. cleanup function은 useEffect가 unmount될때 실행된다. 1. useEffect가 mount(실행)되면 useEffect의 첫번째 매개변수인 함수가 실행된다...

🎉 성과 완성한 부분 Intro 다음으로 About 단락을 만들어서 이름, 전화번호, 생년월일, 이메일주소를 적었다. 완성한 이유 간소하게 나를 알리기 위해 만들었다. ✨ 느낀 점 💢 힘들었던 점 display 사용 원래는 column을 이용하여 구역을 나눠볼까 생각했는데 만들고 나니 높낮이가 이상하게 되었다. 그래서 인터넷으로 검색하여 다른사람이 만든 포트폴리오는 flex-wrap으로 만들어서 나도 flex-wrap으로 만들어 보았다. flex-wrap은 flex와 다르게 정해진 가로폭을 넘게되면 줄이동을 하여 몇줄로 만들 수 있다. 그래서 max-width를 정하고 한칸의 width를 50%를 주니 크기가 딱 알맞게 되었다. ❗ 보완할 점 column을 이용한 구조 제작 flex-wrap은 만들어보았..