본문 바로가기

전체 글

[회고록] 위코드 1차 프로젝트 회고 좋았던 점 : 팀원분들이 같이 일하고 싶은 분들이랑 해서 인간관계로 스트레스 안받고 몰입할 수 있어서 좋았다. 실수하고 휴먼 에러도 많았기에 서로 탓하게 될수도 있었는데, 그런 것도 없었고, push도 없었고... 배려해주는게 느껴져서 좋았다. 그전에는 혼자 페이지만 그려나갔는데 프로젝트를 기회로 백엔드와 fetch해보니 페이지가 구동되는 데 있어 어떻게 작동하는지 감을 잡았다. 배운 점이 많았다. 필수목표에 집중하는 등, 애자일하게 했다고 생각했는데, 마감이 닥치니까 되던게 안되었고 조급해지는것 때문에 흔들렸다. 하지만 처음 해본 프로젝트 치고는 후회 없이 만족스러운 프로젝트였다. 더보기
[TIL-143] 위코드 44일차: 업데이트 된 state 값이 한박자 늦게 적용되는 문제 setState는 비동기적으로 처리함. array.length : 빈 배열인지 확인하는 법 배열이 비어있다면 어떤 코드를 실행하려고 한다. const array = []; if (!array) { console.log(array); => !array는 false이므로 실행되지 않음. } if (!array.length) { console.log(array); => array.length는 0이므로 falsy(?). 따라서 !array.length는 true이므로 실행됨. } array는 그 안이 비어있더라도 배열이 존재하는 그 자체로 truthy. 문자열이 어떤 값이든간에 한 글자라도 존재할 때와 마찬가지다. 자식 컴포넌트 안에서 부모 컴포넌트에 값.. 더보기
[TIL-142] 위코드 43일차: 문자열.toLocaleString("ko-KR") 현재 지역 통화에 맞게 바꿔줌. 더보기
[TIL-141] 위코드 42일차: eventlistener 콜백함수 안에 인자 전달하기 onClick={handleBtn(num)} 이렇게 일반적인 함수처럼 parameter에 num을 쓰면 함수에 괄호가 붙어서 자바스크립트가 이 코드를 읽는 즉시 그 자리에서 실행되어버린다. 그래서 콜백함수를 화살표 함수로 주고, 화살표 함수 안에서 num을 인자로 받은 handleBtn을 실행해야 한다. onClick={ () => { handleBtn(num); } input 체크박스 값 받아서 filter 요청 보내기 label 연결하기 mini 1호 2호 3호 을 에 연결하려면 input의 id를 label의 for(JSX에서는 htmlFor)의 값으로 주면 된다. 그런데 checkbox 타입의 input의 경우, label 태그 안에 넣음으로써.. 더보기
[TIL-140] 위코드 41일차: setState 하다가 발생한 에러 ReactJS const 키워드로 선언한 state 문제 const [count, setCount] = useState(1); function countDown() { if (count > 1) { setCount(count - 1); } } setCount(count--)라고 쓰면 안됨.... 왜? ++도 마찬가지.... count - 1이라고 쓰라고 함. 해결 "count is constant." esLint가 알려준 에러문을 확인하면 위와 같다. count는 const 키워드로 선언된 state이다. 그런데 count++라고 하면 count = count + 1 인 셈이므로 count의 값을 재할당하게 된다. 즉, 나는 count++가 count + 1이라 생각하고 썼지만 count = count .. 더보기
[TIL-139] 위코드 40일차: Project 1 - path parameter 참고) React Router: 파라미터와 쿼리 https://velog.io/@bigbrothershin/%ED%8C%8C%EB%9D%BC%EB%AF%B8%ED%84%B0%EC%99%80-%EC%BF%BC%EB%A6%AC 구조분해 할당 자식 컴포넌트에 props로 객체를 넘겨줄 때, 구조분해 할당을 해서 받아도 다시 객체의 키로 최종적으로 사용할 값에 접근하는 게 번거롭다. //before function Main() { return ( ... {productList.map(data => ( ))} ... ); } function Product({ id, name, price, rate, description, sizes, url }) { return ( {descriptio.. 더보기
[TIL-138] 위코드 39일차: Project 1 - CSS flex-wrap과 grid .productContainer { display: flex; flex-wrap: wrap; justify-content: flex-start; // space-between width: 100%; padding: 0 160px; } flex-wrap을 써서 나열된 상품들이 div.productContainer의 너비를 넘게 되면 아래줄로 내려간다. 그런데 justify-content의 문제가 있다. flex-start를 하면 왼쪽으로 붙어 정렬되어 양쪽 여백이 맞지 않게 되고, space-between을 하면 상품이 덜 채워진 마지막줄이 어색해진다. 부모 선택자 & Path Parameter 조건부 렌더링 function Main() { const [productList, .. 더보기
[TIL-137] 위코드 38일차: JS 코드카타 https://www.w3schools.com/howto/howto_css_aspect_ratio.asp https://avada.tistory.com/1855 수정된 remote master 업데이트하기 1. git checkout master : local에서 master로 checkout한다 2. git pull origin master : remote의 수정된 master을 local에 pull한다. 3. git checkout working-branch : 작업중인 브랜치로 이동한다. 4. git merge master : 최신화된 local의 master를 작업중인 브랜치에도 반영한다. (conflict 발생 시.....) const reverseString = s => { for (let i.. 더보기

티스토리툴바