Daily Log

map() 인자값: currentValue, index, array 배열의 요소를 일괄적으로 변경! var arr = ['dahae', 'dadong', 'mylove']; // arr의 요소하나를 돌면서 걔를 각요소 v의 길이length로 치환해라 var arr2 = arr.map(v => v.length) console.log(arr2); filter() 요소를 걸러내어 배열로 true/false 반환하고 없으면 빈 배열 조건이 true인 것의 원래 배열의 요소를 반환해서 배열을 만듬 var arr = [4, 15, 377, 395, 400] var arr2 = arr.filter( v => (v % 5 === 0)) console.log(arr2) //[15, 395, 400] find() 단 하나..

자바스크립트 순차적으로 함수 실행 useEffect(); * 처음 네트워크 한번만 렌더링할 때 사용 * 상태값 변화되는거 인지하고 뭔가 함수 실행할 때 사용함 useEffect(() => { if(check2) {setCheckAll(false)} else setCheckAll(true) },[check2, check3, check4, ]) 상태값을 계속 물고있으려면? 상위 컨테이너에서 useState로 선언해서 하위에 props로 넘겨야한다. 혹은 reducer 이용

React로 Checkbox 구현하기 0) 다중 선택 가능하도록 1) 한개만 선택 가능하도록 2) 전체선택/해제 가능하도록

Model View Controller V: 뷰컨트롤러는 멍청해야한다! iluvdadong/youtubeClonePJ Contribute to iluvdadong/youtubeClonePJ development by creating an account on GitHub. github.com 네트워크 통신은 따로 youtube.js에서 class로 만들어서 해줌 class로 만들어준 것은 다른 데서 instance로 만들어서 사용해야함 const youtube = new Youtube('sdf'); 그리고 위의 것은 딱 1번만 호출하는 곳에 코드를 심어야한다. 그렇지 않으면, 예를 들어 app.jsx의 컴포넌트 안에 심으면 리렌더링 될 때마다 instance가 만들어진다. 그래서 index.js에서 불렀음..

key in Object onst object_1 = { test_1:'test 1' } console.log( 'test_1' in object_1 ) // true console.log( 'test_2' in object_1 ) // false [Javascript] 객체에 해당 key값이 존재하는지 확인하는 방법 예전에 자바스크립트에서 한 객체가 특정한 키 값을 가지고 있는지 확인 한 뒤 처리 해야하는 로직이 있었는데, 그때 마다 내가 작성한 코드가 비효율적이란 생각을 떨치기 위해 공부하고 정리 velog.io

png 를 Ico로 만들 수 있다. 자동완성 키워드 rsi header component를 만들어야 함 -> 그 구성이 최상위 컴포넌트 에서 css 맞춰준다. display: flex; justify-content: center; 잘보면 최상컴포넌트 app.jsx는 div id root로 감싸져있다. 그래서 index.css 에서 id값 root로 css를 적용하면 하위 app모두 적용이 된다. CSS align-items 수직축 방향 정렬 align-items 수직축 방향으로 아이템들 정렬하는 속성 justify-content와 수직 방향의 정렬이라고 생각하시면 됩니다. HTML 위에서 button은 input과 함께 쓰기 때문에 type은 submit으로 해준다. Search Button 컴포넌트 만..

display: flex; 내용물의 width 만큼만 flex 아이템들은 가로방향으로 배치(마치 inline요소처럼) 줄바꿈 되는건 wrap이나 그런 속성으로 컨트롤 할 수 있음 height은 컨테이너의 높이만큼 늘어남(컬럼의 높이가 자동으로 쫙 맞음) align-items: center; 수직축 방향으로 끝까지 쭈욱 늘어남 stretch 위아래로 쭈욱 늘어남 center 위아래수직을 기준으로 중간에 배치됨. 세로를 기준으로 중간에 배치됨. justify-content: center; align-item: center; 을 해주면 아이템을 상하좌우 한가운데 배치할 수 있음 box-sizing:border-box; index.css에 아래와 같이 코드를 한 이유? box-sizing은 박스의 크기를 화면에..

* 아래 용은 드림코딩 앨리님의 유튜브 강의를 보고 정리한 내용입니다. CSS의 기본 요소 .box { //여기서 box가 selector width: 200px; // width, height 등은 어떤속성들을 꾸며줄지 작성하는 property height: 200px; // 200px, #fffff는 그에 해당하는 value이다. color: #ffffff; font-size: 16px; } 사이즈를 결정하는 Unit - 절대값 absolute ex. px - 상대값 relative ex. %를 이용해서 부모의 몇프로 값으로 하는 경우가 많다. px로 사이즈를 정하는 것은 좋지 않다. - 자주 사용하는 em, rem, vw, vh, % 정도 알고있으면 좋음. em - em: 지금 폰트사이즈를 나타내는..

Registration / Authentication Registration. CLIENT: 사용자에게 회원가입 시 필요한 데이터를 입력받고, 서버로 전달합니다 SERVER: 1. 전달받은 아이디(또는 이메일) 이 데이터베이스에 존재하는지 체크합니다 2-1. 이미 존재하는 아이디(또는 이메일)이라면, duplicate 에러 발생 2-2. 존재하지 않는다면 다음 단계로 패스 3. 비밀번호를 hash 알고리즘을 활용해 암호화 합니다 4. 암호화 된 비밀번호와 함께 데이터베이스에 새로운 사용자를 저장하고, 잘 저장되었다고 클라이언트에 알려줍니다Login, Authentication 로그인을 하는 목적은, 사용자가 권한이 있는지 없는지를 체크하기 위한 목적이 큽니다. 따라서, 권한을 체크하기 위해 JWT이나 세..

axios intercepter then이나catch로 처리되기 전에 요청이나 응답을 가로챌 수 있습니다. - 토큰을 체크한다던지 함 인터셉터 | Axios 러닝 가이드 인터셉터 then이나catch로 처리되기 전에 요청이나 응답을 가로챌 수 있습니다. axios.interceptors.request.use( function (config) { return config; }, function (error) { return Promise.reject(error); }); axios.interceptors.response.us xn--xy1bk56a.run