profile
(~˘▾˘)~♫❝ 쉽게만 살아가면 재미없어 빙고 .ᐟ ❞•*¨*•.¸¸♪
태그 목록
전체보기 (154)TIL(99)JavaScript(60)React(30)web(28)react.js(24)알고리즘(23)코드카타(23)algorithm(22)codekata(22)CSS(14)html(10)DOM(9)코어자바스크립트(8)js(7)WeCode(7)typescript(6)API(6)array(5)component(4)clone(4)review(4)git(4)SSR(3)hooks(3)next.js(3)Event Handler(3)clone project(3)seo(3)자바스크립트(3)Sass(3)this(2)타입스크립트(2)promise(2)styled components(2)pre-rendering(2)useEffect(2)useState(2)http(2)Database(2)주니어개발자(2)routing(2)CS(2)await(2)framework(2)jquery(2)bootstrap(2)신입개발자(2)웹팩(2)webpack(2)sourcetree(2)Query String(2)MVC(2)async(2)클론코딩(2)library(2)mobx(2)클래스(1)terminal(1)ES6(1)rebase(1)datastructure(1)비전공자(1)Flexbox(1)callback(1)동적라우팅(1)Function Component(1)Directory(1)MVC패턴(1)Class Component(1)mockdata(1)scroll event(1)i18n(1)Flag(1)개발자 도구(1)setter(1)pagination(1)무한스크롤(1)데이터타입(1)코드리뷰(1)Code Review(1)browser(1)authentication(1)interface(1)심볼(1)피드백(1)data(1)Conference(1)프로토타입(1)infinite scroll(1)ReactRouter(1)Restful(1)mock(1)authorization(1)부트캠프(1)콜백함수(1)sorting(1)parameter(1)호이스팅(1)throttle(1)debounce(1)비동기처리(1)react i18next(1)2020(1)개발문화(1)앵귤러(1)DevTools(1)실행컨텍스트(1)라우팅(1)retrospect(1)전역상태관리(1)Aquery(1)project review(1)mansonry(1)google map(1)project reveiw(1)searchbar(1)검색창(1)검색결과페이지(1)ordering(1)faker.js(1)data fetching(1)module bundler(1)mobx-react-lite(1)여성개발자컨퍼런스2020(1)if(kakao)(1)리액트라이브러리(1)다국어처리(1)객체 프로퍼티(1)프로퍼티 플래그(1)Object.defineProperties(1)Object.getOwnPropertyDescriptors(1)weakset(1)weakmap(1)prevent scroll(1)스크롤 막기(1)reveal2020(1)react-modal(1)tech conference(1)tagged templates(1)opp(1)protocol(1)modeling(1)classList(1)@property(1)mock data(1)hosting(1)kakao(1)브라우저(1)redux(1)decorator(1)frontend(1)Angular(1)react native(1)linux(1)refactoring(1)클로저(1)reactjs(1)번역(1)개발자(1)github(1)카카오(1)npm(1)cli(1)Map(1)프레임워크(1)스코프(1)class(1)shell(1)Flux(1)google(1)developer(1)프론트엔드(1)보안(1)hook(1)Symbol(1)getter(1)stack(1)queue(1)closure(1)배열(1)domain(1)State(1)useRef(1)Prototype(1)json(1)위코드(1)axios(1)ajax(1)tuple(1)set(1)function(1)method(1)디자인패턴(1)Expo(1)컨퍼런스(1)
post-thumbnail

사수에게 칭찬받는 PR 체크리스트

Pull Request 에 🎉👍😄🚀❤️ 만 달리는 그날까지~!~!~!

2021년 2월 24일
·
20개의 댓글
post-thumbnail

TIL 94 | Next.js 동적라우팅과 API 라우팅 방법

Next.js에서는 어떻게 라우팅을 구현할까? 공식문서 튜토리얼을 따라가보자

2020년 12월 30일
·
0개의 댓글
post-thumbnail

TIL 93 | Next.js의 Pre-rendering과 Data Fetch 방법

Next.js에 존재하는 두가지 종류의 Pre-rendering 방법과, 데이터는 어떻게 불러오는지에 대해 알아보자.

2020년 12월 21일
·
2개의 댓글
post-thumbnail

TIL 92 | Next.js 차근차근 시작해보기

Next.js 공식 튜토리얼 따라하면 두시간 안에 기본기 끝내기 쌉possible

2020년 12월 21일
·
2개의 댓글
post-thumbnail

TIL 90 | useRef로 글줄에 따라 인풋박스의 높이 바꾸기

일반적인 메신저나 댓글에서는 입력한 내용의 길이에 따라 인풋 상자의 크기가 변하는 것을 볼 수 있다. useRef로 간단하게 위 기능을 구현해보자.

2020년 12월 16일
·
0개의 댓글
post-thumbnail

TIL 89 | dimmed 영역 스크롤 막기

햄버거 버튼을 눌렀을때 사이드에서 네비게이션 모달이 나오는 페이지의 형태는 쉽게 찾아볼 수 있다. 이때 사용성을 위해서 모달창은 스크롤이 가능하지만(화면보다 네비게이션의 높이가 긴 경우), 그 외에 dimmed 영역은 스크롤이나 터치 이벤트가 불가능하게 하는 것이 좋다

2020년 12월 14일
·
0개의 댓글
post-thumbnail

TIL 80 | react-i18next로 다국어처리 해보기

