Life is Peanuts and Butter Life is Peanuts and Butter

전체 글

• 프론트엔드 개발자로 가장 빠르게 시작하는 방법

  Let's Code/Programming Basics 2021. 11. 25. 15:28

  오늘 유튜브에서 눈에 띈 한 영상! (사실 구독하고 있는 뉴스레터에서 추천해줘서 알았다.) 프론트엔드 개발자로 가장 빠르게 시작하는 방법, 꼭 익혀야 하는 5가지 핵심 기술이란? https://youtu.be/-_X6PhkjpzU (Codewishmosh.com라는 사이트를 운영하고 있다니까 관심 있으면 들려보자.) 기초 HTML과 CSS, Javascript. 너무 유명해서 다들 아는 말이겠지만 HTML은 기본 구조를 잡을 때, CSS는 그 구조를 꾸밀 때, Javascript는 동작을 지정할 때 쓰인다. 기초 중에 기초로, 하루에 3-5시간씩 공부한다고 가정했을 때 3달 정도 잡으면 통달할 거라 함. (아니... 일주일에 다 마스터하려고 했던 내가 이상한 거였군) 프레임워크, 라이브러리 반복되는 코드..

  Read More
• React 자습서 따라하기 (1) Constructor

  Let's Code/JavaScript 2021. 7. 17. 23:18

  오랜만에 본 React가 하나도 기억이 안 나서 다시 시작하는 Tic-tac-toe 게임! (https://reactjs.org/tutorial/tutorial.html#inspecting-the-starter-code) 튜토리얼을 따라가며 배운 것: 1. Constructor 사용하기 class Square extends React.Component { constructor(props) { super(props); this.state = { value: null, }; } } Constructor를 사용하는 경우 1) React가 DOM에 Mount되기 전에 (즉, Rendering 전에) Component의 초기 state을 설정해야 할 필요가 있을 때 2) Event Handling을 통해 User..

  Read More
• React와 JSX

  Let's Code/JavaScript 2021. 7. 17. 14:14

  JSX란? - JSX는 리액트에 필수적이진 않지만 리액트 경험을 훨씬 편리하게 만드는, 리액트에 특화된 XML이다. - JSX 문법을 이용해서 createElement 사용 없이 리액트에 바로 HTML을 삽입할 수 있다. const myelement = JSX를 사용하면 짱 편리하다구!; const myelement = React.createElement('h3', {}, '나 그냥 JSX 안 쓸래!'); 위가 JSX를 사용한 버전, 아래가 JSX를 사용하지 않은 코드다. 한 눈에 봐도 위가 더 편리하다. JSX안에 함수 넣기 function sayhiName(user) { return 'hi' + ' ' + user.firstName + ' ' + user.lastName; } const user = ..

  Read More
• 백준 1000

  Let's Code 2021. 7. 14. 18:24

  Q: 두 정수 A와 B를 입력받은 다음, A+B를 출력하는 프로그램을 작성하시오. a, b = map(int, input().split()) print(a+b) 사용자가 입력하는 매번 다른 값을 변수에 할당하려면? A: input() 함수를 이용한다. Input 한 번에 하나의 값이 아니라 여러 값을 인력받으려면? A: input().split()를 사용하여 변수 여러 개에 저장해준다. 변수를 정수로 변환해서 사용하려면? A: int() 함수를 사용한다. 두 개 이상의 변수를 한꺼번에 정수로 변환하려면? A: map() 함수를 사용한다. input().split()의 결과가 문자열 리스트이기 때문!

  Read More
• 자바스크립트 드럼 키트 만들기

  Let's Code/JavaScript 2021. 3. 29. 22:51

  1. 키보드의 특정 키를 누르면 매칭되는 음원 재생시키기 function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); if (!audio) return; audio.currentTime = 0; audio.play(); key.classList.add('playing'); } const keys = document.querySelectorAll('.key'); window.addEventListener('keydown', playSound); document.querySel..

  Read More
• 자바스크립트 시계 만들기

  Let's Code/JavaScript 2021. 3. 16. 23:46

  DOM HTML의 모든 컨텐츠를 웹 브라우저의 메모리 상에 올려 자바스크립트로 접근하기 위해 DOM 문서를 사용한다. HTML의 모든 태그를 자바스크립트에서 객체로 불러올 수 있다. 요소 접근 메서드 document.getElementById(""): document는 가장 포괄적인 범위로, HTML 전 문서를 탐색하여 ""사이 들어가는 Id 요소를 호출한다. document.querySelector(""): 특정 태그, 또는 .가 붙을 경우 클래스, #가 붙을 경우 ID 요소를 호출한다. 요소 변환 메서드 요소.innerHTML = 을 통해 해당 요소 내 값을 재할당할 수 있다. 날짜 호출 메서드 Date()은 달, 날짜, 요일, 시간, 분, 초 등 시간과 관련된 모든 요소를 호출한다. date.get..

  Read More
• 자바스크립트: 객체의 기본

  Let's Code/JavaScript 2021. 3. 10. 17:30

  객체의 기본 - 자바스크립트의 8가지 자료형은 '객체형' (객체)와 '원시형primitive type' (나머지 7)로 구분할 수 있다. 원시형은 한 가지 데이터 타입만, 객체형은 다양한 데이터 타입을 저장할 수 있다. - 객체 문법: { 키Key: 값Value, 키2: 값2 } // 여기서 키: 값의 한 쌍이 프로퍼티Property. 키 (또는 프로퍼티 이름이나 식별자)에는 문자형만 허용되지만 값에는 제한 없음. - 객체 생성법: 1) '객체 생성자' 문법 2) '객체 리터럴' 문법 let user = new Object(); // '객체 생성자' 문법 let user = {}; // '객체 리터럴' 문법 - 프로퍼티 접근: 점 표기법(dot notation)을 사용하여 프로퍼티 값만 호출 또는 특정 ..

  Read More
• 자바스크립트: 함수 선언, 표현, 콜백

  Let's Code/JavaScript 2021. 3. 9. 21:16

  함수의 기본 - 정의: 프로그램을 구성하는 주요 구성 요소로, 유사한 동작을 하는 코드를 중복 코드 없이 간편하게 호출하기 위한 장치 - 함수 선언(function declaration) 문법: function 키워드, 함수 이름, (매개변수parameter) { 함수 본문 } - 호출: 함수 선언 이후 함수 이름 옆에 괄호 ()를 붙여 호출 - 변수: 함수 내에서 선언한 변수는 지역 변수(local variable)로, 외부 변수(outer variable)과 달리 함수 밖에서 접근 불가능. 외부 변수는 전역 변수(global variable)로 더 흔히 불리는데, 모든 함수에서 접근 가능하다. 전역 변수는 최소한으로 사용하는 것이 좋다. - 함수 내에서 외부 변수와 동일한 이름의 지역 변수를 선언할 ..

  Read More