내 경험으로 도움이 되는/원티드 프리온보딩 (25) 썸네일형 리스트형 TIL - 마치며 사실 저번 주 금요일에 끝이 났지만 지금에서야 남겨 본다. 약 5주 동안 재밌게 보냈다. 그 전에는 Git도 제대로 써먹질 못하고, JavaScript나 React, Redux에 대해서 어설프게( 물론 지금도 많이 부족하지만 ) 알고 있었는데, 확실한 것은 이전보다 훨씬 더 많은 것을 더 알아간 시간이었다. 팀원들과 정신없이 기업 과제들을 하면서 몰입, 성장하는 것이 처음에는 몰랐지만 점점 다음 과제를 만나면서 느껴지게 되었고, 기업 과제가 이기나 내가 이기나 해보자라는 마음으로 아름답지 않은 코드들과 각종 버그들과의 싸움(?)도 그것들을 나름 개선하고, 문제를 해결했을 때, 그 느낌이 정말 좋았다. TIL라고 했는데 자꾸 일기장이 되어가는 모습이 좀 민망하지만 🙄 오늘은 이제 슬슬 코딩 테스트 준비와 .. TIL - 23 - Keyword 배포 / Netlify / keyframes / Promise.all / 429 Error Github Page로 배포했다가 404 error 두둘겨 맞고 Netlify로 전환했다. proxy, 배포는 진짜 할 때마다 어렵다.. build에 CI= 을 꼭 붙이자 keyframes으로 Animation을 구현하였다. styled-components에서 props를 이용하여 keyframes에 변수로 넣어주는 게 신박했다. const donutMotionAnimation = (color, degree) => keyframes` from{ background: conic-gradient(${color} 0deg, #ebebeb 0deg); } to{ background: conic-gradi.. TIL - 22 - Keyword Data / Event / Json / Canvas / Graph / Donut Chart 기업 과제 중 제공되는 Json file을 import 해서 사용했다. 그냥 import만 하면 끝이라 간단했지만 이걸 사용해도 되는지 의문이다. Data parsing을 효율적으로 하는 로직 짜는 것이 생각보다 힘들다. enter key와 mouse click을 동시해 할 수 있는 input을 구현하였다. if (e.type === "click" || (e.type === "keyup" && e.key === "Enter")) 이렇게 해도 되려나.. input에 onBlur event 때문에 modal에 있는 list onClick event가 발생하지 않았는데, onClick 대신에 onMou.. 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 및 발표를 하였다. 코딩 테스트 준비할 때가 온 것 같다. - 오늘 하루 느낀 점 오늘 발표를 기점으로 진짜 팀 과제 일정이 끝났다. 알고리즘 개념들을 오랜만에 쭉 훑어보는데, 최근 과제만 하다 보니 머리가 굳었다. 주말에 최대한 끌어올려놔야겠다. TIL - 17 - Keyword Calendar / Date 어제 못했던 Calendar 기능들 (다중 선택 및 선택한 총 일수 계산)을 마무리 지었다. Rendering 때문에 잔상이 남는 게 자꾸 거슬렸고, 해결하기 위해서 useEffect를 최대한 안 쓰도록 코드도 고치고 컴포넌트로 빼서도 적용해봤지만, 아직 실력이 부족하여 결국 조금밖에 개선을 못 시켰다. Git Private Repo는 GitPage로 배포 시 유료라는 것을 알았다. - 오늘 하루 느낀 점 드디어 팀 과제가 전부 끝났다. 다음 주부터는 개인 과제 시작이라 기대가 된다. 실력을 더 쌓아서 좋은 사람들이 많은 회사에서 일했으면 하는 바람이다. 이전 1 2 3 4 다음