총총
태그 목록
- 전체보기(97)
- TIL(50)
- React(8)
- code.camp(4)
- API(3)
- REST API(2)
- redux-toolkit(2)
- Optimistic UI(2)
- 알고리즘(2)
- filter(2)
- Husky(2)
- JavaScript(2)
- scss(2)
- project(2)
- 포트폴리오(2)
- 삼항연산자(2)
- ESLint(2)
- Prettier(2)
- 퍼블리싱(2)
- emotion(2)
- JSX(2)
- 프로그래머스(2)
- next.js(2)
- GRAPHQL-API(2)
- 라이브러리(2)
- 프레임워크(2)
- Map(2)
- 깃블로그(2)
- 메소드(2)
- styled components(2)
- typescript(2)
- node.js(2)
- Utility Type(1)
- 쿠키(1)
- 옵셔널 체이닝(1)
- Tic Tac Toe(1)
- 객체(1)
- memoization(1)
- 유효성검사(1)
- yarn(1)
- Index(1)
- 도메인(1)
- 데이터통신(1)
- state prev(1)
- Class Component(1)
- 컴포넌트 재사용(1)
- 배열메소드(1)
- 스코프체인(1)
- kakaomap(1)
- 라우팅(1)
- 카카오지도(1)
- Recoil(1)
- async await(1)
- react redux(1)
- 비동기통신(1)
- parseInt(1)
- number(1)
- package.json(1)
- form태그(1)
- Presenter(1)
- XML(1)
- includes()(1)
- pagination(1)
- graphql 뮤테이션(1)
- github pages 업로드(1)
- observable(1)
- 레이아웃(1)
- login(1)
- unshift(1)
- React Component(1)
- 컴포넌트 폴더구조(1)
- csr ssr(1)
- 자바스크립트(1)
- 문자열(1)
- template literals(1)
- 라우터(1)
- 얕은복사(1)
- CSS in JS(1)
- gh-pages(1)
- async/await(1)
- isotope(1)
- key(1)
- fontawesome(1)
- local storage(1)
- 모달창(1)
- State(1)
- useRef(1)
- gallery(1)
- 간단한 게임(1)
- event bubbling(1)
- stste(1)
- shift(1)
- React-slick(1)
- 다중 slice(1)
- 정규식(1)
- SSR(1)
- Pop(1)
- state 끌어올리기(1)
- HoF(1)
- 최소공배수(1)
- Unity(1)
- infinite scroll(1)
- 페이지네이션(1)
- if문 대체(1)
- gitignore(1)
- 템플릿 리터럴(1)
- JWT토큰(1)
- 코딩테스트 연습(1)
- HoC(1)
- 차이점(1)
- node_modules(1)
- seo(1)
- cookie(1)
- event delegation(1)
- try catch(1)
- CRUD(1)
- GSAP(1)
- apolloClient(1)
- Props(1)
- 권한분기(1)
- MusicPlayer(1)
- 지도연결(1)
- 기록(1)
- commit수정(1)
- redux(1)
- closure(1)
- session(1)
- container(1)
- state원리(1)
- routing(1)
- 로그인(1)
- 터미널 명령어(1)
- object(1)
- mui(1)
- 동기/비동기(1)
- 깊은복사(1)
- npm(1)
- 타입스크립트 기초(1)
- indexOf(1)
- push(1)
- Visual Studio Code(1)
- http(1)
- MapAPI(1)
- Graphql-codegen(1)
- 무한스크롤(1)
- 조건부 렌더링(1)
전체보기 (97)TIL(50)React(8)code.camp(4)API(3)REST API(2)redux-toolkit(2)Optimistic UI(2)알고리즘(2)filter(2)Husky(2)JavaScript(2)scss(2)project(2)포트폴리오(2)삼항연산자(2)ESLint(2)Prettier(2)퍼블리싱(2)emotion(2)JSX(2)프로그래머스(2)next.js(2)GRAPHQL-API(2)라이브러리(2)프레임워크(2)Map(2)깃블로그(2)메소드(2)styled components(2)typescript(2)node.js(2)Utility Type(1)쿠키(1)옵셔널 체이닝(1)Tic Tac Toe(1)객체(1)memoization(1)유효성검사(1)yarn(1)Index(1)도메인(1)데이터통신(1)state prev(1)Class Component(1)컴포넌트 재사용(1)배열메소드(1)스코프체인(1)kakaomap(1)라우팅(1)카카오지도(1)Recoil(1)async await(1)react redux(1)비동기통신(1)parseInt(1)number(1)package.json(1)form태그(1)Presenter(1)XML(1)includes()(1)pagination(1)graphql 뮤테이션(1)github pages 업로드(1)observable(1)레이아웃(1)login(1)unshift(1)React Component(1)컴포넌트 폴더구조(1)csr ssr(1)자바스크립트(1)문자열(1)template literals(1)라우터(1)얕은복사(1)CSS in JS(1)gh-pages(1)async/await(1)isotope(1)key(1)fontawesome(1)local storage(1)모달창(1)State(1)useRef(1)gallery(1)간단한 게임(1)event bubbling(1)stste(1)shift(1)React-slick(1)다중 slice(1)정규식(1)SSR(1)Pop(1)state 끌어올리기(1)HoF(1)최소공배수(1)Unity(1)infinite scroll(1)페이지네이션(1)if문 대체(1)gitignore(1)템플릿 리터럴(1)JWT토큰(1)코딩테스트 연습(1)HoC(1)차이점(1)node_modules(1)seo(1)cookie(1)event delegation(1)try catch(1)CRUD(1)GSAP(1)apolloClient(1)Props(1)권한분기(1)MusicPlayer(1)지도연결(1)기록(1)commit수정(1)redux(1)closure(1)session(1)container(1)state원리(1)routing(1)로그인(1)터미널 명령어(1)object(1)mui(1)동기/비동기(1)깊은복사(1)npm(1)타입스크립트 기초(1)indexOf(1)push(1)Visual Studio Code(1)http(1)MapAPI(1)Graphql-codegen(1)무한스크롤(1)조건부 렌더링(1)
영화앱 만들기 - React 미니 프로젝트
순수 리엑트를 잘 다룰 줄 모르는거같아서 리엑트 프로젝트를 찾던 중 노마드코더에서 좋은 강의를 찾아듣고는 오늘 완성에 가까운 결과물이 나왔다. 진짜 슬라이더가 안되서 5시간 헤맸는데 이게 또 slick은 styled-components랑 부딪쳐서 그럴수 있다나..? 아무튼 시간이 늦어서 다음에 알아보기로 하고 오늘 결과는 아래와 같다. 어제 before 오늘 after 
Responsive Gallery with isotope
오늘은 isotope 플러그인을 적용한 반응형 갤러리 사이트를 만들어 보았다. 누르면 크게 볼 수 있거나 다운로드를 할 수 있으면 딱 언스플레쉬나 픽사베이, 핀터레스트 같을텐데 그냥 겉으로 보이는 것만 우선 적용해보았다. 추후에 필터되는 것이라던지 사진 클릭 시 나오는 액션들을 좀 더 추가해봐야겠다. 사진첩에 사진을 털어서 만들었는데 요즘 가장 애정하는 초록모자덕에 사이트도 초록색으로 꾸며보았다. 업데이트 되면 이 포스팅에도 업데이트 할 예정이다.
2023년 3월 29일
·
1개의 댓글·
0