헬리_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..

1차 프로젝트를 하면서 비슷한레이아웃을 가진 컴포넌트를 어떻게 사용해야하는지 궁금했는데, 마침 배우게 되어서 정리를 해 보았다. 어려울 것 같았으나, 알고보니 되게 간단하게 구현 할 수 있었다. 이런것도 할 수 있다니... 아주 좋구만... 🌝 컴포넌트 분리는 대부분 관심사에 따라 분리를 하는데, 복잡한 코드를 비슷한 기능을 하는 코드끼리 별도로 관리하는것 을 의미한다. 복잡한 컴포넌트 일수록 재사용이 어려워 가독성과 유지보수성이 떨어지기 때문에 컴포넌트를 따로 분리하여 관리하면 앞서말한 문제들을 야기시키지 않아 아주 유용할 것이다. 컴포넌트를 분리하는 기준 -> UI일부가 여러번 사용되거나, UI 일부가 자체적으로 복잡한 경우 분리 한번 이제 예를 들면서 배웠던 것을 정리해 보겠다. 1. 컴포넌트 분리..

위코드에서의 1차 프로젝트를 하며 멘토님께 받았던 리뷰를 간단하게 정리하고, 내가 뭐가 부족한지 알아보는 시간을 가져보았다. 🌝 코드...진짜 알면 알수록...어렵지만,, 또 재미있는...ㅠ ^ㅠ 1. useState setState 함수의 인자로는 1. 새로운 state가 될 값 2. 콜백함수 () => {} 두가지 유형의 인자를 전달할 수 있는데, 콜백함수를 인자로 전달한다면 콜백함수는 인자로 이전의 state값을 전달받고 함수에서 return 한 값이 새로운 state가 된다. 장점 - 이전 state 값을 명시적으로 기억할 필요가 없음 - 함수가 호출될 당시 최신의 state값이 인자로 전달되므로 비동기 상황에서 안정적 위와 같은 이유들로 인해 이전 state 값을 이용해서 새로운 state값을 ..