Bank-End Chronicles

「Memory gets GC’d, but this blog stays committed.」

2월 4일 (목)

리액트를 막 사용해보기

오늘 한 일 프로젝트를 시작하면서 여러가지 에러를 만난다. 오늘은 hamburger메뉴를 반응형으로 제작할 때 쓰이는 toggle classname이 말썽이었다. 자바스크립트로는 간단한 코드인데 리액트로 옮기니 아주 헛갈린다.

2월 3일 (수)

리액트의 파일 구조를 생각하다

오늘 한 일 기획단계를 끝내고 이제 리액트 컴포넌트를 설계하고 있다.

2월 2일 (화)

자바스크립트 복습하기

오늘 한 일 자바스크립트를 너무 오랫동안 안 본 것 같아서 모달창이랑 비주얼 이펙트를 주는 연습을 했다. css는 알 것 같으면서도 모르는 것들이 많은 존재. 리액트로 뉴스 뷰어 앱을 만들면서 styled-component 등을 연습하고 있다. 리액트도 css모듈이 있어서 알아가는 중이다. 프로젝트를...

React - 라우터

route에 대해서

리액트 라우터 먼저 라우터 라이브러리를 설치한다 yarn add react-router-dom 그리고 index.js에서 BrowserRouter컴포넌트를 추가한다 1 2 3 4 5 6 7 8 9 10 11 import React from "react"; import ReactDOM from "react-dom"; import App from "...

React - 비동기

async를 쓸까 axios를 쓸까 고민하다가 기록

get 1 2 3 4 5 const onClick = () => { axios.get("url").then((response) => { setData(response.data); }); }; async 1 2 3 4 5 6 7 8 9 const onClick = async () => { try { ...

Javascript, CSS - 나타나기 효과

animation

나타나기 효과 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <!DOCTYPE html> <html> <head> <title>Parcel Sandbox</title&...

Javascript, CSS - Modal

Modal

모달창 만들기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <!DOCTYPE html> <html> <head> <title>Parcel Sandbox</tit...

2월 1일 (월)

context api를 배우다

오늘 한 일 Navigation/SearchItem의 검색 키워드를 어떻게 App의 Context API로 올려보낼지 고민중이었는데, 중첩 context로 전달할 수 있다는 것을 알게 되었다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 import Profile from "./...

알고리즘 - 선택정렬

선택정렬에 대해서

선택정렬 선택정렬 : 다음으로 작은 항목을 선택하고 이를 제자리로 바꾸는 과정을 반복 가장 작은 카드를 찾아서 첫 번째 카드와 바꿉니다. 두 번째로 작은 카드를 찾아서 두 번째 카드와 바꿉니다. 세 번째로 작은 카드를 찾아서 세 번째 카드와 바꿉니다. 배열이 정렬될 때까지 그 다음으로 작은 카드를 올바른 위치로 ...

1월 29일 (금), 1월 30일 (토), 1월 31일 (일)

리액트 프로젝트를 다시 들여다보다

오늘 한 일 React 프로젝트를 다시 수정하고 있다. 먼저 tab의 인덱스를 받아서 베스트셀러 탭과 신간도서 탭을 관리하고자 tabContents를 배열로 바꾸고 map으로 tab을 랜더링했다. 그리고 useState를 사용해 tab의 인덱스를 관리해주도록 만들었다. tab은 잘 작동하지만 불필요한 코드가 생겨난 것 같아 리팩토링이 필요...