Age of Discovery

티스토리에서 Nextjs.14로 만든 개인 블로그페이지로 이전하였습니다. 아직 열심히 기능 개발중입니다. 한번씩 놀러와 주세요~ https://hyeon-blog.vercel.app/ RyuHyeon | Frontend Engineer mdx example Syntax highlighting, line numbers, line highlights, word highlights Enjoy the accuracy and granularity of VS Code's syntax highlighting engine and the popularity of its themes ecosystem — use any VS Code theme you want! hyeon-blog.vercel.app

NextJs14버전 공부할 겸 블로그를 만들려고 하는데 create next app 명령어로 한번에 다 세팅하는 방법도 있겠지만 (공홈에서도 권장) 이왕 공부할거 일일이 필요한 패키지를 설치하고 파일을 직접 생성하는 게 더 도움이 될 것 같다는 생각으로 무작정 시도해봤다. 기술스택 목록 - Next.js14 - typescript - tailwind css - eslint - prettier 블로그를 만들기 위해 추가적으로 설치한 패키지는 생략하겠다. 바로 시작! 1. NextJs14 설치 원하는 레파지토리 명을 생성 한다. mkdir nextjs14-practice 패키지 매니징을 시작한다. npm init -y 여기서 뒤에 -y를 붙인 이유는 모든 질문에 대해 yes라는 뜻으로 추가 구성에 대한 질문..

날짜 내용 이름 2024.02.02 초판 발행 위르겐 들어가기 전 코딩테스트를 위한 알고리즘 공부를 하면서 단순 배열을 이용했을 때는 시간초과로 테스트케이스에 통과 못했지만 다른 분들의 코드를 참고하여 set, map 객체를 썼을 때 통과되는 경험을 한 후 딥다이브로 공부한 부분을 요약하려고 한다. Set 객체란? Set 객체의 생성 요소 개수 확인 요소 추가 요소 존재 여부 확인 요소 삭제 요소 일괄 삭제 요소 순회 Set 객체란? Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 아래와 같은 차이가 있다. 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X 1. Set 객체..

자바스크립트에 딥다이브하기 위해 집에 고이 모셔두었던 모던 자바스크립트 Deep Dive를 다시 꺼냈다. 최근 들어 나는 공부가 많이 필요한 사람이다. 또한 깊게 공부해야 하는 사람이다. 라는 생각에 사로잡혀 있었는데 실천으로 옮기려고 한다. 그렇게 생각할만한 큰 계기가 있었지만 그 계기를 자세히 설명하기보다는 앞으로의 계획을 실천하는 데에 의의를 두고 싶다. 이 책을 읽기만 하면 재미없을 것 같고 기억에서도 금방 휘발될 예정이라 티스토리에 기록하려고 한다. 처음부터 끝까지 정독하는 것보다는 공부하는 동안 헷갈리거나 중요한 개념들 위주의 챕터부터 읽은 후 정리하겠다.

