1.문제점 특정 시간에만 어떠한 것을 운영한다고 가정하자. 그러면 그 유저가 만약 해외에 있다면? 그 특정 시간에 전화가 연결되지 않을까?(즉 로컬시간) 이런 경우는 로컬 시간이 무의미하다.그래서 서버시간 기준으로 두려고 하는데....음? 2.해결 과정 서버 시간을 기준으로 하려면 api를 가져오거나 뭐 복잡하게 있던데... 아무리 생각해도 더 쉬운 방법이 있을거 같았습니다. 왜냐하면 시간은 세계에서 정한 절대 기준이 확실히 있고 그 기준에서 무조건 한국시에 맞추면 그만 아닌가? 그래서 국제표준시를 기준으로 시분초를 다 초로 바꾼 후에 계산하면 되지 않을까 싶었습니다. utc 를 다 초 단위로 바꾸고 그 단위를 한국 시로 바꾸게 하면 될까?싶어서 구글링을 했습니다. 3.해결방법 해결도 결국...! 이렇게 적으니 ㅎㅎㅎㅎ 아주 잘 됩니다. 시간과 분 단위만 있으면 로직 활용이 충분하니 굳이 초는 쓰지 않았

1.문제점 해당 문제는 모달창에 어떠한 버튼을 클릭하면 전화가 연결되는 로직을 짜면서 나온 에러다. > Type 'string' is not assignable to type 'location' window.location 2.해결 과정 이 문제도 처음에는 이걸 어떻게 해결하지 ? 막막 했습니다. 왜냐면 해당 부모 컴포넌트에서 로직을 짜는데 그 자식에게 이미 a 태그가 걸려져 있었기 때문입니다 ㅠㅠ....그래서 와 어쩌지? a 태그 관련한 문서도 뒤져봤지만 결국 이동하기 위해서는 a 태그를 감싸야 한다는 것이 저의 결론이였습니다. 조건은 9시부터 18시에만 저 태그에 맞게 넘어가야 하는데 a태그를 걸어버린 순간 무조건 a 태그가 반응하기 떄문입니다. 그래서 여러 도움을 받았습니다. [첫번째 문제 해결에 도움 준 질문글](https://stackoverflow.com/questions/17897213/how-to-call-a-

1.문제점 아주 정확하기 집어주었다.특정 시간에만 작동하도록 조건문을 작성 중이였는데 정확히 저 00 부분을 집어준다.매우 친절하다 :-) .... > SyntaxError: tsx: Legacy octal literals are not allowed in strict mode. 해석해보면 지금 Legacy octal literals은 엄격모드를 허용하지 않습니다 라고 말해주고 있다. 그래서 이 말이 무슨 말인데?? 2.해결 과정 해당 과정은 바로 에러 메세지를 검색했다. 그러니 진수에 관련한 이야기가 나왔다. 즉 보니 이런 에러들은 010과 같은 리터럴을 사용할 때 만날 수 있는 오류라고 한다. 예를 들어,010을 조금 면밀히 보자면 0으로 시작하면 8진수 0

1.문제점 div에 감싸 바로 onClick 이벤트를 주니 아래와 같은 에러를 뱉는다 > Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events 해석해보면 클릭 핸들러를 가지고 표시되는 비대화형 요소에는 최소한 하나의 키보드 리스너 jsx-a11y/click-events-have-key-events가 있어야 합니다. 2.해결 과정 해당 과정은 이러하다. 공용 모달에서 확인 버튼에 이미 링크 이동이 달려져 있었는데.....보통은 링크 이동을 하면 알아서 닫아지니(랜더가 다시 되니깐) 굳이 모달창을 닫는 로직을 추가 할 필요가 없었다. 하지만.....! 해당건은 링크 이동과 더불어 새창이 열리는 로직이여서 확인 버튼을 눌러도 모달이 여전한 현상이 있

