profile
프론트엔드 개발 공부중입니다.

[TIL] 유사배열과 call, apply, from

최근 오랜만에 바닐라 자바스크립트로 개발을 하게되었다.프레임워크만 사용하다 바닐라 자바스크립트를 사용하니 나름 또 재미가 있다.대략 이렇게 메뉴 list가 있고 각 메뉴에 click 이벤트를 줘야하는 상황일단 각 li에 접근해야하는데 메뉴마다 변수로 지정해서 접근하기에

2021년 4월 29일
·
0개의 댓글
post-thumbnail

[Vue] 무한 루프 슬라이드

❓ 내가 말하는 무한 슬라이드란 ?위 영상처럼 왼쪽이든 오른쪽이든 계속 넘길 수 있는 슬라이드1 → 2 → 3 → 4 → 5 → 1 ... 순으로 오른쪽으로 계속 넘기면 마지막장 다음에 다시 1부터 시작되어야 한다.반대로 왼쪽으로 계속 넘기면 역순으로 계속 반복되어야

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

자바스크립트 Object value로 key 불러오는 함수 만들기

가끔 자바스크립트 Object에서 Value로 Key에 접근해야하는 일이 종종 생긴다.그럴 경우를 대비해서 쓰는 끄적임.. (사실 생각보다 간단🐥)준비물1\. 해당 Object2\. Object.keys()3\. Array.prototype.find()예시find()

2021년 3월 1일
·
0개의 댓글
post-thumbnail

[gatsby.js] Layout 컴포넌트에서 자식 컴포넌트로 props 전달하기

보통 gatsby에서 layout 컴포넌트가 모든 page에 사용되기 때문에 layout 컴포넌트를 최상위 컴포넌트로 사용한다.만약 Intro page의 코드가 아래와 같을때, 전 페이지에서 공통으로 사용되는 state를 Intro Page로 전달하려면 어떻게 해야할까

2021년 2월 13일
·
0개의 댓글
post-thumbnail

[알고리즘] 팰린드롬 판별하기

팰린드롬이란 'eye', 'kayak', 'hannah' 처럼 거꾸로 읽어도 똑같은 문장이나 단어를 뜻한다.

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

[TIL] DOM이란 무엇인가요

개발 공부를 하면 자주 마주치게되는 단어가 있는데 그 중 하나가 DOM이다.DOM은 Document Object Model 줄임말이라고 하는데 그래서 그게 대체 뭔지 물어보면 속시원하게 대답하기 힘들었다. 이번 기회에 기본적인 개념을 정리해보려한다.🧐DOM은 웹 페이

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

[알고리즘] 크레인 인형뽑기

문제는 프로그래머스 사이트 참고!📝 나의 풀이이미 이 문제를 푼지 쫌 지났지만 이제서야 블로깅을 하는 건 사이드 프로젝트와 이것저것 잡일 등을 하느라 시간을 보냈기 때문 .. (핑계)오랜만에 풀어보는 알고리즘 문제라 꽤나 시간이 걸렸다. 솔직히 문제를 읽고 이해하는

2020년 7월 21일
·
0개의 댓글

리액트 CRA로 초기세팅

1. CRA (Create React App) 시작 CRA 프로젝트를 만들기 위해서 먼저 원하는 폴더로 이동! > cd porjetct_folder 프로젝트 폴더를 생성한다.(영어 권장) > npx create-react-app [원하는 프로젝트 이름] 터미널에서

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

[TIL] React Navigation 적용하기

1. Stack Navigator 라이브러리 설치하기 리액트 네비게이션의 스택 네비게이터(stack navigator)는 스크린 간 전환과 navigation history를 관리할 수 있도록 해준다. 지금까지 설치한 라이브러리 들은 네비게이터를 위한 블록과 기반이라

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

[TIL] React Navigation 라이브러리 설치

리액트 웹 앱에서 react-route-dom과 비슷한 역할을 하는 리액트 네이비트의 리액트 네비게이션!리액트 네이티브 앱의 네비게이션과 히스토리를 쉽게 관리할 수 있는 라이브러리중 하나이다.네비게이션 navigation 을 쓰기위해서는 네비게이터 navigator 가

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

[TIL] React Native에서 useReducer 실습 <2>

