일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 배포
- S3
- 비동기
- 채팅방
- 7기
- updater
- rendering
- routing
- Github Actions
- 스파르타코딩클럽
- 항해99
- 동기
- previousState
- route
- Preview
- setstate
- 접근 제한 라우팅
- FileReader
- imagePreview
- 라우팅
- CI/CD
- qwe
- useEffect
- Redux
- 후기
- react
- socket.io
- 미리보기
- 브라우저 렌더링
- 개발
- Today
- Total
목록분류 전체보기 (105)
삐옹
BrowserRouter : 웹 브라우저가 가지고 있는 주소 관련 정보를 props로 넘겨준다. 최상위 컴포넌트에서 감싸준다.() 리액트 개인 과제를 진행하면서 오늘 날짜로부터 일주일 간의 요일을 매일 갱신해주는 코드를 짰다. 고민하다가 도저히 답이 안나와서 같은 조의 윤영님께 도움을 받아 로직을 짤 수 있었다. 문제는 알고리즘이 이해가 가지 않는다는 것.. 애당초 접근방법조차 생각이 나지 않았는데 이런 코드를 짜는 사람들이 너무 대단하게 느껴졌다. 나도 알고리즘 잘 하고싶다. 우리 조 조원들을 대상으로 리액트 팀 과제 발표를 했다. 아무래도 항해톡1차 때 마주했던 인원에 비하면 매우 적은 인원을 대상(3명)으로 하는 발표였기에 편한 마음으로 발표를 했다. 팀원분들이 내 발표를 재밌게 봐주시고 도움이 된..
상황 props로 넘겨준 요일들이 자식으로 하나씩 잘 넘어가 화면에 오늘부터 일주일 간의 요일이 뜨면 완성인데 왠걸 요일도 없는 평점, 버튼 UI 끝 자리를 차지하고 있다. props로 넘겨줄 데이터가 부모 컴포넌트에서 제대로 찍히는가?[o] props로 받은 데이터가 자식 컴포넌트에서 제대로 받았는가?[x] -> 갑분언? 갑자기 분위기 undefined란 뜻임. 해결 대체 저 undefined가 뭘까 고민을 해보았다. 개발자도구에 들어가 element를 살펴보니 감싸준 div의 밖에 있다고 나온다. 그렇다면 div 태그 아래에서 문제가 났음에 틀림없었다. div 태그 아래에 있는건 Route 2개 뿐이다. // 실패 return( 내 일주일은? {DayList.map((day, idx) => )} ) ..
상황 1~5까지의 랜덤한 숫자를 출력한 뒤, false 5개로 이루어진 배열의 첫 인덱스 부터 랜덤한 숫자의 인덱스까지, 순차적으로 true로 바꾸는 로직을 useEffect에 넣으니 렌더링 후 state가 true인 요소에 조건부 스타일링이 잘 들어갔다. 그런데 찝찝한 경고문구가 하나뜬다. WARNING! useEffect에 dependency를 빠뜨렸습니다.😛 음.. 일단 전체 코드로 시작. 전체 코드 const Home = ({day}) => { const [filled, setFilled] = React.useState([false, false, false, false, false]); let history = useHistory(); const randomNum = Math.floor(Math...
어떤 식으로 공부하는게 내게 맞는지 맞춰보면서 어느덧 정신없던 2주가 지났다. 매일 빼먹지 말아야 할 공부, 정리하는 법, 시간관리하는 법, 사람들과 소통하는 법을 조금은 알게된 것 같다. 배운 내용 React ref 리액트 공홈을 보다보니 선언적 해결이 가능하면 ref의 사용을 지양하라는 내용이 이해가 가지안ㅇㅎ아 기술매니저님께 여쭤봤다. 결론은 ref나 state나 상황에 따라 쓰면된다고 하셨다. 아아까 답변 적어놓은거 어디갔지; 찾아서 ref 정리글에 추가해야겠다. clean up 컴포넌트가 사라지면 가지고 있던 이벤트를 반드시 지워줘야한다. clean up 순서(클래스형): componentWillUnmount(렌더링 된 후에) 라이프 싸이클 함수 안에 넣어 이벤트를 삭제해준다. clean up..
두 개의 다른 애플리케이션 개발 방식인 SPA와 MPA의 차이점에 대해 정리했다. SPA vs MPA MPA(Multiple Page Apllication)는 화면이 여러 개(Multiple)로 이루어진 페이지입니다. SPA(Single Page Application)는 화면이 하나(Single)로 이루어진 페이지입니다. MPA는 새로운 페이지를 요청할 때마다(버튼을 누르거나 입력을 할 때) 매번 페이지 로딩이 이루어집니다 반면 SPA는 웹 애플리케이션에 필요한 모든 정적 리소스(html,css,js)를 최초 렌더링 때 다운 받습니다. 그 이후로 새로운 페이지를 요청이 있을 때, 페이지 갱신에 필요한 데이터만 서버로 부터 받아옵니다. 그렇기 때문에 MPA를 SSR(Server Side Rendering)..
Javascript와 React는 DOM에 접근하는 방식이 조금 다릅니다. 차이를 먼저 알아보겠습니다. vanilaJS javascript에서 DOM 엘리먼트를 수정하려는 경우엔, 해당 DOM을 지정하기 위해 *선택자를 사용합니다. /* 안녕하세요 */ // 예시 const myElement = document.querySelector('#my-id'); myElement.style.color = 'yellow'; 하지만 vanillaJS와는 달리 react에서는 특정 DOM을 직접적으로 수정해야 하는경우 ref를 사용합니다. *선택자 document.getElementsById() document.querySelector() document.querySelectorAll() ... React ref를 ..
목차 이번 주 배운 것 느낀 것 아쉬웠던 것 개선할 것 이번 주 키워드 이번 주 배운 것 이번 주는 알고리즘과 주특기 주차가 겹친 주였다. 알고리즘은 처음이라 문제를 풀고 정리를 하는데 시간이 꽤 많이 걸렸다. 정리를 어떻게해야하나 고민이 많았는데 정리를 잘해놓은 분들의 깃을 참고하며 어떻게 정리를 할지 정하고 그 틀도 만들었다. 글을 쓰고 정리를 함에 있어서 블로그도 그렇고, 깃도 그렇고 나만의 틀이 짜여가는게 기분이 좋았다. 전에 잠깐 공부했던 적이 있었기에 간만에 만난 리액트가 반가웠고 재미도 있었다. 그렇다고 조금 덜 열심히해도 되겠지라는 생각은 지양해야겠다. 느낀 것 기록하는 습관이 얼마나 중요한지 느꼈다. 기록하지 않으면 사람의 기억은 '휘발성'메모리가 될 수 밖에 없다. 99일 뒤엔 개발에 ..
다시 만난 리액트. 반갑다! 문법을 많이 까먹었지만 내용은 익숙하다. 덕분에 강의자료로 빠르게 공부 중이다. 알고리즘에 시간을 많이 뺏기는 느낌이다. 왜인지 생각해보니 문제를 푸는 와중에 집중을 잘 못 해서 자꾸 시간을 버린다. 알고리즘도 스터디에 들어가야겠다. 그래도 오늘 알고리즘 깃 정리 템플릿을 잘 만들어놨으니 앞으로 코드 정리는 문제없다. 오늘 알고리즘을 풀면서 스프레드 연산자에 대해서 배웠다. 객체, 배열, 매개변수 복사에 아주 요긴하게 쓰인다. 0522 *** 리액트 강의 3주차 까지, 알고리즘 ** 블로그 정리 * 항해톡 발표 준비, 리액트 팀 과제 준비 —오전— 10” cs책 읽기 + 블로깅 11” cs스터디, 알고리즘 2문제 —오후1— 1” 알고리즘 3문제 2” 알고리즘 정리 + 리액트 ..
언제 봐도 모르겠는 map, forEach. 기본은 알고 검색해야하니까 차이점 파악을 목적으로 특징들을 정리해보았다. map() - 배열 내 모든 요소에 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. - 원본 배열을 변경하지 않습니다. 반환 값 콜백 함수가 적용된 요소들의 새로운 배열 forEach() - 배열 내 모든 요소에 콜백함수를 실행시킵니다. - 원본 배열을 변경하지 않습니다. - 기본적으로 for을 대체 하기위한 메소드입니다. 반환 값 undefiend 결론: 1. map과 forEach의 가장 큰 차이는 반환 값의 차이이다. 2. 둘 다 배열을 변경하지 않는다.
예전 기억을 더듬어보니, '가짜 배열' 어쩌구저쩌구 했던것 같은데요. 왜 쓰이는건지 궁금해져 정리해보기로 했습니다. (요즘 왜 집착증에 걸렸다) Nodelist 배열이 아니라 유사배열이다. for, for...of, forEach를 사용하여 반복할 수 있다 element.childNodes 속성과 document.querySelectorAll 메소드에 의해 반환되는 콜렉션이다. element.childNodes 속성에서는 DOM의 변경을 반영한다.(라이브 콜렉션) document.querySelectorAll 속성에서는 DOM을 변경해도 영향을 주지 않는다.(정적 콜렉션) querySelectorAll로 반환한 nodelist에는 뭔가를 한다고 값은 정적 콜렉션이어서 실시간으로 반영하지 않는다. 즉 중간..