프론트엔드

매일 여러 개발 글을 탐험하다가 본 Toss Frontend Accelerator 프로그램. 정말정말 좋은 기회고 되면 좋겠다 싶지만 테스트도 있고 커피챗까지 있는 걸 봐서 지원하고, 지원한 모두에게 주어지는 테스트를 맛볼 수 있는 기회이기에 지원해 보았다.최근 기술 공부만 하느라 너무 늦게 글을 발견해서 마지막 문항을 채우지도 못하고 제출해서 마음을 이미 비웠지만, 그래도 토요일에 재밌는 테스트를 볼 수 있으면 좋겠다!! 어떤 문제가 테스트로 나올지 기대 가득한? 더 성장할 수 있을 것 같은 기회가 지원서도 제대로 마무리 못한 채 막을 내려 아쉽지만 지금 산더미처럼 쌓인 공부거리나 열심히 해야겠다..그래도 지원 문항에서 스스로를 되돌아보고, 어떤 개발자가 '잘하는 개발자'일지 고민도 해보고, 2024년..

2024.06.17~21, 5일 동안 진행된 아웃소싱 프로젝트프로젝트 주요 내용: https://github.com/hyeonseok98/3-feet 상세 페이지를 맡으며팀원들끼리 기능 역할분담을 하며 상세 페이지를 맡았을 때는 그렇게 어려운 작업 없어 보여서 '금방 끝나겠네'라는 생각을 조금 했었다. 하지만 디테일을 하나 둘 챙기다 보니 결코 작업량이 적지 않았다. 이렇게까지 디테일적인 부분을 많이 챙겨본 것은 처음이지만 확실히 꼼꼼할수록 사용자의 편의성이 크게 향상되는 것 같았다. 디테일 1. 상세페이지를 모달로?말 그대로 상세 '페이지', 어제자 TIL에 썼듯 지도 api와 숙소/맛집 api를 활용하는 페이지에서 사용자는 여러 숙소나 맛집 정보를 빠르게 확인하고 싶을 텐데 매번 페이지를 이동하게 되..

내배캠 챌린지반 과제로 데스크톱 메모앱을 보고 만든 프로젝트를 최대한 똑같이 만들어보는 걸 내주셨다.메모 앱의 기능 구현 자체는 어떻게 동작할지 보자마자 감은 왔는데, 처음 써보는 redux와 함께하니 어떤 방식으로 상태를 넘겨받고 사용할지 조금 헤맸다. 그래도 이번 프로젝트 덕분에 막막했던 리덕스 사용법을 어느 정도 익힐 수 있어서 다행이다. 전에 Zustand를 써본 경험이 있어서 그런지, 상태관리 하나하는데 만들어야 할 기본 보일러 플레이트 구조가 더욱 복잡하게 느껴졌고 '이래서 개발자들이 다른 전역상태 라이브러리를 따로 만들었겠구나란 생각이 절도 들었다. Styled-components도 제대로 써본 경험은 많지 않은데 이번 기회를 통해 많이~많이 써보았다. 태그에 ID를 쓸지, Class를 쓸지..

개인 과제 중 아래와 같이 글이 길이가 설정한 범위의 영역보다 길어질 경우 나머지 부분을 ... 처리하는 과정에서 튜터님의 도움을 받아 처음 보는 방법으로 해결하여 기록하려 한다.  여러 방법을 시도해보았지만 제대로 작동하는 것이 없었고, 튜터님이 제안해 주신 방법만 적용되어 그 코드가 왜 작동되는지 한 번 알아보았다. ※ overflow: hidden →  가로/세로 영역에서 범위를 초과한 컨텐츠들을 보이지 않게 처리해 준다.※  display: -webkit-box→  웹킷 기반 브라우저에서 요소를 블록 컨테이너인 flexbox로 설정한다.※   -webkit-line-clamp: 1 → 줄 수를 1줄로 제한하며, 텍스트가 한 줄을 넘기면 잘라낸다.※  -webkit-box-orient: vertic..

