728x90

Dev 75

[JavaScript] this

이어서 바로 this 얘기를 할건데 왜 이렇게 급하게 쓰냐면 앞에 글에서는 객체지향 어쩌고 얘길 했지만, 그 객체지향 프로그래밍할 때의 this랑 이 자바스크립트에서 얘기하는 this랑 진짜 지랄맞게 다르다. 자바같은 언어에서 this를 사용하는걸 보면 진짜 명확하게 언제나 객체 자기 자신을 지칭하는 의미로만 사용하고 있는데 자바스크립트는 얘가 어떤 함수 내에 들어있다가 호출 되는지 그 방법에 따라 다르다.. 어이가 없다.. 그래서 이제 나 같은 애들이 this 좀 쓸 줄 안다고 깔짝 대다가 삽질 엄청나게 하는걸 볼 수 있는데, 이거 제대로 생각하면서 쓰면 괜찮으니까 일단 한번 알아보자. 자바스크립트 함수를 호출하는 방법에 따라 달라지는 this 자바스크립트 함수는 호출하는 방법이 네가지가 있다. 1. ..

Dev/JavaScript 2023.06.29

[JavaScript] 생성자 함수

요 근래 자바스크립트 함수에 대해서 상당히 아주 많은 신경을 쓰고 있는데, 왜냐면 이 놈의 자바스크립트 함수라는게 다른 언어의 함수들과 비교하면 상당히 독특하다보니 별 희한한 케이스가 많다. 그래서 오늘은 생성자 함수 얘기를 한번 꺼내볼까 하는데, 한번 시작해보자. 이 얘기를 하기 전에 this 에 대한 이야기도 필요할듯하니 그것도 설명하겠다. 1. this 원래 뇌구조 상 프로그래밍이란걸 할 수 없는 대부분의 사람들이 프로그래밍을 할 수 있게 만들어준 개념이 객체지향 프로그래밍이라고 생각하는데, 일단 오늘 이 객체지향 얘기하면 개판나니까 나중에 얘기하고 객체지향 프로그래밍을 배우면 아주 자연스럽게 this라는 개념을 학습한다. this는 본래 object(객체) 내부에서 객체 본인을 지칭하는 자기 참조..

Dev/JavaScript 2023.06.29

[React] Custom Hooks

오랜만에 React 게시물을 가져왔다. 요 근래 이직 준비랍시고 JS 자체에만 너무 많은 관심을 가졌는데, 그래도 React 하면서 알게 된 것들도 정리를 게을리 하면 안되기 때문에 가져왔음.. 오늘 해볼 얘기는 Custom Hook에 대한 이야기인데 이 Hook 에 대한 개념자체가 조금 까다롭다보니, 한번 복습 때리고 커스텀 훅으로 넘어가볼 거다. 1) Hook 난 Hook이라고 하면 "히히 못가" 가 제일 먼저 떠오르는데 그 이유가 뭐냐하면 리액트 컴포넌트를 마운트 시킨다고하면 Hook 이 딸려오는거라고 이미징 했기 때문이다. 당연히 스코프 같은 개념들이 적용되서 만들어지는 효과지만, 컴포넌트 하나를 그리려고 하면 리액트 컴포넌트 내에서 사용한 Hook이 덤으로 딸려오기 때문에 이렇게 이미징을 했다...

Dev/React.js 2023.06.28

[JavaScript] 정규표현식

학원에서 가르치는 내용 중에 정규표현식이라는게 있다. 특정 타입의 데이터가 들어갈 수 있음을 의미하는 식을 통해서 해당하는 값을 찾는다던가, 제한하거나 이런 행위를 하기 위해 주로 사용하는데 아무래도 생겨먹은게 귀찮게 생겼다보니 이걸 통해 해결하기보단 다른 방법을 자꾸 모색하게 된다. 근데 요즘 Vanilla JS 개발 연습하면서 도저히 안쓰고는 못배기겠다 싶은 순간이 찾아와 정리할 때가 온 것 같아 일단 정리한번 해두고 넘어가려고 한다. 1. 정규표현식이란? 프로그래밍에서 문자열을 다룰 때, 문자열의 일정한 패턴을 표현하는 일종의 형식 언어를 말한다. 정규식이라고도 부르며, 보통 RegEx 혹은 RegExp라 많이 쓴다. - 출처 : 나무위키 - 일단 모든 언어들이 정규표현식을 사용할 수 있도록 환경이..

Dev/JavaScript 2023.06.28

[JavaScript] JavaScript RunTime

