전체 글 (137) 썸네일형 리스트형 [Next.js] URL에 상태 저장하기 (useSearchParams, URLSearchParams) 개요“URL 링크를 공유했을 때 같은 화면을 볼 수 있도록 해주세요.”검색 폼이 있고 결과가 출력되는 화면에서 위와 같은 요구사항을 받았다. 처음에는 그냥 직접 검색하면 되는 거 아닌가..? 싶었는데 검색 조건이 매우 X2 많은 기획서를 보고 꼭 필요한 기능이라는 것을 깨달았다. 10개가 넘는 필터링 조건들을 보고 바로 납득했다. 😮 요구사항을 다시 보면,URL 링크를 공유했을 때 같은 화면을 볼 수 있어야 한다.= URL에 검색 조건(상태 정보)을 저장해야 한다.= URL의 쿼리 스트링을 조작할 수 있어야 한다.→ URL 쿼리스트링에 상태 정보를 넣고 뺄 수 있어야 한다는 결론이 나온다. 어찌 보면 당연한 기능인데, 왜인지 이전까지 생각해보지 못한 기능이었다. 아마도 리액트에 너무 익숙해져 있기 때문.. [연간 회고] 2023년 회고 3월에 하는 작년 회고..ㅎㅎ 뒤늦게나마 끄적여 본다. 인턴 퇴사 2023년 상반기에 일어난 가장 큰 변화는 인턴 퇴사. 반년 간의 인턴 생활이 끝났고 2월 말 퇴사를 했다. 처음으로 많은 사람들과 하나의 큰 프로젝트를 진행하면서 협업은 이렇게 하는구나를 배울 수 있었고, 기술적으로도 다양한 경험을 하며 성장할 수 있었다. 당시에는 잘 몰랐지만 KEP에서의 경험들은 프런트엔드 개발자로서 커리어를 시작하는데 아주 든든한 발판이 되었다. 물론 아쉬운 점도 많다. 6개월이라는 시간 동안 주어진 일에만 몰두한 것이 약간의 아쉬움으로 남는다. 그 순간에는 당장 눈앞의 일을 처리하기에도 급급했기 때문이라는 핑계를 대 보지만.. 조금 더 넓은 시야를 가지고 상황을 파악하고 개선점을 찾아서 주도적으로 일을 했다면 좋았.. [도서] UX/UI의 10가지 심리학 법칙 2 https://www.yes24.com/Product/Goods/92426632?pid=123487&cosemkid=go16268543581269579&gad_source=1&gclid=CjwKCAiA8YyuBhBSEiwA5R3-EwSUMqd0_vWn1bFFl058OZ-u_-SkS4ru4Hh3EkYB5kG0avESvvZcNBoCuRYQAvD_BwE UX/UI의 10가지 심리학 법칙 - 예스24 심리학을 만난 UX/UI 디자인!”좋아 보이는 것”의 비밀, 이 10가지 심리학 법칙에 담겨 있다디자이너가 갖춰야 할 소양은 디자인 지식만이 아니다. 디자이너가 갖춰야 할 필수 소양인 심리학, 특 www.yes24.com 6. 피크엔드 법칙 인간은 경험 전체의 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 .. [도서] UX/UI의 10가지 심리학 법칙 1 https://www.yes24.com/Product/Goods/92426632?pid=123487&cosemkid=go16268543581269579&gad_source=1&gclid=CjwKCAiA8YyuBhBSEiwA5R3-EwSUMqd0_vWn1bFFl058OZ-u_-SkS4ru4Hh3EkYB5kG0avESvvZcNBoCuRYQAvD_BwE UX/UI의 10가지 심리학 법칙 - 예스24 심리학을 만난 UX/UI 디자인!”좋아 보이는 것”의 비밀, 이 10가지 심리학 법칙에 담겨 있다디자이너가 갖춰야 할 소양은 디자인 지식만이 아니다. 디자이너가 갖춰야 할 필수 소양인 심리학, 특 www.yes24.com 오랜만에 돌아온 블로그..! 최근에 읽은 책 내용을 정리해 보며 죽어있던 블로그를 살려보자! .. [월간 회고] 2023년 7월 - 심플 📌 이번 달 회고 1. 개발 공부 알고리즘 드디어 프로그래머스 Lv. 2를 끝냈다. 알고리즘 풀이 언어를 자바스크립트로 바꾼 지 어느덧 9개월이 넘어간다. 프로그래머스에서만 약 270개가 넘는 문제를 풀었고, 이제는 C++로 풀이가 불가능할 정도로 자바스크립트에 익숙해졌다. 가끔 우선순위 큐가 필요하거나, 순열 문제를 풀어야 할 때는 좀 불편하지만 그래도 언어를 바꾼 것에 대해 후회하지 않는다! 매우 만족! 원티드 프리온보딩 Next.js 5월에는 모노레포를 주제로 들었었는데, 이번에는 Next.js 강의가 열려 바로 신청했다. 프론트엔드 기술의 전반적인 발전 과정을 훑어보고, React와 비교하여 Next.js의 특징들을 알아보았는데 굉장히 유익했다. 특히 Next.js 깃허브에 들어가 직접 코드레벨에.. [Next.js] pages에서 app 라우터으로 마이그레이션 (feat. fetch, generateStaticParams) 개요 지난 글과 이어지는 포스팅으로, pages 라우터로 구현했던 마크다운 블로그를 app 라우터로 마이그레이션하는 과정을 남겨두려고 한다. 전체 흐름보다는 변화 포인트에 집중해 보자! 레이아웃 컴포넌트 pages에 있던 _app.tsx와 _document.tsx는 app의 layout.tsx으로 대체한다. _document.tsx에서 설정했던 styled-components도 app/layout.tsx로 이동시킨다. (참고. lib/registry 코드 ) 컴포넌트로 만들어 두었던 레이아웃도 가져오고, 글로벌 스타일도 추가한다. app/layout.tsx import Layout from '../components/Layout'; import StyledComponentsRegistry from '.... [Next.js] 마크다운 블로그 만들기 (feat. getStaticProps, getStaticPaths) 개요 이번 달 초, Next.js 원티드 프리온보딩에 참여하며 진행했던 과제를 정리해보고자 한다. 우선 next.js 12기준으로 pages 라우팅으로 마크다운 블로그를 만들어보고, 이를 13버전의 app 라우팅으로 마이그레이션하는 과정을 정리한 글이 될 것이다. 1. 프로젝트 생성 간단하게 CNA를 사용했다. npx create-next-app --typescript 2. styled-components 설정 Next.js에서 styled-components을 사용하려면, 추가 설정이 필요하다. CSS-in-JS 라이브러리는 자바스크립트 런타임 시 적용이 되기 때문에, SSR에서 스타일 적용이 즉시 되지 않기 때문이다. 자바스크립트가 적용되기 전의 HTML 파일이 먼저 렌더링 되면서 스타일이 먹히지 않.. [월간 회고] 2023년 6월 - 시간멈춰 📌 이번 달 회고 이번 달은 체감 상 가장 빠르게 지나갔다. 벌써 반년이 지났다고?! 남은 반년은 더 촘촘히 살아야겠다. 1. 면접 스터디 면접 스터디를 드디어 시작했다. 자바스크립트와 리액트에 대한 기술적 질문을 위주로 준비하면서 각 개념들에 대한 체계를 잡았다. 알고 있는 개념이지만 논리적으로 깔끔하게(?) 설명할 수 없는 것들을 정리하는 과정을 거치며 깊이 있게 공부할 수 있었다. 혼자서 질문에 대한 답변을 정리하고, 스터디 시간에 말로 뱉어보고, 피드백을 받는 경험은 많은 도움이 되었다. 게다가 스터디를 준비하는 과정에서 새롭게 알게 된 내용도 많다. 나중에 블로그에 정리해야겠다. 2. 개발 공부 그때그때 필요한 공부를 했다. 지난 몇 달간 “다음 달에는 이 책 읽고 이 강의 들어야지”라고 계획을.. 이전 1 2 3 4 ··· 18 다음
