profile
프론트앤드 개발자로 일하고 있는 kind J 입니다.
태그 목록
전체보기 (38)React(9)typescript(5)프론트앤드(4)react-query(2)array(2)프론트앤드개발(2)front end(2)CSS(2)원티드 프리온보딩(2)TIL(2)타입스크립트(2)프론트앤드개발자(2)리액트(2)Props(2)JavaScript(2)팀과제(2)비제어컴포넌트(1)arrowDown(1)js 압축(1)원티드(1)리스트(1)http(1)pull_requests(1)프론트앤드면접질문(1)html구조(1)single page application(1)배포(1)검색창구현(1)react router dom(1)키보드이벤트(1)CS 지식(1)flow-text(1)lifecycle(1)searchbar(1)지난강의포함(1)강의내용(1)원티드프리온보딩(1)ssl(1)통신(1)2차원배열(1)refetch(1)Performance(1)인라인요소(1)atoms(1)Recoil(1)자바스크립트게임(1)storybook(1)에러메세지(1)셀렉트박스(1)비동기(1)코드리뷰(1)form태그(1)network(1)네트워크(1)react-select(1)(1)polling(1)평균구하기(1)리액트공식문서(1)고차함수(1)강의기록(1)useRecoilValue(1)chromatic(1)arrowUp(1)frontend(1)인성질문(1)method(1)비동기 통신(1)프리온보딩코스(1)오목(1)stylelint(1)lighthouse(1)자바스크립트(1)오류수정(1)https(1)redux-toolkit(1).evn(1)꿀팁(1)commit컨벤션(1)filter(1)interface(1)면접질문(1)category(1)key(1)프론트앤드팁(1)데이터흐름(1)State(1)기술질문(1)타입스크립트란(1)수업내용정리(1)colors(1)html(1)reduce(1)메타데이터(1)리액트 라우터 입문(1)블록요소(1)onsubmit(1)npm vs yarn(1)form(1)todoList(1)메드업과제(1)components(1)조건부렌더링(1)github(1)틱택토(1)원티드 프리온보딩 프론트(1)Map(1)프리온보딩(1)깃허브(1)grid(1)redux(1)PR(1)yarn 설치(1)프론트앤드질문(1)react router(1)netlify(1)animation(1)codeclimate(1)제어컴포넌트(1)usequery(1)Selectors(1)useRecoilState(1)
post-thumbnail

React 공식문서 정독하기 - 3. FORM

HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 엘리먼트와 다르게 동작한다. 순수한 HTML 에서 이 폼은 name 을 입력받는다.이 폼은 사용자가 폼을 제출하면 새로운 페이지로 이동하는 기본 HTML 폼 동작을 수행한다.리액트

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

React 공식문서 정독하기 - 2. 리스트와 key

엘리먼트 모음을 만들고 중괄호 {}를 이용해서 JSX에 포함시킬 수 있다.일반적으로 컴포넌트 안에서 리스트를 랜더링한다.이 코드를 실행하면 리스트의 각 항목에 key 를 넣어야 한다는 경고가 표시된다."key" 는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열

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

React 공식문서 정독하기 - 1. js 압축, props, Lifecycle, State, 조건부 렌더링

리액트 공식문서 학습의 중요성을 깨닫고 정독 하기로 맘먹었다. 다른 리액트 강의 보기 이전에 필수로 읽어야하는 정석이랄까. 공식 문서 보면서 몰랐던 점이나 기억해야 할만한 것들을 적어보려고한다.프로덕션을 위해 웹사이트를 배포하기 전에 자바스크립트 파일을 압축하여 웹사이

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

[6/4 TIL] react img 경로(상대경로, 절대경로)

이미지 파일을 서버에 올리고 그 올린 파일을 다시 출력하는 기능을 구현하고 싶었다.일단 assets 폴더에 image 태그를 집어 넣고 이미지를 출력하는 것을 태스트 해봤다.이미지 태그에 상대경로로 이미지를 연결해 주었는데이미지가 보이지 않았다.찾아보니 이미지를 src

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

[6/2 TIL] useQuery 사용하기

1. polling 방식 쿼리가 일정 주기마다 실행되도록 하여 서버와 실시간에 가까운 동기화를 제공한다. 쿼리에 대한 polling을 활성화 하려면 pollInterval 옵션얼 설정해준다. refetching 방식 polling 방식처럼 일정 간격으로 update

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

[6/1 TIL] react-select 라이브러리 이용하기

form Submit 이벤트가 일어날 때 selectbox 의 선택된 값을 보내고 싶어서 'react-select' 라이브러리를 사용해보았다.1) react-select 설치2) import3) 사용하기handleSelectChange 함수에 e 객체의 타입을 명시해줘

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

[5/31 TIL] 프론트앤드 면접 질문

오늘은 원티드 프론트앤드 강의 중에 유능한 개발자 분이 오셔서 모의면접을 해주셨다.나는 면접을 직접 참가 하지는 않았지만 혼자서 대답할 수 있는지 테스트해봤는데, 제대로 대답할 수 있었던게 거의 없었던 것 같다.모의 면접때 나왔던 질문들을 정리해보고 하나씩 채워나가면서

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

