728x90 반응형 TIL147 React 깔끔하게 컴포넌트 import 하기 같은 폴더 authform 에서 가져오는 컴포넌트를 좀 더 깔끔하게 가져올 수 없을까 🤔 import DropBox from "./authform/dropBox/DropBox"; import useAuth from "./hooks/useAuth"; import Errormodal from "./modal/Errormodal"; import BirthInput from "./authform/BirthInput"; import EmailInput from "./authform/EmailInput"; import ImageInput from "./authform/ImageInput"; import NameInput from "./authform/NameInput"; import PasswordInput fro.. 2023. 1. 19. observer API 무한스크롤 Intersection Observer API - Web API | MDN Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다. developer.mozilla.org 한번에 이해하면 천재! 옵저버 공식문서 👆 let options = { root: document.querySelector('#scrollArea'), rootMargin: '0px', threshold: 1.0 } let observer = new IntersectionObserver(callback, options); observer API 는 매우 유용한 API 이다. 뷰포트와 관찰자를 설정해.. 2023. 1. 8. 프로그래머스 js 마법의 엘리베이터 문제 마법의 세계에 사는 민수는 아주 높은 탑에 살고 있습니다. 탑이 너무 높아서 걸어 다니기 힘든 민수는 마법의 엘리베이터를 만들었습니다. 마법의 엘리베이터의 버튼은 특별합니다. 마법의 엘리베이터에는 -1, +1, -10, +10, -100, +100 등과 같이 절댓값이 10c (c ≥ 0 인 정수) 형태인 정수들이 적힌 버튼이 있습니다. 마법의 엘리베이터의 버튼을 누르면 현재 층 수에 버튼에 적혀 있는 값을 더한 층으로 이동하게 됩니다. 단, 엘리베이터가 위치해 있는 층과 버튼의 값을 더한 결과가 0보다 작으면 엘리베이터는 움직이지 않습니다. 민수의 세계에서는 0층이 가장 아래층이며 엘리베이터는 현재 민수가 있는 층에 있습니다. 마법의 엘리베이터를 움직이기 위해서 버튼 한 번당 마법의 돌 한 개를 사.. 2022. 12. 31. 바벨 bable : 자바스크립트 컴파일러 @babel/preset 쉽게 얘기하자면 es6에서 es5로 바꾸어주는 컴파일러 다양한 브라우저에서 서비스를 제공해야하기 때문에 주로 es5 버전으로 컴파일해서 배포함 바벨 동작 단계 파싱 (parsing) : 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계 변환 (Transsforming) : 추상 구문 트리를 변경하는 단계 출력 (Printing) : 변경된 결과물을 출력하는 단계 ✅ 추상 구문 트리(AST) 프로그램 내에서 발생하는 기능을 나타내기 위해 만들어진 구문 구조 바벨은 자바스크립트 코드를 받아서 AST를 만들고 그걸로 새로운 자바스크립트 코드를 출력함 바벨 플러그인(어떻게 변환할지에 대한 규칙)들을 목적에 따라 묶어놓은 세트를 프리셋(preset).. 2022. 12. 27. 자바스크립트 Dom 이란? 자바스크립트는 웹 문서를 제어하기 위해 만들어진 언어 다른 html 요소를 추가하거나 제거하는 등 html 문서를 조작하기 위해 만들어진 언어 그렇다면 how? 브라우저 안에는 웹 문서를 해석할 수 있는 렌더링 엔진이 있음 브라우저로 html 파일을 열게 되면 이 렌더링 엔진이 html를 읽음 그리고 해석이 끝나면 문서를 객체화하여 자바스크립트로 접근할 수 있게 함 문서 객체 모델 (Document Oject Model) = DOM -> 스크립트 언어로 html을 제어할 수 있도록 웹 문서를 객체화 한 것 DOM : 문서 객체 모델로, 브라우저에서 자바스크립트로 html를 제어할 수 있도록 제공하는 API -> API : 자바스크립트 언어 자체는 아니지만 브라우저에서 제공하는 기능 트리 구조, 돔 트리 .. 2022. 12. 27. dependencies 와 devDependencies 차이 dependencies npm install 라이브러리명 흔히 쓰는 npm install 라이브러리명 명령어를 통해 설치 애플리케이션 동작과 연관된 라이브러리 설치, 배포할 때 포함됨 devDependencies npm install 라이브러리명 --save-dev 혹은 npm install 라이브러리명 -D 애플리케이션 동작과 직접적인 연관은 없지만 개발할 때 필요한 라이브러리 배포할 때 포함되지 않음 둘을 나누는 이유 devDependencies 같이 배포시 개발 단계에서만 쓰이는 불필요한 라이브러리를 포함시키지 않을 수 있음 2022. 12. 27. .env / .env.production / .env.development 차이 .env 환경 변수가 다를시 유용하게 쓸 수 있음 빌드 시 echo 명령어로 env 파일을 만들어서 git secret 키 설정후 이를 이용해 배포하는데 .env.production 빌드시 쓰는 env 파일 -> 배포된 api .env.development 개발할 때 쓰는 env 파일 -> localhost:8000 .env는 값이 변하지 않는 값들을 넣어두면 좋음 예를 들어 S3 계정 경우엔 변하지 않으니 넣으면 좋음 보통 두개 만들어 놓고 씀 .env.production / .env.development CRA으로 사용할 수 있는 env 파일 .env .env.local: 로컬 override. 이 파일은 test를 제외한 모든 환경에 대해 로드됨 .env.development, .env.test, .. 2022. 12. 27. js 코딩테스트 소인수 분해 문제 문제 소인수분해란 어떤 수를 소수들의 곱으로 표현하는 것입니다. 예를 들어 12를 소인수 분해하면 2 * 2 * 3 으로 나타낼 수 있습니다. 따라서 12의 소인수는 2와 3입니다. 자연수 n이 매개변수로 주어질 때 n의 소인수를 오름차순으로 담은 배열을 return하도록 solution 함수를 완성해주세요. 제한사항 2 ≤ n ≤ 10,000 내 답 function solution(n) { if(n===2){ return [2] } let answer = 2 const Arr = [] while(answer Arr.indexOf(el) === idx) return unique } solution(50) 팩토리얼 문제에서 쓴 while 문을 활용해서 풀었다 answer 가 1로 시작하면 n이 무한루프 돌.. 2022. 12. 23. js 코딩테스트 팩토리얼 문제 문제 i팩토리얼 (i!)은 1부터 i까지 정수의 곱을 의미합니다. 예를 들어 5! = 5 * 4 * 3 * 2 * 1 = 120 입니다. 정수 n이 주어질 때 다음 조건을 만족하는 가장 큰 정수 i를 return 하도록 solution 함수를 완성해주세요. 제한사항 0 < n ≤ 3,628,800 내 답 function solution(num) { if(num === 1){ return 1 } if(num ===2){ return 2 } let div = 1 const Arr = [] for(let i=1; i 2022. 12. 23. 이전 1 ··· 8 9 10 11 12 13 14 ··· 17 다음 728x90 반응형