처음 일을 시작하고 jsx나 tsx 파일에 텍스트를 직접 마크업하지 않은 것을 보고 멘붕이 왔었다. t( '...' ) 이런 식으로 내용을 적용한 것을 볼 수 있었는데, 이게 i18n을 사용해서 국제화 작업을 한 것임을 알아냈을때 유레카를 외치고 싶을 정도였다. ㅋㅋㅋ

2020년 12월 1일
·
1개의 댓글
post-thumbnail

TIL 77 | MobX + React Hooks + TypeScript

MobX와 React Hooks를 조합하기 위해서는 mobx-react-lite를 사용하게 된다. 하지만 기존의 MobX와는 약간의 차이가 있어 직접 구현해야 하는 부분들이 존재한다. 초기

2020년 11월 8일
·
0개의 댓글
post-thumbnail

TIL 73 | TypeScript Interface

자바에서 인터페이스는 클래스를 구현하기 전에 필요한 메서드를 정의하는 용도로 쓰인다. 타입스크립트에서는 좀 더 다양한 것들을 정의하는데 사용할 수 있다.

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

TIL 72 | TypeScript Basics

타입스크립트는 자바스크립트의 모든 기능을 포함하면서 정적 타입을 지원하는 언어다. 동적 타입 언어와 정적 타입 언어는 장단점이 있기 때문에 프로젝트의 성격에 따라 선택한다.

2020년 10월 29일
·
2개의 댓글
post-thumbnail

TIL 65 | Google Map API + 스타일링

프라이탁 홈페이지를 클론하고 있는데, 이번에는 지도 API를 꼭 다뤄보고 싶어서 store 안내 페이지를 맡게 되었다. 프라이탁 페이지에서는 OSM Mapnik 라는 라이브러리를 사용하고 있는데, 나는 이를 앞으로 더 자주 사용하게 될 구글맵으로 바꿔서 적용하기로 했다

2020년 10월 11일
·
0개의 댓글
post-thumbnail

TIL 63 | 클래스형 컴포넌트 vs 함수형 컴포넌트

참고자료 [React] 클래스형 컴포넌트 vs 함수형 컴포넌트 클래스형 컴포넌트 클래스형 컴포넌트와 함수형 컴포넌트의 역할은 동일하지만 약간의 차이점이 존재한다. 클래스형 컴포넌트는 state 기능 및 라이프사이클 기능을 사용할 수 있으며, 임의 메서드를 정의할 수 있다. render 함수가 꼭 있어야 하고 그 안에서 jsx를 반환한다. 함수형 컴포넌트...

2020년 10월 4일
·
0개의 댓글
post-thumbnail

TIL 62 | 클래스형 컴포넌트인 로그인 페이지를 함수형 컴포넌트로 바꿔보자 ( Hooks & styled-component)

아직 익숙하지 않은 훅스 개념을 직접 코드로 쳐보면서 익혀보자. 3주 전에 만들었던 Instagram 로그인페이지를 Hooks를 사용해서 functional 컴포넌트로 바꿔보고 styled-component를 적용해서 새로 작성해보았다.

2020년 10월 4일
·
2개의 댓글
post-thumbnail

TIL 61 | Redux

아마 이게 제일 이해하기 쉬울걸요? React + Redux 플로우의 이해1\. Single Source of Truth하나의 Store를 사용한다.2\. State is Read-only어플리케이션에서 state를 직접 변경할 수 없다.

2020년 10월 2일
·
0개의 댓글
post-thumbnail

TIL 59 | Hooks (useState, useEffect)

참고자료 : React Hooks 공식문서, 함수형 컴포넌트, 클로저, useState함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동(hook into) 할 수 있게 해주는 함수이다.

2020년 10월 2일
·
0개의 댓글
post-thumbnail

TIL 58 | 페이지네이션

리스트에서 데이터를 한번에 가져오는 것이 아니라 필요한 만큼, 또는 화면에 보이는 만큼만 백엔드에 요청하고 응답받아 사용하는 것을 의미한다.

2020년 10월 1일
·
0개의 댓글
post-thumbnail

카카오클론, 기억하고픈 코드 2 - 애니메이션

지난 검색창에 이어 이번에는 3일에 걸쳐 겨우 성공한! 애니메이션 코드를 기록해보고자 한다. 카테고리 및 유저 아이콘 버튼을 클릭시 나오는 모달창의 transition 효과, 메인에서 탭이 바뀔때 나타나는 효과 이렇게 두가지 애니메이션을 구현했다.

2020년 10월 1일
·
0개의 댓글
post-thumbnail

React | 카카오 프렌즈샵 클론 프로젝트

팀 프로젝트 GitHub 레파지토리위코드에서의 1차 클론 코딩 프로젝트가 끝났다. 내가 제안했던 사이트인 "카카오 프렌즈샵" 이 많은 투표수를 받아 감사하게도 다시 한번 PM으로 프로젝트에 참여할 수 있었다.

2020년 9월 27일
·
30개의 댓글
post-thumbnail

TIL 57 | 동적라우팅 Dynamic Routing (상세페이지 이동)

상품 리스트 페이지에서 해당 상품을 클릭 시 상세 페이지로 넘어가는 기능은 단순히 path를 바꿔준다고 되는 것이 아니다. 리액트의 3rd party 라이브러리를 사용하여 동적라우팅을 구현해보자.

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

TIL 56 | React로 무한스크롤 구현

참고 자료 : React에서 Infinite Scroll 구현하기무한스크롤은 화면의 맨 아래까지 스크롤을 하면 새로운 컴포넌트가 랜더되는 형태이다. 페이스북, 인스타그램 등 다양한 사이트가 이러한 무한 스크롤 형식을 띄고 있다.

2020년 9월 18일
·
1개의 댓글