이경욱

Keep 현재 만족하고 있고, 계속 이어갔으면 하는 부분 1. 와이어프레임을 미리 상세하게 디자인하고 프로젝트를 진행하는 것 Problem 불편하게 느끼며 개선이 필요하다고 생각되는 부분 1. 페이지 디자인 벤치마킹 부족 2. ERD 설계나 업무 흐름에 맞는 분담을 하는 것 Try 문제에 대한 해결책 1. 핀터레스트나 드리블 등에서 프로젝트 기획과 맞는 디자인을 적용해봐야겠다. 2. 초반에 업무를 상세하게 나열하여 흐름에 맞게 팀원들이 분담하는 것, 기획 단계에서 데이터 설계를 확실히 해야겠다.

1. 프로젝트명 실시간 인기 검색어 뉴스피드 2. 소개 구글 브라우저의 검색량 급상승 키워드를 리스트업하여 해당 키워드와 관련된 의견을 나눌 수 있는 커뮤니티 3. 와이어 프레임 (1) Home (2) Detail (3) User page 4. ERD 설계 5. API 명세

저번 편 ( 1편 링크 )에 배경과 기초적인 레이아웃만 잡아보았다. 이번에 input 창에 키워드를 입력했을 때 라우터를 이용해 해당 키워드가 담긴 주소값으로 이동하는 기능을 구현해보려한다. React Hook인 useState, useNavigate와 useParam을 이용해 기능을 구현했다 useState, useNavigate (Home) const navigate = useNavigate(); const [keyword, setKeyword] = useState(''); function detailNavigation(keyword) { navigate(`/Detail/${keyword}`) } function onChangeHandler(e) { setKeyword(e.target.value) }..

1. 배경 티스토리 TIL을 쓰면서 노출은 되지만 내가 해결하려는 문제가 수요가 있는지 파악하는 것이 어려웠다. 일일이 구글 트렌드에 접속해서 검색량을 아는 것도 귀찮고 기존에 나와있는 서비스를 이용하려니 대부분 네이버 분석만 하고 있거나 구글은 유료였다.. 아무래도 셀러들을 위한 서비스라 네이버 스마트스토어 업자들을 타겟해서 구글은 잘 지원하지 않는 것 같았다. 심심풀이로 만들어보자니 내 실력에 비해 너무 큰 프로젝트(?) 같지만 도전해보기로 했다! 2. 구상 먼저 환경은 리액트로 설정하여 각 컴포넌트 별로 정보를 새로고침 할 수 있게끔 설정할 것이다. 왜냐면 분석 그래프나 통계 자료 등이 변경되거나 필터링이 될 수 있는데 그 때마다 HTML 페이지 전체가 로딩된다면 매우 깜빡거릴 것 같기 때문이다. ..

0. 배경 햇수로 6년간 주식을 해오면서 반복적으로 하는 일이 있다. '당일 상한가 및 특징주 정리하기' 이 작업을 해오며 미래에 예측할 수 있는 눈을 기르고 '싶었다'.. 이번 내일배움캠프 프론트엔드 과정을 참가하며 자바스크립트와 HTML, CSS 등 웹페이지 제작에 필요한 요소들을 배우고 있다. 여기서 배운 것들을 내가 하는 루틴에 적용해서 반복되는 일을 자동으로 처리할 수는 없을까? 하는 호기심에 시작해보았다. 사실 귀찮았다. 하는 김에 다른 사람들에게도 도움이 될 수 있을 것 같아 서버도 만들고 트래픽도 체크해보는 걸 도전해볼 계획이다. 1. 기획 전체 가이드라인을 먼저 잡고 시작하려니 경험이 짧은터라 아이디어가 떠오르지 않아 시작 자체를 못하고 있었다. 그래서 우선 1페이지부터 기획을 해보았다...

