톺아보기

nvm이 뭔가요? nvm 공식 깃허브를 보면 다음과 같이 소개하고 있습니다. nvm은 빠르게 설치하고 다른 버전의 노드를 cli를 통해 사용할 수 있게 해줍니다. 그럼 어떻게 쓸 수 있을까요? 아주 간단합니다! 어떻게 설치하나요? 다 설치가 되었다면 sour

오늘 프론트 개발자들끼리 이야기를 나누다 "StoryBook이 필요할까?"라는 주제가 나왔다.나는 그동안 사이드프로젝트에서는 StoryBook을 꽤나 많이 사용했기 때문에 이런 주제에 대해 별 고민을 해본 적이 없었다.그래서 이번 기회에 스토리북에 대해 톺아보려고 한다

JSX는 다음과 같이 쓰면 에러가 난다그렇지만 이렇게 쓰면 에러가 나지 않는다.왜 그럴까? 🤔그건 바로 JSX 문법으로 작성한 요소가 결과적으로 자바스크립트 객체가 되기 때문이다. 예를 들어서 아래의 코드는 다음과 같이 해석된다.이런 객체를 리액트 엘리먼트라고 하고,

null과 undefined는 과연 무엇이 다를까?null 은 값이 없다는 것을 의도적으로 표현하는 것이고, undefined는 값이 없다는 것을 확인하는 값이다.변수를 선언하고 아무런 값을 할당하지 않았다면 -> undefined,값이 의도적으로 없다는 것을 표현하려

Fiber란? React 16 버전부터는 stack이 아니라 fiber를 갖고 있고, 제대로 사용된 건 18버전부터이다. 그래서 Fiber가 뭔데? 🤔 React 컴포넌트에 특화된 stack 의 재구현이다. 왜 Fiber를 쓰는건데? 1. Stack 과의 비교 S

객체지향이란? 객체지향프로그래밍이란 객체간의 상호작용을 중심으로 하는 프로그래밍을 의미한다. 객체는 객체의 상태를 나타내는 변수와 객체의 행동을 나타내는 함수로 이루어진다. 즉, 객체지향프로그래밍이란 프로퍼티와 메소드로 이루어진 각 객체들의 상호작용을 중심으로 코드를

if문과 switch문은 대표적인 조건식인데 무슨 차이점이 있을까?if문은 넓은 범위를 만족하는 조건식에 적합하고, switch 문은 특정한 값에 일치하는 조건을 만들 때 효과적이다.위의 결과는 2로 동일합니다.단, switch 문은 암시적 형 변환을 허용하지 않는다.

리액트를 공부하다보면 누구나 들어봤을 Hook나도 수도 없이 썼지만 정작 Hook이 뭐냐고 물어본다면 깔끔하게 대답하지 못 했다🙁그래서 오늘은 공식문서를 읽으며 톺아본 Hook에 대해 포스팅해보고자 한다.공식문서에는 Hook을 다음과 같이 설명하고 있습니다. 즉, 리

개발을 할 때 자주 발생하는 CORS, 오늘은 이 친구를 톺아보려고 한다.CORS란 Cross-Origin Resource Sharing의 약자로 교차 출처 리소스 공유라는 뜻입니다. 의미 그대로 서로 다른 출처에서 리소스를 공유하는 것입니다. 여기서 말하는 Orig

Next.js에서 redirect를 설정하려면 다음과 같이 하면 된다.next.config.jsoption들을 하나씩 살펴보자source는 유저가 입력하게 되는 경로이고,destination은 유저가 입력한 경로를 검색했을 때 보내주고 싶은 경로를 입력하면 된다.위의

Next로 개발하다보면 <Link /> 를 자주 사용하게 되는데, <a /> 와의 차이점은 무엇일까?즉, Next.js로 개발할 때는 를 사용하는게 좋습니다.들어갈 가능성이 있는 페이지를 미리 가져오고, 이 경우 바로 랜더링해서 보여줄 수 있기 때문에 빠른