[5/29 TIL] 수업내용 정리 - colors

프로젝트 할때 주로 쓰이는 colors 는 무조건 변수화 해서 쓰자.디자이너가 바꿔달라고 했을때 한번에 바꿀수 있음😊빨강이라고 해서 다 같은 빨강색이 아니다. 예쁜 빨강색 쓰자. 아래 애플 비주얼 디자인 가이드에 나와있는 색상 참고https://develop

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

[5/26 TIL] 팀 과제 리뷰

3번째 과제는 메드업 팀 과제였다. 리액트랑 타입스크립트가 아직 낯설고 어려워서 그동안 부수적인 역할을 많이 했어서, 이번에는 제일 어려울것 같은거를 맡았는데, 실수였던것 같다. 일단 팀으로 과제할 때는 내가 할 수 있는게 무엇인지 판단하는 메타인지(?)가 필요한것같

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

React query 사용법

프로젝트 과제에서 비동기 통신을 하기 위해 react-query 를 직접 사용해 보았다. 1. react-query 설치 먼저 package.json 에 가서 reacu-query 가 혹시나 설치 되어있는지 확인. 없으면 터미널에서 아래의 명령어 입력해서 reac

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

[5/24 TIL] 강의 정리

https://codeclimate.com/내 깃 계정을 연결하면 내가 짠 코드에대해서 분석해주고, 평가해준다.https://storybook.js.org/https://www.chromatic.com/내가 만든 컴포넌트를 배포해서 디자인팀과

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

[5/23] 코드리뷰

새로운 프로젝트를 시작하면서 지난주 강의 때, 코드리뷰를 다시 리뷰해보는 시간을 가졌다. 1. return 안에서 3항 연산자 지양하자. 가독성 때문에! 이런 코드를 작성해야 할때, return 안에서 쓰지말고 밖으로 빼버리자. 또다른 예, 위와같은 경우 이렇

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

[5/22 TIL] netlify 배포

오늘은 여태 과제로 만들었던 검색기능을 netlify를 이용해서 배포를 해보았다. netlify를 사용하려면 먼저 가입을 해야한다. 원하는 것으로 가입을 한다. 나는 깃허브의 팀 레포지토리를 올릴것이기 때문에 github 로 가입을 했다. 배포를 맡아서 하기로 했

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

[5/19 TIL] 타입스크립트 인터페이스

타입스크립트 지식이 부족하니 매번 프로젝트 할 때마다 시간도 오래걸리고 헤매는 것 같다. 최소한 한번은 쭉 훓고 가야 하는 것같아서, 오늘은 자주 쓰이는 interface 에 대해서 정리해보았다.에러발생!!object 에는 특정 속성값에 대한 정보가 없기 때문이다.에러

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

[5/18 TIL] Redux, Rdux Toolkit

새로운 프로젝트에서 리덕스와 리덕스 툴킷을 사용하기 위해서 리덕스에 대해 학습해보았다. 1. Reducx 란? 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 이다. 2. Redux Toolkit 리덕스 툴킷은 Redux 로직을 작성하기 위해 리덕스에서 공식적으

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

5/17 TIL

프리온보딩 수업중에 사용했던 React query 에 대해서 조사하고 쓰였던 코드를 보면서 하나하나 분석해보았습니다.

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

5/16 TIL

프리온보딩 코스 2번째 과제 중 검색어 입력하고 키보드(위, 아래) 버튼 눌렀을때 이동하도록 하는 기능을 맡았다.검색어를 입력한 뒤 위 아래로 움직이면 이동은 잘 된다.active 되는 item index를 state로 만들었고 arrow up, arrow down 이

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

5/15 TIL

노드 모듈에서 가져오는 라이브러리들은 가장 위쪽에두고 import 해오자. 컴포넌트들은 제일 아래에 쓴다.require 쓰지말자. import 쓰기!깃은 소문자, 대문자 변경을 무시한다.create-react-app 으로 만들면 Webpack 에서 auto-pre-fi

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

5/14 TIL

컴포넌트를 만들 때 재사용이 가능할 만한 부분이 있다. 그런 것은 여러 조각으로 나눠놓으면 재사용이 가능할 뿐더러 가독성도 좋아진다. 컴포넌트의 개념을 살펴보자.컴포넌트를 정의하는 가장 간단한 방법은 JS 함수를 작성하는 것이다.위의 함수는 데이터를 가진 하나의 "pr

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

5/13 TIL

getMoviesApi 에 빨간줄이 생긴다.메세지를 보니 타입에러 인것 같은데..내가 뭘 잘못하고 있는건지 감이 안잡힌다..여기서 문제가 있는건지..데이터는 잘 받아와 졌는데, 화면에 띄우는게 참 어렵다.. 어떻게 타입을 지정해야하는지도 잘 모르겠다. 사실 typesc

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