라쿤의 끄적끄적

React Hooks 노마드코더 : React Hooks 노마드코더의 React Hooks 강의를 듣고 작성 함 Hooks 앱을 리액트 훅으로 만들면 class component, did mount, render ...등이 필요 없어짐 모든것은 하나의 function이 됨 이제는 functional programming(함수형 프로그래밍)스타일이 됨 Hooks는 react의 state machine에 연결하는 기본적인 방법임 Hook의 시작 recompose라는 라이브러리에서 시작되어 리액트 팀이 인수함 그리고 react에서 hook으로 릴리스 함 useState (React hook) useState는 항상 2개의 value를 return함 첫번째value는 이름을 주고(useState의 값을 불러옴)..

정규 표현식 드림코딩by엘리 : 정규표현식 강의 드림코딩 엘리의 정규 표현식 강의를 찾아 들었다. 정규 표현식 (Regular Expression) regex 텍스트에서 특정 패턴을 찾을때 요긴 함(ex. 이메일, 전화번호, 등 패턴...) 패턴 유효성 검사 여러가지 언어를 지원하고 있으며, 심지어 여러 에디터에서도 정규표현식을 사용한 검색을 지원하고 있음 / /처럼 슬래쉬(slash)들을 사용하여 정규표현식을 알려주고 안에 찾고자 하는 패턴(pattern)을 넣고 외부에 옵션(flag)을 적어 활용할수 있음 /pattern/flag Pattern 예제 참고 사이트01 예제 참고 사이트02 Groups and ranges | : 또는 (ex. /hi|hello/gm) -> hi, hello () : 그룹..

바닐라 js를 이용한 그림판 만들기 project Nomadcoder 사이트 클릭! 그림판 만들기 강의는 모두 끝냈고 내가 더 추가하고자 하는 기능을 구현 해 보았다. 추가적으로 구현한 기능 그림판 사각 툴 가이드 라인 기능(Rectangle Guideline of Rectangle Tool) 어제 사각 툴의 경우 구현은 했지만 사각툴의 가이드 라인을 만드는 것이 너무 나도 어려웠다. 결론 부터 이야기 하자면 드디어 구현했다 ~ ! 기능을 설명하자면, 이전에 사각툴을 이용하게 되면 해당 부분에 드래그를 할때 사각 형 가이드 라인이 보이지 않았다. 계속 시도 하고 했지만 기능을 구현하는데는 실패 하였고 오늘만에 만들었다. 01 : HTML 위에 표시 되기 위한 요소를 하나 추가했다. 02 : 요소 이벤트 ..

바닐라 js를 이용한 그림판 만들기 project Nomadcoder 사이트 클릭! 그림판 만들기 강의는 모두 끝냈고 내가 더 추가하고자 하는 기능을 구현 해 보았다. 추가적으로 구현한 기능 도형 툴 도형 툴 중에 사각형 도형 툴을 만들기 위해서 엄청나게 많은 시간을 쏟았다. 일단 여러 시행착오를 많이 겪었다. 원래는 그림판 처럼 그었을 때 사각형 도형 가이드 라인이 보였으면 했다. 하지만 여러가지 장벽을 만나 포기하게 되었다. Canvas API의 한계인것 같다. 사각형 그리기 툴 기본적으로 html을 통해 rect 버튼을 만들었다. Rect html 요소 가져오기 // ELEMENTS const canvas = document.getElementById("jsCanvas"); const ctx = c..

바닐라 js를 이용한 그림판 만들기 project Nomadcoder 사이트 클릭! 그림판 만들기 강의는 모두 끝냈고 내가 더 추가하고자 하는 기능을 구현 해 보았다. 추가적으로 구현한 기능 커스텀 색깔 픽커 (Custom color picker) 저번에 다른 기능을 구현하다가 input 태그의 color 타입이 있는 것을 보았다. input의 color 은 custom 가능한 창을 열어서 색을 input 할수도 있다. 문제 input color의 경우 모양을 자유자재로 변경이 불가능 했다.(radius 값을 줄수 없다.) 방안 01 새로운 요소(div)로 감싸서 div를 커스텀하여 표시하게 하고 input을 display none으로 설정하여 Javascript를 통해서 연결한다. check 요소에도 ..