1.문제점 모달을 감싸는 div 영역 바깥을 누르면 모달창이 닫아지고,취소 버튼을 눌러야지 닫아지는 방법을 구현하려고 했으나 모달 바깥 부분이랑 모달 영역을 누르면 닫아지는 현상 2.해결 과정 a.프로젝트에서 쓰는 것은 타입스크립트,리액트,리덕스 이렇게 쓴다. 리덕스가 익숙하지 않으니 나름 내 방식대로 해본다고 이건 당연히 useRef를 사용하면 되겠지 사용했지만 되지 않았다.....(이 부분은 커스텀 훅으로 따로 뺀 곳도 같이 파악 할 예정) b.그러면 아예 이 모달을 사용하는 부모한테 상태관리를 해주고 함수를 넣어주면 되지 않을까?생각했다.하지만 놀랍도록 동작하지 않았다. c.그래,그러면 그 모달 컴포넌트에서 click 이벤트를 아예 닫는 로직을 넣으면 되지 않을까?물론 이것은 동작이 되었지만 해당 모달 컴포넌트는 common 디렉토리에 있는 아이로 여기저기서 사용되고 있던 모달이였고 그 동작 이벤트를 하나로 마무리가 지으면 분명 문제

Algorithm이란? 알고리즘(영어: algorithm), 셈법은 수학과 컴퓨터과학, 언어학 또는 엮인 분야에서 어떠한 문제를 풀어내기 위해 정해진 일련의 절차나 방법을 공식화한 형태로 표현한 것, 계산을 실행하기 위한 단계적 절차를 의미한다. 즉, 문제풀이에 필요한 계산절차 또는 처리과정의 순서를 뜻한다. 프로그램명령어의 집합을 의미하기도 한다. 문제 프로그래머스의 '행렬의 덧셈' 문제 입니다. 문제 설명 행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요. 제한 조건 행렬 arr1, arr2의 행과 열의 길이는 500을 넘지 않습니다. 해결 방법 ✍✔ 체크! 이 문제

Algorithm이란? 알고리즘(영어: algorithm), 셈법은 수학과 컴퓨터과학, 언어학 또는 엮인 분야에서 어떠한 문제를 풀어내기 위해 정해진 일련의 절차나 방법을 공식화한 형태로 표현한 것, 계산을 실행하기 위한 단계적 절차를 의미한다. 즉, 문제풀이에 필요한 계산절차 또는 처리과정의 순서를 뜻한다. 프로그램명령어의 집합을 의미하기도 한다. 문제 프로그래머스의 '자릿수 더하기' 문제 입니다. 문제 설명 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. 제한 조건 N의 범위 : 100,000,000 이하의 자연수 해결 방법 ✍✔ 체크! 이 문제를 보자 바로 메서드 reduce가 생각났습니다! 그래

Algorithm이란? 알고리즘(영어: algorithm), 셈법은 수학과 컴퓨터과학, 언어학 또는 엮인 분야에서 어떠한 문제를 풀어내기 위해 정해진 일련의 절차나 방법을 공식화한 형태로 표현한 것, 계산을 실행하기 위한 단계적 절차를 의미한다. 즉, 문제풀이에 필요한 계산절차 또는 처리과정의 순서를 뜻한다. 프로그램명령어의 집합을 의미하기도 한다. 문제 프로그래머스의 '정수 내림차순으로 배치하기' 문제 입니다. 문제 설명 함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다. 제한 조건 n은 1이상 8000000000 이하인 자연수입니다. 해결 방법 ✍✔ 체크! 맨 처음 풀었던 저의 풀이 방식 입니다.

항상 CRA(create-react-app) 초기세팅으로만 하는 프로젝트를 진행 했었는데, 첨으로 CAR 없이 Webpack을 이용한 초기세팅을 해보았습니다. https://webpack.kr/ Webpack 공식 사이트에서 공부하고 참고 하였습니다. 01.What is Webpack? 웹팩이란 JavaScript 을 위한 정적 모듈 번들러 입니다.webpack은 내부적으로 프로젝트에 필요한 모든 모듈을 mapping 하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만듭니다. 여기서,디펜던시 그래프란?(Dependency Graph) webpack이 실행되면 Dependency Graph를 통해 필요한 형태의 하나 또는 여려개의 Bundle로 생성합니다.

Algorithm이란? 알고리즘(영어: algorithm), 셈법은 수학과 컴퓨터과학, 언어학 또는 엮인 분야에서 어떠한 문제를 풀어내기 위해 정해진 일련의 절차나 방법을 공식화한 형태로 표현한 것, 계산을 실행하기 위한 단계적 절차를 의미한다. 즉, 문제풀이에 필요한 계산절차 또는 처리과정의 순서를 뜻한다. 프로그램명령어의 집합을 의미하기도 한다. 문제 프로그래머스의 '평균 구하기' 문제 입니다. 문제 설명 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. 제한 조건 arr은 길이 1 이상, 100 이하인 배열입니다. arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. 해결 방법 ✍✔ 체크! 맨 처음 풀었던 저의 풀이 방식 입니다. 이렇게 푸는 경우 테스트 2는 통과하지만 1은

