[생활코딩] React TIL 빠른 정리 #3
·
Programming/React
datatables의 그리드를 구성하게 될 데이터가 담겨있는 리스트는 반드시 "data" 라는 이름으로 전달받아야한다. CRUD Create Read Update Delete create, update, delete는 어떠한 페이지로 가서 오퍼레이션이 실행된다. delete는 링크같은 페이지 개념이 아니라 버튼과 같은 오퍼레이션 개념이다. style attribute를 쓸때는 다음과 같이 써야한다. style={{ width: 116 + 'px' }} state의 오리지널 데이터를 수정하는 메서드는 쓰지 말 것 concat을 권장 하지만, 난 rest문법을 사용할 꺼임. 배열의 경우 Array.from() 객체의 경우 Object.assign() 을 사용하면 원본을 해치치 않을 수 있음. props는 직..
[생활코딩] React TIL 빠른 정리 #2
·
Programming/React
state 소개 props는 사용자가 component를 사용하는 입장에서 중요한 것이고 state는 그 props의 값에 따라서 내부에 구현에 필요한 데이터들 component의 기본적인 동작을 바꾸고 싶을 때 props를 이용하여 component를 조작가능하다. component 내부적으로 사용되는 것들 그것들을 state 라고 한다. 외부의 props라는 것과 그 props에 따라 component를 구현하는 state는 철저히 구분되어 있어야 한다. state 사용 render 함수보다 먼저 실행이 되면서 그 컴포넌트를 초기화 시켜주고 싶은 코드는 constructor 내부에 작성한다. constructor(props) { super(props); this.state = {...} } 외부 사용..
[생활코딩] React TIL 빠른 정리 #1
·
Programming/React
공부 전략 CODING -> RUN -> DEPLOY CRA 설치: npm install -g create-react-app CRA 세팅: create-react-app . 개발환경 실행: npm run start 빌드: npm run build Component들을 id="root"인 곳에다가 넣기로 약속! 대부분의 파일은 src안에 삽입 (css, js) 등등.. src의 index.js 내부에 있는 코드 ReactDOM.render(, document.getElementById("root")); 중에서 이 Component임 import componentName from 'link' CRA는 상당히 무거움 1.7mb 정도 빌드를 하게 되면 CRA가 공백과 같이 불필요하게 용량을 차지하는 부분을 삭제..
[Netflix] 익스플레인: 뇌를 해설하다 #2. 꿈의 비밀
·
기타
"우리의 꿈은 전부 다 기억으로부터 만들어집니다." 깨어있을 때 (Awake) 우리의 뇌는 뉴런의 활성화로 인해 엉망인 상태. 모든 전기적 활동이 무질서한 전자기파를 발생시킴. 잠듬 (Slow-Wave Sleep) 전반적인 뇌의 활동은 극적으로 줄어듬. 렘수면 (Slow-Wave Sleep) 뇌파 상태가 깨어있을 때와 같아짐. 뇌가 움직이라고 신호를 보내지만 , 뇌간의 작은 부분인 뇌교가 움직임을 막음. 우리의 몸은 눈을 제외하고는 일시적으로 마비됨. 이때 눈이 빠르게 움직이는 데 이를 "빠른 눈 운동 수면 (렘수면)"이라 한다. 렘수면 상태일 때, 두뇌의 어떤 영역은 논리적 판단을 거치지 않기 때문에 우리의 꿈이 엉뚱한 것이다. 그리고 뇌에서 감정을 담당하는 부분이 전체적으로 밝아진다. 깨어있을 때 보..
[Netflix] 익스플레인: 뇌를 해설하다 #1. 인간의 기억
·
기타
기억에 대해서 가장 많은 것을 알려 준 것은 바로 헨리 몰레이슨이라는 사람의 뇌이다. 그는 27살 때 간질 치료를 위해 뇌 수술을 받았다. 수술로 인해 그는 뇌의 일부분을 제거하게 되었고 최근의 기억이 심각하게 손상되었다. 기억은 다음과 같이 나눌 수 있다. 암묵적 기억 (Implicit Memory): 의식적인 사고가 필요없는 기억. 명시적 기억 (Explicit Memory): 의식적인 사고가 필요한 기억. 명시적 기억은 다음과 같이 또 나눌 수 있다. 의미 기억 (Semantic): 경험이 배제된 지식적인 기억. 일화 기억 (Episodic): 개인의 경험에 의한 기억. * 편도체: 감정을 조절하고, 공포에 대한 학습 및 기억에 중요한 역할을 함. 그(헨리)가 수술에 의해 제거된 부분의 중앙 측두엽..
ES6 Class
·
Programming/Javascript
ES6 Class 문법에 대한 정리에 앞서.. 자바스크립트는 객체 기반 또는 프로토타입 기반(Prototype-based) 언어입니다. 그래서 클래스 기반(Class-based)의 객체지향 언어들과는 달리 프로토타입 체인과 클로저 등을 이용하여 상속과 캡슐화같은 개념들을 만들어 냈습니다. 하지만, ES6(ECMAScript 6)에서 Class문법이 추가되었습니다. 이 문법에 대해서 syntax sugar인가 아닌가에 대해 다양한 의견들이 있습니다. 이에 대해선 스스로 다양한 글을 읽고 판단하시는 것을 추천합니다. 자바스크립트에 Class문법이 추가되었다고 했지만, 사실은 Class로 선언된 객체의 속성을 알아보면 Function이라 나옵니다. (더보기 참고) 더보기 // ES5 function Human..
Minesweeper(지뢰찾기, 자바스크립트 버전)
·
활동/개인 프로젝트
View ES6 공부를 계속하다가 공부만 너무 하는 것 같아서 각잡고 한 번 만들어 봤다. 작업시간은 하루 5시간 씩 4일 정도 걸린 것 같다. (중간중간 일이 있어서 실제 기간은 일주일 정도 걸렸따..) 지뢰찾기를 만들기 위해선 다양한 생각을 했어야 했다. 1. 난이도 설정 2. 타이머 3. 초기화 버튼 4. 지뢰 배치 5. 숫자가 뜨는 로직 6. 깃발 기능 등등.. 세부적으로 들어가면 더 많지만 이러한 기능을 구현하면서 잘못된 지식들을 조금씩 파악하게 되었다. 그리고 아직 공부를 안해서 그런거긴 하지만.. 객체형과 함수형 프로그래밍을 한 번 공부해 봐아겠다. 말 만들었을때는 함수가 객체 아닌가? 라고 생각되어서 무슨차인지 잘 모르겠다. Link Minesweeper JS MINESWEEPER EASY..
한 줄짜리 if 문, for 문 그리고 함수
·
Programming/Javascript
조건문을 작성할 때마다 한 줄로 작성할 수 있을 것 같으면 중괄호를 표시할지 혹은 삼항 연산자를 사용할지 고민하곤 한다. 그래서 이에 대해 커뮤니티에서 얻은 답변 내용과 내 생각을 적어두려고 한다. 결론부터 얘기를 하자면, 정해진 규칙은 없으며 자신의 코드 스타일에 따라서 작성하면 된다고 한다. 하지만 작성 방법에 따라서 오류나 문제가 있을 수는 있다는 것을 기억하자. 스타일이 갈리는 이유를 꼽자면 주로 다음과 같았다. 1. 코드의 간결성 ("나는 짧은 코드가 좋아!") 2. 안정성 ("나중에 코드가 추가되거나 했을 때 오류 생기면 어캄?") 3. 가독성 ("보기 편한 게 가장 좋더라") 솔직히 3가지 다 포기하기 어려운 조건이긴 하다. 하지만 개인적인 생각으로는 2번이 가장 중요하다고 본다. 내가 짠 ..