profile
배워서 공유하기
태그 목록
전체보기 (86)자바스크립트(19)React(16)시스템 프로그래밍(8)CSS(6)면접(6)Java(5)예상 질문(5)기업 과제(4)프리온보딩(4)원티드(4)타입스크립트(4)WSL(3)타입(3)에러(3)vscode(3)운영체제(3)next.js(3)변환(3)클래스(2)git(2)async(2)비동기(2)hook(2)boolean(2)react-query(2)후기(2)await(2)프론트엔드(2)String(2)JavaScript(2)html(2)오류(2)개발자(2)typescript(2)styled components(2)함수 스코프(1)에러 로그(1)노드(1)페이지(1)스코프(1)Symbol(1)Time Management(1)List(1)http(1)그대로(1)Thread(1)호이스팅(1)process(1)Bad Request(1)조건부 렌더링(1)styled-media-query(1)반응형(1)atom(1)슬라이드(1)객체(1)QueryClientProvider(1)제너레이터(1)maven(1)컴포넌트(1)signal(1)json array(1)브라우저(1)윈도우(1)velog(1)chmod(1)엘리먼트(1)input(1)프로토타입(1)Firebase(1)null(1)사용법(1)Document(1)Recoil(1)useEffect(1)useState(1)Process Synchronization(1)심화(1)tistory(1)Memory Mapped File(1)wait()(1)js(1)number(1)request body(1)network(1)네트워크(1)네이티브(1)디자인(1)cmd(1)질문(1)문법(1)한계(1)프라미스(1)시작(1)엔터(1)material ui(1)selector(1)VOID(1)문자열(1)error(1)any(1)documentFragment(1)mongodb(1)클로저(1)쿠키 용량 초과(1)드래그 앤 드롭(1)filter(1)useQueries(1)인터페이스(1)빌드(1)초기 설정(1)리액트 쿼리(1)클릭(1)커밋(1)useContext(1)useReducer(1)함수(1)this(1)400(1)비동기성(1)카운터(1)DOM(1)ctrl+/(1)pipe(1)Enum(1)폴더명(1)DND(1)해결(1)button(1)JSONArray(1)fork(1)shift(1)chown(1)React-slick(1)협업(1)CSR(1)SSR(1)Spring boot(1)launcher.bat(1)record lock(1)번들링(1)페이지네이션(1)IntrinsicAttributes(1)array(1)form(1)프로젝트(1)unknown(1)메시지(1)컨벤션(1)JSX(1)Map(1)mutation(1)IPC(1)업데이트(1)강제변환(1)BigInt(1)케어닥(1)redux(1)대소문자(1)블록 스코프(1)Suspense(1)react-beautiful-dnd(1)tuple(1)이벤트(1)never(1)블로깅(1)넥슨(1)연동(1)function(1)exec(1)jar(1)취업(1)개행 문자(1)작동 위임(1)virtual DOM(1)usequery(1)object(1)cors(1)회고(1)(1)mui(1)콜백(1)파일명(1)웹팩(1)firestore(1)swr(1)exit(1)
post-thumbnail

프론트엔드 개발자 취업 회고

작년 말 이전직장을 퇴사하고 약 5개월에 걸쳐서 재취업을 준비했던 Jin입니다.SI 기업에서 파견이 아닌, 플랫폼 기업에서 서비스에 더욱 몰두하고 싶어서스프링 프레임워크도 좋지만 더욱 인터렉티브한 작업을 위한 개발을 하고 싶어서기타 등등의 스트레스?퇴사를 하고 가장 먼

2022년 5월 31일
·
0개의 댓글

[Next] 동일한 페이지에 CSR, SSR을 상황에 맞게 적용하는 방법

해당 글에서는 동일한 페이지이지만, 주소 입력으로 바로 가는 경우에는 SSR을 적용하고 다른 페이지에서 타고 들어가는 경우에는 CSR을 적용하는 방법을 설명합니다.핵심은 getServerSideProps, getStaticProps와 같이 서버 단에서 실행되는 함수들에

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

async 함수에서 await가 있을 때와 없을 때 차이

async 함수는 Promise 객체를 반환합니다.async 함수 내에서 반환되는 부분 이외의 로직은 바로 실행됩니다.async 함수 바깥의 동기적인 코드들이 모두 실행됩니다.async 함수에서 프라미스 객체를 반환합니다. (만약, chaining으로 .then 또는

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

면접 예상 질문: CSS, Javascript (3)

CSS position 속성이란? display 속성이란? flex란? grid란? inline vs. block vs. inline-block reset.css vs. nomalize.css sass vs. css module vs. css in js

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

[React Query] useQueries에서 suspense가 작동하지 않을 때

이런 식으로 옵션에서 suspense: true를 해주면 useQuery에서는 잘 작동하지만 useQueries에서는 suspense가 작동하지 않습니다.제가 테스트해본 결과이런 식으로 default option에 suspense: true 옵션을 주고,useQueri

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

React 18 + React query에서 QueryClientProvider에 IntrinsicAttributes 에러가 발생할 때 해결 방법

React 17과 React 18의 FunctionComponent의 인터페이스가 달라졌기 때문에 발생하는 에러입니다.QueryClientProvider의 인터페이스가 React 17 기준으로 맞춰서 있기 때문에 발생합니다.따라서, 이를 다시 React 17 기준으로

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

[Git] 폴더/파일명 대/소문자 변경시 인식하게 하는 방법

git 설정 중 core.ignorecase라는 설정이 있습니다.default는 true인데 이렇게 되면 폴더/파일명에서 대/소문자를 변경해도 인식하지 않습니다.이것을 false로 변경해주면 대/소문자도 구분하게 됩니다.아래의 명령어로 변경해줄 수 있습니다.

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

실제 프론트엔드 면접에서 받은 질문 모음

리팩토링할 때의 기준은?개발하면서 최우선으로 생각하는 것은?Call by value vs. Call by referenceforEach vs. map상태 관리 라이브러리 뭐 써봤는지?Context API란?클래스 컴포넌트 vs. 함수 컴포넌트Props drilling이

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

Git 커밋 메시지 컨벤션

<< 태그 >> : << 요약 메시지 >> 형식으로 작성합니다.제목의 처음은 동사 원형으로 시작합니다.총 글자 수는 50자 이내로 합니다.문장의 끝에 특수문자는 삽입하지 않습니다. 예) ., !, ?본문은 한 줄 당 72자 이내로 합니다.본문 내용

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