Algorithm이란? 알고리즘(영어: algorithm), 셈법은 수학과 컴퓨터과학, 언어학 또는 엮인 분야에서 어떠한 문제를 풀어내기 위해 정해진 일련의 절차나 방법을 공식화한 형태로 표현한 것, 계산을 실행하기 위한 단계적 절차를 의미한다. 즉, 문제풀이에 필요한 계산절차 또는 처리과정의 순서를 뜻한다. 프로그램명령어의 집합을 의미하기도 한다. 문제 프로그래머스의 '제일 작은 수 제거하기' 문제 입니다. 문제 설명 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다. 제한 조건 arr은 길이 1 이상인 배열입니다. 인덱스 i, j에 대해 i ≠ j이면 arr

Algorithm이란? 알고리즘(영어: algorithm), 셈법은 수학과 컴퓨터과학, 언어학 또는 엮인 분야에서 어떠한 문제를 풀어내기 위해 정해진 일련의 절차나 방법을 공식화한 형태로 표현한 것, 계산을 실행하기 위한 단계적 절차를 의미한다. 즉, 문제풀이에 필요한 계산절차 또는 처리과정의 순서를 뜻한다. 프로그램명령어의 집합을 의미하기도 한다. 문제 프로그래머스의 '핸드폰 번호 가리기' 문제 입니다. 문제 설명 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 조건 s는 길이 4 이상, 20이하인 문자열입니다. 해결 방법 ✍

Algorithm이란? 알고리즘(영어: algorithm), 셈법은 수학과 컴퓨터과학, 언어학 또는 엮인 분야에서 어떠한 문제를 풀어내기 위해 정해진 일련의 절차나 방법을 공식화한 형태로 표현한 것, 계산을 실행하기 위한 단계적 절차를 의미한다. 즉, 문제풀이에 필요한 계산절차 또는 처리과정의 순서를 뜻한다. 프로그램명령어의 집합을 의미하기도 한다. 문제 프로그래머스의 '짝수와 홀수' 문제 입니다. 문제 설명 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요. 제한 조건 num은 int 범위의 정수입니다. 0은 짝수입니다. 해결 방법 ✍✔ 코딩을 하다보면 이 알고리즘 사고 능력이 왜 필요한지 절실하게 느껴집니다. 꾸준히 노력해서 알고리즘 사고 능력에 더 가까워 지려고 합니다!

장바구니 기능 구현을 하면서 가격 표시를 할 때 ','를 어떻게 해야할지 궁금해서 구글링 하니, `price={item.price.toString().replase(//\B(?=(\d{3})+(?!\d))/g, ',')}` 기호를 쓰면 된다고 그래서 사용하니 정말 잘 됐다! 그러다가 코드 리뷰를 하는 와중에 '이게 뭔가요?'라는 질문에 이거 가격 백단위로 끊어주는 식이라고 하니깐 더 쉽게 가능하다고 말을 들어서 다시 서치를 했다... {price.toLocaleString()} .toLocalString() 사용을 하면 더 쉽게 된다 :-) 이렇게 사용했다가 fetch를 하니깐 소수점까지 나와서 난리가 나는 현상이 발생했다.왜일까 생각했는데* string 형태로* 들어온다는 것을 알았다.이런 경우 Number() 감싼 후 사용하면 해결된다! ✍✔서치를 할 때는 항상 두 번 정도 찾아보고 하는데 계

What Software Testing? 소프트웨어 테스팅이란? 내 코드를 살펴보는 것을 말한다. 왜 하는가? 내가 원하는 코드를 제대로 개발했는가? 확인하려고! 테스트를 왜 하는가? 미리 문제를 확인 할 수 있다. 사전에 방지 할 수 있는 효과. 시간이 절약되는 효과가 있다. 구조적으로 개선이 됨.품질 개선이 됨.확장성이 좋아짐. What Manual Testing ? 사람이 직접 모든걸 테스트 하는것을 말한다. 코드를 작성하고 직접 브라우저를 띄우고 눌러보고 잘 작동하는지 확인하는 이 모든 flow를 말한다. 사람은 실수를 하기 때문에 모든 경우의 수를 생각 할 수 없다. 그렇기 때문에 안정성이 보장 되지 않는다. 규모가 커지면 커질수록 cost도 커지고 불안전성도 커진다. 테스트 속도가 당연히 느리다! Automation Testing ? 코드를 짜서 자동화 시키는 것