정말 오랜만에 블로그를 재가동시키려고 한다. 근무를 하는 동안 많은 일이 있었고 조금의 회복할 시간도 필요해서 휴식을 취했는데 다시 공부시작합니다..!! 빠이팅 그 시작은 프로그래머스 레벨1 문제 전부 풀기 ! 현재 79문제 중 60문제 풀었고 그 과정에서 재귀함수를 꽤나 유용하게 사용하고 있어서 공유해볼까 한다. const handleCombinations = (arr, start) => { if (arr.length === 3) { const resultNumber = arr[0] + arr[1] + arr[2] if(getResult(resultNumber)) answer++; return; } for (let i = start; i < nums.length; i++) { handleCombinat..

회사에서 타입스크립트를 사용하고 있는데 문법적으로 배워야 할게 많았고 기능 구현을 할 때도 타입 에러만 겨우 제거하는 급급한 내 모습이 마음에 들지 않았다. 타입스크립트를 효율적으로 사용하고 싶었는데 제목부터 'Effective'인 이 책을 망설임 없이 구매했다. 이 책은 타입스크립트를 좋은 방향으로 사용할 수 있게 도와준다. '타입스크립트는 이렇게 쓰면 좋고 이렇게 쓰면 안 좋다'라는 것을 명확하게 알려주는데 초보자 입장에서 모호했던 부분들을 정확히 짚어주는 역할뿐만 아니라 자바스크립트가 어떻게 모델링 됐는지 까지 다시 한번 생각하게 되는 좋은 기회였다. 타입스크립트를 '잘' 사용하고 싶다면 꼭 접해야 할 필독서로 추천한다.

styled-components로 같은 스타일을 입히지만 각기 다른 html태그를 사용해야 될 때가 있다. 예를 들어 p태그, h1태그, span태그 등은 모두 문자를 표현하는 마크업 언어지만 성질이 다르다. 이 때 다른 성질을 유지하면서도 스타일을 같게 유지하려면 styled-component에서 as prop을 사용하면 된다. ( 타입스크립트입니다. ) const Typography = ({ as = "p", color, children, ...props }: Props) => { return ( {children} ) } 위와 같은 Typography라는 컴포넌트를 만들어서 DynamicTypography 를 리턴해주자 여기서 DynamicTypography는 Styled-component이다. 분..

5월 24일에 첫 출근 후 약 2주간의 시간이 흘렀다. 곧바로 업무에 투입되어 정신없이 일을하게 되었는데 '그럭저럭 해내고 있다' 라는 표현이 적합한 상황이다. 신입 개발자로 입사하기 위해 꾸준히 코딩을 했던 것이 확실히 업무에도 도움이 됐고 프론트엔드 사수 두 분께서도 정말 친절하게 하나하나 알려주셨다. 복지는 너무 만족스럽고 사내 분위기도 더할나위없이 화기애애하여 개발자로서 개발에만 집중할 수 있는 환경이라는게 행복할 정도이다. 얼어붙은 취업시장에서 운좋게 입사하여 정말 뛰어난 능력치를 가진 동료분들과 함께 일할 수 있음에 감사하고 개발을 하며 성장할 수 있음에 감사하다. 이제 내가 집중해야할 부분은 꾸준히 공부하고 실력을 키워 최대한 빨리 1인분 이상 해내는 것이다. 사수분들께서 엄청 바쁘게 일하시..

https://jurgen-94.tistory.com/123 [TypeScript] - 타입 추론 as keyof typeof 디벨킷 프로젝트를 타입스크립트로 마이그레이션하는 작업 중에 타입 추론에 대해 더 찾아볼만한 기회가 생겼다. const contents = { first: , second: , third: , fourth: , }; {isOpen && ( { contents[key] } )} FAQ를 보 jurgen-94.tistory.com 며칠전에 올렸던 keyof typeof 글에 이어서 좀 더 자세히 알아봐야겠다는 생각에 타 블로그 글이랑 강의를 참고하여 연습했는데 그 과정을 공유하고자 한다. enum이란? enum은 열거형 변수로 정수를 하나로 합칠 때 편리한 기능이라고 한다. const..

사이드 프로젝트를 진행하면서 제어컴포넌트와 비제어컴포넌트에 대해 알게되었다. 리액트에서 input을 이용하는 방식 중에 state와 onChange를 이용해 실시간으로 value를 감지하며 input을 제어하는 방식이랑 ref로 렌더링은 일으키지 않으면서 input의 value값만 취하는 방식이 있다 라는 정도만 알고 있었는데 정확한 명칭이 있었다.. 같이 프로젝트 하는 분께서 https://legacy.reactjs.org/docs/uncontrolled-components.html Uncontrolled Components – React A JavaScript library for building user interfaces legacy.reactjs.org 이 링크를 주시면서 공식문서를 읽어보면 ..

디벨킷 프로젝트를 타입스크립트로 열심히 마이그레이션하는 중에 react-full-page라는 라이브러리가 타입스크립트를 지원하지 않아서 생기는 오류에 대해서 정리해보려고한다. 자동으로 타입스크립트까지 지원해주는 라이브러리가 있는가 하면 스타일드 컴포넌트처럼 @types/styled-components 이런식으로 타입스크립트 패키지까지 추가설치해줘야하는 라이브러리도 있다. 하지만 저 오류메시지가 알려주는 것처럼 npm install --save-dev @types/react-full-page 명령어를 실행해 타입 패키지까지 추가설치해봐도 install자체가 안되고 온통 빨간 오류만 뜰 뿐이다. 바로 구글링에 들어갔다. https://github.com/zwug/react-full-page/issues/48..

디벨킷 프로젝트를 타입스크립트로 마이그레이션하는 작업 중에 타입 추론에 대해 더 찾아볼만한 기회가 생겼다. const contents = { first: , second: , third: , fourth: , }; {isOpen && ( { contents[key] } )} FAQ를 보여주는 코드이며 Wrapper로 contents[key]를 감싸 contents의 key와 props로 받은 key가 일치할경우 해당 컴포넌트를 렌더링한다. 해당 파일을 tsx로 변환했을 때 아래의 오류가 나오는데 Contents 객체에 있는 key 값이 Contents객체의 key 중 하나가 아닌 다른 문자열인 경우 오류를 발생시키는 것을 의미한다. typescript는 객체의 key와 value의 타입을 명확하게 추론하..

원티드에서 취준생들을 대상으로 주관하는 프리온보딩 인턴십 프로그램에 참여하게 됐다. 한달동안 10명이 한 팀으로 기업과제를 수행하고 협업하는 것을 배운다. 여기서 가장 강조되는 키워드는 동료학습이다. 협업을 하면서 동시에 동료로부터 배운다. 프리온보딩에 사전 과제를 합격해야 참여할 수 있는데 첫 주차 과제가 각자의 사전 과제를 부분적으로 취합해서 베스트 결과물을 도출해내는 것이었다. 10명이 한 레파지토리를 사용하여 기능을 나누고 코딩을하고 브랜치를 파고 머지를 한다. 링크게더 사이드프로젝트를 하면서 배웠던 가장 큰 자산이 깃허브의 다양한 기능을 활용하고 유연하게 협업하는 법인데 프리온보딩 인턴십에서 가감없이 발휘되는 느낌이었다. ( 좀 잘 다루는 편일지도..? ) 깃이 아직 익숙하지 않은 동료분들한테 ..

https://jurgen-94.tistory.com/119 Craco로 emotion css prop 및 절대경로 config 세팅 (1) 직전 포스팅에 이어서.. 이미 만들어진 CRA프로젝트의 세팅을 입맛에 맞게 변경할 일이 생겼다. 최근에 익숙하게 사용하고 있는 emotion.js의 css prop이랑 다른 모듈을 import 해올 때 누가봐도 간편해 jurgen-94.tistory.com 바로 직전 글에서는 Craco를 왜 사용하고 emotion css prop을 왜 설정하려고 고군분투했는지 알아보았다. 이번엔 컴포넌트나 모듈을 import할 때 상대경로대신 절대경로를 사용해보자. npm install @craco/craco npm install --dev craco-alias Craco를 설치 ..

직전 포스팅에 이어서.. 이미 만들어진 CRA프로젝트의 세팅을 입맛에 맞게 변경할 일이 생겼다. 최근에 익숙하게 사용하고 있는 emotion.js의 css prop이랑 다른 모듈을 import 해올 때 누가봐도 간편해보이는 이렇게 생긴 절대경로를 세팅하고자 마음먹었고 반나절 이상을 소요했다. 뿌듯해서 글을 남겨보고자 한다. 우선 이 세팅을 하는데 craco가 필요하다. craco란? Create-React-App Configuration Override 의 약어이다. CRA는 기본적으로 웹팩이나 script 설정을 숨겨놓기 때문에 npm run eject 명령어로 추출해서 config를 변경해야하지만 한번 변경할 경우 이전상태로 돌아갈 수 없다. Craco는 이러한 단점을 커버하기 위해 탄생한 커스터마이..