본문 바로가기

react14

[ 엘리스 SW 엔지니어 트랙 ] 65일차 📍 65일 차 1.22. 토. 온라인 강의 오늘은 직접 React와 Styled-components를 이용해서 트랙카드, 탭, 검색창을 초기 UI로 구현하고 이후에는 실제 API를 연동하면서 검색창에서 검색 데이터를 가져오는 방법까지 응용하는 법을 배웠고, JS에서 TS로 마이그레이션 설정 방법에 대해서 배웠다. 앨리스 수강 전 한 스타트업에서 기술면접을 봤을 때 `TS`로 마이그레이션 하는 방법에 대해 질문을 받았을 때 제대로 대답을 하지 못했던 것이 생각났다. 이번에 배운 내용을 토대로 직접 JS파일을 TS 파일로 마이그레이션 해보는 과정을 겪어보며 잊지 말아야겠다는 생각을 했다. 또 CSS를 배울 때 position과 같은 내용을 직접 적용하려고 할 때 어려움이 많았는데 이번 실습을 보면서 posi.. 2022. 1. 23.
[ 엘리스 SW 엔지니어 트랙 ] 47일차 📍 47일 차 12.29. 수. 온라인 강의 오늘은 SPA, React, Component, ES6, module, JSX 등에 대해서 배웠다. 바닐라 자바스크립트와 CRA를 통해 프로젝트를 생성할 때 다른 점이 있는데 CRA는 웹팩과 바벨을 자동으로 설정해준다는 것이다. 강의에서 배우는 내용과 별개로 웹팩과 바벨을 설정하는 방법을 공부하고 있는데 세팅이 끝나면 따로 포스팅으로 올려야겠다. 첫 접속시 HTML을 내려받는것은 전통적인 페이지와 동일하나, data 변경시 전체를 새로고침 하지 않고 변경된 data만 업데이트하는 것은 SPA 특징 중 하나이다. React를 사용하면 SPA를 편하게 사용할 수 있다. React: 사용자 인터페이스를 만들기 위한 Javascript 라이브러리 component: .. 2021. 12. 29.
[ 엘리스 SW 엔지니어 트랙 ] 46일차 (10주차: React I - JSX, props, state, event) 📍 46일 차 12.28. 화. 실시간 강의 React 저번 주까지는 프로젝트를 진행했고 오늘부터 다시 수업에 들어간다. 챕터를 넘어가 이제는 바닐라 자바스크립트 대신 React를 배운다. 일일이 document.createElement 코드를 작성하며 DOM 관리를 했는데 이제는 신경을 덜 써도 되는 React를 배운다니 뭔가 홀가분(?)하면서도 document코드가 그리워지는 느낌이 든다. 어제 프로젝트를 진행하면서 앞으로 배우고 싶은 내용은 ESlint, prettier, webpack과 babel을 정확하게 공부해야겠다는 생각이 들었다. 4주 뒤에 있을 두 번째 팀 프로젝트 때 나의 목표는 CRA을 사용하지 않고 직접 ESlint, prettier, webpack, babel 설정을 나의 코드로 .. 2021. 12. 28.
[ 프로젝트(React) ] 병과 테스트 ✏️ Preview 웹사이트 링크는 다음(https://ywtechmilitarytest.site/)과 같고 코드는 저의 깃허브에서 볼 수 있습니다 :) ✏️ 서론 20년 ROTC 제대 후 웹 개발에 관심이 생겼지만 어떻게 공부해야 할지 잘 몰라 인터넷을 뒤적이다가 스파르타 코딩 클럽을 접했고(스파르타 코딩 클럽을 선택한 이유는 이상하지만 당시 2020스파르탄레이스에서 좋은 추억을 많이 쌓았는데 이름이 비슷해서였다.) 아무튼 웹 개발 강의 8주 과정을 수강하면서 처음으로 혼자 지금뉴스!라는 프로젝트를 만들었지만(후기) jQuery의 쓴 맛을 보고 SPA의 동적인 반응에 눈이 번쩍 떠지면서 새로운 프레임워크인 React를 공부하겠노라 마음을 먹었고 내 손으로 직접 만든 결과물을 보고 싶어 React를 활용.. 2021. 7. 4.
[ 리액트(React) ] console 창에 Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code 뜰 때 📍 console 창에서 Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code 뜰 때 병과 테스트 프로젝트를 잘 진행하고 있다가 갑자기 console 창에 Warning이 떴다. 구글링을 해보니까 nfl/react-helmet#548, nfl/react-helmet#623 에 비슷한 글이 있었는데 원인은 strict mode에서 UNSAFE_componentWillMount를 사용하는 것은 권장하지 않고 가끔 버그를 일으킬 수 있다는 내용이었다. 해결방법을 찾아보니 보통 React-helmet 버전이 ^6.0.0 이하에서 많이 발생한다는 내용이 대다수였다. 하지만.. 2021. 6. 16.