그로윙맨 그로윙맨

리액트 타입스크립트로 기본 width: 500px의 프로젝트를 만드는 중 html 문서에 여백이 생기는 문제를 만났다. html 기본적으로 설정되어있는 여백때문에 생기는 문제였으며 리액트에서 실질적으로 화면에 표시되는 페이지 최상단인 index.js의 스타일을 담당하는 index.css로 가서 body에 다음과 같이 margin을 추가하여 해결 할수 있었다. 해결

아직 많이 부족하지만 리액트를 배운지 얼마 안됐을때 처음에 useEffect를 접했었다. 당시에 나는 onClilck이벤트 onChange이벤트도 겨우해보던 중이어서 처음 랜더링(mount)이 되었을때 즉 화면이 처음 나왔을때 특별한 이벤트 없이 실행해주기위한 그저 그런 Reacthook이라고 생각했다. 심지어 '사용할 필요가 있을까' 싶기도 했다. 하지만 프로젝트를 진행하면 진행할 수록 쓰임새가 많고 다양하게 활용이 가능한 자연스럽게 접하게되는 훅이었다. 그러다보니 어찌저찌 사용하고는 있지만 그보다는 이해를 하고싶은 생각이들어서 정리를 하게 되었다. 먼저 형태를 알아보자면 useEffect(()=>{ console.log(1) }) 이러한 예를 들어 볼 수 있겠다 이로 인해 컴포넌트가 랜더링되면 개발자..

실전 프로젝트 2주차를 마무리하며 이번 주에는 생각보다 진도를 나가지 못했다. 부리더가 되어보니 생각보다 바쁜 일이 많아서 막상 코딩에는 손을 대기가 어려웠다. 그리고 결과적으로 기획단계에서 변화가 생기는 바람에 팀원 전체가 혼란스러웠다. 동물병원, 애견호텔 예약사이트로 방향을 잡고 진행해보니 예약기능이 있으면 실제로 병원을 갈 수 있는 서비스까지 마련했으면 하는 바램과 업체에서 등록을 해줘야하는 일이 생기는데 예약에서 이 실제적인 서비스가 없다면 우리는 런칭해본 것이 아니라 프로젝트로써 껍데기만 만들어놓는 것이기 때문에 아쉬울 것 같다는 팀의 의견이 나왔다 방향을 바꿔 실제적인 결과가 나올 수 있는 강아지 친구 매칭 시스템을 만들어 애견카페, 산책 등을 함께 할 수 있는 시스템을 추가 구현하고 이걸 메..

리액트에서 프로젝트 중 비밀번호 표시를 다른 아이콘으로 사용하고자 없애기 위해 많은 구글링을 통해서 적용하였다. 휴.. 자료가 별로 없어서 꽤나 찾기 힘들었다 또한 내가 적용한 방법은 첫 번째였는데 나머지는 리액트로 style component를 사용하고 있어서 그런지적용이 안됐다. 나처럼 이 기능을 원하는 분이 계실 것 같아서 남겨본다^^ css에 이걸 가져다 붙이면 끝이다 ::-ms-reveal { display: none; } [내가 적용한 방법은 가장 짧은 1번째 코드 ] input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; } input::-ms-reveal, input::-ms-clear { ..

이번 주차는 클론코딩을 하는 주차였는데 일반적으로 하는 인스타그램, 페이스북 등을 하는 조와는 달리 우리는 사이트의 디자인부터 눈길이 가는 젠틀 몬스터라는 안경과 선글라스 관련 쇼핑몰을 대상으로 정해서 클론코딩을 하였다. 확실히 만들면서도 뷰에 신경을 많이 썻고 만들고 나서도 다른 사이트에서는 느낄 수 없는 개성과 화려함을 느낄 수 있었다. 그래서 이번 과제에서는 css에 대해 다양하게 시도해보고 메인 페이지는 미디어 쿼리를 이용하여 반응형 웹도 만들어 보고 상품 페이지에서는 정렬 방식을 다양하게 하여 사용자가 정렬방식을 변경하면 다른 형태의 상품카드를 볼 수 있게 만들어보기도 했다. 그 중에서도 가장 핵심이라고 생각했던 기능은 무려 사실 내가 맡은 기능이지만 팀원 분도 같이 하고 싶다고 하셔서 구현할 ..

리덕스로 To Do List를 만드는 과정을 하고 있는데 신기하게도 전 주보다는 할 만 했다. 여전히 척척 해나가진 못하긴 하지만 적어도 어떤 과정을 거쳐서 진행이 되겠구나 싶었다. 3일 정도는 계속 학습자료를 참고해서 공부하다가 과제를 시작했다. 아예 손도 못대던 전 주에 과제와는 다르게 이번에는 생각보다 수월하게 작업이 진행되었고 여전히 문제가 되는 것은 생각을 코드로 작성할 실력이 안된다는 것이었다. 그걸 모른다는 문제를 깨닫고나니 벽을 조금씩 깨어나가는듯 하다. 오늘은 전역상태관리가 무엇인지와 리덕스를 다루는 방법에 대해 정리해보려고 한다. *전역상태관리 전역상태관리는 부모컴포넌트에서 자식컴포넌트로 필요한 정보를 전달해주는 방식과 달리 전역으로 한군데에서 정보를 뿌려주어서 PropsDrilling..

지금 리액트를 시작하면서 발전하는 속도가 잠시 멈춘 것 같아서 속상하지만 같은 팀원분들은 눈물을 보이셨다... 너무나도 이해가 되는 심정이라 마음이 아팠다 위로는 했지만 아마 속상한건 변함없지 않을까 싶다.. 일단 오늘 배운 것을 정리해보자면 props, state, 라이프사이클이 있는데 리액트에서는 독특한게 props, state를 쓰는 이유 서버에서 보내주는 데이터 베이스 기반으로 사용자의 입력에 따라 바꿔주는 건 변수로 사용했다. 리액트도 변수를 사용하며 그 변수는 다른 개념이 아니다. 그런데 state는 만들어진 웹사이트를 반응형 웹사이트로 만들어주는 중요한 역할을 한다. State 좋아요를 누른다던가 하는 일들 같은 경우 특별히 서버까지 갈 필요없이 state를 통해 바로바로 변경해주는 것이 가..

실습 과제 콘솔에 찍힐 b 값을 예상해보고, 어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지, 왜 그런지 설명해보세요. 주석을 풀어보고 오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요. let b = 1; function hi () { const a = 1; let b = 100; b++; console.log(a,b); } //console.log(a); console.log(b); hi(); console.log(b); let b = 1; function hi () { const a = 1; let b = 100; b++; console.log(a,b); } //console.log(a); console.log(b); hi(); console.log(b)..