헬리_storage 헬리_storage

드디어 Redux를 공부해본다... 그토록 어렵다고 들었던... 그래서 일단은 시작은 조심스럽게..해보쟈 ... 😣 Redux란? - 공식문서에서는 자바스크립트 앱을 위한 예측가능한 컨테이너 라고 소개한다. : 단방향 데이터 흐름을 이용해 예측 가능하고, 일관적인 상태 컨테이너의 역할을 제공하는 라이브러리 : Flux 패턴에 영감을 받은 Dan Abramov 가 개발함 : React 또는 다른 View 라이브러리들과 함께 사용할 수 있다. : Flux패턴과 혼동이될 수 있는데, Flux는 디자인패턴으로 일종의 실체가 없는 개념이다. 이러한 패턴을 쉽게 적용할 수 있도록 자바스크립트로 구현한 구현체가 Redux 이다. Redux의 3가지 원칙 1. 진실은 하나의 소스로부터 2. 상태는 읽기 전용이다 3. ..

🙋🏻‍♀️ 위코드에서의 2차 프로젝트를 마쳤다 🙋🏻‍♀️ 정말이지.. 1차때보다 더 어려운 예시 홈페이지들이 많았고, 그 중 우리는 cgv를 참고로하는 프로젝트를 진행하게 되었다. ' 영화관 예매 서비스 컨텐츠 ' 우리 small box의 회고를 시작하겠다 . CGV : 다양한 장르의 영화와 경험을 상영함으로써 관객에게 관람환경 뿐만 아니라 그 이상의 서비스와 감동을 전달 함으로써, 다양한 즐거움과 특별환 경험을 통해 total lifestyle을 선도하는 종합 생활문화 공간 제공 을 한다면 small box ‘독립영화, 즉 신선한 장르와 특별한 소재를 좋아하거나 입문하고자 하는 관객에게 영화를 선보이자 ’ 라는 목표를 두고 다양한 장르에서 보다 감성적인 인디영화에 포커스를 두어 주 매니아층 그리고, 다..

Styled component 를 이용해서 각 다른 css 효과를 주기위해 버튼 3개를 만들어 보면서 각각 다르게 적용해 보았다. props를 이용해서 해보았다.... 어렵ㄷㅏ... 😂 바로 적용한 코드 적고, 그 밑에주석으로 설명을 좀 덧붙여 보았다. Practice.js (자식 컴포넌트) import styled, { css } from 'styled-components'; const StyledButton = styled.button` padding: 6px 12px; border-radius: 8px; border: 1px solid lightgray; font-size: 1rem; line-height: 1.5; color: ${p => p.color || 'gray'}; background: ..

Please enter a commit message to explain why this merge is necessary, especially if it merges an updated upstream into a topic branch 해결하기 git merge를 진행하려고 하면 한번씩 꼭.... merge가 왜 필요한지 commit message를 남기라고 하더라.. Please enter a commit message to explain why this merge is necessary, especially if it merges an updated upstream into a topic branch 이런식으로 나오고 키보드 누르더라도 아무것도 안눌린다.. 이때!! 해결할 수 있는 방법! 1. i..

조건부 렌더링 사용하기를 간단하게 해 보았당 :) 구현해야 하는 것 const Review = () => { const [open, setOpen] = useState(false); const reviewOpen = () => { setOpen(!open); }; useState 를 이용해서 false 일때는 text가 안보이게, true때 보이게 설정하였다. 배송도 빠르고 정말 좋아요. {!open ? ( "" ) : ( 주문한지 하루만에 배송이 도착해서 너무 좋았습니다. 다음에도 필요하면 또 여기서 시킬 것 같아요. )} 더보기 ▼ 삼항 연산자를 이용하였다. !open ? 일때 ture 이면 " " ( 빈 문자열)을 반환, false 이면 ( 주문한지 하루만에 배송이 도착해서 너무 좋았습니다. 다음에..

난진짜 이런게 있는지 몰랐지... 😭 보충수업을 듣다가 알게된 scss 관련 몇가지 지식들 끄적여 보겠다 ! * scss 안에서 다른 scss 파일 불러오기 @import "경로"; * className에서 {``} 을 쓰면 함수 넣기 가능 !!! 진짜 이건 몰랐다... 내가 구현해야 했던 것이 색상 버튼을 누를 때 마다 그 색상으로 색이 변경되고, text가 같이 변경되는 것을 구현해야 했다. 일반적으로 className은 "" 문자열이지만 이러한 구문의 test 가 아닌 blue 등 다른 변수가 오면서 동적으로 변해야 할때 `` (백틱) => 문자열에서 자바스크립트 혹은 변수를 사용할때 사용 할 수 있다고 멘토님이 알려주셨다. 일단 useState를 이용해 색상을 변경하는 것은 알겠으나 classNa..

🙋🏻‍♀️위코드에서 첫 1차 프로젝트를 진행하였다🙋🏻‍♀️ 선물가게 커머스 프로젝트 배민문방구 우리조는 국내 '배민문방구'를 모티브로 하는 프로젝트를 진행하였고, 깔끔하고 심플한 사이트 UI를 가졌으며, 프론트엔드 및 백엔드 공부를 위한 필수적인 기능들이 있고, 구현하기 크게 어렵지 않을 것 같은 사이트라 생각되었지만, 2주라는 짧게느껴진 기간동안 원하는 모든 기능을 넣지는 못했다. 프론트엔드와 백엔드가 같이 협업 한 생애 첫 번째 프로젝트이다 보니 다소 부족하기도 하다... 1. 프로젝트 개요 1-1. 기간 및 인원 기간 : 23년 2월 6일 ~ 2월 17일 (약 2주) 인원 - 프론트엔드 : 이동민, 이해인, 박준현 - 백엔드 : 이홍렬, 황수영, 박세희 1-2. 프로젝트에 사용된 기술 스택 Fron..

내가 여태 동적 라우팅을 배우기 전에 사용했던 정적라우팅..! 정적라우팅이란? 이렇게 미리 사용할 수 있는 경로들과 해당 경로로 접속 했을 때 보여줄 컴포넌트를 모두 정의 해 두는 방식이다. 하지만 이런 간단한 페이지가 아니라 복잡하고 규모가 큰 어플리케이션에서는 이렇게 일일이 다 정의 해 두는데에 어려움이 있다. 여태까지 나는 이렇게 쓰고있었다... 그렇지만 이번에 동적 라우팅을 배우게 되어 이제 정적라우팅이라는 작별이다 ...! ⭐️ 예시로 블로그 어플리케이션이 있다고 가정해보자! 블로그에 포스팅 목록을 보여줄 수 있는 '리스트 페이지' 와 포스팅의 내용을 보여주는 '상세페이지' 가 있다고 가정할때, 일반적으로 '리스트페이지'를 기본경로 route ( / ) 로 설정하고, ' 상세페이지 '를 ( /p..