프론트엔드 (12) 썸네일형 리스트형 정션 아시아 2023 참여 회고 지난 8월에 부산에서 열린 해커톤 대회인 정션 아시아 2023에 참여하였다. 비록 수상을 하거나 좋은 결과를 얻지는 못했지만 값진 경험을 하고 왔기 때문에 이제라도 회고를 해보려고 한다. https://asia.hackjunction.com/home/ 참여 계기 개발자로서 해커톤은 꼭 한 번 참여해보고 싶다는 생각이 들었다. 지금 입사한 회사에서 다른 팀원분들이 정션에 나가서 국내 및 세계 대회에서 모두 수상하고 돌아온 것을 보면서 내가 그들과 같이 일하고 있다는 것에 대한 뿌듯함과 그들과 나란히 무언가를 하고 싶다는 생각을 했다. 그리고 무엇보다 재밌을 것 같았다. 짧은 시간 동안 몰두한다는 경험 해보지 못한 것에 대한 호기심과 막연히 재밌고 잘할 수 있을 것 같다는 생각이 들어 올해 정션에 참여하게 .. 신입 프론트엔드 개발자 7개월 회고록 아침저녁으로 쌀쌀하던 6월 초를 지나 어느덧 장마가 찾아오고 더워지는 본격적인 여름에 들어섰다. 개발자로써 첫 발을 내딛은 지 어느덧 7개월. 길다면 길고, 짧다면 짧은 기간의 일들을 한 번 돌아보려고 한다. 온보딩(21.12 ~ 22.01) 다행스럽게도 회사에서 처음 시도하는 온보딩 프로젝트에 참여하게 되었다. 12월에 입사한 프론트엔드 개발자 2분과 추후 나의 사수가 될 개발자 분(이하 사수)과 함께 회사에서 사용되는 기술들을 사용한 사내 게시판 만들기 프로젝트를 진행하였다. 4주 동안은 개인별로 각 주차마다 주어지는 과제들을 개발하였고, 4주 차 동안 진행한 프로젝트에서 가장 우수한 사람의 프로젝트를 기반으로 마지막 5주 차에 해당하는 기능을 공통으로 개발하였다. Next.js, GraphQL, R.. React-Query의 queryKey 설정 이슈 :: 페이지에서 검색 필터를 통해서 graphql 쿼리문의 where절에 조건을 추가해줬음에도 변경된 쿼리를 React Query가 불러오지 않음. const SomePage: NextPage = () => { const [filterValue, setFilterValue] = useState(); // filterValue 변경 시 자동으로 변경된 값을 가져오지 않음. const { data } = useQuery("some page contents", () => Someservice.getSomeContents(filterValue) }; return ( ); }; export default SomePage; (예시를 위한 코드로 실제 실행을 보장하지 않음) 해결 방법 :: React Query.. [이슈리포트] i18n과 라우팅 변경하기 i18n, internaionalization의 i와 n의 글자수가 18자이기 때문에 i18n인 이 엄청난 공대생 감성의 국제화는 복잡한 이름에 비해서는 다국어를 지원하는 웹 페이지에서 유용하게 사용될 수 있다. 웹 페이지를 사용하는 locale 기반으로 그에 맞는 언어를 설정해줄 수 있기 때문이다. 다른 방법도 있겠지만 i18n을 사용하지 않을 경우에 페이지에서 국제화를 위해서는 다음과 같이 비교적 비효율적으로 코드를 작성해야 한다. const Hello: React.FC = () => { const hiEn = "hi"; const hiKo = "안녕"; return ( {locale === "en" ? {hiEn} : {hiKo} } ) } 브라우저의 locale이 en일 경우에는 영어로 hi, 한.. [회고] 취업 후 2달 간단 회고 짧게 준비한 취업 준비 기간이 끝나고 어느덧 취업을 한 지도 2달을 넘어 3달째를 향해 달려가고 있다. 이름만 들어도 "우와" 소리나는 엄청난 네임 밸류의 회사는 아니지만 블록체인을 다루는 가치 있는 회사의 프론트엔드 개발자로 취업했다. 취업하고 첫 주는 자리 세팅을 하고 회사에 돌아가는 구조를 익히는데 시간을 많이 썼다. 주로 같이 일할 사람들의 이름을 외우는데 많은 시간을 쓴 것 같다. 아쉬운 점이라면 좀 더 적극적으로 다가서지 못한 점. 원체 소극적인 성격이기도 하지만 바뀐 환경에 적응하느라 '어버버'해서 더 말을 많이 못 걸었던 것 같다. 그 때문에 좀 더 빨리 친해지지 못한 점이 아쉽다. 물론, 지금은 많이 친해진 상태이다. 회사에서 개발 부서는 2개(현재는 바뀌었지만)로 나뉘어져 있었다. 내가.. [TIL] react-router의 Link와 a 태그 react-router에서 화면을 이동할 때는 Link 태그를 사용하여 to 속성에 이동할 주소 정보를 작성한다. 하지만 우리는 이미 페이지 이동 기능을 갖고 있는 태그인 a 태그를 알고 있다. 두 기능 사이에는 어떤 차이가 있을까? 결론부터 말하면, 페이지 새로고침 여부가 이 2가지의 차이점이다. Link 태그는 브라우저의 주소만 바꿀 뿐 페이지 자체를 새로고침하지는 않는다. 반면, a 태그는 브라우저의 주소를 이동하며 페이지 자체를 새로고침한다. 페이지 새로고침 여부는 웹 페이지에서 중요하다. 페이지가 새로고침될 경우 현재 렌더링되어 있는 컴포넌트가 모두 사라지고 새로 컴포넌트가 렌더링되게 된다. 이렇게 되면 컴포넌트에 설정되어 있는 state 등이 모두 날아가기 때문이다.[1] Link 태그를 사용.. [CSS] 선택자 :hover로 onMouse 효과 내기 :hover CSS는 단순히 HTML 태그의 스타일을 꾸며줄 뿐만 아니라 다양한 선택자(Selector)를 통해서 여러 부가 기능을 사용할 수 있다. 다양한 선택자들이 존재하는데 그중 :hover는 대상이 되는 태그에 마우스가 올라갔을 때 원하는 스타일을 지정할 수 있게 해 준다. 대신 마우스가 대상이기 때문에 반응형 웹에서 모바일이나 태블릿 화면에 대해서는 대응하기 힘들다는 단점이 있다.[1] :hover 적용 전 이전에 진행했던 Global Navigation Bar를 만드는 프로젝트에서 마우스가 올라갔을 때 요소에 밑줄이 생기는 코드를 작성한 적이 있었다. 이때 작성한 코드는 [그림 1]과 같다. 전체 코드가 아니고 함수가 동작하는 부분만 가져왔는데 대략 정신이 멍해진다. 3개의 state를 만들었.. [반응형 웹] 반응형 폰트 적용하기(em/rem) 지난번 포스팅에서는 미디어 쿼리(Media Query)를 적용하여 화면 크기에 따라 화면 요소를 보이거나 가리는 작업을 진행하였다. 원하는 기준점에 맞는지 미디어 쿼리를 통해 확인을 하고 해당 조건이 맞을 경우 작성한 css 스타일을 적용하였다. [반응형 웹] 미디어 쿼리 적용하기 지난번 포스팅에서는 가변 그리드/마진/패딩을 적용해서 화면의 크기에 따라서 가변적으로 컴포넌트의 크기가 변하도록 하는 작업을 진행하였다. 컴포넌트 간 포함 관계를 이용해서 % 단위로 firsteast.tistory.com 이번 포스팅에서는 `em`과 `rem`을 사용해서 반응형 폰트 크기 적용기를 기록하려고 한다. em / rem em과 rem은 둘 다 기본 개념은 %와 유사하다. 부모 요소의 폰트 크기를 기반으로 반응형으로 .. 이전 1 2 다음
