본문 바로가기

전체 글

 (121)
TIL) 논리 연산자 || OR 자바스크립트에는 세 종류의 논리연산자 ||(OR) , &&(AND), !(NOT) 가 있다. 논리 연산자는 피연산자로 불린형 뿐만 아니라 모든 타입의 값을 받을 수 있다. 연산 결과 역시 모든 타입이 될 수 있다. || (OR) 불린 값을 조작하는데 쓰인다. 인수 중 하나라도 true면 true를 반환하고, 아닐 시 false를 반환한다. OR연산자는 이항 연산자이므로 아래와 같이 네가지 조합이 가능하다. alert( true || true ); // true alert( false || true ); // true alert( true || false ); // true alert( false || false ); // false 피연산자가 불린형이 아니면, 평가를 위해 불린형으로 변환된다. 예를 들어..
TIL) React : DOM, 서버리스 DOM이란? Document Object Model의 줄임말로서, 문서 객체 모델이다. 즉, HTML문서를 객체화 한 것이다. 이 객체는 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공하여, 문서구조나 스타일, 내용 등을 변경 할 수 있게 해준다. DOM은 nodes, objects로 문서를 표현하는데 DOM의 객체지향 표현이며, 이는 Javascript와 같은 스크립트 언어로 접근이 가능하다. DOM을 수정하는데 사용되는 property, method, event는 모두 objects로 표현이된다. DOM이 있기 때문에, javascript가 웹페이지 or XML에 관련된 정보를 가질 수 있다. 또한 DOM은 프로그래밍 언어와 독립적으로 디자인 되어, javascript뿐만 아니라 pytho..
TIL) async & await async와 await 라는 특별한 문법을 사용하면 프로미스를 좀 더 편안하게 사용할 수 있다. async함수 asyncs는 fuction 앞에 위치한다. async function f() { return 1; } function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다. 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스 (resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다. 아래 예시의 함수를 호출하면 result가 1인 이행 프라미스가 반환된다. async function f() { return 1; } f().then(alert); // 1 명시적으로 프라미스를 반환하는 것도 가능한데, 결과는 동일하다. async function f() { re..
TIL) Promise Promise란? -Promise는 주로 웹서비스를 구현 할 때 원활한 데이터 통신을 위해 활용됩니다. -웹 페이지에서 서버로 데이터를 요청했을 때, 데이터를 모두 받기 전에 웹에 출력하려고 하는 경우를 방지하기 위해 활용 -Promise를 사용하지 않고 실행시키면 먼저 로직이 끝나는 순서로 출력이 되지만, Promise를 사용하면 순서대로 출력을 시킬 수 있습니다. 프로미스의 3가지 상태 Pending(대기): 비동기 처리 로직이 아직 완료되지 않은 상태 Fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 Rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태 2-1) Pending new Promise(); new Promise((resolve, rej..
4주차 : React로 Redux를 활용한 My To Do List 만들기. map is not a function Goal: My Todo List 만들기 React 입문 주차 개인 과제를 react-router-dom, styled-components, redux를 사용해서 My Todo List를 다시 만들어봅니다. features : 구현해야 할 기능 Create Todo Read Todos, Todo Update Todo Delete Todo Requirement : 과제에 요구되는 사항 공통 todos 데이터는 리덕스를 사용해서 전역으로 상태를 관리합니다. todos 모듈은 **Ducks 패턴**으로 구현합니다. 컴포넌트 구조는 자유롭게 구현하되, 본인이 그렇게 나눈 이유에 대해서 README에 작성합니다. 메인 페이지 디자인과 화면 구성은 자유롭게 구현합니다. Todo의 상태에 “완료” 그룹과 “진행중" ..
4주차 : React로 Redux를 이용한 Todolist 만들기 Requirement : 실습에 요구되는 사항 useState가 아닌 redux를 이용해서 구현해봅시다. 컴포넌트는 자유롭게 나누되, 그렇게 나눈 사유에 대하여 README에 작성하세요. 모듈관련 요소들은 todos.js 파일을 생성하고, 해당 파일안에 모두 작성하세요. 디자인은 자유이며, CSS를 styled-components 를 이용해서 구현하세요. input에 아무것도 입력하지 않았을 때는 추가하기 버튼을 눌러도 Todo가 추가되지 않게 하세요. 컴포넌트의 구조 App.js > Home.js > Layout.js > Header, Body //Header.js import React, { useState } from "react"; import { useSelector , useDispatch }..
TIL : JavaScript 대괄호, 중괄호, 소괄호 사용 정리 대괄호 :[ ], 중괄호: { }, 소괄호:( ) 대괄호 => [] list를 나열 할 때 list의 인덱스를 지정해줄 때 e.g.) mise[0], mise[1] 키가 유효한 변수 식별자가 아닌 경우엔 점 표기법 대신에 '대괄호 표기법(square bracket notation)'이라 불리는 방법을 사용할 수 있다. 대괄호 표기법은 키에 어떤 문자열이 있던지 상관없이 동작. let user = {}; // set user["likes birds"] = true; // get alert(user["likes birds"]); // true // delete delete user["likes birds"]; 대괄호 표기법 안에서 문자열을 사용할 땐 문자열을 따옴표로 묶어주어야 함. 대괄호 표기법을 사용하면..
TIL) useEffect useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 다시말해 화면에 컴포넌트가 mount 또는 unmount되었을 때 실행하고자 하는 함수를 제어하게 해주는 훅이다. import React, { useEffect } from "react"로 import해서 사용한다. useEffect와 리렌더링 import React, { useEffect, useState} from "react"; const App = () => { const [value, setValue] = useState(""); useEffect(()=> { console.log("hello useEffect") }) return ( { setValue(event.target.value)..
반응형

티스토리툴바