[React] 조건부 렌더링되는 컴포넌트에서 onClick이 안될 때

input이 포커스되었을 때만 보여지는 컴포넌트가 있었고 그 중 일부분을 클릭할 때 동작을 처리하도록 onClick 속성에 함수를 넣어주었습니다.이런 식으로 조건부 렌더링되는 부분에 onClick을 적용하였는데 이벤트가 발생되지 않았습니다.원인은 정말 간단하였습니다.이

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

SWR 사용법

SWR은 Next.js로 유명한 Vercel에서 만든 원격 데이터 가져오기를 위한 Hook입니다.오직 useSWR이라는 훅을 사용하여 데이터를 조작합니다.key: 요청을 위한 고유한 값fetcher: 데이터를 조작하기 위한 함수를 반환하는 프라미스options: SWR

2022년 3월 31일
·
0개의 댓글

React + Firestore 연동 방법

firebase는 구글에서 만든 개발 플랫폼으로 이것을 사용하면 db 구축이나 호스팅 등을 쉽게 할 수 있습니다. firestore는 firebase이라는 플랫폼에서 제공하는 NoSQL 형식의 DB입니다. firebase를 통해 Serverless하게 DB를 구축할

2022년 3월 29일
·
0개의 댓글

넥슨 기업 과제 후기

이번 프리온보딩 코스의 하이라이트는 단연 5일 동안 혼자 하는 마지막 개인 기업 과제였습니다.이번 코스 5주 동안 총 팀 프로젝트 8개와 개인 과제 1개로 9개의 프로젝트를 하였습니다.그 중에서 이번 개인 과제를 하면서 다양한 것을 많이 시도해볼 수 있었습니다. (이

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

[React] CORS 오류 해결하기

다음과 같은 에러는 우리가 API 호출을 하다보면 종종 접하게 되는 에러입니다.클라이언트의 주소와 API 요청하는 주소의 오리진이 달라서 발생합니다.React를 사용한다면 npm을 다운로드 받아서 해결할 수 있습니다.반드시 src 폴더의 바로 아래에 setupProxy

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

프리온보딩 8조 케어닥 기업 과제 후기

케어닥에서 문서를 잘 만들어주셔서 업무 분담을 하고 디자인을 만드는 데에는 큰 어려움이 없었습니다.주소 검색 API를 호출하여 데이터를 정제하는 과정에서도 생각지 못한 구조로 되어 있어서 팀원 분이 그것을 발견하고 수정하는 데에 약간의 시행착오가 있었지만 그래도 잘 해

2022년 3월 18일
·
0개의 댓글

Recoil 사용 방법

리코일은 페이스북에서 만든, 리액트를 위한 상태 관리 라이브러리입니다. 리덕스처럼 보일러 플레이트가 많지 않고, 정말 필요한 코드만을 여러 store로 구성할 수 있어서 개발 생산성과 효율성을 기대하며 프로젝트에 도입하였습니다. RecoilRoot RecoilRo

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

MUI 페이지네이션 적용 방법

구글에서 지원하는 material ui (이하 mui)에는 다양한 UI 라이브러리들이 존재합니다. 저의 경우에는 Modal, Dialog, Pagination, Skeleton 등을 주로 잘 사용하고 있습니다.그 중에서 Pagination에 대해 말하고자 합니다.페이지

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

면접 예상 질문: 브라우저 동작 원리 / HTTP / 네트워크

Loading: HTTP 모듈 또는 파일 시스템으로 전달 받은 리소스 스트림을 읽는 과정입니다.DOM: HTML을 파싱하여 DOM Tree를 만듭니다.CSSOM: CSS를 파싱하여 CSS TREE를 만듭니다.Render Tree: DOM과 CSSOM을 결합하여 렌더링

2022년 3월 14일
·
0개의 댓글

리액트 쿼리 useQuery 사용법

리액트 쿼리는 fetching, caching, updating 등을 다양한 옵션과 간단한 로직으로 해결할 수 있게 해줍니다. 그 중에서 useQuery는 GET 요청을 보낼 때 사용합니다. 초기 설정은 Context API와 비슷합니다. Context API에서

2022년 3월 11일
·
0개의 댓글

[React] 단일 클릭, ctrl 클릭과 함께 shift 클릭 로직 구현하기

직전 프로젝트에서 핵심 기능은 클릭, ctrl 클릭, shift 클릭으로 아이템을 취사 선택할 수 있게 하는 것이었습니다.저는 shift 클릭 기능 구현을 담당하였고 로직이 복잡하여 구현하는 데에 애를 먹었습니다.이 게시글은 제가 단일 클릭, ctrl 클릭을 고려한 s

2022년 3월 10일
·
0개의 댓글