Daily 177

22.07.27_TIL

📌 리액트 훅에 대해서 학습을 하는데 사실 앞선 과정에서 리액트 훅을 개인적으로 찾아서 학습한 뒤 사용을 하고 있었기에 조금더 정확히 짚고 가는 계기가 될 것이다. 📗 오늘 학습한 내용 Virtual DOM 가상의 DOM 객체 (추상화된 JavaScript 객체의 형태) React는 실제 DOM 객체에 접근하여 조작하는 대신 가상의 DOM 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분을 적용한다. Real DOM (DOM, Document Object Model) 브라우저가 트리 구조로 만든 객체 모델 브라우저가 JavaScript와 같은 스크립팅 언어로 html 태그들에 접근하고 조작할 수 있도록 태그들을 트리 구조로 객체화 시킨 것이다. DOM의 조작 속도가 느려지는 이유 DOM의 조작으로..

22.07.26_TIL

📌 웹팩은 JavaSrcipt, JSON 문법만을 번들링할 수 있지만 loader를 사용하여 각종 css, jsx 등의 언어와 png, jpb 등의 멀티미디어 파일 또한 번들링을 할 수 있습니다. 오늘은 이러한 사실을 알고 있으므로 리액트를 웹팩을 사용하여 번들링하는 방법에 대해 알아보아야한다. 📗 오늘 학습한 내용 react, react-dom 리액트 컴포넌트와 Hooks, 라이프 사이클에 대한 정보가 모두 들어있는 리액트와 이 리액트 코드를 브라우저에 보여줄 수 있는 react-dom이 필요하다. babel create-react-app에 포함되어 있는 babel이 jsx를 js로 변경해주어 번들링을 해주었기 때문에 babel은 jsx를 JavaScript로 변경하여 entry에서 불러올 수 잇게 만..

22.07.25_TIL

📌 웹팩은 어렵다고 많이 들었는데 어떤 부분에서 어려움이 있는지 자세히 찾아봐야겠다. 📗 오늘 학습한 내용 번들링 사전적 의미: 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위 개발적 의미: 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음 번들링을 사용하지 않을 경우 일어나는 상황 두 개의 js파일에서 같은 변수를 사용하고 있어서 변수 간 충돌이 일어난 상황 딱 한 번 불러오는 프레임워크 코드가 8MB라서, 인터넷 속도가 느린 국가의 모바일 환경에서 사용자가 불편을 호소한 상황 번들 파일 사이즈를 줄이기 위해서 파일의 공백을 모두 지웠는데, 가독성이 너무 떨어져서 코딩하기 어려운 상황 배포 코드가 너무 읽기 쉬워 개발을 할 줄 아는 사용자가 프론트엔드 애플리케이션을 임의로 조작하여 ..

22.07.22_TIL

📌 어제 한 미디어 쿼리는 재미있었다. 오늘은 웹 페이지에 동적인 효과를 가져올 수 있는 애니메이션 효과에 대해서 학습을 한다. 오늘도 어제와 같이 재미있는 시간이 되었으면 좋겠다. 📗 오늘 학습한 내용 CSS 애니메이션 @keyframes CSS로 키프레임 블록을 만든다 @keyframes 애니메이션이름{ 0% {/* from으로 작성가능 */ CSS속성: 속성값; transform: rotate(0deg) } 50% { CSS속성: 속성값; transform: rotate(180deg) } 100% {/* to으로 작성가능 */ CSS속성: 속성값; transform: rotate(360deg) } } /* 시작 시점에서 0도, 50프로 시점에서 180도, 완료시점에서 360도 회전시킴*/ 애니메이션..

22.07.21_TIL

📌 내가 제일 노력을 해야하는 부분인 CSS 디자인 부분에 대해서 학습을 하는 시간을 오늘 포함 이틀을 준다고 한다. 이때 더욱 실력을 향상시켜 구현만 가능한 프론트엔드 개발자가 아닌 디자인도 같이 겸비할 수 있는 개발자가 될 수 있도록 노력해야겠다. 📗 오늘 학습한 내용 브라우저 프론트엔드 개발자는 브라우저의 동작과정에 대해 아는 것이 중요하다. 작성한 코드가 브라우저의 소프트웨어 프로그램 상에서 수행되기 때문이다. 웹(Web) = 월드 와이드 웹(World Wide Web) 인터넷 상에서 텍스트나 그림, 소리 등과 같은 멀티미디어 정보를 하이퍼텍스트(hypertext) 방식으로 연결해 제공한다. 웹 페이지 HTML 언어를 사용하여 작성된 문서 형태 웹 사이트 웹 페이지 중 서로 관련된 내용으로 작성된..

