profile
물음표를 느낌표로 바꾸는 개발자

useRef 와 forwardRef

ref 란 무엇인가 ? 간단한 사이드 프로젝트인 countdown-game을 제작하면서 dialog 와 timer를 전달을 위해 useRef를 사용하였다. >useRef는 렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook입니다.(React공식문서) J

약 22시간 전
·
0개의 댓글
·
post-thumbnail

크래프톤 지원후기와 느낀점

24년도 첫번째 공채 준비를 하게 되었다. 나한테도 살면서 이력서를 써내려가며 다듬고 수정을 거치는 과정을 거칠줄은 몰랐다. 물론 급하게 이력서를 썻던것도 아니다. 23년도 마지막 학기를 다닐 때 부터였나..어느정도 '이력서' 라는 틀을 갖고 조금씩 채워가긴 했다. 이

3일 전
·
0개의 댓글
·

브라우저의 렌더링과 리플로우 리페인팅

📚 들어가며 오늘 면접 스터디에서는 리플로우와 리페인팅에 대해 설명 및 예상 면접 질문들을 만들어 팀원들에게 소개하였다. 우선, 리플로우와 리페인팅 설명 전에는 브라우저 렌더링의 대해 간단하게 설명하는게 좋다고 생각하여 렌더링 설명을 추가하였다. 또한 블로그에 한번

2024년 2월 29일
·
0개의 댓글
·
post-thumbnail

SPA/MPA, CSR/SSR 알아보자

CS지식 면접 스터디에서 SPA/CSR/SSR 에 대한 정의와 각각의 차이점을 정리하여 팀원들에게 발표를 하였다. 하지만 남에게 제대로 이해시키면서 설명을 한것이 아님과 동시에 지식이 아직 부족하다고 느꼈기에, 개인적으로 조금 더 깊이 알아보면서 공부하고 싶다는 생각이

2024년 2월 19일
·
0개의 댓글
·
post-thumbnail

시간 경과에 따른 State

요즘 들어 자소서와 코테에만 신경을 쓰며 살았다. 너무 개발을 놓다보니 무언가를 만들고 싶었고, React의 기본기가 부족하다고 생각하여 최근에 공식문서를 읽으며 천천히 기본기를 다지자는 마음이 생겼다. 때문에 공식문서에 나오는 틱택토 게임을 만들면서 조금씩 진행하고

2024년 1월 29일
·
0개의 댓글
·

[React] 리스트 데이터 동적 출력과 스프레드 문법

리액트 개념들을 탄탄히 다지면서 개인 프로젝트를 진행하고 있다. 진행중에 있어서 data.js 라는 파일 안에 객체 배열이 들어있다. 각 항목들을 컴포넌트에 전달하는 데 전개연산자를 사용하여 컴포넌트에 속성을 전달해 주다 머릿속으로 잘 그려지지 않아 글을 쓰게 되었다밑

2024년 1월 17일
·
0개의 댓글
·

[React] 조건적 컨텐츠 렌더링

JSX를 반환하는 것은 주로 React 컴포넌트 내에서 사용되지만, 조건에 따라 다른 곳에서도 사용될 수 있다. return을 사용하기 전, JSX 코드는 반환되지 않기 떄문에 컴포넌트 코드 아무 곳에서 일반적으로 사용 가능하다. 즉 변수나 상수에 저장해서 쓸 수 있다

2024년 1월 16일
·
0개의 댓글
·
post-thumbnail

[자료구조] 해시 알고리즘

자료구조를 본격적으로 공부하려고 이 글을 써보려고 합니다. 자료구조를 제대로 공부해야만 훗날 근무를 할 때, 혹은 더 좋은 코드를 작성할 수 있다고 생각하기 때문입니다. 자료구에 대해 깊이 있는 개발자가 되기 위해 공부해보겠습니다.Hash function: 임의 길이

2024년 1월 11일
·
0개의 댓글
·
post-thumbnail

Kakao Maps 지도 렌더링 오류

이번에 기회가 되어 싱크톤 공모전을 나가게 되었다. 개발단계에서 지도API를 사용하여 Map을 띄우는 부분을 맡게 되었다. map을 띄우는건 react-kakao-maps-sdk 를 사용하여 띄웠는데 문제가 생겼다. map이 초기에 렌더링이 되지 않고 페이지가 나온것

2023년 10월 19일
·
0개의 댓글
·
post-thumbnail

[JS]비동기 실행과 동기 실행

원티드 프리온보딩 과제를 해결하면서 나에게 의문점이 하나 들었다. 'REST API 를 진정으로 이해하면서 코드를 작성한건가?' 사실 이런 의문점이 든 이유는 짧은 기간안에 기업 과제물을 완성하여 제출해야 하다보니 다른 사람들의 코드를 많이 참고하였고, 완성된 코드를

