본문 바로가기

TIL✨

 (71)
리액트 네이티브_TIL(45) 리액트프로젝트가 끝나고 바로 네이티브로 들어갔다. 빠르게 진행되다보니까 리액트도 완벽하지 않은데 벌써 네이티브라고..?라는 생각이 들었지만 문법적으로 쪼금 다를 뿐 많이 다르지않아서 리액트공부를하면서 같이 진행해도 좋을꺼같았다....ㅎ 뭔가 계속 투두앱을 기본으로 진행이 되는거라 예시가 지루할 수 있지만 CRUD가 투두만큼 잘 되어있는게 없어서 이 예시로 진행되고 있다. 다행인건 리액트로 투두앱을 만들었어서 많이 낯설지가 않았다는 점ㅋㅋ 그대신 웹 대로 만들면 마음만큼 안만들어진다는 점... 그래서 오늘 주제는 진짜 간단하지만 시간은 엄청 잡아먹은 버튼 주제다...하😱 1.만난 큰 산..? 카테고리 별로 투두를 다르게 적고 싶었기 때문에 카테고리를 누를 수 있어야한다고 생각을하고 (당연히 웹을 만들때처럼..
iterable error _TIL(44) 이번 프로젝트 중에 자주 보았던 에러 중에 하나인 TypeError : 'nonetype'object is not iterable🔥에 대해서 정리하려고한다. 그래서 iterable이 뭘까부터 시작했다. '순회가능한'뜻을 가지고 있었다. for...of문을 사용해서 이렇게 값을 하나씩 반환할 수 있다. const array = [1,2,3]; for(const item of array){ //아이템을 하나씩 출력한다. 1,2,3출력 } 즉, 순회가 가능하다면 for...of문 사용이 가능하다. =>이게 왜 가능하냐면 iterabor을 반환하는 내장메소드들이 있기 때문이다. 그래서 iterator를 리턴한다는 것은 순회가능한 객체인것을 말한다.(for..of문 ,spread문 사용이 가능하다.) 그럼 ite..
parameter_TIL(42) 1.내가 만난 문제 map을 돌려서 받은 list들을 item.id와 내가 선택한 그 하나의 값 id을 비교하다가 갑자기 막혔다. 모든 list들이 다 id와 일치한다고 나왔다. 코드로 보자면 4번줄에 해당한다. const modalHandle = (id, password) => { selectedComments?.map((item) => { console.log(item); return id === item.id ? setModalOpen(true) : console.log("안 켜짐"); }); document.body.style.overflow = "hidden"; // 모달창 오픈 시 배경 스크롤 비활성화 }; 2.시도 1) 먼저 console.log()로 모든 props들의 값들을 찍어봤다. 근..
TIL(41) 1.만난 문제 (오류도 아니였음 진짜 문제였음)😿 db.json연결을 다하고 post로 내 글을 보내는것까지 성공을 했다. 근데 콘솔에 찍어보니까 이상했다. state변경될때마다 post가 되고 있는거였다. 그러다 보니까 데이터 입력할때동안 계속해서 post가 되 어서 이런식의 문제가 생겼다. 아무래도 내가 useSelect에서 article이라는 이름으로 state를 들고왔는데 얘가 실시간으로 변경될때마다 리렌더링이 되므로 json-server에도 똑같이 리렌더링이 될때마다 글이 올라가는 것 같다라는 생각이 들었다. 2.시도🔥 그럼 이미 변경되고 있는 state가 아니라 setState를 통해서 변경이 되어진 state를 보내자! 그럼 일단 안에 있는 버튼이 눌리면 onsubmit이 실행되고 있었는데 ..
글 작성페이지 input 나누기 TIL(39) 리액트로 시작하는 첫 번쨰 프로젝트가 시작했다. 글 작성페이지를 맡게되었는데 페이지에 모든 곳이 다 input이다. type만 다른...ㅎ todo를 했을때처럼 하다보니 가만있어보자.. input 컴포넌트를 하나 만들어놓고 이것을 재사용 하면 좋겠다라는 생각이 들었다. 그럼 행동으로 옮겨야지🥸 1.내가 만난 문제 👍나의 지금 구조 Input을 들어가면 거기서 또 세부적인 제목,작성자,비밀번호 이 3가지의 input이 필요하다. 그래서 그안에서 또 로 나눌려고 보니까 그럼 또 그 안에 input이라는 가장 하위 컴포넌트들을 불러와야하는 구조였다. 또 난 Input컴포넌트 작성을 위해 페이지를 하나 더 만들어야하고,팀프로젝트다 보니 오히려 많은 파일들을 팀원들이 보기 힘들꺼같다라는 판단을 내렸다. 또 비효율..
React-router_TIL(37) 리액트라우터에서 멈춘지 어언 하루이틀... 어렵다 어려워 ㅠ 그래서 오늘 간단히 액기스만 정리를 하면서 머릿속에 우겨넣어볼까한다. 화이팅👍 1.useNavigate() 원래는 Link라는 훅을 이용해서 상세페이나 마이페이지를 들어갈 수 있지만 Link훅은 html의 a태그의 역할로 브라우저에서보면 사실 안예쁘고 내가 따로 디자인을 손을 봐야한다. 그래서 쓰는 훅이 useNavigate()이다. 이 훅은 내가 미리 만들어놓은 html태그에 onClick={()=>{useNavigate("/mypage")}}으로 가뿐히 설정가능하다. 2.Outlet 이 있다. 근데 이 mypage에는 article , accout 페이지가 있다면? 그때마다 를 써줘도 되지만 그럴 필요없이 이렇게 줄 수 있다. :id의 뜻은..
불변성_TIL(36) 리액트는 배열과 객체의 불변성을 지켜주는게 중요하다고한다. 자바스크립트 심화에서 다룬 얘기중에 배열과 객체는 원시형이 아니라서 그 값을 직접 가지고 있는게 아니라 화살표, 즉 값을 가르키고 있는거라고 한다. 만약에 let arr = [1,2,3] 이면 arr라는 저장공간을 가지고 값 1,2,3을 가지고 있는 메모리의 위치를 화살표로 참조한다고 생각하면 되겠다. 그래서 내가 state에 저장해놓은 값을 변경하고 싶을 때 useState를 사용하는데 let [value,setValue] = useState([1,2,3]) 이라는 예시가 있다. 내가 근데 1을 5로 바꾸고 싶다면? value[0]=5; setValue(value) 이렇게하고 브라우저를 하면 아무것도 변경되는게 없다 분명 나는 setValue를..
아침부터 오류 만남 ㅎ TIL(34) 오류가 생겼다 그것도 컴퓨터 키자마자 파일하나 npm start~치자마자 원래 이때까지 이런적이 없고 오류를 이쪽에서는 만나본적도 없었는데 아예 localhost가 안되는게 너무 충격이라 심장이 내려앉았다 할꺼가 이렇게 많은데 이렇게 시간을 다 쓰는것인가 하는 생각에 💢 원래 TIL저녁에 쓰지만 오늘은 오류를 너무 빨리 만난 바람에 지금 적는다. 어쨋든 해결은 됬기때문에ㅎㅎ 상황 1.VSC를 켰다. 2.밑에 안뜨던 오류 창이 자꾸 떴다. "네트워크연결이 실패했다?" 무슨 파일을 켜던지간에;; 3....?와이파이가 문제인가?라고 생각하고 안일하게 넘김 4. 그리고 열어야할 파일을 npm start~ 5.localhost:3000열수없다고 브라우저에 뜸 위에서 4,5번 순서를 계속했다 연결이 잘안되나? 하고..

티스토리툴바