profile
프론트엔드 개발자
post-thumbnail

React Suspense 알아보기

Suspense는 React 16.6에서 추가된 기능이에요. 처음에는 코드 스플리팅(lazy)을 위해서만 사용됐으나 나중에는 데이터 Fetching을 기다릴수도 있고 SSR Streaming이라는 기능도 제공되게 기능이 확장되는 중이에요. > - Suspense란 무엇

2023년 3월 8일
·
0개의 댓글
·
post-thumbnail

SSR 진짜 CSR보다 빠를까 ?

개요 SSR 관해서 회사 면접을 준비하며 이론을 살짝 검색해서 암기하고 있었습니다. 하지만 실재로 사용하본적이 없고 첫페이지 로딩에 대해서 CSR에 비해 빠르다..!, 검색엔진최적화가 잘되어 있다..! 라고 알고만 있었지 실재로 확인을 해본적이 없어 이번에 진짜 빠른

2023년 1월 11일
·
2개의 댓글
·
post-thumbnail

리액트 컴포넌트 props 조건부로 받는법

리액트에서 컴포넌트 Test가 있다고 해보자.이 Test 컴포넌트는 props로 a,b를 받을 수 있다.근데 a를 props으로 받으면 b를 props으로 받지 못하고b를 받으면 a를 props으로 받을 수 없다.이러한 상황에서 type으로 props으로 컴포넌트를 제

2022년 10월 17일
·
0개의 댓글
·
post-thumbnail

비전공자 6개월 독학 23살 신입 프론트엔드 취업 회고

전문대생(아직 졸업 안함), 비전공자, 부트캠프 or 국비학원 없는 독학, 6개월이란 짧은 시간 개인적으로 좋은 조건이라고 생각들지 않아 취업이 많이 힘들어 보였지만... 드디어 프론트엔드 개발자로 취업을 했다...!! 🎉🎉🎉 공부 방법 나는 코딩을 202

2022년 9월 25일
·
0개의 댓글
·
post-thumbnail

데이터 타입 (기본형과 참조형의 차이점)

변수를 복사할때 차이점 똑같이 변수 하나를 선언하고(여기서는 a, object) 다른 변수(b, object2)에 복사를 했다. 같은 방법을 사용했기 때문에 같은 결과가 나올것 같지만 다른 결과가 나왔다. 그 이유는 데이터 타입에 따른 메모리에 할당하는 법이 다르기

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

프로그래머의 길, 멘토에게 묻다 (잔을 비우다-첫번째 언어)

하나의 언어를 선택하고 익숙해져라.(아마 개발자 커리어의 시작은 첫언어로 할것이다.)다른 사람들에게 피드백 받을 수 있게 오픈 소스로 만들면 더 좋다.그 언어에 숙련된 맨토를 찾아라. 문제 해결에서 엄청난 시간 절약을 할 수 있다. (단, 너무 의지해서 다 물어보면 안

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

프로그래머의 길, 멘토에게 묻다(들어가는 길-4,5)

비슷한 문제를 해결하기 위해 동일한 해결책을 적용하는 것 이책의 저자 데이브, 에디의 경험을 통해서 검증했다. 그리고 문제에 대한 공통적인 해결책인가를 검증하기 위해많은 시간동안 실무 경험자들과 인터뷰를 워크숍과 커뮤니티안에서의 피드백을 통해 완성 시켰다. 이제 책에서

2022년 8월 24일
·
0개의 댓글
·
post-thumbnail

프로그래머의 길, 멘토에게 묻다(들어가는 길-2,3)

이번에는 견습과정과 견습과정 패턴에 대해서 써보려고 한다. 견습과정이란 무엇인가? 과거의 견습과정 과거의 견습과정은 떠올려보면 견습생 한명이 마스터 밑으로 들어가서 각종 일을 돕는다. 단순히 관련 일뿐만 아니라 청소와 같은 잡일도 한다. 지식, 경험, 잠자리, 식사

2022년 8월 24일
·
0개의 댓글
·
post-thumbnail

프로그래머의 길, 멘토에게 묻다(들어가는 길-1)

"프로그래머의 길, 멘토에게 묻다" 라는 책을 읽고 요약해서 정리하는 프론트엔드 취준생입니다 :) 소프트웨어 장인정신이란 무엇인가? 기예, 장읹정신, 견습생, 숙련공, 마스터와 같은 단어의 정의는 순환적이다. > 기예 : 장인이 가진 기술 장인 : 장인정신을 보여주

