원문 Writing Helpful Error Messages 이외에도 공학자들을 위한 techincal 능력 향상을 위해 공식 사이트 에서 교육자료를 공유하고 있다. 자세한 가이드를 하나씩 살펴보기 전, 오류메세지 작성 시 규칙을 먼저 알아보도록 하자. 오류 알림을 즉시 발생시켜라. 실패를 조용하게 넘기지 마라. 오류의 근원이 묻히지 않도록 해라. 오류 코드를 기록하라. 최적화된 오류 메세지 오류의 원인을 전달하라 identify the error's cause 사용자에게 어떤 문제가 있는 지 확실하게 전달해야 한다. ✖ 잘못된 접근입니다. ✔ 해당 디렉토리가 존재하지만 쓰기 가능한 상태가 아닙니다. 해당 디렉토리에 파일을 추가하려면, 디렉토리가 쓰기 가능한 상태여야 합니다. [쓰기 가능한 상태로 만들 ..

What is difference between Fetch and Axios ? JS에서 많이 사용하는 HTTP 기반 비동기 통신 방법인 Axios 와 Fetch 의 차이에 대해 알아보도록 하자. Axios/Fetch 생겨난 배경 기존의 웹에서는 어떤 정보들을 비동기로 요청하기 위해서 XHR(XML HTTP Request) 객체를 사용하여야만 했다고 한다.. 근데 XHR은 되게 불친절하게 정보를 제공한다고 한다. (데이터를 통째로 줘버린다던지..) 요청의 상태나 변경을 계속 보고 있게 하려면 이벤트를 추가로 등록해서 변경사항들을 다시 받아야 하고.. 요청의 성공/실패/상태변경 등에 따른 분기를 나누는 것도 복잡했다. → 새로운 url을 호출할 때마다 모든 페이지를 새롭게 그려야 하는 등의 흔히 생각하는 ..

뉴스 피드 란? 홈 페이지 중앙에 지속적으로 업데이트 되는 스토리들로, 사용자 상태 정보 업데이트, 사진, 비디오, 링크, 앱 활동(app activity), 그리고 페이스북에서 팔로우하는 사람들, 페이지, 또는 그룹으로부터 나오는 '좋아요(likes)' 등을 포함하는 것 비슷한 유형의 문제로 페이스북 뉴스 피드, 인스타그램 피드, 트위터 타임라인 설계 등이 있다고 한다. 1단계. 문제 이해 및 설계 범위 확정 모바일 앱, 웹 모두 지원해야함 새로운 스토리 올리기 및 보기 다 가능해야한다. 피드 나열은 간단하게 시간 흐름 역순(reverse chronological order)으로 : 최신순 한 명의 사용자는 최대 5000명의 친구를 가질 수 있음 트래픽 규모는 약 1,000만명 피드에는 이미지나 비디오..

0. about UseEffect UseEffect 함수 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook component의 mount 상태가 바뀔 때, 혹은 내용이 update 되었을 때, 특정 작업을 처리할 수 있게 해준다. 사용법 은 import React, {useEffect} from 'react' 이렇게 함수를 불러와서 useEffect(()=>{ 값이 변경될 때마다 하고 싶은 일 },[기준 값]) 이렇게 사용해주면 된다. 컴포넌트가 화면에 가장 처음 렌더링 될 때 딱 한 번만 실행하고 싶을 때에는 기준값이 들어가는 [] 부분을 그대로 빈 배열로 두면 된다. 1. 문제 상황 useEffect(()=>{},[]) 얘를 넣어주면 이론상 딱! 한번만 불러와야 하는데...

오늘은 HTML의 기본 SEO 에 대해 알아보려고 한다. 사유는 몇일 전의 내가 TITLE 도 안 바꾸고 프로젝트를 올릴뻔한 적이 있어서 나는 HTML에 H도 모르는구나 라고 깨달았기 때문이다. 대참사는 눈치껏 막아냈지만.. 또한 우리가 만든 아기 웹앱 👶은 보다싶이 링크를 추가해도 아무런 미리보기를 제공해주지 않는다. 노션도 마찬가지이다. 한참 로딩이 걸리다가 - 그냥 링크 이름만 걸어준다 😥 대강 이런 느낌이다.. 콩지야.. 난 더이상 안되개써 🐸 이 이유에 대해서는 심각한 건 아니고 아주 간단하게 HTML 기본 SEO에 대해 알면 해결할 수 있게 된다. 🐵🐵🐵 우선 0. SEO 란? Search Engine Optimization의 약자로, 검색엔진최적화 를 의미하는데, 웹 사이트와 웹페이지를 검색..

프론트엔드 개발자 로드맵 2023 프론트엔드 로드맵 참고 원본 영상