22.07.19_TIL

📌 공식적으로 이루어지는 첫 솔로프로젝트인데 무엇을 해야할지 아이디어가 항상 고민이 되는 것 같다. 무엇을 할까??? 고민하던 중 API를 사용해보라는 말에 바로 미세먼지 수치를 나타내 주는 프로젝트를 한번 만들어 보자고 생각하여 도전하게 되었습니다. 📗 오늘 학습한 내용 공공 데이터 포털 미세먼지 실시간 정보 API 활용신청 및 활용 axios axios를 활용하여 미세먼지 실시간 정보 API 데이터를 지역별로 가져올 수 있는 작업 StoryBook Styled-components를 활용하여 Story book component 생성 생성 된 UI components를 netlify 사이트를 사용하여 배포 구현화면 부족한점 지역을 입력하는 중 렌더링된 내용 사라짐 검색 후 엔터를 누를 경우에만 반영하도..

22.07.18_TIL

📌 오늘은 웹 페이지를 생성할 때 사용자들의 로그인을 쉽게 해주는 SNS 로그인 기능에 대해서 학습을 하는 날이다. 📗 오늘 학습한 내용 소셜 로그인 로직 플로우 사용자가 로그인 요청을 보낸다. SNS Auth서버에서 권한 허락 문구를 화면에 출력한다. Authorization code를 클라이언트에 전달한다. Authorization code: 액세스 토큰을 발급받기 위한 Code 클라이언트에서 웹 서버로 Authorization code를 전달한다. 웹 서버에서 SNS Auth서버로 Access token을 요청한다. Access token: 보호된 리소스에 액세스하는데 사용되는 인증 토큰 SNS Auth서버에서 웹 서버로 Access token을 전달한다. 웹 서버에서 Access token을 클라..

22.07.15_TIL

📌 요즘 날씨가 더워졌다 추워졌다 하는 것을 보니 환절기인듯하다 이럴때 몸관리에 유의해야겠다... 하나더 요즘 몸이 너무 쉽게 피로해진다.. 확실히 체력이 떨어지는 것을 몸으로 직접 체감하고 있다. 체력을늘리자!! 초심을 찾아 더 열심히 공부해보자!! 📗 오늘 학습한 내용 OWASP(The Open Web Application Security Project) 전 세계의 보안 전문가들이 웹의 보안에 대한 표준을 정의하고 이에 대해 기업과 개발자들에게 효율적인 정보를 제공하는 오픈 소스 커뮤니티이다. SQL Injection 간단하지만 강력한 공격기법 DB에서 임의의 SQL문을 실행할 수 있도록 명령어를 삽입하는 공격유형 대응 방안 입력(요청)값 검증 Prepared Statement 구문 사용 Error ..

22.07.14_TIL

📌 오늘부터 3일간 로그인관련 내용을 학습을 하게된다. 쿠키... 토큰... 소셜 로그인 관련이다... 이부분은 프로젝트에 사용할 수 있는 부분이기 때문에 열심히해보자!!! 📗 오늘 학습한 내용 HTTPS 프로토콜 HTTP + Secure 요청의 내용을 한번 암호화하기 때문에 유출이 되어도 어떤 내용인지 알 수 없다. 인증서, CA, 비대칭 키 암호화방식을 이용한다. 인증서 데이터를 제공하는 서버가 진짜인지 인증확인하는 용도이다. 인증서의 내용에 서버에 도메인 관련 정보가 있어서 데이터 제공자의 인증을 용이하게 한다. 요청을 받은 서버는 인증서와 함께 응답을 전송하고, 응답을 받은 클라이언트는 인증서에 작성된 도메인과 응답 객체에 작성된 도메인을 비교하여 같다면 데이터를 제공해주는 서버가 진짜라는 것을 ..

22.07.12_TIL

📌 어제 배운 내용을 바탕으로 실제 웹 접근성을 고려해보는 과제가 주어졌다. 하면서 이런점이 있으면 몸이 불편하신 분들에게 도움이 될 수 있고, 코드를 보고 '아! 어떤 내용이 담긴 코드이구나!' 라는 것을 알 수 있다는 것을 다시 한번 깨닫는 계기가 되었습니다. 📗 오늘 학습한 내용 alt 속성 속성의 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시한다. 느린 네트워크 환경이나 src 속성의 오류, 시각 장애인용 스크린 리더 등을 사용할 때 대체 정보를 제공한다. for 속성 for의 값과 id의 값이 같은 태그를 연결시켜준다. 크롬 플러그인 Screen Reader 웹 페이지의 내용을 읽어주는 플러그인 (alt, label, aria 등을 읽어준다.) 📘 추가로 공부할 내용 [udem..