![]()
바닐라 JS - netlify에서 API 키 이용하는 방법 netlify에서 html, css, vanilla javascript만 배포를 한다면 Build command를 사용해야 한다. node를 사용 한다면 굳이 이 방법이 아닌 .env를 활용합시다. api key를 github에 올리지 않으며 netlify에서 사용하는 방법 현재 나의 폴더 구조는 이렇다. apikey.js라는 곳에 //apikey.js const config = { apikey: '12341231234' }; 이렇게 작성되어 있는 상태다. 이것을 깃허브 저장소에 올리지 않았기 때문에 당연히 사이트에서 키값 사용이 불가능하다. 이것을 가능하게 해주는 방법이 있는데 Build command를 사용할 수 있다. Build comman..
![]()
✔ 개요 https://nomadcoders.co/twitter-contest 2주 트위터 클론코딩 컨테스트 – 노마드 코더 Nomad Coders 노마드 컨테스트 nomadcoders.co X 그대로 클론 코딩하기보다 동물들을 보며 자랑 및 힐링하는 트위터 X를 만들고 싶었다. + 이번 기회에 react, typescript, firebase 모두 친해지기 ✔ 콘셉트 동물 자랑 사이트 자신이 키우는 또는 좋아하는 동물, 캐릭터 애니 등 자랑하고 아끼는 모습을 보여주며 서로 힐링하는 사이트. - 최종 배포 URL https://inthezoo-f1fc8.web.app/ In The Zoo inthezoo-f1fc8.web.app - github code URL https://github.com/namoo..
![]()
✔ 오늘의 강의 바닐라JS로 크롬앱 만들기: 6.0# ~ #6.2 ✔ 목표 ✔ 조건 blueprint에 colors 배열이 선언되어 있다. 사용자가 버튼을 클릭하면 colors 배열에서 두 가지 색상이 랜덤으로 선택되어야 한다. body 태그의 style을 랜덤으로 선택된 두 가지 색상을 사용해 linear-gradient로 변경한다. 힌트 더보기 linear-gradient : 선형 그라데이션을 만들어주는 CSS 함수 참고 Math.floor() : 주어진 숫자의 소수점 이하를 내림해서 반환하는 함수. 참고 Math.random : 0에서 1보다 작은 범위의 난수를 반환하는 함수. 참고 length : 배열의 길이(요소의 개수)를 반환하는 프로퍼티 참고 ✔ 과정 html Give me color css..
![]()
✔ 오늘의 강의 바닐라 JS로 크롬앱 만들기: From #5.0 to #5.3 ✔ 목표 Date와 setInterval 함수들을 사용해 크리스마스이브까지 며칠이 남았는지 알려주는 시계를 만드세요.(12월 25일) ✔ 조건 힌트 : - Date 생성자 [new Date()] : 시간을 나타내는 Date 객체를 생성하는 생성자입니다. Date 객체를 사용하기 위해 먼저 선언해 주어야 합니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/Date - Date().getFullYear() : 2021처럼 4자리의 연도를 얻을 수 있는 함수입니다. https://developer.mozilla.org/ko/do..
![]()
✔ 오늘의 강의 바닐라 JS로 크롬앱 만들기 : From #4.0 to #4.7 ✔ 목표 자바스크립트를 사용하여 숫자 추측 게임을 만들어보세요! 노마드코더, 추측 게임 결과 영상 설명 첫 번째 칸 - 0 이상의 원하는 최대 숫자 값을 적는다. 두 번째 칸 - [0 ~ 첫 번째 칸 값] 안에서 랜덤으로 나올 숫자를 추측하여 원하는 숫자를 넣는다. 추측 숫자와 랜덤 숫자가 서로 일치할 경우 '성공!' 불일치할 경우 '실패!' 라고 화면에 텍스트 출력 ✔ 조건 0에서 사용자가 지정한 숫자까지의 범위에서 랜덤 한 숫자를 찾으세요. (범위는 0 이상 입력값 이하가 됩니다.) 범위에는 음수가 포함될 수 없습니다. 실시간으로 범위 값을 업데이트해야 합니다. 유저가 숫자를 선택한 후에 게임을 플레이할 수 있습니다. 유..
![]()
✔ 오늘의 강의 바닐라 JS로 크롭앱 만들기 : From #2.13 to #3.8 ✔ 목표 해당 완성 화면을 보고 App을 만들어보자 ✔ 조건 - if/else 등을 사용 TA's 힌트 if... else : 조건식의 결과에 따라 {}로 묶인 블록의 실행 여부를 결정하는 조건문입니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/if...else classList : 요소에 적용된 클래스들의 이름을 리스트 형태로 반환해 줍니다. https://developer.mozilla.org/ko/docs/Web/API/Element/classList remove : classList의 참고 자료에서 확인할 수 있습니다. add..
![]()
✔ IT 5분 잡학사전 3줄 요약 IT 분야를 간결한 분량으로 이해하기 쉽게 알려준다. 입문자에게 유용한 팁을 준다. 중간에 간단한 문제들을 내주며 복습하는 경우가 좋았다. IT 5분 잡학사전 챌린지가 끝났다. IT 관련하여 넓고 간단히 알고 싶다면 읽기 좋고, 깊게 공부하고 싶다면 선행으로 가볍게 읽는다면 좋을 것 같다. 소소한 꿀팁들이 기억에 남았다. 책에서 공부 방법에 대한 비유로 운동과의 유사성을 알게 되었다. 운동을 매일 밥만 먹고 운동하는 게 아닌 것처럼.. 쉬는 시간, 휴식 시간이 꼭 필요하다. 지금까지의 공부 습관을 돌아보면, 시간개념 없이 밥 먹고 공부하고.. 뭐 하고 공부하고.. 오직 공부에만 몰두했다.. 공부를 한다고 해서 빡 집중해서 하다가 지쳐 쓰러질 때까지 해왔는데 안 좋은 습관..
![]()
✔ 오늘의 강의 강의: 바닐라 JS로 크롬앱 만들기 3.0 ~ 3.5 ✔ 목표 제공되는 보일러 플레이트를 사용해 애플리케이션을 만들자 ✔ 조건 마우스가 title 위로 올라가면 텍스트가 변경되어야 한다. 마우스가 title을 벗어나면 텍스트가 변경되어야 한다. 브라우저 창의 사이즈가 변하면 title이 바뀌어야 한다. 마우스 우클릭하면 title이 바뀌어야 한다. title의 색상은 colors 배열에 있는 색을 사용해야 한다. .css와 .html 파일은 수정하면 안 된다. 모든 함수 핸들러는 superEventHandler 내부에 작성해야 한다. 모든 조건이 충족되지 못하면 ❌를 받는다. 참고 링크 https://developer.mozilla.org/en-US/docs/Web/Events [Even..
![]()
✔ 오늘의 3줄 요약 REST API 구현 해보기 DOKER 이용 해보기 하이브리드 앱... ✔ 오늘 읽은 범위 EP.39 인공지능, 머신러닝, 딥러닝 아직도 구분하기 힘들다고? EP.40 REST API라니, 휴식 API인가? 이게 대체 뭐죠? EP.41 도커가 뭐지? 왜 필요할까? EP.42 암호화폐의 진실 EP.43 하이브리드...앱? 뭐라고요? EP.44 NFT가 도대체 뭐길래? EP.45 멀웨어, 바이러스, 웜 개념 몽땅 정리 ✔ 기억하고 싶은 내용 1. 인공지능, 머신러닝, 딥러닝 - 인공지능 좁은 인공지능(narrow AI) = 약한 인공지능(week AI) = 딥러닝, 머신러닝 - 한정된 영역에서만 동작 일반 인공지능(general) = 강한 인공지능(strong AI) = 대화, 게임, ..
![]()
이미지 파일을 React 프로젝트에 추가하는 방법에는 Import를 통한 경로 설정과 public 폴더를 사용하는 방법이 있다. 1. 'import'를 통한 경로 설정 import React from 'react'; import myImage from './images/myImage.jpg'; const MyComponent = () => { return ( ); }; 장점 : - 모듈 시스템 활용이 가능 : 'import'를 사용하면 모듈 시스템의 일부로 이미지를 포함할 수 있다. - webpack 등의 번들러를 사용할 경우, 이미지를 최적화하고 관리할 수 있다. 단점 : - 이미지 파일이 큰 경우 번들 크기가 증가할 수 있다. - 동적으로 이미지를 관리하기 어려울 수 있다. - 모듈 시스템 모듈 시스..
![]()
✔ 오늘의 3줄 요약 비밀번호 시스템은 salt가 안전하다. 개발자라면 구현해 보자. 프로그래밍 패러다임에 대한 내용을 공부하자. 대표적인 프로그래밍 패러다임에는 절차 지향, 객체 지향, 함수형 패러다임이 있다. ✔ 오늘 읽은 범위 EP.35 비밀번호는 어떻게 저장될까? EP.36 객체 지향 프로그래밍이 뭐죠? 1 EP.37 객체 지향 프로그래밍이 뭐죠? 2 EP.38 함수형 프로그램이 뭐죠? ✔ 기억하고 싶은 내용 1. 비밀번호 시스템의 잘못된 예 2가지와 괜찮은 시스템의 예: 해시 함수 - 잘못된 예 1) 비밀번호를 데이터베이스에 그대로 저장한다. 비밀번호 시스템을 구축한 사람도 비밀번호를 볼 수 있어서는 안 된다. - 잘못된 예 2) 데이터베이스 자체를 암호화해서 아무도 볼 수 없게 만든 후 비밀번..
