본문 바로가기

분류 전체보기162

[생활코딩] #로또번호 추첨하기 #입문자를 위한 자바스크립트 기초 강의 ✅ Element.classList 1️⃣ Element.classList 웹 요소(Element)로부터 클래스 콜렉션을 반환하는 읽기 전용 속성이다. 안녕하세요 const p = document.querySelector("p") console.log(p.classList) 2️⃣ 메소드 반환되는 클래스 콜렉션은 유용한 메소드를 다수 포함하고 있다. 3️⃣ 정리 - clssList는 요소로부터 클래스 콜렉션을 반환하는 읽기 전용 속성이다. - 반환된 클래스 콜렉션은 유용한 메소드를 다수 포함하고 있다. - 일반적으로 toggle은 있으면 제거하고, 없으면 생성한다는 의미이다. ✅ 배열 개념과 사용법 1️⃣ 배열이란 배열은 여러 개의 데이터를 보관하는 "주머니" 역할을 하는 객체이다. 이전까지 변수(또는 .. 2022. 8. 10.
[생활코딩] #디지털 시계 만들기 #입문자를 위한 자바스크립트 기초 강의 ✅ 객체를 만드는 생성자 1️⃣ 객체 개념 복습하기 어떤 사물이나 개념을 소프트웨어적으로 표현하기 위해 사용하는 문법적 수단, 자바스크립트 코드 내에서 객체란 "값 또는 기능을 가지고 있는 데이터" 이다. 2️⃣ 생성자 객체를 생성할 때 사용하는 함수로서, "생성자 함수"라고도 한다. 사용할 기능을 정의한 일반 함수와 생성자 함수 사이에 특별한 문법적 차이는 존재하지 않는다. 즉, 함수는 생성자 역할을 할 수 있다. 단, 생성자 함수는 객체 생성을 목적으로 만드는 것이다. 👌 생성자의 쓸모는? 자바스크립트가 제공하지 않는 유형의 데이터를 창조할 수 있다! 3️⃣ 키워드 this 사용하기 생성자 함수 정의 시 this 키워드는 객체 그 자신을 의미한다. this를 이용해 해당 객체의 속성이나 메소드를 추가.. 2022. 8. 8.
항해99 4주차 WIL - 라이프사이클(클래스형 vs 함수형), react hooks 벌써 4주차 WIL 이다. 4주차는 사실 그렇게까지 힘들진 않았다. 팀원들과의 협업도 잘 되고 팀원들과 성격도 잘 맞고 대화도 잘 되서 하루하루 힘들지만 행복하게 시간을 보냈다. 그런데 4~5주차 넘어가는 지금이 조금 힘들다. 5주차 WIL이 약간 걱정되는 밤이다. 너무 힘들어서 어제는 눈물이 났다. 눈물이 거의 없는 편인데도 서러운 부분이 있었다. 어쨌든,,, 잘 극복하고 이번 한주를 보내길 바라며 지난주 WIL을 작성해본다! 🤗 좋았던 것은! 리액트 기초반 강의 완강, 입문+숙련 학습자료 완독 및 블로그 정리 완료, 자바스크립트 하루 목표 완료! 모두 목표했던 일정을 완료하였다. 🕶️ 아쉬웠던 것은! CS 책을 이틀이나 누락했다. 스터디 발표 공유하는 날에는 열심히 준비했는데 앞뒤로 사실 챕터를 읽지.. 2022. 8. 8.
항해99 27일차 TIL - 리액트 심화과제 뷰 구성 & 오늘 배운 것 ✅ 리액트 심화과제 뷰 구성 기존에는 뷰 만들기부터 먼저 했다면, 심화 과제에선 어제 와이어 프레임 구성했던 것처럼 페이지와 기능이 너무 많아서 아래 내용을 보고 기능 분배하기 부터 시작했다!! 기능을 분배하고 어떻게 하지 고민하다가 컴포넌트 별로 뷰를 구성할 사람을 나누기로 했다!! 이름이 나와서 뷰 구현 나눈 것은 캡처에서 제외했다. 조금 어려웠던 것은, 내가 조장이라서 미리 git hub에서 레포지토리 만들고 컴포넌트 ,페이지, 라우터, 리덕스 부터 패키지 설치까지 미리 해두고 commit을 했는데 혹시나 실수나 패키지 부족한 점이 있을까봐 걱정했었다. 다행히 확인결과 오류는 없는 것으로!! 뷰 구성하면서 추가적으로 컴포넌트가 늘어나긴 했지만 그래도 아직까지는 깨끗한 폴더인 것 같다! 오늘 사실 학.. 2022. 8. 6.
[React] .env(환경 변수 관리) 정리 * 퉁이리 자료 출처 하단 기재, 좋은 자료가 많다! ✅ env env는 API key, port, DB 등 민감한 정보를 환경변수에 담아 관리하는 방법이다. 1️⃣ env 주의사항 👌 root 폴더에 생성해야 한다. root 폴더에 env 파일이 위치하지 않으면 정상적으로 작동하지 않는다. 👌 변수명은 반드시 "REACT_APP_"으로 시작해야 한다. REACT_APP_변수명 = ㅇㅇㅇ "REACT_APP_변수명" 형식이 아닐 시, React가 인식하지 못하여 정상적으로 작동하지 않는다. 🔹process.env.REACT_APP_ : 예약어 👌 .gitignore 에 env를 등록해야 한다. .gitignore에 등록해주어야 git에 등록할 때 파일이 올라가지 않는다. * 기본적으로 세팅은 되어 있으나.. 2022. 8. 6.
비동기 시리즈 - async와 await 자료 정리 * CAPTAIN PANGYO 자료 출처 하단 기재, 좋은 자료가 많아서 들어가서 둘러보는 것을 추천한다! ✅ 자바스크립트 async와 await 1️⃣ async & await 란? async와 await는 자바스크립트 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다. 2️⃣ 개발자에게 읽기 좋은 코드란? var user = { id: 1, name: 'Josh' }; if (user.id === 1) { console.log(user.name); // Josh } 이 코드는 user라는 변수에 객체를 할당한 뒤 조건문으로 사용자의 아이디를 확인하고 콘솔에 사용자의 name을 찍는 간.. 2022. 8. 5.

티스토리툴바