1. useReducer로 rgb(0,0,0) 바꾸기 >버튼을 클릭하면 컬러를 진하게 또는 연하게 하도록 state를 관리하기 먼저 버튼 컴포넌트를 만든다 ColorCounter 컴포넌트를 이제 SquareScreen 컴포넌트에서 불러온다. 이제 ` 컴포넌트 안

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

[TIL] React Native에서 useReduce 실습 <1>

⬆︎useState를 사용하여 만든 간단한 컴포넌트!이 컴포넌트를 useReducer를 사용하여 state관리를 해보았다.(물론 이러한 간단한 컴포넌트는 굳이 useReducer를 사용할 필요는 없음)위 reducer 함수 내 switch 에서 사용한 전개연산자(...

2020년 6월 8일
·
0개의 댓글

[TIL] JavaScript - switch 문

switch문은 자바스크립트에서 조건문을 쓰는 방법 중 하나다. 물론 if문이 가장 자주 사용되는 조건문이지만 switch문만의 장점이 있다. switch문은 필요한 조건에 만족하는 경우 각각 다른 조건을 매칭하여 실행시킬 수 있다. 각각의 개별적인 조건들이 많아질 경

2020년 6월 6일
·
0개의 댓글

[TIL] React Hook useReducer를 맛보다(?)

2차 프로젝트를 진행하면서 useState를 많이 사용했었는데, 전체 상태 관리를 하기 위해서는 반드시 Redux를 사용해야하는 것으로 알고 있었다. Udemy에서 React native 공부를 하던 중 React Hook 중에 useReducer라는 것이 있다는 것을

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

[TIL] React Native Navigation

현재 Udemy에서 Stephen Grider의 The Complete React Native + Hooks Course 2020 Edition 강의를 듣고있다.앱 역시 웹 사이트 처럼 화면 전환이 이루어지는데, 이때 사용하는 것이 React Navigation이다.A

2020년 6월 3일
·
0개의 댓글

[Tips] Xcode ios Simulator 설치

📱 리액트 네이티브로 App개발을 하기전 Xcode ios Simulator 설치하기 앱 스토어에서 Xcode 정식 버전을 다운로드. 약 7GB의 대용량 파일이기 때문에 다운로드와 설치하는데 오래 걸린다.😕 XCode를 실행하고 약관 동의에 체크. 더 많은 툴과

2020년 6월 2일
·
0개의 댓글

[TIL] 저장된 JWT Token을 POST 하기

2차 프로젝트에서 장바구니 기능을 구현하면서 fetch 서버에 POST 요청을 하게 되었다. 먼저 로그인을 하면서 받아온 토큰을 로컬 스토리지에 저장한다.localStorage.setItem(key이름 , key 값) 으로 로컬 스토리지에 저장한다.장바구니에 담기 위해

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

[React Native] 리액트 네이티브 첫만남

📱리액트 네이티브를 위한 맨땅에 헤딩 리액트 네이티브를 시작하는 가장 쉬운 방법은 Expo CLI로 개발하는 방법이라고 한다. Expo는 리액트 네이티브를 기반으로 구축된 도구 모음이다. 최신 버전의 Node.js와 Emulator만 필요하다. 이외에도 모바일 개발

2020년 5월 27일
·
0개의 댓글

기업협업 프로젝트 <1> - 피드메디

위코드에서의 1, 2차 프로젝트가 끝나고 드디어 4주간의 기업협업 프로젝트를 진행하게 되었다 !😮 !이번에 협업으로 진행하게 된 기업은 피트메디 FITMEDI 라는 신생 스타트업이다.피트메디는 이름처럼 Fitness와 Medical이 합쳐진 운동과 의료 서비스를

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

[Project] 2차 프로젝트 동적라우팅 적용하기

⬆︎위 1.쉐이빙젤 > 2.면도 > 3.애프터쉐이브 에서 원하는 단계를 클릭하면 오른쪽 이미지와 아래 텍스트가 변경되도록 만들어야 한다.쉐이빙젤, 면도, 애프터쉐이브 각각 클릭했을 경우 보여주는 텍스트가 다르기 때문에 각각의 컴포넌트로 분리시켜 만들어준 후 import

2020년 5월 19일
·
0개의 댓글