-
동기와 비동기, promise, async/await, 객체지향
학원 수업 Day23 동기, 비동기 동기 코드 실행이 순차적으로 진행되는 방식이다. 한번에 한가지의 작업만 할 수 있고 그동안 다른 작업은 기다리고 있다가 현재 작업이 완료되어야 차례대로 실행된다. 비동기 작업을 호출 한 후 작업의 진행 및 완료 여부와 관계없이 다음 작업을 시작하는 방식이다. Rest API를 호출해서 받은 정보로 코드를 실행하면 호출 결과가 나오기 전에 코드를 실행하면 문제가 생긴다. 자바스크립트는 코드가 동기식 언어이다. 자바스크립트가 함수를 호출할때, 실행되는 함수가 Callstack으로 차곡차곡 쌓였다가 해당 함수가 실행이 완료되면 Callstack에서... Read More
-
청약닷컴 UI제작로그 Day3
청약닷컴 페이지 만들면서 있었던 좌충우돌 제작로그 async / await axios 로 JSON 데이터를 불러올 때 promise.then 를 사용했었는데 새로운 방법을 배웠다. 바로 async 와 await. async 는 Promise 객체를 반환해주고, await는 Promise 완료 후 이어서 실행되도록 하는 짝궁같은 친구들이다. axios.get(`${baseUrl}/파일명.json`).then((json)=>{ setList(json.data); }) 기존에 이렇게 사용하던 걸 아래와 같이 바꿔주었다. async function fetchData() { const resu... Read More
-
스크롤 이벤트 구현
학원 수업 Day22 scroll event 실습용으로 만든 기업형 레이아웃의 메인 페이지에 스크롤 이벤트를 입혔다. section 정보 저장 height: 100vh 로 지정되어 있는 각 section의 정보들을 받아온다. const main = useRef(null); const pos = useRef([]); let secs; const getPos = ()=>{ pos.current = []; secs = main.current.querySelectorAll('.myScroll'); for (const sec of secs) { pos.current.push(sec.of... Read More
-
local storage 활용
학원 수업 Day21 Community 페이지 간단한 글을 올릴 수 있는 게시판을 만들고 Local Storage에 저장했다. 게시물 등록 <div className="inputBox"> <input type="text" placeholder="제목을 입력하세요" ref={input} /> <textarea placeholder="본문을 입력하세요" ref={textarea} rows='5' ></textarea> <div className="btnSet"> <button onClick=... Read More
-
청약닷컴 UI제작로그 Day2
청약닷컴 페이지 만들면서 있었던 좌충우돌 제작로그 BrowserRouter 청약닷컴은 단순히 포트폴리오 용이 아니라 실제로 서비스를 할 예정이기 때문에 SEO에서 불리한 HashRouter를 쓰는 것 보다는 BrowserRouter를 사용하는 것이 좋겠다고 판단했다. 새로고침하면 404에러가 뜨지만 실제 서버에서는 세팅하면 되겠지. npm i react-router-dom 우선 react router dom 패키지를 설치 해 준다. import ReactDOM from 'react-dom/client'; import { BrowserRouter } from 'react-router-dom'; imp... Read More
-
validation (리액트), useHistory
학원 수업 Day20 validation 리액트 버전의 validation 을 제작했다. 초기값 세팅 에러 체크를 위해 각 input 의 value 값을 저장해야한다. 폼 초기값 객체를 기본값으로 하는 state 로 생성한다. const initVal = { userId: '', email: '', pwd1: '', pwd2: '', gender: null, interests: null, edu: '', comments: '', }; const [ val, setVal ] = useState(initVal); 그리고 에러 메세지와 validation 통과 후 true ... Read More
-
카카오 맵 API (리액트)
학원 수업 Day19 카카오맵 API HTML에서 실습했던 카카오맵 API 예제를 리액트에서도 실습했다. kakao 불러오기 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=키"></script> 하나밖에 없는 소중한 public/index.html 파일의 <head></head> 내부에 kakao Api파일을 불러온다. const { kakao } = window; 카카오맵을 사용할 js 컴포넌트 function 내부 최상단에 kakao 객체를 할당해준다. wind... Read More
-
청약닷컴 UI제작로그 Day1
청약닷컴 페이지 만들면서 있었던 좌충우돌 제작로그 width: auto; 애니메이션 index의 텍스트 로고 부분에 애니메이션 효과를 주고 싶었다. @keyframe index-logo { 0% { width: 0; } 100% { width: auto; } } 처음에는 위와 같이 하면 당연히 될 줄 알았는데, 애니메이션을 입히면 애니메이션이 작동되지 않고 0에서 바로 auto로 적용이 되었다. 해결방법 /* Logo 부분 */ span{ width: auto; animation: index-logo 1s linear 1; } /* keyframe 부분 */... Read More
-
axios, Popup 컴포넌트 활용, css 종횡비 지정
학원 수업 Day18 useState() 복습 학습했던 hook 사용법을 복습했다. 조건문으로 State 변경 let [ time, setTime ] = useState(1); function btnSetTime() { time = time >= 12 ? 1 : time + 1; setTime(time); } <div> <span>타이머 : {time}시</span> <button onClick={btnSetTime}>Update</button> </div> input값 받아서 리스트 추가 실시간으로 input의 ... Read More
-
모던 자바스크립트 Deep Dive 스터디 인프런 12
인프런 - 모던 자바스크립트 딥다이브 스터디 보면서 몰랐던, 헷갈렸던, 확실하게는 알지 못했던 것만 정리해두기 12. 함수 함수 선언문은 표현식이 아닌 문이다. 표현식이 아닌 문은 변수에 할당할 수 없다. const func = function () {}; 위와 같이 변수에 할당되는 것은 함수를 리터럴 표현식으로 해석할 수 있기 때문이다. 함수 선언문과 함수 리터럴은 그 모양이 서로 같은데, 함수 선언문은 이름을 생략할 수 없다는 점만 다르다. 따라서 문맥에 따라 함수 리터럴을 단독으로 사용하면 선언문으로 해석하고, 변수에 사용하거나 피연산자로 사용하는 경우에는 리터럴 표현식으로 해석한다. ... Read More