hanol hanol

export와 import하는 법 특정 변수를 내보낼 때 export default 변수명; - 가져다 쓸 때 import 작명 from '/index.js'; 여러개를 내보낼 때 export let a = 10; export {b, c}; - 가져다 쓸 때 import {a, b, c} from './index.js'; 🚨 여러개를 보낼 때는 { 중괄호 }로 감싸주어야 하고, 가져올 때 변수명을 내보낸 그대로 가져와야 함!! 대량의 변수들을 보낼 때 : * import * as user from "./index.js"; console.log(user.name) const 재할당 불가능 ( let은 재할당 가능) const => 변수를 바꿀 수는 없지만 배열은 조작가능 함수 function good() ..

css Layout 대표적으로 flex와 grid가 있음 flex 가로축(row), 세로축(column) 주로 1차원적으로 정렬을 할 때 사용한다 grid 가로축, 세로축을 2차원적으로 정렬을 할 때 사용한다 flex가 보편적으로 쓰이지만 웹사이트 전체를 그리드로 잡는경우 더 유용하게 쓰임 적절하게 상황에 따라 조합해서 쓰면 좋음 display : grid grid를 사용하겠다!는 뜻 grid의 속성 display : grid grid-template-columns grid-template-rows grid-template-area grid-gap (grid-column-gap grid-row-gap) display : grid; padding : 10x; grid-template-columns: rep..

🛬 타입 안정성이 왜 중요한가? 자바스크립트는 아주 유연한 언어 자바스크립트는 에러를 보여주지 않으려고 함 멍청한 코드를 짜도 에러가 안남 [1,2,3,4] + false // '1,2,3,4false' ⇒ 에러가 안남 function divide(a, b){ return a/b } divide("xxx") // NaN ⇒ 파라미터가 두개인 함수에서 하나만을 적어도 코드가 실행됨 가장 큰 문제는 런타임 에러임 ( 실행할때 나타나는 에러) const hanol = { name: "hanol" } hanol.hello() => 유저가 실행하고 에러가 남 => 실행전에 개발자들에게 에러가 나야함...!! ⇒ 이런 문제들을 타입스크립트는 허용하지 않음!! 때문에 타입스크립트를 써야함 // 타입을 Type che..

인공지능사관학교에서 웹 js 심화 과정 수료를 앞두고 취업의 문턱에 와서 수료 후에 헤이해진 마음을 다잡기 위해서 클론코딩 챌린지가 있어서 신청하겠되었다. 평소에 하고싶었던 트위터!! 아니 X 여서 고민없이 바로 신청했다. 주제를 정하기가 참 어려웠는데 sns로 소통하고 공감할 수 있는 게 뭐가있을까...했는데 내가 젤 좋아하고 관심이 많은걸로 해보기로 했다. 그래야 이 과정에서 더 열정적으로 할 수 있을 것 같았다. 🌚 주제 영화, 드라마를 공유하는 sns , MoView ( Movie + Review ) 자신이 봤던 영화들, 드라마들에 대한 리뷰를 공유하는 sns이다. 뻔한 주제이긴하지만 가장 대중적이기도 하기 때문에 많은 사용자들을 모을 수 있다는 장점도 있다. 🌚 구현 목표 소셜 로그인 : Fir..

import React, { useState, useRef } from 'react'; import axios from '../../axios'; const Save = () => { const [data, setData] = useState(['']); const [image, setImage] = useState(['']); const title = useRef(); const createFile = () => { axios.post('/upload/createFile', { data, title: title.current.value }) .then(res => { console.log(res.data); }) .catch(err => { console.error(err); }); }; const r..

👁‍🗨 create app 리액트 라이브러리 설치하기 npx create-react-app blog node_modules : 라이브러리 코드 보관 public폴더 : static 파일 모아놓는곳 src : 소스코드 보관함 package.json : 라이브러리 정보 npm start 👁‍🗨 리액트 부트스트랩 라이브러리 npm install react-bootstrap bootstrap https://react-bootstrap.netlify.app/ React Bootstrap | React Bootstrap The most popular front-end framework, rebuilt for React react-bootstrap.netlify.app 👁‍🗨 class명은 className으로 씀 ..

👀 Git 왜쓸까? 이전 버전으로 되돌리기 가능 과거 작업내용 열람가능 안정적인 개발가능 작업폴더에서 git 쓰고 싶으면 git init부터 입력하기 git init .git 이 폴더에 생성이 됨 => git이 파일 기록해두는 장소 : repository (저장소) 파일 현재상태를 기록해두려면? git add (파일명) git commit -m "메시지" => git add 한 후 git commit -m "메시지" => 기록완료됨 ( = 버전생성이라고도 부름) 다시 이 상태로 되돌릴수있음 (git log로 조회해서 되돌리기) 모든 파일을 기록할 필요가 없기 때문에 git add (파일명) 해주는것! staging이란? 작업폴더에서 staging area로 폴더들을 git add하는것을 staging한다..

AWS s3 파일 저장용 클라우드 서비스 사용자생성/ 엑세스 키 발급 엑세스 키 만들기 서버 만들 때 엑세스 키 사용함 => 엑세스 키 따로 잘 복사해서 보관해두기 ARN 도 복사해서 보관 s3 => 이미지나 파일을 저장할 수 있는 스토리지를 빌릴 수 있음 버킷 생성!! => 버킷만들기 클릭 버킷 접근 권한 설정 { "Version": "2012-10-17", "Statement": [ { "Sid": "1", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::버킷명/*" { console.log(res); sessionStorage.setItem('location', JSON.stringify(..