요약 window 객체를 이용한 뒤로가기, 새로고침 확인 코드와 sessionStorage 를 통해 이전 데이터 유지 기능을 구현하였다. 문제 1. 뒤로가기 시 검색결과 데이터 날라감 검색을 하고 해당 페이지로 들어간 뒤 같은 검색결과의 다른 페이지를 보고싶은데 홈화면으로 돌아가는 문제가 있었다. 가설 1. 뒤로가기 시 검색결과 데이터 날라감 찾아보니 세션스토리지를 사용하면 된다고 해서 사용법을 정리해두려한다. 찾아보니 setItem으로 키밸류 데이터를 저장할 수 있다. input에 값이 들어오면 검색텍스트를 저장했다가 페이지 이동시 뒤로가기를 눌렀을 때 저장된 값을 input에 넣어 다시 검색되도록 코드를 짜봐야겠다. 해결 1. 뒤로가기 시 검색결과 데이터 날라감 function captureInput..

문제 1. 상단 네비바 컬러 변경 자바스크립트로 CSS color로 바꾸려고 했는데 전혀 안바뀌었다. 왜이러지!?!??!?!? a 태그 전체를 바꾸면 바뀌는데 직접 텍스트 클래스를 지정하고 바꿔주면 안먹는다.. 2. git hub Confilct 작업한 부분을 푸시하려고 했는데 오류가 나서 기존 데이터를 안받아와서 그런줄알았다. pull을 한 뒤 커밋했더니, merge되면서 이전 다른 팀원분이 작업해놓으신걸 다 날려먹었다.. 진짜 앞이 깜깜해지는게 이런 기분이구나 싶었다 가설 1. 상단 네비바 컬러 변경 a태그가 문제가 있는 것 같다. a태그를 빼고 CSS를 해주니 컬러가 변경되었다. HOME SEARCH MOVIE LIST href를 사용하기 위해 a 태그에 감싼 것으로 보이는데 이 href를 li태그..

투명도는 숫자로 계산되기 때문에 스크롤 위치와 타겟 위치를 출력하여 opacity값과 계산을 해준다면 자바스크립트에서 간단하게 투명도 조절이 가능해진다 nav.style.opacity = 1 - scrollposition / headerHeight DOM API에 접근해서 요소를 가져온 후 요소의 높이값을 구해준 데이터를 변수에 넣어준다. 조건문으로 현재 스크롤 값과 변수의 높이값을 비교해서 조건이 성립되었을 때 스타일 배경색을 변경하는 코드를 추가했다. // 헤더 스크롤 애니메이션 document.addEventListener('scroll', onScroll, {passive:true}); function onScroll () { const header = document.querySelector('..

1. 문제 정수 배열 numbers가 매개변수로 주어집니다. numbers의 각 원소에 두 배한 원소를 가진 배열을 return하도록 solution 함수를 완성해주세요. let numbers = [1, 2, 3, 4, 5] 2. 풀이방식 내가 이 문제를 보고 들었던 풀이방식은 'for문을 돌려서 두 배씩 곱하면 되겠다' 라고 생각이 들었다. function solution1(numbers) { var answer = []; for (let i = 0; i < numbers.length; i++) { let x = numbers[i] * 2; answer.push(x) } return answer; } 3. 해설 다 풀고 제출 후 다른 사람들의 풀이를 보니 배울 점이 많았다. 2가지 방법이 있었는데, r..

실행 컨텍스트 실행할 코드의 환경 정보를 모아놓은 객체 1. 배경지식 (1) 콜스택이란? Stack : Last in, first out (LIFO) Queue : First in, first out (FIFO) (2) 함수 정의방식 A. 함수 선언문 function a () { /* ... */ } a(); // 실행 ok B. 익명 함수 표현식 var b = function () { /* ... */ } b(); // 실행 ok C. 기명 함수 표현식 var c = function d () { /* ... */ } c(); // 실행 ok d(); // 에러! (3) 함수 vs 메서드 독립성을 기준으로 차이가 납니다. a. 함수명(); b. 객체.메서드명(); 구분 기준 : [] or . (4) AS..