프로젝트를 하던 중 아래와 같은 경고 문구를 만났다. 코드가 작동은 원활하게 잘 되는데, 경고 문구가 떠있는 건 뭔가 찜찜해서 해결해보고자 하였다.※ 에러 발생명확한 오류 지점이 있으면 디버깅을 해보겠는데, 딸랑 경고문구 하나라 문제를 찾기 어려워 튜터님께 도움을 구했다.※ 해결 방법 문제는 background가 알수 없는 props라고 하는 점이었는데, React 내부적으로 background라는 임의의 키워드를 사용하고 있어 중복되는 문제였다. 때문에 DOM에 접근하는 게 아닌 스타일 시트에만 사용하는 키워드이기 때문에 background 앞에 $을 명시적으로 붙여 사용하니 경고 문구가 사라졌다!(해결해 주신 튜터님께 무한 감사를...) => Transient Props?이 방법을 Transient ..

몇 시간 동안 피카츄랑 노니깐, 내적 친밀감이 부쩍 올라갔다...피카츄 놀이터 만들기평소에 많이 하던 홈페이지를 구성하는 것과 다르게 이벤트 핸들러를 다루는 과제라 처음 봤을 때는 '어떻게 구현할까?' 고민을 많이 했었다. 여러 폴더 구조도 고민해 보고, 어떻게 컴포넌트를 나눌까도 열심히 고민해 보는 시간을 가져 의미 넘쳤던 과제! 과제를 구현하면서 질문거리도 많이 생겼는데, 주말이라 물어볼 튜터님이 안계신다 ㅠㅠ 구글링이나 gpt를 통해서도 명확하게 나오지 않아 튜터님께 질문드리고 정리해 봐야겠다. 아래는 github README.md에 적었던 후기🔎 후기- 과제 목표였던 useState와 props 기능에 충실해서 완성하려 노력했습니다.- 만약 실제 게임이었다면 어떻게 컴포넌트를 나눌지 고민해 보았..

1.  2024 스타트라인 내일배움캠프 X 신한카드 온라인 커리어 컨퍼런스인 2024 스타트라인(STARTLINE)에 참여하였다. 이것저것 개발자와 관련해서 웹서핑을 하다 발견했는데, 참가비가 5,000원 밖에 되지 않는데 선착순으로 굿즈와 배민 상품권도 주는 혜자스러운 컨퍼런스였다.(이게 창조경제..?)   다양한 직군에 따른 세션들이 마련되어 있었는데, 내가 희망하는 프론트엔드와 관련이 깊은 직군들이어서 더욱 열심히 들었다. 특히 첫 번째 세션인 이현호 님의 발표가 정말 흡입력 있어서 앞으로 있을 세션들에 대한 기대감이 커졌다. 특히나 많은 발표자분들께서 개발자의 역량 중 하나로 '내가 같이 일하고 싶은 사람'을 말씀해 주셨는데, 다행히 현재 진행 중인 내일배움캠프에서 몇 주가 멀다 하고 팀이 바뀌기..

React 입문주차 개인 과제인 TodoList를 제출하니, 아래와 같이 튜터님께 피드백이 도착했다!확실히 input의 변화를 onChange로 감지하면서 '아 입력할 때마다 input의 값을 실시간으로 가져오는구나'라고만 생각했지 매번 리렌더링이 일어난다고 생각해보지 않았던 것 같다. 부분적으로 작은 범위의 리렌더링이라 신경쓰지 못했던 것 같고, 피드백에서 언급해주시지 않았다면 계속 이 방법대로 썼을 것 같은데 새로운 방법을 알게 되었다.(피드백 최고..!)  ※ 코드 개선하기1. 개선 전 코드에 onChange와 value를 사용 2. 개선 후 코드useRef를 이용해 의 값을 가져온 코드useRef는 DOM 요소에 접근하는데 사용되며, 이렇게 생성된 객체는 값이 변경되어도 컴포넌트가 다시 리렌더링하..