콛 다이어리

// 국가명  const [nation, setNation] = useState("");  // 금메달 수  const [goldMedal, setGoldMedal] = useState(0);  // 은메달 수  const [silverMedal, setSilverMedal] = useState(0);  // 동메달 수  const [bronzeMedal, setBronzeMedal] = useState(0);  /* 사용자가 입력한 각 메달 수 넣을 배열 */  const [userData, setUserData] = useState([]);여기는 쉽게 작성했다.useState는 const [상태 함수, 상태 변경 함수] = useState(초기값);이렇게 사용한다.상태 변경 함수는 말 그대로 함수이다..

전에 팀플 할 때는앞에 동사를 넣기도 했거나'Func'를 넣기도 했는데튜터님이나 강의를 하는 사람들 대다수는'handle', 'set' 이나 'get'을 넣어서호기심에 검색해 보았다. 사실 전에 같은 조였던 분이변수/ 함수명 추천 사이트를 알려주시긴 했는데아무래도 내가 직접 만드는 게 좋을 것 같아서지운지 오래다.베이직반에 있던 노션 내용을 추가해서정리해보았다.   1. 동작을 설명하는 이름을 사용한다.함수명은 함수가 수행하는 동작이나 작업을 잘 설명해야코드를 읽는 사람이 함수가 어떤 일을 수행하는지쉽게 이해할 수 있음    ex1) displayErrorMessage(message)           오류 메시지를 표시하는 함수    ex2) updateUserProfile(userData)      ..

알고리즘 문제 푸는데 자꾸 에러가 떴다. 'Cannot read property of undefined'  처음에는 내가 100% 맞을거라는생각에 찾아보지 않았는데두번째 뜨니까 궁금해서 찾아봤다. 에러가 뜬 이유는 변수나 객체가 선언되었지만초기화하지 않았을 경우였다. let x;로 초기화를 해준 뒤, 바로console.log(x)로 참조하는 등 하지만 나는 함수를 사용하고 있었기 때문에return문을 사용하지 않아서였다.  어떻게 함수를 사용할 때마다 까먹는지앞으로 좀 신경써서 사용해야 겠다.

알고리즘 문제를 푸는데if문과 switch - case문 모두를 사용할 수 있는문제가 있었다. if문으로 쓸까 했는데오랜만에 switch - case문 써보자 해서switch - case문을 사용해봤는데헷갈리는 부분이 있어서 다시 공부해본다.   if문과 switch - case문을 사용하는 경우1. 조건문에서 비교할 초이스(값)이 많은 경우    1) switch문을 이용하면 가독성을 높일 수 있다  차이점1. if - else 문    1) 조건식이 반드시 참, 거짓으로 평가됨    2) 논리적 참, 거짓으로 실행할 코드 블록을 결정2. switch - case 문     1) 문자열, 숫자 값      2) 다양한 상황에 따라 실행할 코드 블록을 결정할 때 사용  기본 문법 구조는 switch 문의..

const toggleCompleted = (id, text, completed) => {    alert("실행 잘되구있오");  }; 이렇게 함수를 선언하고html 부분의 완료 버튼에  toggleCompleted(todo.id)}>완료 이렇게 함수를 선언해줬다. 클릭한 값들도 잘 들어오고 있나 싶어서얼럿 코드 위에콘솔을 이용해서 값을 출력했는데모두 undefined가 찍혔다.... 튜터님께 여쭤봤는데이벤트 핸들러 (여기에서는 onClick)에그냥 함수(여기에서는 toggleCompleted)를넘겨주게 되면매개변수로 이벤트를 가져올 수 있기 때문에undefined가 뜬다고 하셨다.    const handleInputChange = (event) => {    setNewTodo(event.targe..

const [상태 변수, 상태 변경 함수] = useState(초기값); 1. 상태 변경 함수 (상태 변수 + 1);2. 상태 변경 함수((현재값) => {return 현재값 + 1;});→ 1번과 2번은 같다.3. 이벤트핸들러 = {() => {상태변경함수 {(상태변수 +1)};상태변경함수 {(상태변수 +1)};상태변경함수 {(상태변수 +1)};//  총 1 증가setCount((prev) => prev + 1);setCount((prev) => prev + 1);setCount((prev) => prev + 1);// (prev에 값이 쌓여서) 총 3증가 // (배치 업데이트)}} 배치 업데이트 (Batch Update): 어떤 state를 변경시킬 때 한 번에 처리하는 리액트만의 알고리즘4. con..

이 문제만 벌써 3번째다. 코딩테스트 하는 것처럼 똑같은 조건에서한다고 그냥 풀었을 때도 틀렸고이번에는 공부했다는 가정 하에서 푼다고빡공하고 풀었을 때도 틀렸다. 계속 틀린 코드를 붙잡고 있을 수 만은 없어서다른 사람이 푼 코드로 공부를 하기로 했다.   문제 설명머쓱이는 선생님이 몇 년도에 태어났는지 궁금해졌습니다.2022년 기준 선생님의 나이 `age`가 주어질 때,선생님의 출생 연도를 return 하는 solution 함수를 완성해주세요.  제한 사항 0 나이는 태어난 연도에 1살이며매년 1월 1일마다 1살씩 증가합니다. 입출력 예ageresult401983232000  입출력 예 설명입출력 예 #1- 2022년 기준 40살이므로 1983년생입니다.입출력 예 #2- 2022년 기준 23살이므로 20..

CRUD update를 하는데버튼을 click하면 'false'라는 값을 'true'라고변경해 주는 단계가 나왔다. li key={todo.id}>              p>                {todo.text}-{String(todo.completed)}              p>              button                onClick={() =>                  toggleCompleted(todo.id, todo.text, todo.completed)                }              >                완료              button>            li> 'false' 아니면 'true'라는 텍스트로 ..

동기(Synchronous) (단일 스레드, 싱글 스레드)한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다리는 것1. 동시에 여러 작업을 수행할 수 없음2. 흐름을 예측하기 쉬움3. 먼저 수행되고 나중에 수행되는 것들이 명확 비동기(asynchronous)응답에 관계없이 바로 다음 동작이 실행되는 방식웹 페이지가 로딩되거나, 이벤트가 30초 이상이 걸린다면,웹 페이지는 이 동작이 끝날 때까지 화면에 나타나지 않거나 다음 동작에 지장을 주게 된다.또, 요즘 사용자들은 이런 웹 사이트를 원하지 않는다.(느리고 응답이 없는)그렇기 때문에자바스크립트가 웹 사이트에서 동작할 때,비동기적으로 동작할 수 있어야 한다.1. 동시에 여러 작업을 수행할 수 있음2. 흐름을 예측하기 어려움3...

CRUD만 나오면 눈물이 주르륵 나오는게자바스크립트 문제인가 싶어서자바스크립트 걷기반, 종합반까지 공부하고오랜만에 create부분을 혼자 만들어봤다. 시간이 좀 많이 걸리긴 했지만 만들었다.시간이 많이 걸렸던 이유는 import와 export방법에 문제가 있어서였다.  TodoList.jsx에서 (맞는 경로로) export를 해줬고App.jsx에서 import를 받아왔는데export TodoList 부분이 잘못됐다고 떴다.그래서 튜터님을 찾아갔는데'export'와 'TodoList' 사이에 'default'를 추가하거나'TodoList'를 '{TodoList}'로 변경해 주어야 한다고 하셨다. 맨날 이렇게도 입력해보고 저렇게도 입력해봐서되는걸 사용했는데 나름 규칙이 있었다.export를 'default'..