본문 바로가기

til

(21)

[JavaScript] Symbol 🚨 아래 더보기는 개인적 공부를 위해 기록한 흔적입니다. 더보기 책을 읽기 전 예상되는 Symbol Symbol은 새로운 type으로 객체 속성의 식별자로 사용될 수 있는 고유하고 변경할 수 없는 데이터 형식. Symbol은 디버깅 목적으로만 사용됨. Symbol()로 호출 할때마다 다른 모든 기호와 완전히 다른 새로운 고유한 기호를 얻게 됨. Symbol()에 매개변수를 전달할 수 있고 Symbol()의 기호 설명으로 사용할 수 있다고 함. Symbol은 객체의 key로 사용될 수 있으나, getOwnPropertynames, for in 같은 메서드로는 접근할 수 없고, getOwnPropertySymbols()를 통해서만 Symbol로 된 key에 접근할 수 있음. 🍀 심벌이란? 심벌은 es6에서 ..

[번역] Why Not To Modify React State Directly 왜 state를 직접 수정하지 않는 이유 모든 사람들이 `state`를 절대로 직접 바꾸지 말고 언제나 `setState`를 호출하라고 합니다. 하지만 왜 그렇게 말하는 것일까요? 벌써 시도해보셨다면 아마 아무런 나쁜일이 생기지 않는다는 것을 눈치채셨을겁니다. 만약 `state`를 직접 수정하고 `this.setState({})` 혹은 `this.forceUpdate()`를 호출한다면 모든것이 괜찮아 보일겁니다. this.state.cart.push(item.id); this.setState({ cart: this.state.cart }); // renders like normal! maybe? 두가지 이유에 있어서 이것은 나쁜 생각입니다. (이것이 실제로 해당 예시에서 그리고 다른 상황에서 작동이 하더라도 말입니다.) (`this.state...

모든 자바스크립트 파일을 브라우저에서 한 번에 로딩 할 때의 문제점과 그 해결([번역]How to load JavaScript properly) 모든 자바스크립트 파일을 브라우저에서 한 번에 로딩 할 때의 문제점이라는 질문에 대한 답을 찾기 전에 한 번에 로딩할 때라는 것은 스크립트 파일을 동기적으로 로드 할 때라는 것을 의미한다고 정하겠습니다. DOM이 구성 되어있지 않은 상태에서 DOM에 접근하는 script를 실행한다면 script는 해당 DOM 요소에 접근 할 수 없습니다. (아래의 코드를 보면 스크립트를 읽는 시점에서는 h1은 아직 존재하지 않기 떄문에 console.log는 null을 출력합니다.) 제목 이를 해결하기 위해서 쉽게 body 태그의 맨 끝에서 script를 불러오면 문제가 없지 않을까라고 생각할 수 있지만 이것이 완전한 해결책이 될수는 없습니다. DOM이 준비가 되어 화면은 사용자에게 이미 보여지고 있는 상황이지만 scr..

[JavaScript] Legacy octal literals are not allowed in strict mode Error 시도했던 것들 서버에서 contribution status code(사용자가 기고한 글의 상태를 나타내는 code)를 받아 이에 알맞은 메세지를 render하기 위하여 아래와 같은 함수를 작성하였으나, export function statuscodeconvert(code) { console.log(typeof code); const status = { 00: '게시 승인 대기', 01: '수정 승인 대기', 02: '삭제 승인 대기', 10: '게시 승인 완료', 11: '수정 승인 완료', 12: '삭제 승인 완료', 20: '게시 승인 거부', 21: '수정 승인 거부', 22: '삭제 승인 거부', 30: '기타', }; return status\[code\]; } 터미널에서 이러한 오류를 만나게 ..

2021년 7월 6일 코드스테이츠 DAY-93 session 스프린트 깊은 탐구 인증/보안 세션에서 session을 접하였기에 당연히 session이 인증/보안을 위해 생겨난 무엇이라고 생각을 했다. 하지만 세션은 인증/보안의 역할을 하기 이전에 브라우저가 서버에 어떠한 요청을 했을때 이 요청을 어떤 브라우저가 보낸 것인지 식별하기 위해 서버에서 생성되는 기본 객체였다. (브라우저에서 최초로 서버에 요청을 보내면 서버쪽에서 브라우저를 식별할 수 있도록 세션이라는 기본 객체를 만든다. 그 기본 객체안에는 세션ID가 있고 이 세션ID를 쿠키에 담아서 브라우저로 보내주면 브라우저는 앞으로의 모든 요청에 세션ID를 서버에 보낸다. 서버는 요청에 포함된 쿠키의 세션ID를 통해 어떤 브라우저인지 식별할 수 있게 된다.) 세션이 브라우저마다 하나씩 만들어지는 그리고 서버에 저장되는 특성을 활용해..

2021년 6월 27일 코드스테이츠 DAY-84 mini 프로젝트(custom todos) 미완 내가 만든 프로젝트의 이름은 custom todos이다. 말그대로 사용자가 본인만의 todo app을 쉽게 예쁘게 만들 수 있게 하는 것이 목표였다. 여기다가 덤으로 사용자로 하여금 앱을 만드는 즐거움을 더할 수 있도록 몇가지 interaction을 추가하였다. 아 물론.....아직 다 완성되지 않았다. 우선 동영상을 보자 첫번째 page에는 프로젝트의 이름과 todo app의 배경화면에 쓸 사진을 넣고 그 사진들이 스크롤에 따라 각자 다르게 움직이게 해서 입체감을 느껴지게 하였다. 스크롤 interaction보다는 carousel을 넣어서 custom앱의 실제 사용예시를 넣는게 더 좋지 않을까? 두번째 page에는 배경화면을 선택할 수 있는 page인데 여기다가 평소에 관심있었던 3D효과를 넣어서 박물..

[React 기초 문법] #3 state와 props props와 state의 의미 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값으로 컴포넌트 내에서 읽을 수만 있다. 따라서 props를 바꾸려면 부모 컴포넌트에서 바꾸어야만 한다 . 공식문서에 의하면 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안된다. 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수함수 (입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하는 함수)처럼 동작해야한다. 라는 말이 있다. 사용자의 액션, 네트워크의 응답 및 다른 요소에 대한 응답으로 시간에 따라 props가 컴포넌트 내에서 바뀌어야만 하는 상황이 있는데 이때 사용하는 것..

[React 기초 문법] #1 intro + JSX 몇 가지 규칙 Intro 리액트가 참 재밌는데, 구현해보고 싶은게 많은데 뜻대로 움직이지 않는 그리고 예측하지 않은 결과가 반복되면서 내가 원하는 기능과 모습을 구현하기 위해서는(재밌는 것을 만들기 위해서는...) 기초 문법을 반드시 잘 다져야겠다라고 생각하여 새로운 카테고리를 팠다. 모래 위의 성보다는 튼튼한 반석위에서 리액트라는 성을 지으리라 JSX 몇 가지 규칙 컴포넌트의 여러 요소들은 반드시 하나의 부모 요소로 감싸여져 있어야 한다. 여기서 하나의 부모 요소는 반드시 태그가 아니어도 좋다. import React, {Fragment} from "react"; 한 후 를 사용해도 된다. 대신 을 사용할 수도 있다. 참고로 는 import를 안해도 되었기에 나는 이것을 더 많이 사용한 것 같다. 자바스크립트 표현식..

이전 1 2 3 다음

티스토리툴바