kasumil의 코딩 공작소

import React, { Component } from 'react'; export class App extends Component { constructor() { super(); this.state = { id: '', pw: '' }; } handleID = event => { // console.log('event.target.value: ', event.target.value); this.setState({ id: event.target.value }); }; handlePW = event => { // console.log('pw event 실행'); this.setState({ pw: event.target.value }); }; handleLogin = () => { // data 송신..

인증/인가 필수요소인 패스워드 암호화 인가의 필수요소인 JWT 인증의 정의 유저의 정체성을 확인하는 절차. 즉, 본인인지 확인하는 절차로 ID와 Password를 확힌하는 절차. 인증을 위해서 id와 password를 생성하는 기능도 필요. 인가의 정의 인가란 유저(user)가 요청한 실행을 할 수 있는 권한이 있는지를 확인하는 것. 즉, 유료로 작동하는 기능이 있는데, 이를 사용할 수 있게 해당유저가 유료로 구매했는지 안했는지를 파악하여 이를 권한을 부여하여 해당 request의 실행여부를 판단하게 해주는 것. 이러한 인가와 인증의 정의를 한번 보았다. 그렇다면 이제 로그인이 진행되는 과정을 보자. 로그인 절차. 1) 유저id와 password를 생성. 2) 해당 유저의 id, password를 암호화..

본격적으로 리액트에 대한 강의 수업에 대한 정리입니다. React.js - javaScript의 라이브러리. jsx - javaScript의 확장버전. js 파일내에 jsx 문법이 있으면 브라우저 내에서 해석이 불가능. React.js 사용하기 위해서 jsx 문법이 포함되어 있으면, javascript 문법으로 변환하는 컴파일 과정이 필요. JSX element HTML문법을 JS코드에 작성하면 바로 그것이 JSX. JSX Attribute(속성) - 항상 ""(쌍따옴표)로 작성해야함. (클래스를 주고 싶을땐 class="이름"이 아니라 className="이름"으로 작성해야함.) Self-Closing Tag - 기존 HTML은 여는 태그, 닫는 태그가 있었지만, 였으나 로 구현가능. Nested JS..

위스타그램에 add ., commit, push를 진행함. 이와 같이 기존에 하던 위스타그램의 main.js 파일을 마저 완료할 것을 요청받음. 그런데, 아무리 push할지라도 문제 pull request가 발생하지 않아서 무엇이 문제인가 확인했는데, git config 문제였음. git config --global user.name git config --global user.email useremail@example.com 즉 사용자 정보를 기입해야하는데, 이전에 올리다가 실패한 사례가 있어서 이를 해결하지 못하고 진행한게 있어 그것을 해결하고 올린 줄 알았는데, 해결되지 아니하여 시간낭비를 이끌었음. 오전의 코드카타 문자열이나 숫자를 reverse하여 리턴하는 방식. 의외로 변수가 많아서 짝궁도 이..

Data 구조 1. 데이터 구조란 데이터에 편리하게 접근하고 조작하기 위한 데이터를 저장하거나 조작하는 방법 2. 자료 구조의 종류에는 여러가지가 있으나 모든 목적에 부합하는 자료구조는 없습니다. 따라서 각각의 데이터 구조가 갖는 장단점을 잘 이해하여 상황에 맞는 데이터 구조를 사용하는 것이 중요함. 3. 데이터 구조의 종류와 그것에 대한 사용방법을 익히는 것이 중요하지만, 제일 중요한 것은 자료구조의 본질과 컨셉을 이해하여 상황에 맞는 적절한 데이터 구조를 선택하는 것이 중요함. 왜 데이터 구조인가? 1. 데이터에 맞는 적절한 자료 구조를 사용하는 것은 전제 개발 시스템에 큰 영향을 끼칩니다. 왜 그럴까요? 예시를 들어보겠습니다. 17인치 3kg 짜리 노트북이 있습니다. 이때 여러분은 이 노트북을 직접..

