SUIN

기존에 v1 배포 후 원티드 인턴십을 하던 나는 연락을 한통 받았다 "수인님! 저희 프로젝트 리팩토링 진행하는 건 어떨까요?" 초기에 프로젝트를 진행할때 구현하기에 급급했던 나는 사실 아쉬운 부분이 많았고 내가 담당했던 부분은 책임감 있게 완성하고 싶은 마음이 컸다. 그렇게 시작된 v2 광고지구 탄생 회의를 잠깐 진행하며 기존의 프론트 4명의 멤버에서 -> 3명으로 인원이 축소되며 구현했던 코드들을 확인해 보니 생각보다 파일관리가 너무 복잡했고 유지보수성이 불편하다는 판단이 나왔다. 배포된 레포를 건들기에는 자동화 처리로 인해 혹시 모를 상황을 방지하고자 새로운 레포를 만들어 a-z 까지 새롭게 다시 진행하기로 했다. 고민한 내용 내가 적절한 컴포넌트 분리를 했는가 팀원들과 코드 컨벤션을 잘 맞추며 작업..

오늘한일 원티드 커리어 코칭 수업 week 1 복습 광고지구 프로젝트 리팩토링 회의 온보딩 2주 차 월요일이 시작되었다 오늘은 정규수업이 아닌 커리어코칭 1일 차 강의여서 조금 짧은 강의가 이루어졌다. "지금까지 나는 무엇을 해왔고 앞으로 무엇을 해야 하는가" 강의 중에 가장 기억에 남는 건 지금까지 나는 무엇을 해왔는가라는 부분이다. 프로젝트들을 진행하면서 정작 내가 자세하게 나는 어떤 식으로 문제를 해결해 왔는가에 대해서는 자세하게 생각을 해보지 못한 것 같다. 단계별로 시기별로 나라는 사람을 생각해 보며 정리해 보자 나는 어떤 사람인가 나는 어떤 사람인가 , 이전에는 어떤 일을 했는가? 어떠한 계기로 개발을 시작하게 되었는가? 웹개발자, 프론트 개발자를 선택한 이유가 무엇인가? 개발자로서 어떤 과정..

원티드에서 진행하는 TypeScript Challenge 강의가 끝난 후 본격적으로 인턴십의 첫 주가 끝났다. 주말 동안 한 주를 돌아보며 배운 것을 복습하고, 내가 알게 된 것을 정리해 보려고 한다. 인턴십을 통해 얻고자 하는 것과 배우고 싶은 것 다양한 사람들과 지식을 한층 더 넓은 시야로 생각하는 법 배우기. 내가 알고 있는 지식을 잘 전달하고 좋은 솔루션에 대한 견해를 제시하는 능력 키우기. 모르는 지식을 궁금해하고, 팀원들과 의견을 교환하며 한 단계 성장하기. 다른 부트캠프들과는 달리, 원티드는 한 프로젝트를 각자가 구현하는 것이 아닌, 팀원들이 함께 프로젝트를 진행한다. A부터 Z까지 토론하며, 좋은 방향이 무엇인지에 대해 고민하고 함께 알아가는 부분이 새롭게 느껴졌다. week1-1 배운것 ..

알고리즘이란 문제를 해결하기 위한 방법이라고 할 수 있다 하나의 문제를 풀 때 여러 가지의 코드를 사용해서 풀게 되는데 알고리즘의 계산복잡도는 시간복잡도와 공간복잡도 두 가지의 척도로 표현될 수 있다. 좋은 알고리즘은 실행 시간도 짧고, 저장 공간도 적게 쓰는 알고리즘이지만 두 복잡도는 서로 반비례하기 때문에 두 가지를 모두 만족할 수 없다 시간복잡도와 공간복잡도 사이에서 최적의 알고리즘을 선택해야 하는데 최근 하드웨어가 발전함에 따라 대용량 시스템이 보편화되면서 연산속도가 빨라지고 가격도 많이 낮아지며 공간복잡도보다는 시간복잡도를 조금 더 중요시하는 경향이 있다. "시간복잡도를 고려하여 개발하게 된다면 같은 기능이라도 더 빨리 수행하는 코드를 작성할 수 있으며 서비스품질에도 영향을 줄 수 있다" 그럼 ..

Toast ui 포스트를 참고하던 중 리액트 지연초기화라는 것을 알게 되었다. 원문 : https://www.benmvp.com/blog/four-characters-optimize-react-component/ Four characters can optimize your React component | Ben Ilegbodu How making use of useState lazy initialization can speed up your React function component www.benmvp.com // 예제 1 const Counter = () => { const [count, setCount] = useState( Number.parseInt(window.localStorage.getIt..

NavLink v6.6.1 Type declarationdeclare function NavLink( props: NavLinkProps ): React.ReactElement; interface NavLinkProps extends Omit { caseSensitive?: boolean; children?: | React.ReactNode | ((props: { isActive: boolean reactrouter.com 프로젝트의 sideNav를 구현하는 중 router-dom NavLink를 활용하여 페이지 이동과 스타일링을 구현해 보았다. 조건 - 5개의 Link 중 3개->페이지 이동 / 2개- 전역모달 구현..

Outlet v6.6.0 Type declarationinterface OutletProps { context?: unknown; } declare function Outlet( props: OutletProps ): React.ReactElement | null; An should be used in parent route elements to render their child route elements. This allows nested UI to show up when ch reactrouter.com 하위 경로 요소를 렌더링하려면 상위 경로 요소에서 을 사용해야 합니다. 이렇게 하면 하위 경로가 렌더링될 때 중첩된 UI가 표시될 수 있습니다. 상위 경로가 정확히 일치하면 하위 경로를 렌더링하거나 ..

next.js로 블로그를 만들면서 Link component를 사용하며 nextJS의 Client-Side Navigation와 a 태그의 차이점에 대해서 알아보았다. next.js Client-Side Navigation 공식문서 ⬇️ Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org Client Side Navigate component를 사용하며 브라우저가 전체 페이지를 로드하지 않고 js 상에서 page comp..