솔미는 성장중

📌 Symbol 변경이 불가한 데이터. 유일한 식별자를 만들어 데이터를 보호하는 용도로 사용. 실행될 때마다 고유하게 결과가 하나의 심볼 데이터로 반환된다. 사용형태 Symbol('설명') '설명'은 단순 디버깅 용도. 심볼 값과는 관계 없음. const sKey = Symbol('Hello') //여기서 반환된 symbol 데이터는 sKey에서만 유일하게 사용가능. const user = { key: '일반 정보', [sKey]: '민감한 정보' } console.log(user.key) //일반 정보 console.log(user['key']) //일반 정보 console.log(user[sKey]) //민감한 정보 console.log(user[Symbol('Hello')]) //undefined...

📌 프레임워크 vs 라이브러리 프레임워크 : 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것 (Vue.js와 Angular는 프레임워크.) 라이브러리 : 어떠한 특정 기능을 모듈화 해놓은 것 프레임워크 ⊃ 라이브러리 여러개 📌 React : 사용자 인터페이스(UI)를 만들기 위한 JS 라이브러리 (라우팅(페이지 이동), 상태 관리, 테스트 등은 다른 라이브러리를 사용해서 react에서 가능하게 하는 것이다!) 장점 1. 상대적으로 배우기 쉬운 라이브러리 2. 여러 기능들을 위해 만들어져 있는 라이브러리 환경 3. 많은 기업들의 사용으로 검증됨 📌 React 컴포넌트 리액트로 이루어진 앱을 이루는 최소 단위. 여러 컴포넌트가 모여 웹 앱이 만들어진다. ex) 검색 컴포넌트, 포스트 컴포넌트,..

📌 주소 입력 형태 주소?속성=값&속성=값&속성=값 예시) https://www.~~.com?apikey=키이름&s='Froxen' 📌 요청을 처리해줄 JS패키지 : axios 1단계) 설치 npm i axios 2단계) 개발 상태 열기 npm run dev 3-1단계) 예시. 영화 불러와주는 api import axios from 'axios' function Test() { axios .get('https://www.omdbapi.com/?apikey=~~&s=frozen') .then((response)=>{ console.log(response) //frozen이라는 이름에 해당하는 정보들을 불러옴 }) } 3-2단계) 예시. 영화 포스터 이미지 추가하기 html js import axios fr..

프로젝트를 시작하며 패스트캠퍼스 X 야놀자 프론트엔드 부트캠프 1기를 참여하며 첫 과제가 나왔다. HTML,CSS 과제였고, 웹사이트를 클론 코딩하는 것이었다! HTML/CSS 과제였지만 간단한 부분은 JS로 구현해보았다. 웹사이트 선정 기준 1. 기존에 관심있었던 브랜드 2. 온보딩 강의에서 배웠던 swiper라이브러리와 스크롤 효과를 적용해볼 수 있는 사이트 3. CSS를 통해 다양한 효과를 시도해볼 수 있는 사이트 레퍼런스 사이트 & 프로젝트 결과 잭슨카멜레온 (레퍼런스 사이트) 클론코딩 사이트 클론코딩 깃헙 23.08.05 기준: 데스크탑에서만 정상적으로 작동한다. (반응형 미구현) 구현 내용 1. 헤더 애니메이션 스크롤에 반응 : 상단에 있을 땐 투명 / 어느 정도 스크롤을 내리면 흰색 배경 :..

1. Console log : 일반 메세지 warn : 경고 메세지 error : 에러 메세지 dir : 속성을 볼 수 있는 객체를 출력 (ex. console.dir(documnet.body) : body태그에서 사용가능한 속성/메소드 확인가능) 🎃 콘솔에 메세지나 객체를 출력한다. console.count('이름') console.countReset('이름') cf) 아무런 이름도 추가하지 않으면 default : 횟수 형태로 출력 🎃 콘솔에 메소드 호출의 누적 횟수를 출력 or 초기화 console.time('이름') console.timeEnd('이름') cf) 동일한 이름을 써서 시작, 종료 시점을 알려줘야 하고, 두 코드 사이에 동작하는 코드를 넣어서 실행하는 데 얼마나 걸렸는지 알아볼 수 있..