뭘 배웠지?

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

엘리스 SW 엔지니어 트랙 43일차 팀 프로젝트 8일차 오늘은 디자인을 조금 손보고 피그마 디자인을 따라 스타일을 넣는 걸로 코딩을 3일만에 복귀했다 모듈식 팀원들이 작성한 모듈방식으로 자바스크립트를 따라가며 읽는데만 꽤 오랜시간이 걸렸다 노드를 생성하는 팩토리 함수도 있었고, fetch를 하는 함수들도 구성되어있어 사용하기 편하게 정리되있네 조금 큰 프로젝트를 할 때 이렇게 만들어져있다면 속도가 잘 나올것 같다는 생각 Promise의 return은 Promise Promise, async/await 리턴은 항상 Promise다 필요한 것은 값으로 빼내는 것이었는데 방법을 아니 너무 간단했다 promise 밖에서 node를 만들고 promise를 처리 하는 과정에서 저 노드로 넣어주면 되는 거였다.. 힘..

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

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

엘리스 알고리즘의 정석에서 배운 내용 알고리즘 유한성 무한루프는 알고리즘이 아니다 명확성 입력 출력 효과성 재귀호출 함수가 자기 자신 호출 왜 사용할까? 수학적 귀납법 모든 자연수 n에 대해 n!