hwlink

참고:https://ko.reactjs.org/docs/lists-and-keys.html 인스타그램 메인페이지 댓글기능에서 인풋값을 담은 배열을 map 메서드를 이용하였다. 아래와 같은 warning이 발생하여 공식문서를 참고하여 답을 찾았다. Key Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것입니다. 대부분의 경우 데이터의 ID를 key로 사용하며 배열를 분류한다거나 정렬을 새로할 경우에 값이 바뀔 수 있으므로, index를 key값으로 주는 것..

Coding/React 2021. 11. 23. 22:46

서버단에서 이뤄지는 인증 & 인가를 정리해보려합니다. 인증과 인가 인증, 인가 정의 단방향 해쉬란? salting & key stretching이란? Bcrypt와 JWT 1. 인증 Authentication 인증은 유저의 identification을 확인하는 절차(유저의 아이디와 비밀번호를 확인하는 절차) 인증을 위해선 회원가입 기능 필요 1-1 로그인절차 유저 아이디 비번 생성 >> 유저 비번 암호화 DB저장 >> 유저 로그인(Id, Pw 입력 ) >> 입력된 Pw 암호화 >> DB 저장된 비밀번호와 비교 >> 일치 시 로그인 >> 로그인 성공시 유저에게 access token이 발행 > *access token이 발행된 이후 고객은 인가가 필요한 페이지에선 Token을 서버에게 전송하므로 매번 로그..

Coding/Network 2021. 11. 23. 10:26

최종구현목표리액트로 인스타그램 클론코딩  깃으로 공유한 Nav.js, variables.scss, reset.scss, common.scss  state와 함수 댓글이 입력된 댓글리스트를 컴포넌트화컴포넌트화 된 리스트 map 메서드 사용 form tag 내부 input, button 리스트와 이벤트  ㅇ 구현 사항 설명로그인, 피드 레이아웃팀원들간 nav 컴포넌트 공용사용팀원들간 variables.scss 변수 지정하여 공동사용useState 활용하여 로그인, 피드 댓글 기능 추가작성할때마다 나타나는 Review 컴포넌트화하여 map함수로 구현하였습니다.로그인 유효성 검사, 댓글 input 유효성 검사 (조건문을 활용하여 로그인버튼,..

Coding/React 2021. 11. 22. 09:59

인스타그램 클론 로그인구현목표: 아이디에 @가 포함되고 비밀번호 자릿수가 5자리 이상이여야 로그인 버튼이 활성화 되며  /   main 페이지로 이동가능하다. 조건을 만족하지 못하면 로그인페이지에 머무른다.  email, password, handleIdInput, handlePasswordInput  스테이트와 함수 input  이벤트리스트 useState 이용이메일과 패스워드를 저장할 state 선언 로그인 버튼 활성화 되게 하기 로그인 버튼 활성화는 미리 스타일링 해둔 클래스를 추가하는 방식으로 진행하였다. 버튼의 비/활성화를 담당할 isActive를 false로 할당해줍니다.button className ={. } 에 삼항연산자를 적용해 위에 onKeyUp으..

Coding/React 2021. 11. 20. 14:32

깃으로 pull을 받았는데 팀원들은 Prettier 적용이 잘되었는데 나만 적용이 안되는 오류가 발생했다. 1. Preference >> Default Formatter 검색후 해당 옵션이 null,none 으로 되어 있는 것을 Prettier로 변경해준다. 2. f1키를 눌러 나오는 창에서 Format Document With... 를 선택한다 3. 이후 Prettier - Code formatter를 클릭해주고 에러가 난 파일들을 저장해주면 올바르게 적용 되는 것을 볼 수있다.

Coding/WEB 2021. 11. 18. 13:17

Q. reverse 함수에 정수인 숫자를 인자로 받습니다. 그 숫자를 뒤집어서 return해주세요. x: 숫자 return: 뒤집어진 숫자를 반환! 예들 들어, x: 1234 return: 4321 x: -1234 return: -4321 x: 1230 return: 321 const reverse = x => { let toStr = String(x); //넘버를 스트링으로 전환 let result = Array.from(toStr);// 각각의 배열로 저장 ['2','3','4','5'] result.reverse();// 배열을 리버스 해주는 배열 메서드 ['5','4','3','2'] let aa2 = result.join(''); // join() 메서드는 배열의 모든 요소를 연결해 하나의 문자..

Coding/알고리즘 2021. 11. 16. 20:54

Q.find_longest_word 함수를 만들어 주세요. 주어진 리스트 안에 있는 단어 중 가장 긴 단어를 찾을 수 있도록 함수를 완성해주세요. function find_longest_word(arr){ let max = arr[0]; for(let i=1; i max.length){ max = arr[i]; } } return max; } console.log(find_longest_word(["PHP", "Exercises", "Backend"])) 1차로 기준이 되는 max라는 변수를 지정해두고 배열값들은 순회하며 비교해주어 초기값보다 큰 값만 max에 담아 반환해주는 함수를 구성했다. 동기중 sort 매서드를 이용하여 훨씬 간..

Coding/JS 2021. 11. 13. 17:14

Q. 문자와 문자열이 주어졌을때, getFind 함수는 주어진 문자열에서 주어진 문자가 나타나는 첫번째 위치를 반환합니다. 없으면 -1 반환 function getFind(filter, sentence) { const setArr = [...sentence]; console.log(result); // ['I', ' ', 'a', 'm',' ', 'a', ' ', 'h', 'a', 'c', 'k', 'e', 'r'] const findIndex = setArr.findIndex(el => el === filter); return findIndex; } const output = getFind('a', 'I am a dudud') console.log(output) // --> 2 처음에는 인자를 배열로 ..

Coding/JS 2021. 11. 13. 16:17