티스토리

Minsoftk
검색하기

블로그 홈

Minsoftk

minsoftk.tistory.com/m

개발자가 되기 위한 험한 길

구독자
3
방명록 방문하기
공지 기본기를 쌓는 아마추어 Minsoft⋯ 모두보기

주요 글 목록

  • [git] VSCode에서 vi모드 해제(pager, vim, log) 1. VScode에서 commit시 vi모드 해제 - `git commit` 명령어를 실행 시, 터미널에서 vi 모드로 열리는게 불편했다. 이를 VSCode에서 수정하도록 config 설정을 해준다. # PATH 등록이 되었는지 확인 code --verison # 안되어있을 경우, MAC에선 Command + Shift + P # Shell을 입력 후, Shell Command: Install 'code' command in PATH를 선택 # editor 변경 git config --global core.editor "code --wait" # 정상등록 되었는지 확인 git config --global -e 2. git log default Pager 설정(vi 모드 해제) - `git log` 명령어.. 공감수 0 댓글수 0 2022. 8. 9.
  • VScode 줄바꿈이 적용이 되지 않는 오류 어느 순간부터 VScode에서 Alt + Z를 사용해 줄 바꿈 하는 기능이 적용이 되지 않았다. 바로가기 키 설정을 막 바꾸다 보니 생기는 오류라고 생각했다. 그러다 점점 줄 바꿈 기능이 먹히지 않아 짜증이 극에 달하기 시작했다. 처음에는 키 바인딩 문제라고 생각해 바로가기 키가 겹치는 게 있는지 확인했다. 하지만 바로가기 키에 문제가 있지 않다고 판단했다. 문제가 발생했을 시점부터 확장 플러그인을 많이 설치했던 기억이 있어 확장 프로그램을 비활성화 시킨다음에 줄 바꿈 기능이 적용이 되는지 확인해봤다. F1 key > developer 입력 후 색칠된 메뉴 찾아 클릭 > Alt + z 적용 여부 확인 만약, 적용이 된다면 익스텐션에 충돌이 일어나서 문제가 되는 것이라 생각한다. 하지만 그래도 적용이 되지.. 공감수 0 댓글수 0 2022. 6. 8.
  • [JS] pushState로 인한 URL 변경 이벤트 감지하기 SPA를 JavaScript로 구현하는 프로젝트를 진행하면서 url 변경 이벤트를 감지해야 하는 경우가 발생했다. 일반적으로는 pushState로 URL 변경 이후, router path에 해당하는 컴포넌트를 render 해준다. 아래와 같다. const navigate = path => { window.history.pushState({}, null, path); render(element, routes[path]); }; const render = (elem, Component) => { elem.innerHTML = Component; } 그런데 SPA를 구현하면서 우리는 URL 변경에 초점을 두고 개발을 진행하게 됐다. 즉, URL 변경이 일어나면 URL을 파싱 해 router에 해당하는 path.. 공감수 1 댓글수 0 2022. 4. 14.
  • [JS] CORS 깊게 이해하기 22.06.07 CORS 정의 수정 이전 블로그 글에서 5. HTML 임베디드 요소의 태그의 내용을 정리할 때, 어트리뷰트 중 crossorigin 어트리뷰트에 대해서 언급한 적이 있었다. 예전 면접에서 font-awesome의 아이콘을 쓰기 위해, 내 HTML에 스크립트를 추가해줘서 사용했다. 그런데 그 스크립트 태그 안에서 crossorigin이 무엇인지 설명할 수 있냐고 면접관님이 물어봤었다. CORS와 관련이 있는 것은 알았지만 CORS를 제대로 알지 못했기 때문에 설명할 수가 없었다. 그래서 굉장히 당황했던 기억이 있다. 이후 이를 이해하기 위해 많은 자료들을 참고해봤지만, 생각보다 이해가 쉽지 않았고 정확한 이해가 어려웠다. 기본이 많이 부족했기 때문에 이해가 어렵다고 생각해서 정리를 나중으로.. 공감수 3 댓글수 0 2021. 12. 28.
  • [JS] this에 대해서 this에 대한 이해 this란 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이다. 자바스크립트에서 this에 대한 내용이 굉장히 헷갈렸다. 그 이유는 this바인딩이 상황에 따라 다르게 때문이었다. 함수를 정의할 때 this에 바인딩할 객체가 결정되는 것이 아니고, 함수를 호출할 때 함수를 어떻게 호출했는지에 따라 this에 바인딩할 객체가 결정된다. 굉장히 헷갈리는 부분이었고 나중에 화살표 함수에서도 this가 바인딩되는 방식이 달랐다. 화살표 함수에서는 함수 자체의 this 바인딩을 갖지 않는다. 그래서 상위 스코프의 this를 참한다. 이렇게 개발자가 함수를 어떻게 호출하냐에 this가 바인딩하는 위치가 달라진다. 생각해보면 굉장히 비효율적인 것 같다. 어떻게 호출되냐에 따라 this가.. 공감수 0 댓글수 0 2021. 12. 11.
  • [JS] 프로토타입이란? 프로토타입을 공부하면서 굉장히 헷갈리는 부분이 많았다. 내용을 다시 정리해보면서 내가 헷갈렸던 부분을 공유하고 제대로 공부해보고자 한다. 멘토님이 이런 개념들을 공부하고 나라면 어떻게 사용할 것인가? 에 대한 고민이 많이 필요하다고 했다. 공부를 하면서 해당 개념에 대한 나의 생각을 정리해놓는 것이 당연하다고 생각했다. 하지만 생각을 정리하기 위해선 개념들을 확실히 알아야 했다. 아직은 모든 개념들이 연결이 되지는 않지만, 반복적 학습을 통해서 개념들을 연결시키려고 노력하려 한다. 1. 프로토타입이란? 자바스크립트에서는 프로토타입을 기반으로 상속을 구현한다. 여기서 프로토타입이란 어떤 객체의 상위 객체의 역할을 하는 객체로서 다른 객체에게 공유 프로퍼티를 제공한다. 이를 이해하기 위해선 내부 슬롯, 내부.. 공감수 0 댓글수 0 2021. 12. 6.
  • [JS] 자바스크립트 변수 선언과 할당 동작 과정 22.06.07 일부 내용 수정 자바스크립트 변수 선언과 할당 동작 과정 이해 현재 자바스크립트를 배우고 있는데 느끼는 점이 굉장히 많다. 당연하다고 생각하던 것이 당연한 것이 아니었던 것이다. 프로그래밍에 입문하면서 C, C++을 배웠었는데, 동작의 결과에 대해서는 당연하게 생각하고 왜 그런 동작을 하는지에 대한 고민을 해본 적이 별로 없었다. 또한 오류가 나도 해결하는 게 중요했지, 왜 오류가 나는지 고민을 해본 적이 별로 없었다. 이번에 자바스크립트를 배우면서 동작 원리의 정확한 이해라는 방향성을 가지고 공부를 하면서 기본이 정말 중요하다는 생각을 하게 됐다. 과연 내가 혼자 공부를 했다면, 이런 방향성을 생각하면서 공부할 수 있었을까? 여기에서 정확한 이해라는 방향성이란 기본에 충실하는 것을 의미.. 공감수 1 댓글수 0 2021. 11. 28.
  • 백준 2170번 - 선긋기 2170번: 선 긋기 첫째 줄에 선을 그은 횟수 N(1 ≤ N ≤ 1,000,000)이 주어진다. 다음 N개의 줄에는 선을 그을 때 선택한 두 점의 위치 x, y(-1,000,000,000 ≤ x < y ≤ 1,000,000,000)가 주어진다. www.acmicpc.net 선긋기 좌표가 겹치는 경우와 포함하는 경우들을 생각하면서 경우를 나눴다. 즉, 다음 선이 이전 선에 포함될 수도 있고, 겹치지 않을 수도 있다. 다음 선이 이전 선에 포함이 되는 경우는 생각하지 않아도 되는 경우이다.(생각해보면 당연 이전 선이 더 큰 범위이기 때문) 이렇게 경우를 나눠서 생각해보면 된다. 이렇게 선의 좌표를 구해주고 마지막엔 선의 길이를 구해준다. function solution(n, arr) { let answer.. 공감수 0 댓글수 0 2021. 11. 23.
  • Pollyfill이란? Babel이란? 21.11.22 내용 수정 && 프로젝트 내용 추가 Polyfill? 웹 접근성과 Web Vitals에 대한 공부를 하다가 이해가 안 가는 개념이 있었다. First Input Delay(FID)라는 최초 입력 지연의 최적화를 공부하면서 Total Blocking Time(TBT)의 시간을 줄여야 FID도 줄일 수 있는데, 그 최적화 방법 중에서 사용하지 않는 polyfills를 줄여야 한다는 말이 있었다. 전혀 감이 오지 않아서 pollyfill에 대한 검색을 해봤다. 아래는 pollyfill.io의 공식 레퍼런스이다. 해당 사이트에선 기능이나 사용자의 브라우저에 따라 폴리필 스크립트를 제공해주는 서비스 사이트이다. 아래 글은 해당 사이트에서 Pollyfill에 대해서 말해주고 있다. 세계적으로 다양한.. 공감수 0 댓글수 2 2021. 11. 7.
  • 백준 14503번 : 로봇 청소기 (JavaScript) 14503번: 로봇 청소기 로봇 청소기가 주어졌을 때, 청소하는 영역의 개수를 구하는 프로그램을 작성하시오. 로봇 청소기가 있는 장소는 N×M 크기의 직사각형으로 나타낼 수 있으며, 1×1크기의 정사각형 칸으로 나누어 www.acmicpc.net 접근 방법 문제에서 왼쪽 방향으로 회전하는 부분을 현재 청소기의 방향을 기준으로 좌표를 미리 구했다. 아래 코드처럼 0 : 북일 경우에는 왼쪽 방향인 서쪽 방향을 체크해야 한다. 따라서 현재 좌표에서 바라보고 있는 방향을 기준으로 왼쪽의 좌표를 구했다. 0,1,2,3 각각 방향의 왼쪽 좌표를 미리 선언해놨다. 뒤로 한칸을 가야되는 경우도 미리 0,1,2,3 방향에 따라 뒤로 한칸의 좌표를 미리 구해놨다. 만약 청소기가 0:북 방향을 바라볼 때, 왼쪽을 탐색 해야.. 공감수 0 댓글수 0 2021. 10. 31.
  • [프로그래머스] 타겟 넘버 (DFS)(Java, JS) 타겟 넘버 코딩테스트 연습 - 타겟 넘버 n개의 음이 아닌 정수가 있습니다. 이 수를 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 예를 들어 [1, 1, 1, 1, 1]로 숫자 3을 만들려면 다음 다섯 방법을 쓸 수 있습니다. -1+1+1+1+1 = 3 +1-1+1+1+ programmers.co.kr n개의 음이 아닌 정수가 있습니다. 이 수를 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 예를 들어 [1, 1, 1, 1, 1]로 숫자 3을 만들려면 다음 다섯 방법을 쓸 수 있습니다. -1+1+1+1+1 = 3 +1-1+1+1+1 = 3 +1+1-1+1+1 = 3 +1+1+1-1+1 = 3 +1+1+1+1-1 = 3 사용할 수 있는 숫자가 담긴 배열 numbers, 타겟 넘버 target이.. 공감수 0 댓글수 0 2021. 10. 15.
  • [JS - 알고리즘] 03. 투포인터 알고리즘(슬라이딩 윈도우) 투 포인터 알고리즘, 슬라이싱 윈도우 이전 문자열과 해싱이나 1차원 배열 같은 경우 구현 문제들이었다.(물론 효율적으로 풀어야 되는 문제들도 있었다.) 현재 투 포인터 알고리즘 카테고리를 학습하면서 수학적인 사고가 필요한 부분들이 많아졌다. 이전엔 문제에 주어진대로 풀다 보니 시간 복잡도를 생각하지 못했다. O(N3)까지 쓰면서 문제를 해결에만 집중했다. 하지만 알고리즘 스터디와 공부를 진행하다 보니 어려운 문제를 굉장히 수학적인 방법으로 간단하게 푸는 방식을 보면서, 알고리즘이 왜 중요한지 알 수 있었다. 이제는 O(N3)을 어떻게 O(N)으로 풀어낼 것인가를 조금이나마 고민하게 됐다. N의 조건이 100,000 정도가 넘어갈 때, 시간복잡도가 N2이 되면 문제가 생길 수도 있다. (참고) 따라서 더욱.. 공감수 0 댓글수 0 2021. 10. 11.
  • [JS - 알고리즘] 02. 1차원 배열 1차원 배열 01. 수열 축소 slice : slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다. begin음수 인덱스는 배열의 끝에서부터의 길이를 나타냅니다. slice(-2) 는 배열에서 마지막 두 개의 엘리먼트를 추출합니다.begin이 배열의 길이보다 큰 경우에는, 빈 배열을 반환합니다. begin이 undefined인 경우에는, 0번 인덱스부터 slice 합니다. 0을 시작으로 하는 추출 시작점에 대한 인덱스를 의미합니다. end예를 들어, slice(1,4)는 두번째 요소부터 네번째 요소까지 (1, 2 및 3을 인덱스로 하는 요소) 추출합니다.end가 생략되면 slice()는 배열의 끝까지.. 공감수 0 댓글수 0 2021. 10. 10.
  • [JS - 알고리즘] 01. 문자열 해싱 21.10.28 오타, 내용 수정 1. 문자열 해싱 01. 문자열 압축 처음 접근: 해당 idx와 그 다음 idx 값이 같을 때, cnt의 개수를 for문으로 구해주고 answer에 str[i]와 String(cnt)를 붙여주는 방식으로 하려 했다. 하지만 계속 원치 않는 문자열이 추가가 됐다. 풀이 : 어느 부분에서 오류가 발생하는지 생각하기 어려웠다. 그 이유는 입력받은 문자열에서 직접 몇 번째 idx에 접근하는지를 처리하려고 하니 어려웠던 것 같다. 대신 cnt만 세주고 문자가 달라질 때, 새로운 문자열에 넣는 방식으로 생각하니 for문에서 처리하는 로직이 간단해졌다. JS에서는 새로운 배열에 필요한 값만 넣는다고 생각하면 쉽다. 내 풀이 function solution(str) { let answ.. 공감수 0 댓글수 0 2021. 10. 8.
  • HTML, CSS 기본기 다지기(CSS)(6) 6. HTML 기본기 다지기 17. Grid flex 박스의 기본적인 컨셉은 1차원의 개념이다. 따라서 wrap으로 다음 줄로 넘어간 요소들에 대한 정렬을 주로 다뤘다. grid의 기본 개념은 2차원으로 시작한다. 하나의 그리드는 columns, rows로 구성된다. 각 행과 열 사이에 공백이 있는데, 이를 gutters, gap이라고 표현한다. Table을 레이아웃에 사용하면 안된다! 17.1. grid-template-rows, grid-template-columns (Container 속성) width를 설정해도 기본적으로 border 값이 알맞지 않게 나올 수 가 있는데, 이는 border 값을 가지고 있기 때문이다. grid-template-row , columns를 적용한 곳에서만 css 적용.. 공감수 0 댓글수 0 2021. 10. 5.
  • Git 기본기 다지기 Git git flow를 사용하기 위해, git을 다시 공부하고 있다. 멘토님의 교육을 받으면서 git을 편하게 사용하던 나의 습관들이 안 좋다는 것도 알게 됐다. 그중 하나인 git add . , 이나 git commit -m "" 같은 명령어들을 자주 썼는데, 이는 내가 Commit Convention 대해 생각하지 못하게 만들었다. 따라서 git bash를 사용하면서 올바른 습관을 만드는데 노력하고 있다. 웹 개발을 하면서 node_modules를 add 해버리는 경우도 경험을 해봐서 더욱더 안 좋은 습관이라는 말이 와닿았다. 나름 commit 메시지에 신경 쓰면서 개발하고 있다 생각했는데 나만 알아볼 수 있다는 것을 몰랐다. 다시 한번 다른 사람들도 알아볼 수 있게 만드는 것이 중요하다는 것을 깨.. 공감수 0 댓글수 0 2021. 10. 1.
  • HTML, CSS 기본기 다지기(CSS)(5) 21.10.26 오타, 코드 블록 수정 CSS 12. 레이아웃 12.1. display - inline, block, inline-block inline 영역의 크기가 내부 콘텐츠 크기로 정해진다. width, height로 크기를 변경할 수 없다. margin, padding의 top과 bottom을 지정할 수 없다. 여러 요소가 가로 배치가 된다. block 영역의 크기를 width, height로 지정할 수 있다. width를 지정하지 않으면 가로 전체를 차지한다. 여러 요소가 세로 배치가 된다. inline-block : ex) input inline과 block의 성질을 둘 다 가진다. 영역의 크기를 width, height로 지정할 수 있다. 여러 요소가 가로 배치가 된다. 즉, inline .. 공감수 0 댓글수 0 2021. 9. 29.
  • HTML, CSS 기본기 다지기(CSS)(4) CSS 9. 폰트 관련 속성 9.1. font-size, font-style, font-weight 단축 속성으로도 사용이 가능하다. p { /* font-style font-weight line-height font-family */ font: italic 200 20px "Times New Roman", Times, serif; } 9.2. letter-spacing, word-spacing 문자 간격을 조절하는 속성 9.3. text-align : 중앙 정렬 block이냐 inline이냐에 따라서 달라진다. block은 width를 차지할 수 있을만큼 전부 차지하기 때문에 text-align으로 중앙 정렬이 가능하지만 inline 같은 경우에는 content의 영역만큼만 차지하기 때문에 text-a.. 공감수 0 댓글수 0 2021. 9. 29.
  • HTML, CSS 기본기 다지기(CSS)(3) 21.10.26 용어 수정 HTML head 7. 메타데이터 요소 메타데이터란 데이터를 설명하는 데이터를 메타데이터라고 한다. 예를 들어 책 맨 앞쪽에 책에 대한 정보들이 나열돼 있다. 이런 데이터를 설명하는 데이터를 메타데이터라고 한다. HTML 요소는 기계가 식별할 수 있는 문서 정보(메타데이터)를 담습니다. 정보로는 문서가 사용할 제목, 스크립트, 스타일 시트 등이 있습니다. : 문서 제목 요소 페이지 제목은 SEO에 큰 영향을 준다. 보통, 짧고 일반적인 이름보다 길고 상세한 제목이 더 좋은 성과를 내곤 한다. 검색 엔진 (en-US)이 결과 페이지의 순서를 결정하는 구성 요소 중 하나가 페이지 제목의 내용이기 때문. meta 요소가 제공하는 메타데이터는 4가지 유형이 있다. 속성 뷰포트 뷰포트(.. 공감수 0 댓글수 0 2021. 9. 29.
  • HTML, CSS 기본기 다지기(2) 21.12.28 crossorigin 내용 수정 HTML Element 🤔비슷한 태그들을 구별해서 쓰는 게 왜 중요할까? 사실 사소해 보여 잘 와닿지 않았다. 시각적으로 태그들의 차이가 거의 없었기 때문이다. 그래서 별생각 없이 태그들을 썼을 때가 많았다. 하지만 개발자와 브라우저 관점에서 살펴보자. 개발자들이 필요한 정보를 찾을 때, 정확한 태그들을 사용해줘야 필요한 정보들을 빠르게 찾을 수 있을 것이다. 또한 스크린 리더 같은 프로그램을 사용할 때, 웹에서 와 달리 에 악센트를 준다고 한다. 이런 예시를 듣고 나니 가독성이나 웹 접근성 측면에서 정보들을 올바른 태그를 사용해 구분을 잘해주는 것이 중요하다고 생각이 들었다. 1. HTML 텍스트 요소 1.1. ~ : 제목 제목을 나타내는 태그로만 알고 .. 공감수 0 댓글수 0 2021. 9. 28.
  • HTML, CSS 기본기 다지기(1) 1. HTML, CSS에 대한 기본기 웹 개발을 처음 경험하면서 JS 공부도 없이 React부터 공부를 했다. 하지만 이후에 JS에 대한 이해도가 떨어져 React를 제대로 활용할 수가 없었다. 그래서 기본기가 중요하다고 생각을 했다. 배우는 것은 빠르지만 그만큼 잊어버리는 것도 빠르다. 잊지 않기 위해서 블로그에 기록을 하고 있다. 화면 구성은 CSS 프레임워크를 사용했었다. 템플릿을 가져와 만들다 보니 정작 내가 원하는 대로 UI를 만들 수 있는가?라는 질문에 'Yes'라고 답을 할 수 없었다. 만들긴 해도 엄청난 시간이 들어갔고, 기본적인 개념에서 흔들렸다. 결국 기본이 부족했다. 템플릿을 사용하지 않고 내가 원하는 대로 UI를 만드는 것이 생각보다 어려웠다. 그래서 결국은 React에서 HTML까.. 공감수 0 댓글수 0 2021. 9. 27.
  • 왜 CSR(Client Side Rendering)에서 SEO가 단점일까? 21.12.29 meta 태그 관련 내용 일부 수정 21.12.29 ~ 정확하지 않은 내용 업데이트중.... 만약 SPA, CSR, SSR에 대해서 모르신다면 아래 정리된 글을 읽어보시기 바랍니다! SPA 그리고 SSR과 CSR 렌더링에 관해선 이전 글에서 작성했지만 다시 한번 간단하게 말하고 가자면, 렌더링이란 사용자가 웹 페이지에 접속했을 때 서버로부터 HTML 파일을 받아 화면에 그려주는 것이다. SSR(Server Side R velog.io 간략 정리 React나 Vue는 SPA(Single Page Application)로 웹 앱으로 만들기 위한 라이브러리, 프레임워크다. SPA의 주요 장점은 다음과 같다. 웹 앱처럼 사용자의 경험을 좋게 만들기 위해서다. 최초 한번 페이지를 로딩한 이후 JS.. 공감수 10 댓글수 0 2021. 9. 8.
  • [React] Astronaut-shop 삽질 개발일지2 21.09.03 오탈자 수정 1. 더보기 버튼 클릭 시, 버튼의 상태 공유 문제 남자 상품에서 더보기 버튼 클릭하고 나열할 항목이 없으면, 위의 사진과 같이 더보기 버튼이 비활성화가 된다. 비활성화가 된 후 여자 상품 카테고리로 갔을 때, 나열할 여자 상품들이 있지만 위와 같이 비활성화가 되는 문제가 있었다. 해당 코드는 아래와 같다. (ShoesLIst.js 변경전 코드) (...) return( {props.num === 1 ? : } { fetchData(props.num); }}> 더보기 ); }; 이를 해결하기 위해서 버튼에 대한 상태를 남자, 여자 따로 가지게 했다. props.num===1에 따라 상품을 보여주는 것처럼 버튼도 아래와 같이 UI 컴포넌트로 따로 만들어서 보여줬다. 그리고 남자.. 공감수 0 댓글수 0 2021. 8. 19.
  • [React] Astronaut-shop 삽질 개발일지1 21.09.03 오탈자 수정 & flowchart 재첨부 🤔 React에 대하여 시작 전에 React에 대한 이야기. 사실 React를 배웠었던 가장 주된 이유는 인턴을 했던 회사에서 React를 사용했다. 그게 가장 컸다... 이제 와서 React에 대해서 다시 공부하게 된 이유도 익숙해서가 제일 컸다. 현재까지도 가장 큰 커뮤니티를 가지고 있고, 사용되는 곳이 많다. Vue.js나 Angular.js는 사용을 안 해봤기에 정확한 체감 비교까지 할 수 없지만, 모두 SPA(Single Page Application)인 웹 앱을 만드는데 큰 도움이 되는 도구들이다. 최근에 와서는 "Vue.js가 뜨고 있다. React는 지는해다." 말이 많다. 그럼 나 같은 신입 개발자를 준비하는 사람들은 '어? 그럼 .. 공감수 1 댓글수 0 2021. 8. 8.
  • [JS] 자바스크립트 filter(), find(), map() 함수 사용법 반복해야 한다면 map() , 한 가지 요소를 찾아야 한다면 find() 조건을 만족하는 모든 요소를 찾는다면 filter()를 사용하면 된다. 🤔 map이란? map 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 프로토타입 arr.map(callback(currentValue[ ,index [, array]]) [,thisArg]) callback : 새로운 배열 요소를 생성하는 함수 안에 세 가지 인수를 가진다. - currentValue : 처리할 현재 요소 - index : 처리할 현재 요소의 인덱스 - array : map()을 호출한 배열 thisArg : callback을 실행할 때 this로 사용되는 값 굉장히 어렵게 설명되어있다.... 공감수 0 댓글수 0 2021. 8. 5.
  • [JS] 자바스크립트 '==' 와 '==='의 차이 자바스크립트를 시작한 지 얼마 안돼서 일반 프로그래밍 언어에서처럼 '=='를 '==='로 쓰는 줄 알았다. 하지만 이 둘의 차이가 명확히 존재했다. 이를 알게 된 계기는 최근 React 관련 프로젝트를 진행하면서 알게 됐다. 자바스크립트 기본기가 많이 부족하다는 것을 깨달았고, 조만간 React 프로젝트 개발일지를 올리면서 내가 오류를 겪은 코드들을 설명하면서 이 포스트가 링크되지 않을까 싶다. 🚀 차이점 '=='와 '===' 연산자의 주된 차이점은, value와 value를 비교할 때, '=='는 그것을 허용한다. 하지만 '==='는 value뿐만 아니라 두 변수의 data type도 비교한다. 여기서 data type이란 Number(숫자), String(문자열), Boolean(논리형) 등등을 의미.. 공감수 0 댓글수 0 2021. 8. 5.
  • [Toy프로젝트 ] Astronaut 개발일지 Astronaut 🚀계기 엄청 대단한 프로젝트도 아니고... 공개하기도 부끄럽지만 주기적으로 프로젝트에서 배우거나 느낀 것들을 정리해서 올릴 계획. 개인적으로 JS를 빠르게 습득하기 위해 만든 웹앱 Toy프로젝트 이전에 React를 활용한 프로젝트들은 인턴 때 처음 경험했다. 하지만 JS에 대한 학습도 없이 React를 먼저 학습했다. 무작정 부딪히면서 배우다 보니 기본적인 UI는 ant-design, bootstrap에서 가져와 짜깁기할 수 있었다. 하지만 JS를 제대로 공부하지 않은 상태에서 웹 페이지를 UI만 구성한다는 것은 큰 의미가 없었다. 그래서 다시 JS를 공부했다. React는 자바스크립트 라이브러리이기 때문에 기본적으로 JS에 대해 많은 이해가 필요했다. 그래서 나의 Astronaut 프.. 공감수 0 댓글수 0 2021. 8. 4.
  • [Java] 코딩테스트용 정리 숫자 자리수 구하기 -> (int)Math.log10( n + 1); 제곱근 -> (int)Math.sqrt(n) valueof parseInt의 차이[hong] valueOf의 return 값은 객체, parseInt는 비교값 기본자료형이다. //s는 숫자를 가진 문자열 parseInt (s, 10); // 10진수 형태로 변환 배열 - 선언 : int[] a = new int[8]; int[] a = {1,2,3,4,5}; - 배열 -> 문자열 : Arrays.toString(); - char 배열 -> 문자열 : String.valueOf();- , String str = new String(charArray); - 문자열 -> char : .toCharArray; - 문자를 문자열 -> Strin.. 공감수 0 댓글수 0 2021. 7. 14.
  • [프로그래머스]크레인 인형 뽑기(Java) - 2019 카카오개발자 겨울인턴십 2019 카카오 개발자 겨울 인턴십 크레인 인형뽑기 게임 https://programmers.co.kr/learn/courses/30/lessons/64061 문제 설명 게임개발자인 "죠르디"는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. "죠르디"는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 "1 x 1" 크기의 칸들로 이루어진 "N x N" 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 "5 x 5" 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 "1 x 1" 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓.. 공감수 0 댓글수 0 2021. 7. 13.
  • [프로그래머스] 모의고사(C++) - 완전탐색 완전탐색 모의고사 https://programmers.co.kr/learn/courses/30/lessons/42840?language=cpp 문제 설명 수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다. 1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ... 2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, ... 3번 수포자가 찍는 방식: 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, ... 1번 문제부터 마지막 문제까지의 정답이 순서.. 공감수 0 댓글수 0 2021. 7. 13.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.