2022년 8월 23일
·
0개의 댓글
·

Relay

공식문서와 번역기를 참고했습니다. :)Relay는 너와 함께 확장되는 GraphQL 클라이언트이다.Relay는 어떠한 규모에도 높은 성능을 위해서 제작되었다. 여러분의 App의 component가 수십 개, 수백 개, 수천 개라도 상관없이, Relay는 data-fe

2022년 8월 23일
·
0개의 댓글
·
post-thumbnail

GraphQL Relay 가이드 따라가기

팀 프로젝트에서 Relay를 사용한다. Relay는 Apollo에 비해서 자료가 너무 부족하다... 정말 없다 자료가.... 우선 Relay 공식 홈페이지를 참고했다. 1. CRA 만들기 2. 그래프QL로 데이터를 fetch하기(Relay 없이) 깃허브의 GraphQ

2022년 8월 20일
·
0개의 댓글
·
post-thumbnail

Next API Route, Naver Map geocode 사용해보기

Naver GeoLocation을 사용하려고 했으나 CORS에러가 떴다.... 이 CORS에러를 해결하기 위한 방법을 찾아보다가 Next JS에서 API Route라는것을 보게 되었다. Next Js API Route 실행해보기 구글링을 하면서 API Route라는것에

2022년 7월 30일
·
0개의 댓글
·
post-thumbnail

React에서 Naver map 사용해보기

네이버 공식 사이트를 참고하여서 만들었습니다 [참고 : >>공식사이트>깃허브 Uncaught TypeError: Cannot read properties

2022년 7월 24일
·
0개의 댓글
·
post-thumbnail

프론트엔드 기본지식 Q&A 수정하기

전에 만들었던 사이드 프로젝트 프론트엔드 Q&A 웹에서 문제가 생겨서 수정할것이 생겼다. 딱 봐도 느껴지는 문제..... 가독성!!! 내가 만들었지만 내가 봐도 읽기 싫게 생겼다 증말... 웹에 적용하기전에 이런식으로 노션에 나름(?) 깔끔하게 정리하는데... 이런

2022년 7월 8일
·
0개의 댓글
·
post-thumbnail

프론트엔드 기본지식 Q&A 웹페이지 프로젝트

https://github.com/hautest/developer-q-and-a- 현재까지 개발을 작은 프로젝트 만들기에만 급급하여서 기본적인 개념들의 부족함을 많이 느꼈다. 부족한 개념들을 공부하면서 그것들을 정리하여 볼 수 있는 웹을 만들고 싶었다.퀴즈 형

2022년 6월 20일
·
0개의 댓글
·
post-thumbnail

Recoil 사용해보기

기본에 Redux, Redux-toolkit, Redux-saga를 이용해서 상태 관리를 했었는데 코드가 너무 길어져서 다른 상태관리법을 찾다가 Recoil 알게됐다. Recoil을 이용해서 간단한 todolist를 만들어보자

2022년 6월 13일
·
0개의 댓글
·
post-thumbnail

React Query 사용해보기

React Query를 사용하는 이유 React Query를 사용하기전에 Redux, Redux Toolkit, Redux Saga를 이용했다. PostSaga.ts PostSlice.ts 이런식의 패턴이 계속 반복되면서 서버와 통신하는데, 나중에 보면 store

2022년 6월 4일
·
0개의 댓글
·