뭘 배웠지?

엘리스 SW 엔지니어 트랙 51일차 새해 첫 실시간 강의날 State useState는 굉장히 중요하다 상태 관리를 최근 여러번 들었는데 아마도 이것을 사용해서 상태 관리를 하나보다 그럼 state 사용법에 익숙해지면 상태 관리에도 도움이 되겠지? 리액트에서 바꿀 값은 state로 지정해주는 느낌이다. 리액트는 렌더링을 하며 그려주는 방식인데, state를 변경하면 다시 렌더링되며 바뀐 state로 다시 그려준다 => state만 조작하면 된다 보아하니 가장 상단 컴포넌트에서 state를 조작하고 만지네 상단만이 아니다 수정이 필요한 값이거나 props의 값을 바꾸고 싶으면 상단 컴포넌트건, 하단 컴포넌트건 state를 선언하고 사용해서 값을 바꾼다 링크 링크(a tag)는 서버에서 어떤 정보를 가져올 ..

엘리스 SW 엔지니어 트랙 50일차 온라인 강의날 오늘은 Hooks에 들어간다 함수 컴포넌트의 꽃이라고 하신다 워드프레스 만질 때도 많이 보였던 Hook 비슷하지 않을까 생각된다 Hooks 컴포넌트에서 데이터 관리(State) 데이터 변경될 때 상호작용(Effect) 하기 위해 사용 지금까지 사용했던 useState가 State Hook Hook 등장 배경 State와 생명주기 관리하려고 클래스 컴포넌트 사용했다 근데 클래스 컴포넌트 잠깐 봐도 복잡하지 않나? 이걸 해결하기 위해 Hook이 나왔다 Hook 주의사항 React 함수(컴포넌트, Hook) 안에서만 사용 가능 이름은 반드시 'use'로 시작 예. useState 최상위 중괄호 안에서만 사용가능 State Hook useState는 동적인 데이..

엘리스 SW 엔지니어 트랙 49일차 온라인 강의날 Props(Properties) Component에 원하는 값을 넘겨줄 때 사용 모든 JavaScript 요소 넘겨줄 수 있다 컴포넌트 재사용을 위함 Props 값 변경하지 말자! 렌더시 문제 일어날 수 있다고 한다 State 컴포넌트 내에서 변하는 값을 관리 개발자 의도, 사용자 입력에 따라 새로운 값으로 변경 State 값이 변하고 재렌더링 필요시 리액트가 자동으로 변경된 부분 렌더링 주의사항 State 값은 직접 변경하지 말자 => setState 함수 사용 State 변경 방법 setState 내에 변경할 값 넣기 useState(초기값) const [ count, setCount ] = useState(0) setCount(count + 1) s..

엘리스 SW 엔지니어 트랙 48일차 온라인 강의날 Props 상위 컴포넌트에서 하위 컴포넌트로 데이터 넘길 때 사용 State(상태) 이해 useState의 첫 번째 값은 state(상태) 두 번째 값은 state를 변경시키는 함수 변경 시킬 때 반드시 setState 사용해야된다 let _mode = useState("WELCOME"); let mode = _mode[0]; let setMode = _mode[1]; // 같은 내용 let [mode, setMode] = useState("WELCOME"); 컴포넌트가 다시 렌더링 되는 조건은 2가지 1. props 2. state 즉 state를 setState로 변경시키니까 컴포넌트가 다시 렌더링을 하게된다. data set data-id 앞의 da..

엘리스 SW 엔지니어 트랙 47일차 온라인 강의날 SPA(Single Page Application) 최초에 서버로부터 HTML 전달받고 페이지 변경이 필요할 때 필요한 부분 JSON 같은걸로 전달 받음 => 변경된 부분만 다시 그린다 리액트 이용시 SPA 간단히 사용가능 React(리액트) 사용자 인터페이스 만들기 위한 자바스크립트 라이브러리 사내 소프트웨어 사용하기 위해 개발됐다 Component 레고 블럭처럼 독립적인 단위로 쪼개서 구현 Virtual DOM 리액트가 가상 돔을 그리고 실제 돔이랑 다른 부분을 다시 그리는(동기화) 해준다 JSX JavaScript 내에서 HTML 같은 녀석을 사용할 수 있도록 해주는 것 Why React? 생산성 / 재사용성 Component와 Hook 활용 개발자..