프로젝트를 진행하면서 정신 없는 와중에 너무 궁금해서 참지 못하고 서치했다........ 매번 npm start, npm install을 열심히 입력해서 사용했지만 yarn은 스쳐가듯 들어본 존재였다. 팀원 한분이 초기세팅을 하면서 yarn을 쓰시길래 어..?저건 뭐지 묻고싶었지만 너무 정신없어서 혼자 또 아 저거 뭐지 저게 더 좋은건가? 싶었다. (참고로 통일 해야한다고 해서 다수 사용자에 의해 npm으로 통일했다.) 하지만 서치해서 보니 yarn이 좋다는 것을 알게됐다😂 yarn이 더 안정적이고 빠르다는 것인데 일단 내가 작업하는 거에 대해서 npm이 느리다고는 느낀적은 없지만 yarn을 써보지 않아서 비교가 되지 않는다.....또한 보완성면에서도 굉장히 우수하다고 한다 !!!! 하지만 내가 써보지 않았으니 yarn의 우수함을 어떻게 알겠는가? 사실 라이브러리도 지금 쓰지 않고 있다.일단 먼저 해보고 그 이후에 라이브러리에 편리함을 깨닫

1.what 인증?인가? 인증(uthentication)이란,유저 아이디와 패스워드를 확인하는 절차이다. 이 인증이라는 과정을 거치기 위해서는 생성할 수 있는 기능이 필요하다. 유저 ID.PW생성 유저 비번 암호화 해서 저장 인가란,유저가 요청하는 request를 실행할 수 있는 권한이 있는 유저인가 아닌가 확인하는 절차이다. 조금 쉽게 예를 들자면, 구매 사이트에서 로그인이 되면 장바구니에 담은 것들에 대한 정보는 나만 알 수 있고 다른 유저에게는 권한이 없다. 다른 예로는 네이버 화면에는 누구나 들어갈 수 있지만 내 블로그에 글을 수정하고 쓰는 공간까지 들어갈 수는 없다. 2.단방향 해쉬? 비밀번호를 있는 그대로 입력 값을 DB에 저장하면 해커들이 아주 좋아할 것이다.....해커뿐만 아니라 내부 개발자들도 아주 다 알것이다.....공용도

기다리고 기다리던 백엔드분들과 교류하는 시간이 왔다! (tmi 리얼로 제일 기대했던 시간이었다.) ✔ fetch 함수 Check List ✔ 프론트도 통하고 백엔드도 통하는 json 파일로 연락을 해야하는데, 꼭 string화 해주어야 한다 ❗ ex) JSON.stringify() 메서드를 활용하여 js object에서 string화 해주어야한다. (기억하자 너도나도 통해야 통신이 된다는 것을.) ✔ API 주소가 정확히 맞는지 (다른 집으로 가면 안돼잖아요~😉) ✔ body key 값과 value에 있는 state가 맞는지. ✔ fetch 함수를 잘 작성했는지 (비동기 함수) => 통신을 위한 함수. ✔ <span style="backgroun

1) ✍Web Application 발전 사이트에 들어가면 보여지는 것(UI : User Interface)과 할 수 있는 것이 굉장히 많아졌다. 이런 이유로 요즘은 웹 페이지 라는 단어 보다 웹 어플리케이션이라는 단어가 많이 쓰여지고 있다. 이렇게 규모가 커짐에 따라 처리해야 할 것들이 많아지고 이전의 방법들(DOM,jQuery)으로는 개발하고 유지보수 하기가 어려워졌다. 이에 따라 방대한 양의 데이터 관리와 유지보수를 편리하게 하기 위해 다양한 Frontend Framework 라이브러리(Library)가 등장하게 된다. 대표적으로는 Angular,Vue,React가 있다. 1-2)✍다양한 Frontend Framework Library Angular 구글에서 개발한 Framework,TypeScript 기반으로 만들어짐.안정적이고 탄탄한 개발이 가능하다.하지만 어렵다는 단점이 있음 <l

인스타그램 메인페이지에 스토리박스를 구상하던 중에 마음이 급한 나머지 메인 피드 먼저 꾸며나가는 오류를 범했다 ..... 원래 구상은 이러했다. > 맨 위에 검색창 부분이 있는 nav 그 밑에 본문 피드 사진이 있는 피드박스 댓글을 남길 수 있는 comment 공간 메인 페이지 옆에 aside 부분 <b