바닐라 js를 이용한 그림판 만들기 project Nomadcoder 사이트 클릭! 그림판 만들기 강의는 모두 끝냈고 내가 더 추가하고자 하는 기능을 구현 해 보았다. 추가적으로 구현한 기능 현재 색 표시 .controls .check { margin-bottom: 30px; width: 50px; height: 50px; border-radius: 25px; box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); } const check = document.getElementById("jsCheck"); check.style.backgroundColor = INITIAL_COLOR; function handleColorC..

바닐라 js를 이용한 그림판 만들기 project Nomadcoder 사이트 클릭! 저번 시간에는 기본적인 CSS, HTML 그리고 JS의 그리기 기능 까지 구현했다. VScode 다중커서 Ctrl + d : 같은 단어 찾아서 추가식으로 선택 Ctrl + Alt + Up/Down : 위/아래로 커서 추가 ALT + LMB(왼마클) : 클릭 위치에 다중커서 추가 ESC : 다중선택모드 종료 이번에 구현할 사항 색 바꾸기 js 붓 크기 바꾸기 js 채우기 기능 js 이미지 저장하기 js JS : 색 바꾸기 기능 구현하기 colors 변수에 dom을 가져옴 colors 변수를 Array로 만들고 forEach()를 통해서 dom하나하나를 callback함수로 컨트롤 함 callback 함수로는 Array의 i..

