전체 글 (115) 썸네일형 리스트형 TIL - 21 - Keyword react-router-dom / query string / animation / CSS react-router-dom에 있는 hooks를 사용하였다. 특정 url로 이동해주는 useNavigate와 query string을 parsing하여 get해주는 useSearchParams를 사용하여 필요한 data를 쉽게 얻었다. import { useNavigate } from "react-router-dom"; // useNavigate 변수 선언 const moveSearchUser = useNavigate(); // 이동할 url 등록 moveSearchUser(`/user?nick=${searchUserNickname.current.value}&matchType=indi`); imp.. TIL - 20 - Keyword hover / Redux Toolkit / localStorage / axios / CORS / http-proxy-middleware mouse hover event를 이용하여 강조 및 애니메이션 효과를 주고 있는데, 자꾸 반응했다가 안 했다가 반복해서 이유를 찾아보니, 뒤에 배경으로 둔 div가 hover 되면서 꼬인 것이었다. 뒤에 div position을 relative로 설정해주고 z-index를 조절하여 해결하였다. 어느 정도 UI 작업이 되어 N사의 data를 받아오는 작업을 하였다. 유저 nickname을 검색하여 data를 받아오고, 거기에 해당하는 accessId로 match data를 받아와야 한다. 우선 유저 nickname을 검색하면 해당 nickname으로 받은.. TIL - 19 - Keyword styled-components / CSS styled-components로 가상 요소 after를 사용하였다. 생각보다 사용법이 간단해서 금방 적응하였다. CSS 애니메이션에서 생각보다 진짜 시간을 많이 썼다. 시작점부터 가로로 늘어나는 선을 표현하는데 처음엔 width를 0으로 주었다가 transition을 설정하여 늘리는 방법으로 구현하였다. const NavContent = styled.div` display: flex; align-items: center; width: 80px; height: 55px; color: white; opacity: 0.5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ox.. TIL - 18 - Keyword Canvas / Algorithm Canvas에 대한 나의 경험을 Posting 및 발표를 하였다. 코딩 테스트 준비할 때가 온 것 같다. - 오늘 하루 느낀 점 오늘 발표를 기점으로 진짜 팀 과제 일정이 끝났다. 알고리즘 개념들을 오랜만에 쭉 훑어보는데, 최근 과제만 하다 보니 머리가 굳었다. 주말에 최대한 끌어올려놔야겠다. Canvas (React version) - Canvas : 테두리(border)도 컨텐츠(content)도 없는 단순한 흰 도화지 같은 사각형의 공간으로 다양한 그래픽 요소를 만들 수 있다. 간단한 도형을 그리는 것은 물론 데이터 시각화, 애니메이션, 웹 게임 등을 만들 수 있다. - 기본 Step 1. tag 생성 const canvasRef = useRef(null); useEffect(() => { canvasRef.current.width = window.innerWidth; canvasRef.current.height = window.innerHeight; }, []); canvas의 크기는 반드시 태그 속성으로 해주거나 useRef를 통한 DOM 접근으로 설정해준다. CSS 사용시 화면 왜곡 및 깨짐이 발생할 수 있다. 위 사진의 .. TIL - 17 - Keyword Calendar / Date 어제 못했던 Calendar 기능들 (다중 선택 및 선택한 총 일수 계산)을 마무리 지었다. Rendering 때문에 잔상이 남는 게 자꾸 거슬렸고, 해결하기 위해서 useEffect를 최대한 안 쓰도록 코드도 고치고 컴포넌트로 빼서도 적용해봤지만, 아직 실력이 부족하여 결국 조금밖에 개선을 못 시켰다. Git Private Repo는 GitPage로 배포 시 유료라는 것을 알았다. - 오늘 하루 느낀 점 드디어 팀 과제가 전부 끝났다. 다음 주부터는 개인 과제 시작이라 기대가 된다. 실력을 더 쌓아서 좋은 사람들이 많은 회사에서 일했으면 하는 바람이다. TIL - 16 - Keyword Calendar / Date 기업 과제 중 Calendar 기능을 만드는데 생각보다 많이 어려웠다. 일반 Calendar 기능은 구현했지만, 클릭을 했을 때의 CSS 처리가 좀 까다롭다. 현재는 클릭한 날짜를 계산하여 일수 계산, 다음 월로 넘어가기 등 전반적인 기능은 끝났다. Date를 오랜만에 써서 그런지 뭔가 새로웠다. 월을 1월부터 12월까지를 0~11까지로 요일은 일요일부터 토요일까지 0~6으로 표현하기 때문에 display 할 때 유의해야 한다. - 오늘 하루 느낀 점 처음에 만만하게 봤다다 지금 시간까지도 다 끝내지 못하여 자고 이어서 하기로 했다. 이제 남은 건 거의 CSS처리뿐이라 금방할 것 같긴 하지만 생각보다 까다로워서 변수가 있을 것 같다. 라이브러리를 안쓰고 만드.. TIL - 15 - Keyword GitHub 배포/ Canvas 이미지를 CRA의 public 폴더에 저장을 했는데, 배포 시 이미지를 불러올 수 없는 상황이 발생하였다. src로 불러오는 것은 불러왔으나, url로 불러오는 과정에서는 문제가 생겨 이미지를 불러오지 못했고 아래의 그림처럼 url을 수정한 뒤에서야 이미지를 불러올 수 있었다. Git 배포 주소를 앞에다가 써주자. Canvas의 개체를 컨트롤하고 싶었는데 이게 흰 도화지에 그림을 그려 넣는 것이라 다시 지우고 새로 그리지 않는 이상은 개체로 선택할 수 없다 하여 좀 고생했다. 개체를 선택하지 못하는 대신 좌표 값이나 색을 이용하여 선택한 것처럼 이용할 수 있다고 하지만 구분자가 좌표뿐이었고, 겹치는 요소가 있을 가능성도 높아 결국 시간 내로 구현하지 못했.. 이전 1 2 3 4 5 6 7 8 ··· 15 다음
