butterwalnut

OKU프로젝트 MVP 완성하는 과정 중 열심히 모바일 반응형 화면을 만들었더니, 안드로이드에서는 확인이 되지만, 아이폰과 사파리에서는 확인할 수 없는 문제가 있었다. 처음에는 http와 https 통신의 차이인 줄 알고, 버킷 만들기 & ACM인증서 & cloudFront & route 53 연결하는 과정을 각각 최소 3번씩은 한 것 같다.. 오픈 카톡방에서 물어보니 http는 아이폰 자체적으로 막았다(?)고 하니 더더욱 의심을 할 수 밖에 없었다. ㅠㅠ (결국 이것도 사실은 아닌듯한게, 오류를 수정한 http는 잘 열린다.) 설정을 했음에도 여전히 흰색 바탕만 보이지 않아 멘토님께 여쭤봤더니, 친히 오셔서 점검해주셨고, 해당 부분을 수정했더니 아주 잘 나왔다! 도와주신 멘토님과 윈도우와 안드로이드를 써..

리액트에서 반응형 헤더 만들기 보통의 JS 소스 코드의 시작? const navbar = document.querySelector(.nav) .nav는 className으로 헤더 태그로 설정한다. 그치만 리액트에서는 querySelector보다는 ref를 이용하자. onst navbar = useRef() 하고, 헤더 태그에서 ref={navbar}로 잡아주는게 좋다.

[라이프사이클] : 컴포넌트가 생성~업데이트~죽는 '컴포넌트 생명주기' 렌더링(탄생) ··· 업데이트 ··· 사라지는것 / 새로고침(사망) '라이프 사이클 함수'는 클래스형 컴포넌트에서만 사용할 수 있다. constructor() : 생성자 함수 props 받아오고, state의 기본값도 설정해 줄수 있다. 가장 처음으로 불려오고, 어떤 설정을 만들어 주는 애 constructor(props) { super(props); this.state = { name : "버터호두", }; } render() props에 접근해서 데이터를 보여주는 애 렌더 당시에 데이터를 수정하면 안됨! componentDidMount() 마운트(mount) : 컴포넌트가 화면에 나타난다. 첫 렌더가 된 직후 한번만(첫번째만) 실..

[상태관리] component의 '상태', 즉, 데이터를 관리한다! 부모-자식관계의 상태관리는 OK props로 관리. 부모-자식 관계, 위에서 아래로! state로 관리. 부모-부모, 자식-자식 한정적인 관계 사이 상태관리의 불편함이 따르는데, 이걸 redux로 해결할 수 있다! Redux => 전역 상태 관리! yarn add redux react-redux 리액트는 redux와 별개의 패키지 존속 관계 X => 그니까, 다른 프레임워크/라이브러리와 함께 쓸수 있다는것. 1. state (딕셔너리 형태) 리덕스에서 저장하고 있는 '상태' (= 데이터) { [key] : value } 2. action (객체) 리덕스에 있는 데이터, 일부 데이터를 변경하고 싶을 때, 발생하는 어떤 것 { type : ..

📍 상태값을 공유하는 건, 하나의 컴포넌트로! 보통 리액트를 소개할 때(*리액트:JS기반 프레임워크) 왜 개발했는지를 먼저 이야기한다. 프론트엔드에서는 같은 코드여도, 여러번 작성돼 조금 고도화된(?) 페이지라면 굉장히 복잡해진다고 한다. 당사자가 아니면 가독성이 떨어질 뿐더러 코드량 자체도 증가해서 보기에도 사용하기에도 복잡하다고 한다. 그래서 나온 개념이 '재사용'이다. 편의성과 깔끔함을 갖춘 경제적인 코드가 가능하다는 것! 사실 처음 배울 때 뭐가 레고 같다는거고 뭘 재사용한다는건지 이해가 되지 않았다. 대체 ... 어느 부분을 어떻게? *또는, 유투버 노마드코드 영상을 보는데 일부는 '라이브러리'성질을 갖고 있다고 한다. 그리고 지금 넷플릭스 클론 코딩하며 깨달은 재사용.! ✅ 처음부터 기능을 구..

리액트에서 돔요소를 가지고오는 방법중 하나, Ref 리액트는 가상 DOM을 만들고 그 위에 그려지는 것 그냥 DOM요소에서 가져오면 리액트가 그려지기 전까지는 가져올 수 있는게 없다. 때문에, 리액트에서 DOM요소를 가져오는 것! input 으로 리액트에서 Ref 생성하기 1. input 모양부터 만들기 2. constructor 함수안에서 this.○○○ = React.createRef(); this.text = React.createRef; 3. input 태그에 ref={this.text} 4. componentDidMount 함수로 잘 생성됐는지 확인 componentDidMount() { console.log(this.text); console.log(this.text.current); }