바닐라 js를 이용한 그림판 만들기 project Nomadcoder 사이트 클릭! 그림판 전체적인 기능 Canvas API를 이용함 굵기 조절 색깔 선택 그리기 채우기 저장 기능 사전에 필요한 것들 깃헙 계정 구글 크롬 VScode Set up HTML CSS, js 파일 연결 전체적인 요소 구현 convas 태그 사용 CSS CSS 초기화 파일 만들기 (reset.css) CSS RESET code RESET CSS을 CSS파일에 연결하기 @import "위치" display : flex flex 속성 알아보기 @import "reset.css"; body { background-color: #f6f9fc; font-family: -apple-system, BlinkMacSystemFont, "Seg..

Yalco 얄팍한 코딩사전이라는 아주 좋은 코딩 유튜버 분이 계시는데 비전공자의 눈높이에 맞게 여러 용어등을 설명해 주시는데 아주 좋다. 오늘은 이러한 것들을 보고 지금까지 배운 내용들과 비교하여 부족한 부분들을 살펴보며 용어에 대해서 검토하는 시간을 갖고자 한다. Yalco 사이트! 클릭 디버그(Debug) : 소프트웨어에 발생하는 문제의 원인을 찾는 것 (개발의 대부분의 과정) 개발 중인 상태(배포와 반대되는 개념) 코드를 직접 돌려서 어디부분에서 문제가 생기는지 알아보고 해결 함 에디터 대부분이 중간에 검문소를 두어 이를 통과하는 값들을 살펴 볼수 있도록 하는 기능(디버깅 툴)을 제공하고 있음 컴파일러(Compiler) vs 인터프리터(Interpreter) 둘다 모두 우리가 개발할때 쓰는 언어들을..

React.js and React project(영화 웹 서비스 만들기) with nomadcoder 저번에는 자바스크립트 기초강의의 todolist 크롬 앱을 구현했는데 이번에는 React를 배우고 입문하기 위해서 노마드 코더의 react js로 만드는 영화 웹서비스 만들기 강의를 수강하였다. 물론, 무료이다. 정말 좋은 강의 이고 저번 todolist 강의에서 처럼 어떤 형태로 쓰이는지 전체적인 감이 올것이라고 생각한다. 노마드 코더 사이트! 단지, 노마드 코더 강의를 듣고 공부 과정을 서술하듯 쓸 것이다. 본 자료를 무턱대고 믿지는 말았으면 좋겠다. 내가 이해하는 대로 쓴 것일뿐이니... Github 페이지를 통한 배포(Deploying) 설치 npm i gh-pages gh-pages : 웹사이트..

React.js and React project(영화 웹 서비스 만들기) with nomadcoder 저번에는 자바스크립트 기초강의의 todolist 크롬 앱을 구현했는데 이번에는 React를 배우고 입문하기 위해서 노마드 코더의 react js로 만드는 영화 웹서비스 만들기 강의를 수강하였다. 물론, 무료이다. 정말 좋은 강의 이고 저번 todolist 강의에서 처럼 어떤 형태로 쓰이는지 전체적인 감이 올것이라고 생각한다. 노마드 코더 사이트! 단지, 노마드 코더 강의를 듣고 공부 과정을 서술하듯 쓸 것이다. 본 자료를 무턱대고 믿지는 말았으면 좋겠다. 내가 이해하는 대로 쓴 것일뿐이니... HTML 구현 main container 만들기 (section tag로 container) loading ht..

React.js and React project(영화 웹 서비스 만들기) with nomadcoder 저번에는 자바스크립트 기초강의의 todolist 크롬 앱을 구현했는데 이번에는 React를 배우고 입문하기 위해서 노마드 코더의 react js로 만드는 영화 웹서비스 만들기 강의를 수강하였다. 물론, 무료이다. 정말 좋은 강의 이고 저번 todolist 강의에서 처럼 어떤 형태로 쓰이는지 전체적인 감이 올것이라고 생각한다. 노마드 코더 사이트! 단지, 노마드 코더 강의를 듣고 공부 과정을 서술하듯 쓸 것이다. 본 자료를 무턱대고 믿지는 말았으면 좋겠다. 내가 이해하는 대로 쓴 것일뿐이니... 1. React- State Component Life Cycle 일단, 우리가 만드는 class compone..

React.js and React project(영화 웹 서비스 만들기) with nomadcoder 저번에는 자바스크립트 기초강의의 todolist 크롬 앱을 구현했는데 이번에는 React를 배우고 입문하기 위해서 노마드 코더의 react js로 만드는 영화 웹서비스 만들기 강의를 수강하였다. 물론, 무료이다. 정말 좋은 강의 이고 저번 todolist 강의에서 처럼 어떤 형태로 쓰이는지 전체적인 감이 올것이라고 생각한다. 노마드 코더 사이트! 단지, 노마드 코더 강의를 듣고 공부 과정을 서술하듯 쓸 것이다. 본 자료를 무턱대고 믿지는 말았으면 좋겠다. 내가 이해하는 대로 쓴 것일뿐이니... React- JSX & PROPS component에 정보 보내기 react는 재사용가능한 component를 ..

React.js and React project(영화 웹 서비스 만들기) with nomadcoder 저번에는 자바스크립트 기초강의의 todolist 크롬 앱을 구현했는데 이번에는 React를 배우고 입문하기 위해서 노마드 코더의 react js로 만드는 영화 웹서비스 만들기 강의를 수강하였다. 물론, 무료이다. 정말 좋은 강의 이고 저번 todolist 강의에서 처럼 어떤 형태로 쓰이는지 전체적인 감이 올것이라고 생각한다. 노마드 코더 사이트! 단지, 노마드 코더 강의를 듣고 공부 과정을 서술하듯 쓸 것이다. 본 자료를 무턱대고 믿지는 말았으면 좋겠다. 내가 이해하는 대로 쓴 것일뿐이니... project를 위한 환경설정 node.js 설치 node.js 홈페이지에서 설치 가능(cmd에 node -v를..

지금까지 개발 공부를 해오면서 여러가지 고민들에 봉착하였다. 지금 까지 공부해온 내용들을 되짚어 보면 파이썬 기본 문법부터 시작해서 django 프레임 워크 사용까지 공부했고 더깊게는 아직 들어가지 않은 상태이다. 그리고 최근에는 동적인 웹사이트 구성에 관심이 생겨 javascript, es6에 대해서 공부하고 실질적으로 dom요소를 제어해서 todolist라는 동적인 구성의 웹페이지를 구현해 보기도 하였다. 지금 공부한 것을 보면, 백엔드 지식은 python, django 프론트엔드는 javascript로 조금 알아 보았는데 django에 대해서 더 깊이 공부해서 백엔드 위주로 갈까 아니면 react 등의 프론트 엔드 스텍을 더 배워서 프론트 엔드로 취업 목표를 잡을지 고민된다. 고민 1. python..

js가 프로젝트에서 어떻게 사용되어지는지 알기 위해서 노마드 코더의 강의를 들었고 단지, 내 수준에서 필요한 것만 회고하듯 정리함 노마드 코더 강의 잘되어 있으니 듣길 바란다. JavaScript with Nomadcoder JavaScript project nomadcoder에서 진행하는 이 강의의 프로젝트는 클론 코딩이다. 클론 대상은 momentum 이라는 Todolist 페이지 이다. 특징은 가운데 시계가 있고, 배경이 변하고, todolist기능, 날씨 정보기능이 있다. 현재 해당 강의는 모두 들어서 프로젝트는 끝냈으나 추가적인 기능 및 CSS를 추가하여 마무리 하였다. CSS 적용하기 기본적으로 dorder-box 단위 처리 * { box-sizing: border-box; } 기본 폰트 si..