1단계. 문제 이해 및 설계 범위 확정 알림 종류: 푸시 알림, SMS 메세지, 이메일 연성 실시간(soft real-time) 시스템이라고 가정 IOS, 안드로이드(android) 단말, 그리고 랩톱/데스크톱을 지원해야 함. 알림: 클라이언트 애플리케이션 프로그램이 만들수도 있고, 서버에서 스케줄링 할수도. 사용자가 알림 끄기도 가능해야함. 하루에 천만 건 모바일 푸시 알림, 백만 건의 SMS 메세지, 5백만 건의 이메일 2단계. 개략적 설계안 제시 및 동의 구하기 알림 유형별 지원 방안 1. IOS 푸시 알림 알림 제공자(provider) 알림 요청(notification request)을 만들어 애플 푸시 알림 서비스(APNS)로 보내는 주체 알림 요청을 만들기 위해서는... 단말 토큰(device..

웹 크롤러란? 로봇(robot) 또는 스파이더(Spider)라고 부름 검색 엔진에서 널리 쓰는 기술로, 웹에 새로 올라오거나 갱신된 컨텐츠르 찾아내는 것이 주된 목적 -> 몇개의 Web Page 에서 시작해서 그 링크를 따라 나가며 새로운 콘텐츠를 수집한다... 크롤러가 이용되는 곳들 ? 1. 검색 엔진 인덱싱(Search Engine Indexing) 크롤러가 제일 보편적으로 사용되는 곳 웹 페이지를 모아 검색 엔진을 위한 로컬 인덱스(local index)를 만듬 ex) Googlebot - 구글(Google) 검색 엔진이 사용하는 웹 크롤러 2. 웹 아카이빙(Web Archiving) 나중에 사용할 목적으로 장기보관을 위해 웹에서 정보를 모으는 절차를 말함 ex) 미국 국회 도서관(US Librar..

나는 두개의 차이를 보안이라고 알고 있는데.. 내가 놓치고 가는 부분이 있을수도 있으니 다시 알아보도록 하자 렛츠고 HTTP 란? 하이퍼 텍스트 전송 프로토콜(Hypertext Transfer Protocol)의 약자 서로 다른 시스템들 사이에서 통신을 주고받게 해주는 가장 기초적인 프로토콜 인터넷 초기의 모든 웹사이트에서 기본적으로 사용되었던 프로토콜이며.. 서버에서 브라우저로 데이터를 전송해 주는 용도로 제일 많이 사용된다고 한다. HTTPS 란? 하이퍼 텍스트 전송 프로토콜 보안(Hypertext Transfer Protocol Secure)의 약자 말 그대로 보안성이 추가 되었다는 의미. 일반 HTTP 프로토콜의 문제는 " 서버에서부터 브라우저로 전송되는 정보가 암호화되지 않는다는 것 " = 데이..

완성본 사진... 렛츠고 JSON-SERVER ? 비교적 간편하게 아주 짧은 시간을 들여 REST API를 구축해주는 라이브러리. 주로 프로토타입을 만들거나, 공부하고 실습할 때.. 이용하는 서버로 사용하면 아주 굿인 도구 ! REST API 서버의 왠만한 기본적인 기능을 대부분 갖추고 있는데 프로덕션용으로는 부적합하다고 한다. 나는 공부하기 위한 용이니까 아무튼 렛츠고 ~! 🔌 JSON SERVER Setup 나는 npm을 사용해서 json-server를 설치했다. 서버를 붙이고 싶은 react 파일이 있는 폴더 최상단에서 터미널을 열어서 // 서버 폴더를 만들어준다. 나는 성장용이라 이름을 이렇게 지었다. $ mkdir server-grow // 만든 서버 폴더로 이동 $ cd ./server-gro..

SQL INJECTION 이란? 사용자가 정상적인 입력이 아닌 비정상적인 임의의 SQL 문을 입력해서 DB에 비정상적으로 접근하는 것.. 비정상적이지만 컴퓨터는 비정상인걸 몰라서 데이터를 다 줘버린다 (문제) SQL INJECTION 보안 방법 입력 값에 대한 검증 (지금 할거임) Prepared Statement 구문 사용 - 한줄로 조회 때려버리지말고 나눠서 검색 조건이 될만한 애들은 변수나 이런데 저장놓고 뽀개서 쓰란 소리 Error Message 노출 금지 - 디테일 한 것들은 개발 단계에서 개발자만 보자... 방화벽 사용 해결방법 나는 앞에서 말한 보안 방법들 중 1번 입력 값에 대한 검증을 해보도록 하겠다. 흔히 말하는 정규식을 사용 한 것인데.. 정규식(Regular Expressions)란..

🐵 현재 상황 게시글 delete 하면 바로 삭제되어버림 로그인한 정보를 바탕으로 게시글 작성자를 인식해서 수정/삭제 버튼을 열어주고 있기는 하지만 삭제 할까말까 고민하다가 손가락이 빨라버려서 열심히 쓴 글을 지워버린다면... 혹은 지우지 않아야할 글을 지워버린다면... 사용자가 꽤 슬프게 될 것이다. 물 한방울도 아껴써야 하는 이 세상에서 사용자의 눈물을 헛되이 쓰게 할 수는 없다. 렛츠고 수정 간단하게 confirm 한번 더 받고 확인 누르면 그때 axios 신호를 주도록 하자. C#에 messagebox 가 있듯, react에는 window.confirm이 있다. 사용법은 간단하다. window.confirm("띄우고 싶은 메세지"); 답변 값은 확인: true 취소: false 답변 값도 깔끔하게..