리눅스 와 깃... 원래는 이틀 수업치인데, 시간이 없어서 시간에 쪼들려서 어쩔 수 없이 묶어 버렸다. 이것을 작성하는 오늘.... 3일치가 되어버렸다. 살려줘! 그래도 어쩔 수 있나 배운 것을 정리하고 복습해야 그래야 뇌에 쏙쏙 박혀버리니까. 리눅스 설명은 간단합니다. ✔️ linux가 무엇인지 이해한다. 멀티태스킹을 지원하는 유닉스처럼 보이는 운영체제이다. 하지만 리눅스는 유닉스와는 독립적으로 개발되었으므로 유닉스 계열 운영체제가 아니라 유닉스 클론(Clone) 운영체제이다. ✔️ 리눅스의 기본 명령어들과 파일시스템 구조를 이해한다. 리눅스 파일 계층 명령구조. 명령어 사 용 법 login 사용자 인증과정 리눅스 시스템은 기본적으로 multi-user 개념에서 시작하였기 때문에 시스템을 이용하기 위해..

Number 수학계산에 사용되는 메소드를 보도록 합시다. 수학계산에 사용되는 JavaScript Math객체를 사용합시다. 절대값 구하기, sin, cos, 제고급근 등 Math객체에 수학계산 메소드가 있습니다. 하지만 사용되는 것은 일부분입니다. 물론, 사용하려면 죄다 사용이 가능하죠. 마우스이 클릭한채 당기면 따라오면서 기타줄 같이 튕기는 방식의 구현도 수학Math객체를 이용한 방법입니다. 반올림 함수Math.round(**) 입니다 Math.round(2.7); Math.round(2.4); Math.round(1.4); 위의 함수를 한번 console.log로 콘솔창에 찍어보세요. 값은 3 2 1 로 출력되었을 겁니다. 이러한 이유는 우리가 알던 기본적인 반올림 방식과 같게 출력되었습니다. 그렇다..

string 말 그대로 문자열이다. back tik(``)만 아니고 '', "" 따옴표, 쌍따옴표로 감싸져 있으면 정상적으로 문자열이다. 나중에 back tik도 문자열이 되긴했지만, 이건 지금 배우는 내용이 아니니 따옴표만 문자열로 알도록 하자. string을 대문자로 만들기 toUpperCase와 toLowerCase 함수를 이용해서 변환을 가능할 수 있다. let lastName = 'Yeri Kim'; let upperLastName = lastName.toUpperCase(); let lowerLastName = lastName.toLowerCase(); console.log(lastName); console.log(upperLastName); console.log(lowerLastName); ..

for문. while과 같은 반복문이나 매우 어려움을 준다. 왜냐하면 반복문을 돌릴때 조건을 줘야하는데, 이러한 조건을 짜서 이를 작동하도록 유도하는 것이 어렵기때문에 그렇다. 한마디로 내가 원하는 것은 이 반복문이 특정 string이 출현되었을때 return하거나 아니면 continue하거나인데, continue는 이때 배우지 않으니 else를 써야하고 이러한 상황의 반대에서 이러한 조건을 찾도록 해야함에 따라 매우 어려운 난이도였다. for 문의 구조는 이러하다. for (반복 조건) { // 반복 조건이 맞으면 실행할 코드 기입. } 이때 반복 조건은 이러하다. for (var 또는 let =i; i=0; i--) { let number= array[i]; if ( number

뭔가 코딩을 배우는건지 그냥 코딩학습 자료를 베껴오는데 혈안이 된건지 구분이 안되서 그냥 간단히 내용을 정리하고 나의 생각등을 정리하는데로 방향을 잡아야겠다고 생각되었습니다. 다른 분 웹로그에 정리한 것을 보니 엄청 잘해놓으신 게 있길래 가급적 그런 스타일로 작성하도록 노력하겠습니다 텍스트 문자열의 연결 alert를 치면 알람이 출력된다. "안녕하세요 김모씨"라고 출력했었다,. 하지만 이를 바꿀 수 도 있다. var username = "김모씨"; alert(username); var message = "안녕, "; var username = "김모씨" var hello = message + username; console.log(hello); 그러면 이제 자동으로 출력으로 "안녕, 김모씨"로 출력된다...