오늘은 자바스크립트 런타임에 대한 이야기다. 원래 생각도 안하고 있었는데, 런타임에 이런이런 에러가 생길 수도 있다. 같은 얘기는 많이 했지만 그래서 런타임이 뭔지는 얘기를 안했어서 한번 이야기 해볼까 한다. 조금 어렵게 들릴 수도 있지만 일단 한번 시작해보자. 1. 스레드 (Thread) 오늘 얘기할 JavaScript의 런타임을 얘기하려고 하면, 이 스레드라는 개념에 대해서 확실히 정리가 되어있어야한다. 그리고 이걸 이해하기 위해선 큐, 스택, 힙이 뭔지에 대해서도 알고 있어야하는데 일단 큐, 스택은 설명을 해둔게 있으니 그걸 보면 될 것 같고, heap은 조만간 정리해서 올려두도록 하겠다. 2023.04.17 - [Dev/Algorithm] - [Algorithm] 큐와 스택(Queue, Stack..

Dev/JavaScript 2023.06.27

[JavaScript] ASCII Code

오늘은 코테 풀다가 생각나서 쓴다. ASCII 코드 쓰면 상당히 단순하게 풀릴 수 있는 문제들이 있는데, 일단 적어도 내주변에선 잘 떠올리지 않는 케이스가 많다보니 한번 남겨두면 도움이 되지 않을까 함. 일단 ASCII 코드가 뭔지부터 한 번 알아보자. 1. ASCII Code 일단 백날 설명하는거보다 한번 보는게 낫다고 생각해서 띄워봤는데, 이게 아스키코드표다. 저 10진수, 16진수, 문자들이 컴퓨터에게는 동일한거로 받아들여지는건데, 자세히 설명하면 8비트의 공간 안에서 많이 사용하게 되는 내용들을 미리 할당해놓은 거라고 생각하면 되겠다. (엄밀히 따지면 7비트긴함.) 물론 JavaScript에서만 쓰는거도 아니고 그냥 컴퓨터와 인간의 소통을 위한거라 어떤 언어든 동일한게 있다. 다 외워서 사용할 필..

Dev/JavaScript 2023.06.26

[JavaScript] Arrow Function

요즘 나는 내가 공부한게 명확히 잘 되어있는지 확인하기 위해 다른 누군가에게 코딩을 가르쳐주러 다니고 있다. 물론 당연히 나도 공부를 하기 위한 목적이기 때문에, 보수는 받지 않는다. 근데 오늘 수업 중에 우리가 흔히 처음에 개발을 할 때 배우는 함수와 일반적으로 ES6문법을 사용하는 많은 개발자들이 사용하는 Arrow Function이 뭐가 다른거냐는 질문을 받았다. 함수 문법을 간결하게 축약할 수 있다. 괄호나 중괄호를 사용하지 않아도 함수의 역할을 할 수 있다. 함수라는것을 직관적으로 느끼게 할 수 있다. 이런 장점 정도는 생각했는데 특별히 다른게 없는데 왜 Arrow Function을 많이 사용하는지 설명할 수가 없어서, 상당히 난감했었다. 그래서 집에 오자마자 급하게 모던 자바스크립트 열고 Ar..

Dev/JavaScript 2023.06.24

[Algorithm] DFS (프로그래머스 타겟넘버 문제를 통한 이해)

오늘은 진짜 지금껏 나를 괴롭혀온 DFS / BFS 이해가 조금이나마 된 것 같아서 다른 사람은 나같은 개삽질하지말라고 한번 써본다. (요근래 개발관련 업로드가 별로 없었던게, 코테 준비때문에 안그래도 나쁜 머리 싸매고 살아서 기술 공부할 시간이 없었다..) 내가 구글링을 못하는건지 대부분의 구글링 결과가 Graph를 통한 구현 사례만 계속 보여줘서 전혀 이해를 못했고, 코테 예제를 본다고 해도 생각보다 많은 사람들이 제대로 설명해주는 글이 없고 풀이한 답안만 보여주는게 많았기 때문에 상당히 힘들었는데, 오늘에서야 진짜 어느정도 이해가 된다. 시점까지 와서 글을 작성할 수 있게 되었다. 솔직히 말해서 이정도 알기 시작하면 궤도에 올랐다. 코딩테스트에 응시해도 제대로 코딩테스트가 진행이 된다고 할 수 있을..

Dev/Algorithm 2023.06.23

[PROJECT] 두번째 프로젝트 리뷰

이번엔 두번째 프로젝트에 대한 이야기를 써볼까 한다. 내가 경력이 이제서야 1년이다보니 사실 상 이게 가장 최근 프로젝트고 끝난지도 얼마 안됐는데, 지금 써놓는게 담 플젝 하고 나서 다 까먹은 뒤에 엉엉 울며 쓰는거보단 낫다는 생각이 들어 일단 회고를 한번 해보려는거다. 2023.06.15 - [Dev/Project 수행기] - [PROJECT] 내 인생 첫 프로젝트 리뷰 [PROJECT] 내 인생 첫 프로젝트 리뷰 누구든 내 블로그를 보면 포트폴리오로 쓰일 수가 없는 블로그라고 생각하겠지만, 나는 이거 포폴로 쓸 예정이다. 왜냐 내가 일하면서 느낀 희로애락이 다 들었기 때문에 이만큼 솔직하게 날 전 openotadev.tistory.com 위의 링크를 보면 알겠지만 이 프로젝트는 내 첫프로젝트에 비해 ..

[JS] slice()

계속 코테 준비를 깔짝깔짝하다가 오늘 오랜만에 문제 풀려고 해커랭크 들어갔는데, 자바스크립트 문법을 좀 까먹은 것 같다. slice()를 생각을 못해서 한줄이면 끝날거 한참 돌아갔음. 그런 김에 slice 정리 한번하고 넘어가겠다. slice()는 어떤 iterable한 객체의 특정 지점부터 또 다른 특정지점까지의 요소들을 반환한다. 난 별 생각도 안하고 배열에서만 써왔었는데, 오늘 보니까 iterable한 객체면 되는 것 같다. 사용 예제를 보는게 훨씬 간편할텐데, 코드로 한번 작성해보자. const arr = [1,2,3,4,5,6]; arr.slice(1,3); /* * 다른건 모르겠고 이게 제일 헷갈릴텐데, 이러면 인덱스 1번부터 3번까지가 아니고, * 1번부터 2번까지 애들만 가져온다고 보면 된..

Dev/JavaScript 2023.06.16
728x90