[TIL] 오늘의 개발일지

 

어제 선발대 과제 제출하느라 거의 밤새고

오늘도 9시부터 회의하고 팀프로젝트하는데 정신이 다른 곳에 있는 느낌이었당

 

다행히 오전에는 ui작업이라 멍-하게 작업했는데

그러면서도 ㅈㅇ님이 css를 더 깔끔하게 리팩토링해주시는거 진짜 너무좋았당

최대한 겉껍데기(?)에서 margin을 주면서 자식요소들을 정리하는것과, 내가 그동안 불필요한 <div> 껍데기들을 많이 쓰고 있었다는걸 느끼고 최대한 덜쓰면서 css를 더 깔끔하게 쓰는 방법을 연구해야겠다고 느꼈다

 

오후에는 아래 관련된 코드를 짰는데 (요건 깃헙에 커밋할때 내가 썼던내용ㅋ)

 

- 파이어베이스 로그인 연결작업
- 파이어베이스 회원가입 연결작업
- Login, SignUp 페이지에서 유효성 검사 로직 작업
- 파이어베이스 currentUser에 userNickName이 추가되도록 작업
- 로그인, 회원가입 성공시 Detail페이지로 이동하도록 임시 로직을 작성

 

 

오후에 기능 구현하다가, 안됐던 간단한 오류일지 정리

 

   무슨 오류~?

중간에 터춰블오풔쒸리~에 onPress를 넣는데, 아예 반응을 안하는거다

에러도 안뜨고, 그냥 안됌

아니 그냥 안됌

에러메세지라도 떴으면 좋겠는데, 그냥 반응이 없으니 어디부터 봐야할지를 모르겠었당

ㅈㅇ님과 함께 연구를 하다 발견한 것은!!!!!!!!!

바로바로 

공동으로 쓰려했던 컴포넌트화 작업이 문제가 되었던 것!

 

터쳐블오퍼시티로 감싼 '공통버튼'을 터쳐블오퍼시티로 들었었는데, 그렇게 하니 오류가 났었던 것이다

 

문제 해결

터쳐블오퍼시티로 감쌌던 '공통버튼' 컴포넌트를 View로 바꾸니, 정상작동하는 것 확인~~!!

'공통input'도 비슷한 에러가 났었는데 (이유 : 이벤트 작업(ex. onChange~~)을 하려먼 해당 이벤트 함수를 또 그 자식에게 전해줘야 하는 상황이 생김 => 한마디로 바로 이벤트 적용이 안됌) 

 

그건 ㅈㅇ님께서 아래와 같이 겉껍데기(?)를 벗겨내는 방식으로 코드를 수정하셨다

진짜 배우고싶은 모습이 참 많으신 능력자 >_< !!!!! 같은조가 될 수 있었던 나도 참 인복이 많은 사람인가보당❤️

import styled from '@emotion/native';

const CustomInput = styled.TextInput`
  width: ${(props) => props.width ?? '250px'};
  height: ${(props) => props.height ?? '50px'};
  border-radius: 10px;
  background-color: ${(props) => props.theme.color.reverseMono80};
  color: ${(props) => props.theme.color.mono100};
  font-size: ${(props) => props.fontSize ?? '16px'};
  padding: 0 10px;
`;

export default CustomInput;

위에가 수정된 코드이고, 아래는 수정되기 전 코드

 

(보면 CustomInput이라는 애는 원래 <InputContainer>라는 넘을 리턴해주는 컴포넌트로 짜여졌던 것을 알 수 있당, 이런식으로 한다면 CustomInput이 상위에서 무언가 변경내용들을 props로 받아서 내려와야 됐자농)

import styled from '@emotion/native';
const CustomInput = ({
  width = '250px',
  height = '50px',
  fontSize = '16px',
  placeholder,
}) => {
  return (
    <InputContainer
      width={width}
      height={height}
      placeholder={placeholder}
      fontSize={fontSize}
    />
  );
};

const InputContainer = styled.TextInput`
  width: ${(props) => props.width};
  height: ${(props) => props.height};
  border-radius: 10px;
  background-color: ${(props) => props.theme.color.reverseMono80};
  color: ${(props) => props.theme.color.mono100};
  font-size: ${(props) => props.fontSize};
  padding: 0 10px;
`;

export default CustomInput;

 

요즘 주변에 내 능력이 더 끌어올라갈수있게, 채찍질과 당근을 주시는 분들이 참 많은거같아서

매우매우 행복하고 감사한 하루들을 보내고 있당

새해부터 이르케 많이 배워서 을매나 좋게용 ❤️

 

나도 더 노력하고 더 제대로 단단한 실력을 쌓는 사람이 되서 꼭 훗날 보답을 할 수 있는 사람이 되야징

오늘의 개발일지 끄읕