인간이 되고 싶은 원숭이

오늘 공부한것 요약 시작하기 앞서 자바스크립트는 싱글 쓰레드로 동작하는 언어다. (메인 쓰레드 하나와 콜스택 하나로 구성되어 있다) 그리고 비동기 작업을 동시에 할 수 있다. ( 비동기는 API 나 firebase 를 사용하는 것들 ) 1번에 1개의 작업만 할 수 있는데, 어떻게 동시 실행을 할까면 → 자바스크립트는 코어 엔진만 가지고 돌아가지 않는다 실행환경(런타임)의 도움을 받아 동시 실행을 한다 (WebAPI(dom, ajax, setTimeout...), Task Queue, Event Loop 등과 함께 동작함.) 콜백 콜백은 자바스크립트가 비동기 처리를 하기 위한 패턴 중 하나입니다! 전통적인 콜백 패턴은 일명 콜백 헬로 불리는 엄청난 중첩 문제가 생기기 쉽습니다. 1. 콜백 헬🔥 이란? 꼬리..

새롭게 들어선 리액트 3주차 심화 과정 아니 무슨 새로운게 너무 많어...이거 맞아? 그래도 다시 처음부터 시작한다는 마인드로 진짜 빡세게 해보자... 오늘 한 일 🔥 1. 리액트 심화 강의 1-1 ~ 1-10 까지 수강 2. 깃허브 페이지 자잘하지만 꾸미기 3. 오늘도 잊지 않은 후추 밥주기 🐶 1주차 강의 정리 내용 [ React 심화 1주차 정리 내용 ]

블로그에 TIL 안 쓴지 5일이나 지나버렸다 변명을 하자면 진짜 리액트라는 파도에 계속 휩쓸려서 쓸 시간 조차 없었다 너무 힘들다 하지만 꾸준히 해보자... 익숙하지 않아도 계속 하면 뭔가 되겠지 오늘 한 일 🔥 1. 리액트 숙련주차 과제 내기 2. 부족한 부분 다시 시도 해 보기 3. 오늘도 역시 후추 밥주기🐶

css에서 vh란 100vh 할떄 vh란 화면 비율이다 보고 있는 화면을 기준으로 얼마 줄꺼야? 라는 것 즉 100은 화면을 기준으로 100%를 준다는 것 .App { background-color: #eee; height: 100vh; } 하지만 이렇게 하게 되면 위에 부분이 남게 되는데 콘솔창을 열어서 보면 자체적으로 display 가 block 으로 되어 있기 때문이다 그래서 저것을 display : flex; 나 display : inline-flex; 로 해주면 꽈악 채워준다 참고로 50vw 할때 vw는 w=width다 즉 넓이다 그리고 margin 을 사용할 때 margin: '16px' 이렇게 주게 되면 상하좌우 전부다 margin 이 먹게 되는데 margin: '16px 0px' 이렇게 주..

오늘은 불타는 불토 🔥 남들은 불금이겠지만 항해99 하는 우리에게는 불토다 왜냐하면 주 6일 하고 유일하게 일요일만 쉴 수 있기 때문이지 ( 사실 일요일도 공식적으로 쉬는 날은 아님...ㅠ ) 오늘은 리액트 기초부터 쭉 봤다. 하지만 스스로 구현하는데 많이 막혔다 특히 props 를 가져다 component 를 만들고 자식이 그걸 가져다 쓰는 것에 대해서 애를 먹었다 그래서 계속계속 도전해봤다. 그러더니 뭔가 손에 익숙해지고 머리에 들어오는거 같다!! 쭉 코딩을 이어갔는데 다시 반복문에서 막혀버렸다... 우리가 지금까지 배워온 for 문이나 for in, for of(?) 를 사용하지않고 리액트에서 쓰이는 .map() 을 사용해보려고 노력을했다. 그런데 너무 어려운건 뭐지 행해 99 에서 숙제를 내준것에..

오늘은 리액트 숙련주차들 좀더 잘 하기 위해 기초부터 강의를 쭉 들었다. 그래도 아직 혼자 코딩을 하려면 힘든것 같다. 오늘 한 일 🔥 1. 알고리즘 공부 2. Javascript 와 React 공부 3. 프로그래머스 "3진법 뒤집기 문제 풀기" 3진법 뒤집기 🔥 // 일단 n을 toString(3)으로 3진법으로 만들어준다 const jin = n.toString(3); // split('')메소드를 사용해서 하나하나씩 배열로 바꾼 다음 reverse()메소드를 사용해서 뒤집어줍니다. 그리고 join('')메소드를 사용해서 나누어진 배열을 하나로 묶어줍니다. let sp = jin.split('').reverse().join(''); // 그리고 지금은 문자열로 되어 있기 때문에 number 로 바꿔주..

저는 이런 스텝으로 개발을 진행해보았습니다. 1. 일단 사용자가 input에 뭔가 입력하면 입력한 값을 변수나 state로 저장부터 할 것입니다. (중요한 데이터는 일단 저장해두는게 좋으니까요) 2. 버튼을 누르면 그 state를 [글제목이라는 state] 어레이의 뒤에 하나 뿅 추가할 것입니다. 이게 끝입니다. 그러면 알아서 글이 4개 보일 것입니다. 왜 4개가 알아서 보이냐고요? state 변경하면 HTML도 알아서 재렌더링 되니까요. 그러니 div를 하나 더 만들어주세요~ 이런 코드는 필요가 없습니다. state만 변경하면 됩니다. 1. 사용자가 input에 뭔가 입력하면 입력한 값을 변수나 state로 저장하려면 기억이 안난다면 바로 저번 시간 input 다루기 강의를 참고하시면 되겠군요. fun..

실제 사이트엔 이런 것들이 매우 많습니다. 여기에 입력된 값을 저장하거나 어디로 보내거나 그래야할 경우가 많은데 리액트에서 input 데이터는 어떻게 처리하는지 알아봅시다. 실은 쌩 자바스크립트 문법이랑 똑같습니다. 그리고 map 반복문 쓰면 콘솔창에 warning 뜨는 것도 마지막 부분에서 해결해보도록 합시다. 사용자가 input에 입력한 데이터를 state로 저장하는 법 사용자가 input에 입력한 데이터는 역시나 중요한 데이터기 때문에 state 저장해서 쓰는게 일반적입니다. 저장부터하는 법을 알아봅시다. 저장하려면 일단 빈 state가 하나가 필요할테니 state를 하나 만들어봅시다. function App (){ let [입력값, 입력값변경] = useState(''); return ( HTML..