hwlink

React에서 함수 컴포넌트의 rendering이란 state, props를 기반으로 UI 요소를 그려내는 행위이다.  (state, props) ⇒ UI    Side Effect 부작용, 부수 효과라고도 부르는 Side Effect는 일상 생활의 맥락에서는 부정적인 의미로 사용되는 경우가 많지만 프로그래밍 측면에서의 Side Effect는 단순히 부정적인 의미로만 사용되지 않는다.아래처럼 input - output 이외의 다른 값을 조작한다면, 이 함수에는 Side Effect(부수 효과) 가 있다고 표현한다.let count = 0function helloWord(name) { // Input count = count + 1 // Side Effect return `${name}..

Coding/React 2021. 12. 5. 11:26

REST 웹에 존재하는 모든 자원(resorce, ex. 이미지, 동영상, 데이터)에 고유한 URI를 부여하여 자원에 대한 주소를 지정하는 방법론, 또는 규칙. REST 특징 인터페이스 일관성 : 일관적인 인터페이스로 분리되어야 한다 무상태(Stateless): 각 요청 간 클라이언트의 콘텍스트가 서버에 저장되어서는 안 된다 HTTP 프로토콜은 Stateless Protocol이므로 REST 역시 무상태성을 갖는다. Client의 context를 Server에 저장하지 않는다. Server는 각각의 요청을 완전히 별개의 것으로 인식, 처리한다. Server의 처리 방식에 일관성을 부여하고 부담이 줄어들며, 서비스의 자유도가 높아진다. 캐시 처리 가능(Cacheable): 웹 표준 HTTP 프로토콜을 그대..

Coding/Network 2021. 12. 4. 22:50

참고: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