TCP와 UDP,, 자주 나오는 개념이라 오늘 제대로 정리해보고자 한다😤TCP와 UDP는 전송 계층의 프로토콜이다.전송 계층이란?OSI 7계층(국제 표준화 기구 ISO에서 개발한 컴퓨터 네트워크 프로토콜 디자인과 통신을 계층으로 나누어 설명한 개방형 시스템 상호 연결

Person이라는 객체를 두고 바깥에서 Person의 프로퍼티를 변경해보겠습니다.현재는 public이기때문에 아주 잘 변경되는 것을 볼 수 있습니다.그렇지만 멤버변수를 바깥에서 수정하는 건 좋지 않기 때문에 private으로 바꾸겠습니다.그래도 같은 클래스에서는 충분히

자바는 위에서부터 아래 순서대로 코드를 실행한다.그러므로 다음 코드의 결과는 순차적으로 숫자가 찍힐 것이다.좀 더 효율적으로 프로그래밍을 하고 싶다면 Thread를 이용하면 된다.Task1 을 Thread를 통해 실행하고 싶다면 위처럼 작성하면 된다. 이 때, run을

Thread에 우선 순위를 부여할 수 있습니다.이 때는 setPriority 라는 메소드를 사용하고 뒤에는 원하는 우선순위의 정도를 적어줍니다.여기서 말하는 MAX_PRIORITY와 MIN_PRIORITY, NORM_PRIORIY가 무엇일까요?1 부터 10까지이며 높을

Thread를 실행할 때 한 Thread가 끝나고 다음 작업을 하고 싶다면 어떻게 할 수 있을까요?Thread.join(); 을 사용하면 됩니다.그렇게 되면 해당 Thread가 완료된 후에 다음 코드가 실행됩니다.이 경우 task1Thread가 끝난 후 Task3가 시

javaScript를 공부하다보면 람다 표현식이라는 것을 배우게 된다. javaScript에서는 람다 함수를 화살표 함수라고 부른다.그런데 Java에도 람다가 있다는 것을 알게 되었다.형태는 JS와 매우 비슷하다.똑같이 화살표를 쓴다.바디는 화살표의 오른똑에 함수 본문

기존 컬럼에 속성 추가하기 기존 컬럼에 Constraint 추가 기존의 컬럼 이름 바꾸기 Default 값 설정하기

SPA라고 한다면 라우팅이라는게 매우 중요합니다. 그래서 오늘은 라우팅이란 무엇이고, Vue router는 무엇이고 어떤 기능이 있는지 알아보겠습니당업로드중..라우터라고 하면 일반적으로 네트워크간에 데이터를 전송하는 장치에요. 오늘 정리할 뷰에서의 라우터는 URL에 따

만약 데이터베이스에 어떠한 쿼리문을 날렸다고 가정해봅시다. 이 때 이 결과를 신뢰할 수 있을까요? 아마 이 질문에 대해 당연히 신뢰할 수 있는데 왜 그런 질문을 하는지 생각할 수도 있을 것 같습니다. 저 역시 그랬습니다. 그렇다면 어떻게 우리는 쿼리문의 결과를 신뢰하고

오늘은 vue의 생명주기에 대해 알아보겠읍니다.Vue의 생명주기는 크게 4단계입니다.인스턴스 생성 > 템플릭과 가상 DOM 생성 > 이벤트 루프 > 인스턴스 소멸인스턴스를 생성할 때 vue는 뷰 - 모델에서 데이터 관찰자를 생성하고 내부 이벤트 시스템에서 사용될 이벤트

개발을 하다보면 한 번쯤은 사용해봤을 a태그를 톺아보겠습니다!태그는 하이퍼링크를 걸어주는 태그입니다.하이퍼링크:하이퍼텍스트문서안에 모든 형식의 자료(동영상, 음악, 사진, 프로그램, 파일, 글..) 를 연결하고 가리킬 수 있는 참조 고리href: 클릭시 이동할 링크ta

오늘은 문득 css 파일을 정리하다가 왜 !important를 쓰면 안 되는지에 대해 깊게 알아보고 싶었다도대체 왜 !important를 쓰면 안 될까? 😮출처 카카오 무지css는 우선순위를 갖게 되는데 다음과 같다.뒤에 나올 수록 우선순위가 높다.!important