엘리스 SW 엔지니어 트랙 46일차 egoing님 리턴! 실시간 강의날 프로젝트에 관한 이야기 생활속 반복되는 일 중 Automation이 가능한 일을 만들면 그게 작더라도 프로젝트다 Create React APP 리액트 개발환경 만들기 엄청 어려운데 create-react-app 한 줄로 만들어지는 혁신이라고 하신다 npm install --global create-react-app npx create-react-app react-app(프로젝트이름) 링크 => https://create-react-app.dev/ React 개발 순서 npm run start 개발 장소 src/index.js 엔트리 파일 public/index.html html 템플릿 파일 import 'filename.css'를 이..

엘리스 SW 엔지니어 트랙 45일차 크리스마스 오늘도 일정에 포함되어 있다 크리스마스 오늘은 그냥 크리스마스다 이런날은 즐기고 쉬고 행복하자~ 아프지 말고

엘리스 SW 엔지니어 트랙 44일차 팀 프로젝트 9일차 오늘도 피그마에 짜놓은 디자인을 토대로 CSS로 옮기는 작업 중간 중간 코드도 읽어보며 이해하며 스타일도 적응하려고 노력을 했다 조금씩 눈에 들어오는 코드들 이 함수는 이렇게 작동하는구나, 이 파일은 그 폴더에 있겠구나 조금씩 짐작이 가게되는 9일차다 clamp 넓이를 지정할 때 모바일까지 대응이 가능해 보이는 clamp라는 녀석도 만나고 optional chaning 있는지에 대한 확인을 해주는 옵셔널 체이닝의 사용도 엿봤다 디자인 오늘도 디자이너분들에게 리스펙을 보내는 순간이 많았다 로그인 기능만 있는 로그인 페이지 하나 디자인 할 때도 줄이고 늘리고 바꾸고 끝이 없다 나아가서 디자인뿐 아니라 한 페이지에대한 여러 동작을 디자인을 해야되니 기획에..

엘리스 SW 엔지니어 트랙 42일차 팀 프로젝트 7일차 오늘은 하루종일 디자인만 했다 새삼 디자이너분들 대단하다고 느낀다 나는 엄밀히 보면 내부 고객이지만 디자이너를 업으로 하시는 분들은 외부 고객을 계속 만족시키니... 아무튼 내일도 디자인을 할 것 같지만 이렇게 안되지 코딩을 좀 하자

엘리스 SW 엔지니어 트랙 41일차 팀 프로젝트 6일차 프로젝트 2주차 돌입 저번주보다 더 기획과 디자인에 집중하게 될 듯 싶다 기획과 디자인? 전에 상황 파악을 해보자 기획은 제대로 안되어있다 짧은 시간이었을까? 개발보다 기획에 공을 들이지 않은 느낌이다 우선 역할이 애매한 팀에서는 생각 통일이 중요하다고 생각된다 각자 다른 것을 생각하고 있으면 표현하려는 핀 포인트가 달라지고 뭐라고 정확히 말할 수 없는 상품이 되어버린다 그러기 위해 기획이 필요하고 디자인에 시간을 쓰지 않나 싶다 다음엔 그러자! 아무튼 기획부터 다시 들여다보자 기획에서 뭘 따져볼까? 우선 기본적으로 컨셉과 타겟이다 요즘은 타겟에 대해 조금 흐려지고 있어 페르소나까지는 아니지만 어떤 컨셉으로 누구에게 보여주고 싶은지 흐리게라도 있고 ..