Study
-
리엑트란 무엇이며 왜 사용하는가?Study/React 2020. 7. 4. 17:11
What is React? 리엑트란 무엇인가? 리엑트는 facebook에서 만든 자바스크립트 UI라이브러리로써 user interfaces와 프론트엔드 어플리케이션을 만드는데 사용된다. 리엑트는 기술적으로는 라이브러리이지만, 이것의 행동과 능력때문에 종종 framework로도 불린다. 리엑트는 현재까지 업계에서 가장 인기있는 framework이다. 한마디로 간단히 말하면, 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리이다. 리엑트는 왜 사용하는가? 우리는 html, css만으로도 웹사이트를 만들 수 있다. 그러나 여기에 유저의 행동흐름에 따라서 동적인 화면을 보여주도록 하기 위해서 javascript를 사용한다. 그런데 요즘의 웹은 단순히 웹 페이지가 아니라 웹 애플리케이션이다. 브라우저상으로도..
-
20.07.01:: TILStudy/TIL 2020. 7. 1. 22:03
오늘의 한 일 깃깃깃.. 새롭게 배운 것 querySelector와 querySelectorAll의 차이. 같은 클래스명의 파일이 여러개 있을 경우, querySelector는 제일 처음, 한개의 요소만 가지고 오는 반면에, querySelectorAll은 같은 클래스명을 가진 전체 파일을 불러온다. 보완해야할 부분 인스타그램 폰트어썸아이콘-> 인스타 svg로 바꾸기 인스타 검색기능 해보기 위코드 라이프 깃깃깃.... 깃깃깃... 깃은 어렵다. 깃은 필요하다. 깃을 배우자.
-
2020.06.30:: TILStudy/TIL 2020. 6. 30. 20:50
오늘의 한 일 인스타그램 클론코딩 ( 검색창 포커스 시 변화) 인스타그램 클론코딩 코드 클린하게 수정 (클래스네임 변경) 인스타그램 클론코딩 story수정 새롭게 배운 것 padding: 10px 10px 10px; 의미. let spanText = document.getElmentById('span').innerText; 클래스 네임 서로 동일하게, 규칙을 주어서 작성하기 css 우선순위에 맞추어 작성하기 => 클린코드 😚 리눅스 보완해야할 부분 리눅스 블로그 포스팅 내가 작성한 코드로 블로그 포스팅 위코드 라이프 으어어어어 ㅎㅎㅎ 오늘 인스타그램 클론코딩 리뷰 세션이 있었다. 클래스 네임을 신경써서 쓴다고 썼는데.. 그게 아니었다... ㅋㅋㅋ 제대로 확인했어야 했다. 그래서 다시변경하느라 시간을 많이..
-
2020.06.29:: 오늘의 TILStudy/TIL 2020. 6. 29. 21:28
오늘의 한 일 인스타그램 클론코딩 ( 로그인구현, 댓글기능 구현, 하트버튼 누르면 빨갛게 변하는 기능 구현) 새롭게 배운 것 form태그에서 button의 submit 막는 방법 form 태그 안에 있는 button은 무조건 submit 이벤트가 일어난다. submit을 하지 않고 button 기능구현만 하고 싶다면, button의 type을 아래와 같이 button으로 주면된다. 버튼 자바스크립트 DOM에서 getElementsByClassName 으로 html의 태그를 가져오려면, 인덱스 값을 넣어주어야 한다. className은 복수의 데이터를 가져올 수 있기 때문에 그 classname이 1개더라도 옆에 인덱스 [0]을 붙여서 호출해야한다. const commentBtn = document.get..
-
Object 프로퍼티 접근, 할당, 중첩Study/JavaScript 2020. 6. 25. 16:27
프로퍼티 접근 let difficult = { 33: '숫자 형식도 되네', 'my name': '스페이스 포함 가능', color: 'silver', 키: '한글인 키는 따옴표가 없어도 되는군!!', '!키': '느낌표 있는 키는 따옴표가 필요하군', $special: '$는 없어도 되는군' }; console.log(difficult.color); 1. dot(.)으로 접근하는 방법 - 따옴표 없이 키를 바로 써 주어야 함. console.log(difficult['color']); 2. [] 대괄호로 접근하는 방법 - 키 이름을 따옴표로 감싸서 작성해주어야함. console.log(difficult.my name); console.log(difficult.33); 이렇게 스페이스가 포함된 키, 숫자..
-
클래스 생성자와 메소드Study/JavaScript 2020. 6. 25. 13:27
자바스크립트의 class에 관해서는 이전 피드에서 다루어 생략합니다.:) https://dream-frontend.tistory.com/334 클래스와 기본 문법 클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다. -위키백과 실무에선 dream-frontend.tistory.com 생성자 (Constructor) 객체(Object)의 설계도인 클래스(class)는 문법이 비슷하다. 둘의 가장 큰 차이는 constructor라는 생성자 함수이다. 아래의 class를 살펴보자. class Car { constructor(name, price) { this.name = name; this.pri..
-
function 함수의 형태와 구성Study/JavaScript 2020. 6. 25. 10:37
함수를 왜 사용하는가? 스크립트를 작성하다보면 유사한 동작을 하는 코드가 여러 곳에서 필요할 때가 많다. 사용자가 로그인이나 로그아웃을 했을 때 메시지를 보여주는 동작 같은 경우 말이다. 함수는 프로그램을 구성하는 주요 '구성요소(building block)'이다. 다시말하면, 하나의 특정한 작업을 수행하도록 설계된 독립적인 블록이다. 함수를 이용하면 중복없이 유사한 동작을 하는 코드를 여러번 호출 할 수 있다. 혹시, alert(message)를 사용해본 적이 있는가? 이것은 명령만 내려도 alert기능을 사용할 수 있는 내장함수이다. 이번에는 함수를 직접 만드는 방법에 대해 알아보자:) 함수의 기본 형태 function checkCorrect () { let hi = "안녕하세요"; return hi..
-
2020.06.24:: 오늘의 TILStudy/TIL 2020. 6. 24. 21:59
오늘의 한 일 웹 개발의 역사 (위코드 세션) 자바스크립트 if문, 연산자, 함수, 배열, 데이터 타입 복습 (리플잇) 새롭게 배운 것 array의 데이터타입은 "object"객체이다. (배열은 확장된 객체이다.) console.log(typeof []); // object null의 데이터타입도 "object"객체이다. null은 말그대로 아무것도 아닌 빈 객체를 가리고 있어서 object라고 나온다. console.log(typeof null); // object function의 데이터타입은 "function". array indexOf() js slice 보완해야할 부분 블로그 포스트 하기. object 포스트하면서 복습하기 위코드 라이프 점심 저녁 먹으면서 점점 사람들과 함께 이야기나누고, 서로..