내 경험으로 도움이 되는 (37) 썸네일형 리스트형 TIL - 2022.04.02 1. 면접 준비 면접을 대비하여 자기소개부터 CS 지식, 자바스크립트 관련 개념, 리액트 관련 개념을 산책하면서 입으로 뱉어봤다. 개발은 오류가 나면 고치면 되지만 그것과 다르게 면접 때의 말은 한번 내뱉으면 끝이기 때문에 잘 못 말하거나 주제에서 벗어난 말을 하게 되면 정말 당황할 것 같다. 아예 스크립트를 외우는 방향으로 가야 될 것 같다. 그리고 기업에 대한 자료도 확인하고 파악하자. 두괄식도 기억하자! 2. 코딩 테스트 문제 풀기 오늘 원티드에서 주관하는 쇼미 더 코드 코딩 테스트를 보았다. 총 세 문제가 나왔고, 내 추측이지만 DP / 그래프 관련 문제 / DP (문자열) 이렇게 나온 것 같고, 결과는 한 문제도 제대로 못 풀었다. 두 번째 문제 같은 경우에는 나름 맞게 풀었다 생각했는데 자꾸 .. TIL - 2022.04.01 1. 면접 준비 면접 스터디를 진행하였다. 인성 / 협업 관련 주제로 면접 스터디를 진행하였고, 다음과 같이 피드백을 받았다. - 확실히 예상치 못한 질문에 대한 준비가 안되어 있다 보니 정돈되지 않은 문장으로 대답하였다. - 위와 같은 문제로 질문에 대한 답이 주제와 벗어난 경우도 있었다. - 면접관이 듣기 거북한 내용이 있을지 생각하며 대답한다. - 두괄식으로 대답할 수 있도록 생각한다. - 어색한 시선처리에 의해 자신감이 부족해 보였다. (비대면 면접의 단점이다. 평소에도 카메라 렌즈만 보면 시선처리가 불안하고 얼어붙는 습관이 있어서 고치려면 많은 연습이 필요할 것 같다.) 두괄식 및 정돈된 문장으로 말할 수 있도록 문장 입에 붙이기, 시선처리에 대한 연습이 많이 필요하다. 2. 코딩 테스트 문제 .. 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.. 이전 1 2 3 4 5 다음