2023년 9월 20일
·
0개의 댓글
·
post-thumbnail

GraphQL 의 간단한 설명

깃허브에서 Next를 공부하는 레포지토리를 생성하였다. 새로운 것을 공부하려고 만든 목적인 레포지토리 이기에 API 중 하나인 GraphQL을 배워 간단한 개념과 초기셋팅 방법을 적어보려고 글을 작성하게 되었다. Graph QL(이하 gql)은 Structed Quer

2023년 9월 13일
·
0개의 댓글
·
post-thumbnail

React 무한스크롤 (Feat: Intersection Observer)

프리온보딩 인턴쉽 과제를 하던 도중, 무한스크롤 기능을 넣으라는 조건이 있었는데 당시 제출기한이 너무 짧았고,무한스크롤의 대한 이해도와 코드가 어려운 탓에기능을 완전하게 끝내지 못하고 제출하였기 때문에 리펙토링을 하면서 이 글을 쓰게 되었다! Github API를 활용

2023년 8월 8일
·
1개의 댓글
·

옵셔널 체이닝과 Type Error

들어가며 😃 대체 이 글을 왜쓰냐! 특정 레파지토리 Issue List 들을 가져오던 중, 계속해서 property type error 오류 메시지를 만났기 떄문이다. 프로젝트 제출 기한이 짧고, 빠르게 제출해야 해서 옵셔널 체이닝을 사용하고 난 후 그냥 넘어갔지만

2023년 7월 27일
·
0개의 댓글
·

React 날짜 형식을 관리하는 moment.js

GitHub REST API를 활용하여 특정 깃헙 레파지토리의 이슈 목록과 상세 내용을 확인하는 웹 사이트를 구축하는 프로젝트를 진행 중 아래와 같이 날짜 형식이 원하는 대로 출력이 되질 않아 찾아보다 moment.js 라는 것을 알게되어 이 글을 쓰게 되었다😎mom

2023년 7월 24일
·
1개의 댓글
·

prettierrc.cjs 와 prettierrc.js 차의점

여지껏 팀 프로젝트를 진행하면서 prettierrc.cjs 파일 형식으로 진행을 하였는데 이번 새로운 팀 프로젝트를 들어가기 전, 팀원들과 소통을 하다 prettierrc.cjs 와 prettierrc.js 의 차이점을 이야기 하게 되었다. prettierrc.js 파

2023년 6월 27일
·
0개의 댓글
·

A component is changing an uncontrolled input to be controlled

TodoList를 만드는 도중 input 태그 안에 value 의 기본값을 defaultValue 라고 주었더니 나온 오류이다. value 의 들어가있는 기본값은 state 값의 문제결론부터 말하자면 value 속성은 제어 컴포넌트로서 입력 요소의 상태를 React가

2023년 6월 26일
·
0개의 댓글
·

useNavigate 와 window.location 의 차이점

원티드 프리온보딩 과제를 진행중 무한 리렌더링이 발생하여 글을 적게 되었다. 기능구현 중 회원가입 후 로그인을 하게 되면 localStroage 에 token 값을 저장하여 TodoPage로 넘어가게 코드를 설정해놓았다. 하지만 todo 페이지로 넘어가기 전, 화면 렌

2023년 6월 22일
·
0개의 댓글
·
post-thumbnail

zsh: command not found

모노레프 팀 프로젝트를 첫 진행과 동시에 겪은 오류 메시지다.다른 팀원들은 nvm 설치가 원활하게 되었지만, 필자는 오류때문에 애를 먹었다.이 글은 zsh 기준으로 설명을 하겠다.꼭 vim 이 아니여도 되지만, 필자는 vscode 에서 해보았지만 되질 않아서 vim으로

2023년 6월 2일
·
0개의 댓글
·
post-thumbnail

useParams() 를 사용하면 문자열 반환

혼자 진행하는 React 프로젝트 중에서 find 매서드를 사용하다가 알게되었다.find 매서드를 사용하려 했던 이유는 이미지 클릭 시 그에 맞는 이미지에 맞춰서 페이지를 불러오게끔 하려 했다. 만약 밑에 있는 이미지를 클릭 했을 시 ! 이미지에 맞는 페이지를 띄우는

2023년 5월 17일
·
0개의 댓글
·
post-thumbnail

CRA 절대경로 설정 with CRACO

React 팀 프로젝트 활동 당시 vite로 환경설정을 하게 되어 vite 방식대로 CRA의 절대경로를 설정해 보았더니 제대로 작동이 되질 않아 찾아보다 글을 쓰게 되었다.기본적으로 CRA는 React 공식 홈페이지에서 제공하는 절대 경로 설정 방법(https&#x3A

2023년 5월 10일
·
0개의 댓글
·