kasumil의 코딩 공작소

위니또 시작. 그룹 프로젝트의 첫날이라서 사이트는 Aesop으로 결정되고, 일단 해당 클론할 부분을 받았다. 해당 부분은 로그인 부분. modal 팝업으로 구현되어야하나, 그냥 일단 기능 구현을 위주로 하여 애니메이션을 죄다 걷어내고 해당 기능만 일단 구현을 하도록 받았다. 일단 그냥 베끼기로 했다가 이러지 말고, 나의 className을 쓰라고 하여 기본적으로 해당 회사의 코드 등을 베끼었다가 나한테 맞게 코드를 수정하고, 해당 코드들의 class name을 수정하였다. 애니메이션을 걷어내고 비교적 간단한 부분이라 금방 작성할 거 같은데, Aesop 회사 회원가입 좀 구린거 같다. 애니메이션이 작동하는데, password 일치 여부에서 타이핑 즉시 일치여부를 보는 것이 아니라, 다 쳐놓고 다른 곳을 클..

이번 내용은 React의 내용입니다. 12번의 내용이 작성중에 날라갔기에... 어쩔 수 없이 13, 14의 내용이 먼저 올라갔음을 사과하는 바입니다. ㅠ constructor () { console.log(""); super (); } constructor는 최우선으로 불려짐. this.state = { a : 10, b : 20 } setState state값을 수정. 이때 render를 부르지 않으면 화면에 출력되지 않음. 키값은 수정되었으나 return에서 렌더를 불러와줘야함. }> 애로우 펑션을 사용할 것. => 애로우 펑션은 자바스크립트에서 쓰는 ECMA6의 용어라서 나는 가급적 쓰질 않아 처음에는 '저게 뭐지?'하고 이해를 하지 못했다. 애초에 잘 쓰지 않는 부분이라 헷깔려했는데, 나중에 추가..

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); ..