티스토리

코딩공부일지

검색하기

블로그 홈

코딩공부일지

horangmalko10.tistory.com/m

호랑말코호랑 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

Reducer 코드 뜯어보기 let user = createSlice({ name : 'user', initialState : [ {id : 0, name : 'White and Black', count : 2}, {id : 2, name : 'Grey Yordan', count : 1} ], reducers : { plusNum(state, action){ let num = state.findIndex((a)=>{return a.id=== action.payload}) state[num].count++ }, minusNum(state, action){ state[action.payload].count-- } }, }) 얘는 sparta coding클럽에서 배우던거의 전...? 이전 느낌의 버전인것같다. 스팔타에서 배우던거는 act.. 공감수 0 댓글수 0 2022. 6. 6.
useEffect hook mount, update, unmount 할 때 사용하는 react hook 그래서 얘는 왜쓴다고? 원래대로라면 빙글빙글돌아가는 멧돌~~~~~~커다란돌멩이는 짱돌~~~~~~~~ 수도 없이 다시 리로드 되는데 이렇게되면 리로드 되지 않길 바라는 함수도 리로드 될 수 있기 때문에 그걸 막아주기 위해서 유즈이펙트로 막아준다. 채팅 서버에 연결한다던가 등 컴포넌트가 마운트되면서 처음 1회만 수행되어야 하는 동작이 필요할 때 useEffect를 사용할 수 있으며 컴포넌트가 마운트될 때 뿐만 아니라 원하는 값이 변경될 때도 이펙트를 호출할 수도 있다. useEffect를 통해서 특정 코드들이 component가 처음 생성될때만 실행되게 바꿀 수 있는 것을 볼 수 있다. useEffect 콜백함수 사용 useEffe.. 공감수 0 댓글수 0 2022. 5. 28.
State React에서 State는 필수로 알아야할 요소이다. 알고리즘 주차까지 공부했던 것과는 다르게 let은 쓰지 않고 변해야할 변수가 있다면 let이 아닌 useState를 사용하여 변수취급을 해준다.거의 대부분의 선언은 const로 한다! let쓰지마!!!!!!! for문 if문 쓰지마! 왜냐면 for ,if에 return값을 주게되면 함수는 어떤 값을 리턴할지 양자택일 하기 때문에 중요함뮤.. state변경함수 특징으로는 기존state와 신규state의값이 같을경우 변경해주지 않는다는 특징이 있다. 또한 arr나 object 데이터를 가져와서 변경해주려면 새로 독립적인 카피본을 만들어서 변경해줘야 적용됨.(깊은복사) 예를들어 arr = [a,b,c]일 때 arr를 state로 입혀서 0번째 인덱스 즉 a.. 공감수 0 댓글수 0 2022. 5. 23.
코딩앙마 JS DOM & EVENT 정리 🧡DOM(Document Object Model) >> 문서 객체 모델 HTML문서의 각 요소들을 트리형태로 표현해줌 >>개발자는 자바스크립트를 이용해서 이를 생성 수정 삭제가능 >>트리 형식의 자율 구조. >>하나의 객체를 노드라고 부름. 트리에서 위쪽은 부모 노드 아래쪽을 자식 노드라고 합니다. >>도큐먼트를 제외하고 최상단에 있는 html은 루트 노드가 됩니다. 🧡유사 배열 >>>진짜 배열처럼 배열 관련 메서드를 사용할 수 있는건 아님 >>> for..of사용 1) document.querySelectorAll('p') >>>NodeList 생성 --- 한 번 저장된 값을 계속 사용함 2) document.getElementsByTagName('p') >>>HTMLCollection 생성 --- h.. 공감수 0 댓글수 0 2022. 5. 21.
코딩 앙마 왕초보 모르는 부분만 정리해보자구! 💚While문 while(true){ let answer = confirm('계속할까요?'); //계속 할까요? 라는 알람창을 띄우고 예 누르면 알람창 반복으로뜸 if(!answer){ break; //아니오라면 멈춤 } } for 문과 비슷하지만 명확한 횟수가 정해져 있으면 for문 정해져있지 않다면 while문을 쓰는게 좋다. for(let i =0; i 공감수 0 댓글수 0 2022. 5. 21.
노마드 코더 바닐라 JS-2 function onLoginBtnClick(){ const username = loginInput.value; if (username === ""){ alert("Plz write your name") }else if(username.length>15){ alert("too long!") } } 위와 아래 같은 작용 html적용 Log In 클릭시 자동으로 submit 후 새로고침 Log in 이름의 버튼이 생성됨 엔터로도 submit가능 const loginForm = document.getElementById("login-form"); const loginInput = loginForm.querySelector("input"); function onLoginSubmit(event){ event.pr.. 공감수 0 댓글수 0 2022. 5. 20.
Array.map()함수 프로그래머스 코딩 문제 풀면서 가장 많이 남들의 답으로 봤지만 가장 이해가 되지 않았던 map함수에 대해 오늘 조원들과 같이 머리를 싸매고 고민했다... 그런데!!!! 너무 설명이 잘 되어 있는 블로그를 찾게 되었다. https://mjn5027.tistory.com/80 [ JavaScript ] 자바스크립트 map( ) 함수 값을 여러개 가지고 있는 배열에서 모든 값을 꺼내고자 할 때, 꺼내는 방법은 정말 다양하게 알려져 있다. 이번 포스팅에선 이러한 배열에서 값 꺼내는 방법 중 map( ) 을 다뤄보도록 하자. 아래와 mjn5027.tistory.com 여기 쓰신분이 진짜 너무 깔끔하게 map()의 예시와 설명을 적어주셔서 대략의 map의 이미지는 캐치했다. map( ) 함수는 값과 인덱스를 인자로.. 공감수 0 댓글수 0 2022. 5. 18.
arr관련 함수 arr.sort() 내림차순 정렬 숫자, 문자(영어) 모두 가능 arr.sort((a,b)=>a-b) 오름차순 정렬 Math.min() 수열중에 가장 작은값 도출 배열에서 min 값 찾으려면 Math.min(...arr) 얘는..ES6 문법인데 즉 최신 문법이라는 뜻이다. 그중에서도 Spread Operater 연산자중 하나인데. ES6에서는 '...'와 같이 다소 특이한 형태의 문법이 추가되었습니다. 점 3개가 연달아 붙어있는 이 표시는 Spread Opertor(스프레드 오퍼레이터, 스프레드 연산자, 전개 구문, 펼침 연산자...)를 나타내는 것으로, 배열, 함수, 객체 등을 다루는 데 있어서 매우 편리하고 재미(?) 있는 새로운 기능을 제공합니다. 출처: https://paperblock.tisto.. 공감수 0 댓글수 0 2022. 5. 18.
노마드코더 바닐라 JS 여태껏... html,python,css 파일 작성하면서 와 나 이런것도 할줄알아 이정도면 할수있겠어 했던 나의 그 자부심이 자바스크립트를 하면서 와르를르... 무너졌다ㅠ.ㅠ 뭐가이렇게 복잡한거야 그치만 재미는 있어!!!! 막 신기하긴해! 근데도대체 뭔소리야!!!! 공부 열심히해봐얒...휴 일단 오늘 배운 내용 querySelector - element를 CSS 방식으로 가져올 수 있음, 단 하나의 element를 가져옴 (여러개의 경우 제일 첫번째 것만 가져옴) querySelectorAll - 조건에 부합하는 모든 element를 가져옴 addEventListener 아래 코드에서 보다시피 js를 통해서 style값 또한 바꿀 수 있다. (이렇게는 잘 하지 않음) Event에는 어마어마하게 많은 명령.. 공감수 0 댓글수 0 2022. 5. 18.
배열 함수 관련 자주 쓰이는 문법 arr.filter Array.filter 원래 3항 연산자를 활용해 쭉쭉 문제를 풀어나가던 나는 false일 때 값을 넣고싶지 않아서 결국 for문을 사용하게 되었다. 하지만 너무억울해서 혹시나 한줄로 깔끔하게 풀수있는 함수있나 찾아보던중 arr.filter 라는 함수를 알게 되었다. 얘는 조건을 만족할때만 arr에 자동으로 붙여주는 콜백 함수이다. 예를 들어 간단히 설명해보자. 문제 설명 array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요. divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요. 제한사항 arr은 자연수를 담은 배열입니다. 정수 i, j에 대해 i ≠ j 이면 arr[i] .. 공감수 0 댓글수 0 2022. 5. 17.
유레카 삼항연산자 조건 (삼항) 연산자 조건 연산자는 JavaScript에서 세 개의 피연산자를 받는 유일한 연산자입니다. 조건 연산자는 주어진 조건에 따라 두 값 중 하나를 반환합니다. 구문은 다음과 같습니다. condition ? val1 : val2 만약 condition이 참이라면, 조건 연산자는 val1을 반환하고, 그 외에는 val2를 반환합니다. 다른 연산자를 사용할 수 있는 곳이라면 조건 연산자도 사용할 수 있습니다. 에들 들어, var status = (age >= 18) ? "성인" : "미성년자"; 위의 명령문은 age가 18 이상이라면 status 변수에 "성인"을 할당하고, 그렇지 않으면 "미성년자"를 할당합니다. 이거 if문 한 줄로 줄일 수 있는 엄청난 식이다....진짜 왜 유레카 외친지 알 것.. 공감수 0 댓글수 0 2022. 5. 14.
Hello Javascript 강의 내용 정리 몰랐던 부분만 추가해보자! Object 표현 ex) var man = {name:"홍길동", age : 20, height:180}; man.name >"홍길동" mane["name"] >"홍길동" man.name="이몽룡"; >"이몽룡" man.age=25; >25 man >object {name:"이몽룡", age : 25, height:180}; 자료형의 종류 number Type: 숫자 var a=100, b=3.14; string Type: 문자열 var c="안녕하세요", d="a"; boolean Type: 맞다/틀리다를 표현 var e = true, f = false var a= 2; 라고 변수값을 정의내린후에 typeof(a) 치면 number 출력, var a = "2"; typeof(.. 공감수 0 댓글수 0 2022. 5. 13.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.