Graphite

99%에서 멈추는 진행률 표시줄

Thu, 22 Oct 2026 15:00:00 GMT

진행률 표시줄의 숫자는 남은 작업의 예측값이고, 예측이 가장 크게 틀리는 구간은 마지막 1%입니다.

[Vue] watch

Sun, 21 Jan 2024 15:00:00 GMT

Vue.js에서 watch는 반응형 시스템의 핵심 기능 중 하나이다. 이는 데이터의 변경을 감지하고 그에 대한 콜백 함수를 실행하는 데 사용된다. Vue 3에서 watch 기능은 Compositi…

[Vue] shallowRef

Sun, 21 Jan 2024 15:00:00 GMT

Vue 3의 Composition API에 있는 shallowRef는 ref와 유사하지만, 주된 차이점은 shallowRef가 제공하는 반응성이 훨씬 얕다는 점이다. shallowRef는 주어진…

[Vue] ref

Sun, 21 Jan 2024 15:00:00 GMT

Vue 3에서 ref는 Composition API의 핵심 기능 중 하나다. 이 기능은 데이터를 반응형으로 만들어, 해당 데이터의 변화가 Vue의 렌더링 시스템에 자동으로 반영되게 한다. ref를…

[Vue] reactive

Sun, 21 Jan 2024 15:00:00 GMT

Vue 3의 reactive 기능은 Composition API의 중요한 부분이며, 복잡한 객체를 반응형 데이터로 만드는 데 사용된다. reactive를 사용하면 객체의 모든 속성이 Vue의 반응…

[Vue] nextTick

Sun, 21 Jan 2024 15:00:00 GMT

Vue 3에서 nextTick은 Vue의 반응형 시스템과 DOM 업데이트 사이클과 관련된 중요한 함수다. 이 함수는 Vue가 데이터 변경을 감지하고 해당 변경사항을 DOM에 반영한 직후에 실행되는…

[Vue] markRaw

Sun, 21 Jan 2024 15:00:00 GMT

Vue 3의 Composition API에 포함된 markRaw 기능은 특정 객체를 반응형 시스템에서 제외하는 데 사용된다. 이 기능은 Vue의 반응형 시스템이 특정 객체를 추적하는 것을 방지하며…

[Git] 이미 업로드 된 파일 및 폴더 gitignore에 추가하기

Sat, 06 Jan 2024 15:00:00 GMT

프로젝트에서 특정 파일이나 폴더를 Git 추적에서 제외하고자 할 때 .gitignore 파일을 사용한다. 이미 커밋된 폴더를 .gitignore에 추가한다고 해서 이미 푸시되어있는 파일/폴더가 삭…

[Vue] keep-alive의 속성

Sat, 06 Jan 2024 15:00:00 GMT

Vue3의 keep-alive 컴포넌트는 include와 exclude 속성을 사용하여 특정 컴포넌트만 캐싱하거나 캐싱에서 제외할 수 있게 해준다. 이러한 속성들은 keep-alive의 유연성을…

[Vue] keep-alive

Sat, 06 Jan 2024 15:00:00 GMT

Vue3에서 keep-alive는 컴포넌트의 상태를 보존하고 재사용할 수 있게 해주는 내장 컴포넌트다. 이 기능을 사용하면 Vue 인스턴스의 상태를 유지하면서 컴포넌트를 비활성화하고, 나중에 다시…

[Vue] computed

Sat, 06 Jan 2024 15:00:00 GMT

Vue 3의 computed는 반응형 시스템의 핵심 기능 중 하나로, 계산된 속성을 정의하는 데 사용된다. computed는 종속된 반응형 데이터에 기반하여 값을 계산하고, 이 값은 종속된 데이터…

[Vue] 이벤트 핸들러 조건처리

Sat, 06 Jan 2024 15:00:00 GMT

Vue.js를 사용할 때, 종종 이벤트 핸들링을 위해 @click 같은 디렉티브를 사용한다. 조건에 따라 이벤트를 처리하는 방법을 살펴보자. 기존에는 아래와 같이 작성했다. 이 코드는 isChec…

[Vue] 속성 상속(v-bind)과 커스터마이징

Fri, 05 Jan 2024 15:00:00 GMT

Vue에서는 컴포넌트 간 속성 상속을 통해 부모 컴포넌트에서 정의한 속성을 자식 컴포넌트에게 전달할 수 있다. 이 과정에서 몇 가지 기본 규칙과 커스터마이징 방법을 알아볼 것이다. 속성 상속은 부…

[Mac] zsh 환경 설정

Fri, 05 Jan 2024 15:00:00 GMT

MacOS Catalina부터 기본 쉘로 Zsh가 도입되었다. 많은 사용자가 Oh My Zsh를 사용해 환경을 구성하지만, 느린 터미널 속도와 불필요한 플러그인으로 인해 필요한 기능만 설정하여 사…

[CSS] Edge와 IE의 input 아이콘 삭제

Fri, 05 Jan 2024 15:00:00 GMT

Microsoft Edge 및 이전 버전의 Internet Explorer 브라우저는 사용자 편의성을 위해 텍스트 및 비밀번호 입력 필드에 특별한 아이콘을 기본적으로 제공한다. 하지만 때로는 이러…

[Mac] 개발환경 설정

Fri, 05 Jan 2024 15:00:00 GMT

개발 작업을 하면서 다양한 라이브러리, SDK, 설정 파일들을 관리하는 것은 때때로 복잡해질 수 있다. 모든 개발 관련 파일을 한 곳에 모아 문제 발생 시 전체 시스템을 초기화하지 않고도 해당 폴…

[SQL] SQL과 NoSQL의 차이

Fri, 05 Jan 2024 15:00:00 GMT

데이터베이스 기술은 다양한 데이터 저장, 검색 및 관리 방법을 제공한다. SQL(Structured Query Language)과 NoSQL(Not only SQL)은 이러한 방법 중 가장 널리…

[NPM] npm global 설치 에러

Fri, 05 Jan 2024 15:00:00 GMT

노드 패키지를 글로벌로 설치 할 때 권한 문제 발생 \-g 옵션으로 global 설치할 때에만 발생하는 권한 문제인 것 같다. 루트 경로에 npm global 패키지용 디렉토리를 생성한다. she…

[Git] SSH Key 생성 및 추가

Fri, 05 Jan 2024 15:00:00 GMT

새로운 맥을 구입 한 후 깃에서 클론 하려는데 권한 에러가 발생했다. PC를 변경할 때마다 등록되지 않은 새로운 기기이므로 SSH키를 발급받아서 설정해야하는 당연한 상황이다. 아래 명령어를 입력하…

프로그래머스 | #Lv1 "가장 가까운 글자"

Mon, 17 Apr 2023 15:00:00 GMT

문자열 s가 주어졌을 때, s의 각 위치마다 자신보다 앞에 나왔으면서, 자신과 가장 가까운 곳에 있는 같은 글자가 어디 있는지 알고 싶습니다.예를 들어, s="banana"라고 할 때, 각 글자들…

프로그래머스 | #Lv1 "문자열 나누기"

Mon, 17 Apr 2023 15:00:00 GMT

문자열 s가 입력되었을 때 다음 규칙을 따라서 이 문자열을 여러 문자열로 분해하려고 합니다. - 먼저 첫 글자를 읽습니다. 이 글자를 x라고 합시다. - 이제 이 문자열을 왼쪽에서 오른쪽으로 읽어…

프로그래머스 | #Lv1 "K번째 수"

Mon, 17 Apr 2023 15:00:00 GMT

배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 \[1, 5, 2, 6, 3, 7, 4\], i = 2, j =…

프로그래머스 | #Lv1 "신규 아이디 추천"

Mon, 17 Apr 2023 15:00:00 GMT

카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 가입하는 유…

프로그래머스 | #Lv1 "개인정보 수집 유효기간"

Mon, 17 Apr 2023 15:00:00 GMT

고객의 약관 동의를 얻어서 수집된 1~n번으로 분류되는 개인정보 n개가 있습니다. 약관 종류는 여러 가지 있으며 각 약관마다 개인정보 보관 유효기간이 정해져 있습니다. 당신은 각 개인정보가 어떤…

[jQuery] Traversing

Wed, 12 Apr 2023 15:00:00 GMT

"순회"를 의미하는 traversing은 다른 요소와의 관계를 기반으로 HTML 요소를 찾거나 선택하는데에 사용된다. 하나의 선택으로 시작하여 원하는 요소에 도달할 때까지 해당 선택을 통해 이동한…

[jQuery] 레이아웃

Wed, 12 Apr 2023 15:00:00 GMT

Layout 작업을 위한 몇 가지 중요한 메소드가 있다. - width() - height() - innerWidth() - innerHeight() - outerWidth() - outerHei…

[jQuery] CSS 조작

Wed, 12 Apr 2023 15:00:00 GMT

jQuery에는 CSS 조작을 위한 몇 가지 방법이 있다. - addClass() : 선택한 요소에 하나 이상의 클래스를 추가. - removeClass() : 선택한 요소에서 하나 이상의 클래스…

[jQuery] DOM 추가와 삭제

Wed, 12 Apr 2023 15:00:00 GMT

새 콘텐츠를 추가하는 데 사용되는 네 가지 jQuery 메소드는 아래와 같다. - append() : 선택한 요소의 끝에 내용 삽입 - prepend() : 선택한 요소의 시작 부분에 콘텐츠 삽입…

[jQuery] DOM 가져오기와 설정하기

Wed, 12 Apr 2023 15:00:00 GMT

jQuery의 매우 중요한 부분 중 하나는 DOM을 조작할 수 있는 가능성이다. jQuery에는 요소와 속성에 쉽게 액세스하고 조작할 수 있는 DOM 관련 메서드가 함께 제공된다. DOM 조작을…

[jQuery] 효과와 애니메이션

Wed, 12 Apr 2023 15:00:00 GMT

hide() 와 show() 메소드를 사용하면 HTML 요소를 숨기거나 표시할 수 있다. - speed 매개변수는 hide/show 속도를 지정하며 “slow”, "fast" 또는 밀리초 값을 사…

[jQuery] 이벤트

Wed, 12 Apr 2023 15:00:00 GMT

웹 페이지가 응답할 수 있는 모든 방문자의 행동을 이벤트라고 한다. 이벤트는 어떤 일이 발생하는 정확한 순간을 나타낸다. 예: - 요소 위로 마우스 이동 - 라디오 버튼 선택 - 요소 클릭 "fi…

[jQuery] 기본 문법 & 선택자

Wed, 12 Apr 2023 15:00:00 GMT

jQuery jQuery는 HTML 요소를 선택 하고 요소에 대해 일부 작업을 수행하기 위해 맞춤 제작되었다. 기본 문법 : $(selector).action() - jQuery 정의/액세스를 위…

[CSS] BEM 방법론

Tue, 04 Apr 2023 15:00:00 GMT

BEM (Block, Element, Modifier)은 CSS 코드를 구조화하고 조직화하는 방법론이다. 코드의 유지 보수성, 가독성 및 확장성을 향상시키기 위해 명명 규칙 및 CSS 아키텍처에…

외부 Diff 도구 Visual Studio Code로 설정하기(Mac)

Tue, 04 Apr 2023 15:00:00 GMT

소스트리에서 제공하는 Diff의 GUI는 가독성이 너무 떨어진다. 그래서 Visual Studio Code로 연동하는 법을 찾아봤다. 설정하는 법은 굉장히 간단하다. MacOS 기준으로 아래와 같…

프로그래머스 | #Lv1 "바탕화면 정리"

Mon, 03 Apr 2023 15:00:00 GMT

코딩테스트를 준비하는 머쓱이는 프로그래머스에서 문제를 풀고 나중에 다시 코드를 보면서 공부하려고 작성한 코드를 컴퓨터 바탕화면에 아무 위치에나 저장해 둡니다. 저장한 코드가 많아지면서 머쓱이는 본…

permission denied writing to file(Mac)

Sun, 02 Apr 2023 15:00:00 GMT

Vue 프로젝트를 생성하고 파일을 수정한 후 저장하려는데 파일에 쓰기 권한이 거부되었다는 에러를 마주했다. 해결 방법은 간단했다. 해당 폴더에 777 권한을 부여하는 것이다. 터미널에서 파일 권한…

프로그래머스 | #Lv1 "둘만의 암호"

Sun, 02 Apr 2023 15:00:00 GMT

두 문자열 s와 skip, 그리고 자연수 index가 주어질 때, 다음 규칙에 따라 문자열을 만들려 합니다. 암호의 규칙은 다음과 같습니다. - 문자열 s의 각 알파벳을 index만큼 뒤의 알파벳…

[BUSGO] Chat GPT로 코드리뷰 action 만들기

Sat, 01 Apr 2023 15:00:00 GMT

Chat GPT한테 코드리뷰 시켰습니다.. (feat. Github Action) 위 글을 보고 진행했다. OPENAI API에서 로그인하고 설정에서 API Key 를 생성하자. secret ke…

[JS] Prototype

Thu, 30 Mar 2023 15:00:00 GMT

JavaScript에서 프로토타입은 다른 객체를 만들기 위한 청사진 역할을 하는 객체다. 이는 JavaScript 객체 지향 프로그래밍의 필수 부분으로, 프로토타입에서 속성과 메소드를 상속하는 객…

[BUSGO] 시간표 테이블 구성

Sun, 26 Mar 2023 15:00:00 GMT

6004번 버스의 평일/토요일/일요일의 기점 출발 데이터를 쌓아놓은 것을 바탕으로 테이블 UI를 구성했다. 일단 먼저 하나의 배열에 들어간 모든 시간을 주말, 토요일, 일요일의 각 배열에 pus…

프로그래머스 | #Lv1 "과일 장수"

Sat, 25 Mar 2023 15:00:00 GMT

과일 장수가 사과 상자를 포장하고 있습니다. 사과는 상태에 따라 1점부터 k점까지의 점수로 분류하며, k점이 최상품의 사과이고 1점이 최하품의 사과입니다. 사과 한 상자의 가격은 다음과 같이 결정…

프로그래머스 | #Lv1 "완주하지 못한 선수"

Wed, 22 Mar 2023 15:00:00 GMT

수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들…

프로그래머스 | #Lv1 "소수 만들기"

Tue, 21 Mar 2023 15:00:00 GMT

주어진 숫자 중 3개의 수를 더했을 때 소수가 되는 경우의 개수를 구하려고 합니다. 숫자들이 들어있는 배열 nums가 매개변수로 주어질 때, nums에 있는 숫자들 중 서로 다른 3개를 골라 더했…

프로그래머스 | #Lv1 "직사각형 별찍기"

Mon, 20 Mar 2023 15:00:00 GMT

이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다. 별(\) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요. - n과 m은 각각 1000 이하인 자…

[JS] 변수명 잘 작성하는 법

Sun, 19 Mar 2023 15:00:00 GMT

인터넷 강의를 통해 공부하던 중에 DOM조작할 시에 한개의 태그를 가져올때는 $(달러사인) 한개를 사용하고, 여러개의 태그를 가져올 때는 $ 두개를 사용해서 변수명을 작명하는 것을 본 적이 있다.…

[JS] 도움이 되는 연산자

Sun, 19 Mar 2023 15:00:00 GMT

Optional Chaining은 객체 내부의 속성에 접근할 때 속성이 존재하지 않아서 TypeError가 발생하는 것을 방지하기 위해 도입된 연산자다. 만약 속성이 존재하지 않는다면 undefi…

[SENTENCE U] 댓글 기능 삭제

Sun, 19 Mar 2023 15:00:00 GMT

유저들이 많이 올려준 글 들 중에 댓글이 작성된 적을 본 적이 없다. 아무래도 글을 올리고 글에 대한 공감은 '좋아요' 버튼으로 충분해서 그런 것이라고 판단했다. 그래서 과감히 댓글 기능을 삭제기…

프로그래머스 | #Lv1 "최대공약수와 최소공배수"

Sat, 18 Mar 2023 15:00:00 GMT

두 수를 입력받아 두 수의 최대공약수와 최소공배수를 반환하는 함수, solution을 완성해 보세요. 배열의 맨 앞에 최대공약수, 그다음 최소공배수를 넣어 반환하면 됩니다. 예를 들어 두 수 3,…

프로그래머스 | #Lv1 "이상한 문자 만들기"

Fri, 17 Mar 2023 15:00:00 GMT

문자열 s는 한 개 이상의 단어로 구성되어 있습니다. 각 단어는 하나 이상의 공백문자로 구분되어 있습니다. 각 단어의 짝수번째 알파벳은 대문자로, 홀수번째 알파벳은 소문자로 바꾼 문자열을 리턴하는…

[SENTENCE U] 나는 분명 클릭도 잘 했고 삭제도 잘 했단 말이에요

Thu, 16 Mar 2023 15:00:00 GMT

시작하기 버튼의 바깥쪽 영역을 클릭하면 반응은 하지만 버튼의 기능은 하지 못한다.(로그인/회원가입 페이지로 안넘어간다는 뜻) 수정 전에는 a태그(리액트라우터의 Link)를 감싸고 있는 button…

[SENTENCE U] 어머 아래가 조금 잘렸어요

Wed, 15 Mar 2023 15:00:00 GMT

캡쳐에 이상한 점을 느끼셨나요? 스크롤 영역이 두군데로 나눠져서 이런 현상이 나타나버렸다. 문제는 이 코드였다. overflow를 scroll로 해놔서 fixed 상태인 navbar영역 만큼 스크…

[BUSGO] 1일 시간표 작성 테스트

Mon, 13 Mar 2023 15:00:00 GMT

어제 밤에 서버와 클라이언트를 켜두고 오늘 새벽부터 운행 할 버스의 시간을 자동으로 기록하도록 해놨다. 운행이 감지된 첫차 5시 10분부터 시간표에 차곡차곡 작성되었다. 이제 하루치 시간표를 가지…

프로그래머스 | #Lv1 "시저 암호"

Mon, 13 Mar 2023 15:00:00 GMT

어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 "AB"는 1만큼 밀면 "BC"가 되고, 3만큼 밀면 "DE"가 됩니다. "…

[TS] 제네릭(Generic)

Mon, 13 Mar 2023 15:00:00 GMT

Generic(제네릭)은 함수, 클래스, 인터페이스 등의 타입을 일반화하여 재사용성을 높이는 기능이다. 즉, 타입스크립트에서 일반적으로 사용되는 타입을 구체적인 타입으로 대체하여 코드의 재사용성과…

[TS] 타입 쿼리(Type Query)

Mon, 13 Mar 2023 15:00:00 GMT

Type Query(타입 쿼리)는 특정 타입(Type)을 가져오는 방법이다. 즉, 타입 쿼리를 사용하면 변수, 함수 또는 클래스 등에 대한 타입 정보를 가져올 수 있다. 타입 쿼리는 다음과 같은…

[TS] 데코레이터(Decorator)

Mon, 13 Mar 2023 15:00:00 GMT

Decorator 패턴은 객체 지향 디자인 패턴 중 하나로, 객체에 동적으로 새로운 기능을 추가하기 위한 방법이다. 데코레이터 패턴을 사용하면 객체의 수정 없이도 객체의 기능을 확장하고, 코드의…

[TS] 클래스의 디자인 패턴 - 2

Mon, 13 Mar 2023 15:00:00 GMT

Command 패턴은 객체 지향 디자인 패턴 중 하나로, 어떤 작업을 수행하는 명령(Command)을 캡슐화하여 실행할 수 있는 객체로 만들고, 이를 조합하여 원하는 기능을 수행하는 방식을 제공하…

[TS] 클래스의 디자인 패턴 - 1

Mon, 13 Mar 2023 15:00:00 GMT

Singleton 패턴은 애플리케이션 내에서 단 하나의 인스턴스만을 가지도록 보장하는 디자인 패턴이다. 이 패턴을 사용하면 전역 변수를 사용하지 않고, 객체 인스턴스를 공유하여 리소스를 절약할 수…

[TS] 클래스(Class)

Mon, 13 Mar 2023 15:00:00 GMT

Class(클래스)는 객체를 생성하기 위한 템플릿(Template)이다. 클래스를 사용하면 객체의 속성과 메소드를 묶어서 쉽게 관리할 수 있다. TypeScript에서 클래스를 정의하는 방법은 다…

프로그래머스 | #Lv1 "행렬의 덧셈"

Mon, 13 Mar 2023 15:00:00 GMT

행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solutio…

[TS] 타입스크립트의 유용한 기능과 종류

Mon, 13 Mar 2023 15:00:00 GMT

Type Guards(타입가드)는 타입스크립트에서 변수의 타입을 보다 구체적으로 유추할 수 있도록 하는 기능이다. 이를 통해 코드의 가독성과 안정성을 높일 수 있다. Type Guard에는 다음과…

[BUSGO] 버스 기점에서 출발 시 DB에 시간 추가하기

Sun, 12 Mar 2023 15:00:00 GMT

홈페이지의 Form에서 사용자가 원하는 노선을 입력 후 '이동' 버튼을 클릭 시 공공데이터포털에서 해당 노선의 busId를 가져온다. 가져오기를 성공 하면 해당 노선페이지로 useNavigate를…

프로그래머스 | #Lv1 "2016년"

Sat, 11 Mar 2023 15:00:00 GMT

2016년 1월 1일은 금요일입니다. 2016년 a월 b일은 무슨 요일일까요? 두 수 a ,b를 입력받아 2016년 a월 b일이 무슨 요일인지 리턴하는 함수, solution을 완성하세요. 요일의…

[BUSGO] 노선정보 및 실시간 위치 가져오기

Fri, 10 Mar 2023 15:00:00 GMT

버스 노선번호를 입력해서 API호출을 했을 때 데이터를 받아보기 위해 간단한 폼을 작성했다. response 데이터를 받아올 때 대부분의 공공데이터 API는 xml데이터를 보내준다. 그래서 서버단…

[BUSGO] 공공데이터 API CORS 에러

Thu, 09 Mar 2023 15:00:00 GMT

버스노선정보나, 실시간 위치나 모든 데이터를 리액트쿼리로 관리하려고 한다. 그래서 아래와 같이 코드를 작성하고 일단 버스노선정보부터 API호출을 해봤다. 하지만 포스트맨에서 호출했던 것과는 달리…

[Node] MongoDB와 Express를 이용한 간단한 서버 오픈

Thu, 09 Mar 2023 15:00:00 GMT

서버파일에 위 와 같이 코드를 작성한다. Exrpess와 Mongoose를 사용해서 간단하게 서버를 오픈해 MongoDB에 연결했다. 반응형

[BUSGO] 리액트 PWA 프로젝트 생성

Wed, 08 Mar 2023 15:00:00 GMT

이번 서비스의 목표는 어플로까지 발행해서 주변 지인들이 앱으로 편하게 사용할 수 있도록 하는 것이다. 그래서 센텐스유의 PWA템플릿을 그대로 가져와서 리액트 프로젝트를 생성했다. 빌드는 웹팩 바벨…

[BUSGO] 프로젝트 개요 및 공공 데이터 API

Wed, 08 Mar 2023 15:00:00 GMT

강남가는 직행버스의 기점 근처에 살고있는데, 운수업체로부터 받은 시간표가 하나도 맞지 않아 버스가 출발할 때마다 알림도 오고 시간표도 작성해주는 서비스를 만들려고 한다. 기점에서 버스가 출발하자마…

프로그래머스 | #Lv1 "소수 찾기"

Tue, 07 Mar 2023 15:00:00 GMT

1부터 입력받은 숫자 n 사이에 있는 소수의 개수를 반환하는 함수, solution을 만들어 보세요. 소수는 1과 자기 자신으로만 나누어지는 수를 의미합니다. (1은 소수가 아닙니다.) - n은…

[TS] 함수(Function)

Mon, 06 Mar 2023 15:00:00 GMT

Function(함수)는 특정 작업을 수행하기 위한 코드의 블록이다. 함수는 특정한 입력 (인자)을 받아들이고, 그 입력에 따라서 일련의 계산을 수행한 뒤, 그 결과를 반환할 수 있다. 함수는 모…

[TS] 타입 연산자(Type Operators)

Mon, 06 Mar 2023 15:00:00 GMT

타입스크립트(TypeScript)는 자바스크립트(JavaScript)의 상위 집합 언어로, 정적 타입(static type)을 지원한다. 타입스크립트는 변수, 함수, 객체 등의 값의 타입을 사전에…

[TS] Never | Any | Unknown

Mon, 06 Mar 2023 15:00:00 GMT

never는 값이 결코 발생하지 않는 것을 나타내는 타입이다. 이는 함수나 메서드의 반환 타입으로 사용되거나, 변수나 매개변수의 타입으로 사용될 수 있다. 보통 never는 예외를 던지거나 무한…

[TS] 고급타입(Advanced Types) - Mapped Types

Mon, 06 Mar 2023 15:00:00 GMT

매핑 타입(Mapped Types)은 기존 타입을 변환하여 새로운 타입을 만들 수 있는 유틸리티 타입 중 하나다. 매핑 타입을 사용하면 기존 타입의 속성 이름, 타입 등을 변경하여 새로운 타입을…

[TS] 고급타입(Advanced Types) - 3

Mon, 06 Mar 2023 15:00:00 GMT

Recursive Types(재귀 타입)는 자기 참조하는 타입을 정의할 수 있도록 해준다다. 이는 트리, 그래프 등과 같이 반복적인 형태의 데이터 구조를 다룰 때 유용하다. 예를 들어, 다음과 같…

[TS] 고급타입(Advanced Types) - 2

Sun, 05 Mar 2023 15:00:00 GMT

Literal Types(리터럴 타입)은 특정한 값 자체를 타입으로 사용하는 것을 말한다. 타입스크립트에서는 문자열, 숫자, 불리언 값 등의 Literal Types을 지원하며, 이를 통해 값을…

[TS] 고급타입(Advanced Types) - 1

Sun, 05 Mar 2023 15:00:00 GMT

Generic Types(제네릭 타입)은 다양한 타입의 인자를 받아들이는 타입을 정의할 수 있게 해준다. 이를 통해 코드의 재사용성을 높이고 유연성을 확보할 수 있다. 예를 들어, Array는 여…

[FE 면접질문] 인성 및 기타

Sun, 05 Mar 2023 15:00:00 GMT

인성 및 기타 질문에 대한 답변은 개인마다 다를 수 있으므로 질문만 작성함 - 자기소개를 부탁드립니다. - 저희 회사에 지원하게된 동기가 무엇인가요? - 입사 후 포부에 대해 말씀해주세요. - 우…

[TS] 객체 타입(Object Types)

Sun, 05 Mar 2023 15:00:00 GMT

TypeScript에서 Object Types는 다양한 형태의 객체를 나타내기 위한 타입이다. 다음은 TypeScript에서 제공하는 Object Types의 종류다. - Object - Arra…

[TS] 원시 타입(Primitive Types)

Sun, 05 Mar 2023 15:00:00 GMT

TypeScript에서는 다양한 원시 타입(primitive types)을 제공한다. 원시 타입은 JavaScript와 유사하며, 변수에 단순한 데이터 값을 저장하는 데 사용된다. - Number…

[TS] 타입스크립트의 개요

Sun, 05 Mar 2023 15:00:00 GMT

JavaScript With Syntax For Types. 타입스크립트(TypeScript)는 마이크로소프트(Microsoft)에서 개발한 오픈소스 프로그래밍 언어로, 자바스크립트(JavaScr…

[JS] 원본 배열을 변경하지 않는 메소드

Sat, 04 Mar 2023 15:00:00 GMT

아래 메소드들은 원본 배열을 변경하지 않고 새로운 배열을 반환하는 불변성을 지키는 메소드들이다. 배열을 병합하여 새 배열을 반환한다. 주어진 함수의 테스트를 통과한 요소로 이루어진 새로운 배열을…

[JS] 원본 배열을 변경하는 메소드

Sat, 04 Mar 2023 15:00:00 GMT

아래 메소드들은 원본 배열을 변경하는 메소드들이다. 배열에서 마지막 요소를 제거하고 해당 요소를 반환한다. 배열 끝에 하나 이상의 요소를 추가하고 배열의 새로운 길이를 반환한다. 배열의 순서를 뒤…

[JS] 스코프(scope) - 간단정리

Sat, 04 Mar 2023 15:00:00 GMT

스코프는 자바스크립트에서 스코프(scope)는 변수와 함수의 유효 범위를 결정한다. 즉, 변수나 함수가 어디에서부터 접근 가능한지를 결정하는 것이다. 전역 스코프는 어떤 함수나 블록에도 속하지 않…

프로그래머스 | #Lv1 "문자열 내 마음대로 정렬하기"

Sat, 04 Mar 2023 15:00:00 GMT

문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 \["sun", "bed", "c…

[Xcode] iOS 가상 기기 만들기

Sat, 04 Mar 2023 15:00:00 GMT

센텐스유의 기능들을 개인 핸드폰으로 테스트하기에 번거로움이 있어 가상 기기를 만들기로 한다. 맥에서 iOS 가상 기기를 만들기 위해 앱스토어에서 Xcode를 설치한다. ‎Xcode 상단바에서 Xc…

프로그래머스 | #Lv1 "햄버거 만들기"

Fri, 03 Mar 2023 15:00:00 GMT

햄버거 가게에서 일을 하는 상수는 햄버거를 포장하는 일을 합니다. 함께 일을 하는 다른 직원들이 햄버거에 들어갈 재료를 조리해 주면 조리된 순서대로 상수의 앞에 아래서부터 위로 쌓이게 되고, 상수…

[Sass] 개요 및 설치

Fri, 03 Mar 2023 15:00:00 GMT

Sass(Syntactically Awesome StyleSheets) 는 CSS pre-processor(전처리기)로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한…

[React] useDeferredValue, useTransition

Fri, 03 Mar 2023 15:00:00 GMT

자바스크립트에서는 짧은 시간에 유저 입력 등의 이벤트가 많이 일어나는 경우 화면이 끊길 수 있다. 그래서 이런 경우 특별한 최적화가 필요하다. 대표적인 예가 바로 자동완성이다. 구글에 검색어를 입…

[React] useLayoutEffect

Fri, 03 Mar 2023 15:00:00 GMT

\[리액트 공식문서\] - 방향성은 useEffect와 동일하지만, 모든 DOM요소의 변경 후에 동기적으로 발생한다.(useEffect는 비동기) - DOM에서 레이아웃을 읽고 동기적으로 리렌더링…

[React] ContextAPI

Fri, 03 Mar 2023 15:00:00 GMT

react는 16.3 버전부터 정식적으로 ContextAPI를 지원하고 있다. 일반적으로 부모와 자식간 props를 전달해 state를 변화시키는 것과는 달리 ContextAPI는 컴포넌트 간 간…

[React] useReducer

Fri, 03 Mar 2023 15:00:00 GMT

useReducer는 State(상태)를 관리하고 업데이트하는 Hook인 useState를 대체할 수 있는 Hook이다. 다시 말해, useReducer는 useState처럼 State를 관리하고…

[React] Hooks Tip

Fri, 03 Mar 2023 15:00:00 GMT

공부하면서 얻은 Hooks Tip! 두 번째 인자(배열)의 값이 없어서 componentDidMount의 경우에만 실행된다. 첫 렌더링 때 실행된다고 생각하면 된다. 첫 렌더링 때 실행되는 com…

React Icons

Fri, 03 Mar 2023 15:00:00 GMT

리액트의 라이브러리로 수 많은 아이콘을 컴포넌트 형식으로 사용 할 수 있다. 터미널에서 npm을 사용해 설치한다. React icon에서 원하는 아이콘을 찾아서 불러 올 수 있다. React Ic…

[React] 리액트 프로젝트 Github 배포

Fri, 03 Mar 2023 15:00:00 GMT

리액트 환경에서 생성한 SPA의 state, JSX, \, props 같은 문법들은 브라우저가 해석할 수 없어 그대로 배포할 수 없다. 이런 문법들을 CSS JS HTML 문…

React Router v6

Fri, 03 Mar 2023 15:00:00 GMT

리액트에서 SPA(Single Page Application)을 제작 하기 위해서는 Router(라우터)라는 라이브러리가 필요하다. 한 개의 페이지에서 라우터를 이용해서 여러 개의 페이지를 만들…

[React] Hooks

Fri, 03 Mar 2023 15:00:00 GMT

함수 컴포넌트란 함수를 기반으로 작성하는 컴포넌트를 말한다. 클래스형 컴포넌트에 비해 훨씬 짧고 직관적인 코드를 짤 수 있고, 함수 프로그래밍을 할 수 있게 해준다. 함수 컴포넌트의 Hook이라는…

[React] LifeCycle(생명주기)

Fri, 03 Mar 2023 15:00:00 GMT

모든 리액트 컴포넌트에는 생명주기(Life Cycle)가 존재한다. 컴포넌트는 ‘생성(mounting) -\> 업데이트(updating) -\> 제거(unmounting)’ 의 생명주기를 갖는다.…

[React] 설치, 프로젝트 생성, 기본 문법

Fri, 03 Mar 2023 15:00:00 GMT

안정적인 왼쪽의 LTS버전을 설치한다. React설치를 위한 npm 은 node.js 설치 시 함께 설치된다. 프로젝트용 폴더를 생성하고, 우클릭을 통해 터미널로 폴더를 연다. 터미널에서 npx…

[React] 기초개념

Fri, 03 Mar 2023 15:00:00 GMT

- 간략 설명: 프로그램 제작 시 필요한 기능 - 비교 설명: 자동차 바퀴, 자동차 헤드라이트, 자동차 에어백 재사용이 필요한 기능으로 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호…

[React Query] staleTime과 cacheTime의 차이

Fri, 03 Mar 2023 15:00:00 GMT

- A 쿼리 인스턴스가 mount 된다. - 네트워크에서 데이터 fetch 하고 A라는 query key로 캐싱한다. - 이 데이터는 fresh 상태에서 staleTime(기본값 0) 이후 sta…

[React] 리액트 코딩 컨벤션

Fri, 03 Mar 2023 15:00:00 GMT

제외 예정이거나(deprecated) 제외된(obsolute) 기능, 비표준 구문은 사용하지 않는다. 항상 적용할 순 없지만 가능하면 SOLID 규칙을 따르는 것을 권장한다. SOLID (객체 지…

프로그래머스 | #Lv1 "콜라 문제"

Thu, 02 Mar 2023 15:00:00 GMT

오래전 유행했던 콜라 문제가 있습니다. 콜라 문제의 지문은 다음과 같습니다. 정답은 아무에게도 말하지 마세요. 콜라 빈 병 2개를 가져다주면 콜라 1병을 주는 마트가 있다. 빈 병 20개를 가져다…

[JS] map과 filter의 차이점

Thu, 02 Mar 2023 15:00:00 GMT

- currentValue : 처리할 현재 요소 - index (Optional) : 처리할 현재 요소의 인덱스 - array (Optional) : map()를 호출한 배열 - thisArg (…

[JS] async & await

Thu, 02 Mar 2023 15:00:00 GMT

async & await 은 기존의 비동기처리 방식의 문제점들을 보완하면서도 사용법이 훨씬 간단하다. 이처럼 async를 사용하면 promise 코드를 훨씬 직관적으로 나타낼 수 있다. 함수에 a…

[JS] 프로미스(Promise)

Thu, 02 Mar 2023 15:00:00 GMT

자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동…

[SENTENCE U] PTR(Pull To Refresh) 구현

Thu, 02 Mar 2023 15:00:00 GMT

Pull To Refresh의 약자로 당겨서 새로고침을 뜻한다. 모바일에서 흔히 새로고침을 위해 터치스크린을 위에서 아래로 내려 새로고침 했던 경험이 있을 것이다. 현재 센텐스유의 포스트들을 새로…

[JS] 클로저(Closure)

Thu, 02 Mar 2023 15:00:00 GMT

클로저(closure)는 자바스크립트에서 중요한 개념 중 하나다. 클로저는 자바스크립트 고유의 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(Functional Programm…

[JS] this

Thu, 02 Mar 2023 15:00:00 GMT

자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체 와 this를 암묵적으로 전달 받는다. Java에서의 this 는 인스턴스 자신(self)을 가리키는…

[JS] 실행 컨텍스트(Execution Context)

Thu, 02 Mar 2023 15:00:00 GMT

실행 컨텍스트(Execution Context)는 scope hoisting this function closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. 실행 컨텍스트를 바로 이…

[JS] use strict(엄격 모드)

Thu, 02 Mar 2023 15:00:00 GMT

"use strict" 혹은 'use strict' 는 단순한 문자열처럼 생겼다. 하지만 이 문구가 스크립트 최상단에 오면 스크립트 전체가 “모던한” 방식으로 동작하게된다. "use strict"…

[JS] TDZ(일시적 사각지대)

Thu, 02 Mar 2023 15:00:00 GMT

TDZ(Temporal Dead Zone)를 해석하면 "일시적 사각지대"다. 첫 번째 코드 \[인스턴스 생성 후 클래스 선언\] 두 번째 코드 \[함수 호출 후 함수 선언\] 위 두개의 코드를 실…

[JS] 동기와 비동기 처리방식

Thu, 02 Mar 2023 15:00:00 GMT

- 동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다. 즉, A작업이 모두 진행 될때까지 B작업은 대기해야한다. - 비동기 방식은 반대로 요청을 보냈을 때 응답…

[WEB] CSR/SSR/SSG

Thu, 02 Mar 2023 15:00:00 GMT

Client Side Rendering의 약자로 클라이언트 측에서 렌더링을 하는 방식이다. 최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다 리소스를 서버에…

[JS] 이벤트루프 & 태스크 큐

Thu, 02 Mar 2023 15:00:00 GMT

자바스크립트는 싱글 스레드 기반의 언어 이고, 자바스크립트 엔진은 하나의 호출 스택만을 사용한다. 이는 요청이 동기적으로 처리되어 한 번에 한 가지 일만 처리할 수 있음 을 의미한다. 만약 네트워…

[Node] Express

Thu, 02 Mar 2023 15:00:00 GMT

Node.js의 프레임워크이다. 자바스크립트 프레임워크로 React, 자바 프레임워크로 Spring 등등이 있는 것처럼 Express는 Node.js를 빠르고 간결하게 사용할 수 있게 해준다. -…

프로그래머스 | #Lv1 "삼총사"

Thu, 02 Mar 2023 15:00:00 GMT

한국중학교에 다니는 학생들은 각자 정수 번호를 갖고 있습니다. 이 학교 학생 3명의 정수 번호를 더했을 때 0이 되면 3명의 학생은 삼총사라고 합니다. 예를 들어, 5명의 학생이 있고, 각각의 정…

[Node] NVM, NPM

Wed, 01 Mar 2023 15:00:00 GMT

Node.js는 Javascript의 runtime 이다. 프로그램이 실행될 때, 그 프로그램이 동작하는 곳이다. 기존의 Javascript 런타임은 크롬, 사파리 같은 웹 브라우저였다. 그런데…

[HTTP] RestAPI

Wed, 01 Mar 2023 15:00:00 GMT

REST는 Representational State Transfer라는 용어의 약자로서 2000년도에 로이 필딩 (Roy Fielding)의 박사학위 논문에서 최초로 소개되었다. 로이 필딩은 HT…

React Query

Wed, 01 Mar 2023 15:00:00 GMT

- UI/UX의 중요성과 함께 프로덕트 규모가 많이 커지고 프론트엔드에서 수행하는 역할이 늘어났다. - 즉,관리하는 상태가 많아지고 상태관리의 필요성이 중요해졌다. - 주어진 시간에 대해 시스템을…

Emotion

Wed, 01 Mar 2023 15:00:00 GMT

Emotion – Introduction Emotion.js는 CSS-in-JS의 종류 중 하나로 JavaScript 안에서 스타일을 작성할 수 있게 해준다. emotion.js는 주로 프레임워크…

Axios

Wed, 01 Mar 2023 15:00:00 GMT

왜 React에서 주로 Axios를 이용해 통신하는지, HTTP 통신을 가능하게 하는 Ajax와 Fetch와 비교해보자. - Ajax는 Asynchronous JavaScript And XML의…

Classnames

Wed, 01 Mar 2023 15:00:00 GMT

리액트에서 클래스의 이름을 조건부 로 className을 함께 결합하기 위한 자바스크립트 라이브러리다. classnames 터미널에서 npm을 사용해 설치한다. 아래와 같이 불리언(true / f…

[Next] 404 page

Wed, 01 Mar 2023 15:00:00 GMT

pages폴더 하위에 404.js 이름으로 컴포넌트를 만들고 코드를 작성하면 끝이다. 간단하다. 반응형

[Next] Catch All URL

Wed, 01 Mar 2023 15:00:00 GMT

pages 하위에 파일명을 \[...params\].js(원하는 이름 사용) 와 같이 설정하면 어떤 URL이라도 잡을 수 있다. \[...\] 를 통해서 movies라는 폴더 아래 모든 Endpo…

[Next] 동적라우팅 (Dynamic Router)

Wed, 01 Mar 2023 15:00:00 GMT

pages는 페이지 라우팅을 자동으로 설정해주는 폴더로, 정적 라우팅은 물론 동적 라우팅도 가능하다. pages 하위 폴더 구조URL 동적 라우팅은 \[변수\].js 파일을 통해 설정할 수 있다.…

[Next] Data Fetching

Wed, 01 Mar 2023 15:00:00 GMT

앞서 공부한 것처럼 Next는 프리렌더링(pre-rendering) 기능을 제공한다. 말 그대로 사전에 미리 html을 렌더링 한다는 뜻이다. html을 미리 생성하고 최소한의 자바스크립트를 연결…

[Next] next.config.js

Wed, 01 Mar 2023 15:00:00 GMT

next.config.js 는 JSON 파일이 아닌, NodeJS 모듈이다. next.config.js는 파일명에서도 알 수 있듯 Next 프로젝트에서 추가적인 설정을 할 수 있도록 하는 Node…

[Next] 개발 패턴(Layout & SEO)

Wed, 01 Mar 2023 15:00:00 GMT

너무 큰 \app.js 파일은 좋지 않아서 레이아웃과 관련된 부분은 Layout 컴포넌트로 따로 분리한다. - components 에 Layout.js 파일을 생성한다. - Layout 컴포넌트에…

[Next] 스타일 적용과 _App

Wed, 01 Mar 2023 15:00:00 GMT

컴포넌트의 태그 안에 스타일을 직접 추가할수도있다. 하지만 인라인 스타일로 적용하는 것은 코드의 가독성 뿐만 아니라 효율적으로 관리할수 없다. 컴포넌트와 동일한 경로에 XXXX.module.css…

[Next] 프로젝트 생성과 구조 알아보기

Wed, 01 Mar 2023 15:00:00 GMT

폴더 생성 후 npx를 통해 Next 프로젝트를 생성한다. Next에는 React와는 다르게 dev-build-start 로 구성되어있다. npm run dev를 통해 개발환경을 실행한다. Nex…

백준 | #10871 "X보다 작은 수"

Tue, 28 Feb 2023 15:00:00 GMT

주어진 수열을 주어진 정수보다 작은 값을 찾아 출력하는 문제였다. 이런 간단한 문제를 계속 풀다보니 반복문과 조건문으로는 어느정도 푸는 방법을 터득한 것 같다. 기본 내장 함수를 이용해서도 풀어봐…

백준 | #2439 "별 찍기"

Tue, 28 Feb 2023 15:00:00 GMT

2438번 문제와 다르게 별을 뒤에서 부터 찍어야 하는 문제다. 빈 배열을 만들어서 for문을 거꾸로 돌려 뒤에서부터 별로 배열을 채웠고, join()함수로 문자열로 반환해서 출력했다. 반응형

백준 | #2438 "별 찍기"

Tue, 28 Feb 2023 15:00:00 GMT

반복문을 사용해 주어진 수 만큼 차례로 별을 출력하는 간단한 문제였다. 반응형

백준 | #11022 "A+B"

Tue, 28 Feb 2023 15:00:00 GMT

입력 값들을 받아 배열로 변환해서 합을 출력하는 문제였다. 줄바꿈('/n') 을 기준으로 배열을 만들고 띄어쓰기(' ') 로 구분하여 새로운 배열에 숫자로 구분하여 넣는다. 첫 제출때 for문 의…

백준 | #11021 "A+B"

Tue, 28 Feb 2023 15:00:00 GMT

주어진 테스트케이스의 개수 T만큼 두 수를 합해서 출력하는 다른 A+B문제와 했다. 차이점은 마지막에 출력 할때 문자열과 변수를 같이 출력하도록 백틱을 사용한 것. 반응형

백준 | #15552 "빠른 A+B"

Tue, 28 Feb 2023 15:00:00 GMT

다른 합을 출력하는 문제와 동일하다. 하지만 주의할 점은 테스트케이스의 개수 T가 주어진 다는 것이다. T의 최대 수가 백만이 나오게 되면 반복문을 그만큼 돌리므로 속도가 느려져 시간제한에 걸리게…

백준 | #8393 "합"

Tue, 28 Feb 2023 15:00:00 GMT

간단한 반복문을 사용해 모든 수의 합을 구하는 문제였다. 반응형

백준 | #10950 "A+B"

Tue, 28 Feb 2023 15:00:00 GMT

한줄씩 주어진 숫자를 하나의 배열로 변환하고, 처음 주어진 테스트 수는 shift() 로 지웠다. for문으로 배열을 돌면서 한칸씩 띄어진 두 수를 새로운 배열에 넣었다. 그리고 두 수를 더한 값…

백준 | #2739 "구구단"

Tue, 28 Feb 2023 15:00:00 GMT

반복문을 처음 배우면 필수 예제로 풀어보는 간단한 구구단 문제였다. 백준에 제출할 때 주의할 점. console.log();안의 input 값은 숫자로 들어가야 하므로 parseInt() 를 통해…

백준 | #2480 "주사위 세개"

Tue, 28 Feb 2023 15:00:00 GMT

세개의 조건 \[3개 일치, 2개 일치, 불일치\] 의 조건문까지는 작성 할 수 있었다. \[3개 일치\] 조건은 a,b,c가 모두 일치하므로 아무 값이나 출력 값으로 사용하면 됐다. 그런데 \[…

백준 | #2525 "오븐 시계"

Tue, 28 Feb 2023 15:00:00 GMT

이전 문제와 비슷한 주어진 시간에 시간을 또 더한 값을 반환하는 문제였다. 시 를 모두 분 으로 변환해 계산하는 방법을 사용했다. 1) 두 줄 형태의 입력 값을 split('\\n') 으로 배열…

백준 | #2884 "알람 시계"

Tue, 28 Feb 2023 15:00:00 GMT

두 수를 입력 받아 시간과 분으로 나누고 -45분 한 결과값을 반환하는 문제였다. 일단 목적인 분(M)을 -45한다. 그 다음 경우의 수를 생각해봤다. 분(M)이 음수가 될 경우, 시(H)가 음수…

프로그래머스 | #Lv1 "같은 숫자는 싫어"

Tue, 28 Feb 2023 15:00:00 GMT

배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된…

백준 | #25083 "새싹"

Tue, 28 Feb 2023 15:00:00 GMT

백틱 안에는 여러 줄의 문자를 입력 할 수 있다. 반응형

백준 | #10869 "사칙연산"

Mon, 27 Feb 2023 15:00:00 GMT

입력 값을 숫자배열로 변환해서 연산자를 통해 출력하는 문제였는데 주의할 점이 나머지 연산자는 소수점 이하 자리를 절삭하고 출력을 해야하는 문제였다. 그래서 Math.floor 메소드를 통해 나머지…

백준 | #14681 "사분면 고르기"

Mon, 27 Feb 2023 15:00:00 GMT

두 수를 숫자배열로 변환해 각 값이 0보다 큰지 작은지 조건을 따져 출력하는 문제였다. 다른 사람은 삼항연산자를 사용해 더 간단하게 코드를 작성했다. 반응형

백준 | #2588 "곱셈"

Mon, 27 Feb 2023 15:00:00 GMT

마무리 A, B에 입력받은 두 수를 배열로 저장한다. 두 번째 수 B는 split()메소드를 통해 숫자 하나씩 나누어 배열에 저장했다. temp1 ~ temp3 까지 각각 1의 자리 수, 10의…

백준 | #10718 "We love kriii"

Mon, 27 Feb 2023 15:00:00 GMT

입력 값이 없는 간단한 출력문제였다. console.log 두 줄로 출력해도 되지만 \\n기호를 통해 한 줄의 코드로도 작성이 가능하다. 반응형

백준 | #10430 "나머지"

Mon, 27 Feb 2023 15:00:00 GMT

입력 값을 받아 주어진 사칙연산 식을 출력하는 문제였다. 반응형

백준 | #2753 "윤년"

Mon, 27 Feb 2023 15:00:00 GMT

윤년일 경우 1을, 윤년이 아닐 경우 0을 출력하는 문제였다. 윤년의 조건은 다음과 같다. - 연도가 4의 배수 일때 - 연도가 100의 배수가 아닐 때 또는 400의 배수일 때 윤년의 조건만 잘…

백준 | #10171 "고양이"

Mon, 27 Feb 2023 15:00:00 GMT

줄바꿈을 \\n 을 통해 출력하는 간단한 문제였다. 반응형

프로그래머스 | #Lv1 "폰켓몬"

Mon, 27 Feb 2023 15:00:00 GMT

당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍…

[WEB] 웹 성능 최적화 방법 정리

Mon, 27 Feb 2023 15:00:00 GMT

성능 최적화 내지는 웹성능 최적화를 구글에 검색하면 수많은 이론과 자료가 나온다. 어떤 부분에 초점을 맞추느냐에 따라서 그 방법은 분류 또한 다양해진다. 우선 생각나는대로 빠르게 나열을 해보자면…

[UI] 개발자로서 반드시 알아두어야 할 32가지의 UI 요소

Mon, 27 Feb 2023 15:00:00 GMT

유저 인터페이스(UI)는 우리가 앱과 웹사이트를 만들때 사용하는 요소 중 하나이다. UI는 버튼, 스크롤바, 메뉴, 체크박스 등 맥락에 맞는 요소를 사용하여 사용자와 화면 간의 상호 작용을 더함으…

[Git] 커밋(Commit) 컨벤션

Mon, 27 Feb 2023 15:00:00 GMT

우리가 보통 글을 쓸 때 제목, 본문, 추가내용으로 구성을 한다. 커밋 컨벤션도 위의 구조를 따른다. 파일을 변경하거나 수정한 뒤 commit을 하게 될 때 아래와 같이 커밋 메시지를 추가 할 수…

[Github] 리드미(README) 뱃지 모음

Mon, 27 Feb 2023 15:00:00 GMT

- 작성법 - 예시 Git README 꾸미기 Badge 모음 반응형

백준 | #10172 "개"

Mon, 27 Feb 2023 15:00:00 GMT

앞서 푼 고양이와 다르게 큰따옴표" 작은따옴표' 백슬래시\\ 같은 다양한 기호들이 있어 출력에 주의해야 했다. 위의 기호들을 출력하기 위해서는 백슬래시\\를 앞에 추가해서 출력하면 된다. 아래는…

백준 | #1008 "A/B"

Sun, 26 Feb 2023 15:00:00 GMT

숫자배열로 변환해서 풀이하는 간단한 사칙연산 문제였다. 반응형

백준 | #1001 "A-B"

Sun, 26 Feb 2023 15:00:00 GMT

1000번 문제와 동일한 방식의 사칙연산 문제였다. 반응형

백준 | #3003 "킹, 퀸, 룩, 비숍, 나이트, 폰"

Sun, 26 Feb 2023 15:00:00 GMT

검정색 체스의 개수 배열을 생성해서 입력받은 흰색 체스의 개수 배열을 뺀 새로운 배열을 생성하고 join()메소드로 각 인덱스 값을 띄어쓰기로 구분해서 출력하는 문제였다. map() 메소드는 배열…

백준 | #1000 "A+B"

Sun, 26 Feb 2023 15:00:00 GMT

입력 값을 받아 배열형태로 변경하고 map메소드를 통해 String을 Number로 변환해서 연산해서 해결했다. 반응형

백준 | #2557 "Hello Wolrd"

Sun, 26 Feb 2023 15:00:00 GMT

입력 값이 없는 간단한 출력 문제였다. 반응형

BOJ | #1300 "두 수 비교하기"

Sun, 26 Feb 2023 15:00:00 GMT

마무리 입력 값을 숫자 배열로 변환해서 각 값을 변수에 저장했다. 기본적인 if else if 조건문을 사용해서 푸는 문제였다. 반응형

백준 | #10998 "AxB"

Sun, 26 Feb 2023 15:00:00 GMT

마무리 숫자배열로 변환해서 풀이하는 간단한 사칙연산 문제였다. 반응형

백준 | #9498 "시험 성적"

Sun, 26 Feb 2023 15:00:00 GMT

입력받은 값에 따라 조건식을 통해서 출력 값을 반환하는 문제다. 처음에는 무턱대고 if else if 문을 사용해서 코드를 작성했었다. 이런식으로... if뒤의 식에는 항상 불리언(Boolean)…

백준 | #18108 "1998년생인 내가 태국에서는 2541년생?!"

Sun, 26 Feb 2023 15:00:00 GMT

문제에 답이 나와있다. 불기년도를 구하기 위해 서기에서 543년도를 뺀 값을 출력하는 문제였다. 반응형

프로그래머스 | #Lv1 "부족한 금액 계산하기"

Sun, 26 Feb 2023 15:00:00 GMT

새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원 인데, 놀이기구를 N 번 째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음…

프로그래머스 | #Lv1 "약수의 개수와 덧셈"

Sun, 26 Feb 2023 15:00:00 GMT

두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록…

프로그래머스 | #Lv1 "문자열 다루기 기본"

Sun, 26 Feb 2023 15:00:00 GMT

문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요. 예를 들어 s가 "a234"이면 False를 리턴하고 "1234"라면 True를 리턴하면…

프로그래머스 | #Lv1 "문자열 내림차순으로 배치하기"

Sun, 26 Feb 2023 15:00:00 GMT

문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요. s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로…

프로그래머스 | #Lv1 "내적"

Sun, 26 Feb 2023 15:00:00 GMT

길이가 같은 두 1차원 정수 배열 a, b가 매개변수로 주어집니다. a와 b의 내적을 return 하도록 solution 함수를 완성해주세요. 이때, a와 b의 내적은 a\[0\]b\[0\] +…

프로그래머스 | #Lv1 "없는 숫자 더하기"

Sat, 25 Feb 2023 15:00:00 GMT

0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solu…

프로그래머스 | #Lv1 "가운데 글자 가져오기"

Sat, 25 Feb 2023 15:00:00 GMT

단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다. - s는 길이가 1 이상, 100이하인 스트링입니다. 이번 문제…

프로그래머스 | #Lv1 "수박수박수박수박수박수?"

Sat, 25 Feb 2023 15:00:00 GMT

길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면…

프로그래머스 | #Lv1 "음양 더하기"

Sat, 25 Feb 2023 15:00:00 GMT

어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구…

프로그래머스 | #Lv1 "나누어 떨어지는 숫자 배열"

Sat, 25 Feb 2023 15:00:00 GMT

array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요. divisor로 나누어 떨어지는 element가…

프로그래머스 | #Lv1 "제일 작은 수 제거하기"

Sat, 25 Feb 2023 15:00:00 GMT

정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어…

프로그래머스 | #Lv1 "핸드폰 번호 가리기"

Sat, 25 Feb 2023 15:00:00 GMT

프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone\number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫…

프로그래머스 | #Lv1 "서울에서 김서방 찾기"

Sat, 25 Feb 2023 15:00:00 GMT

String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요 seoul에 "Kim"은 오직 한…

프로그래머스 | #Lv1 "두 정수 사이의 합"

Sat, 25 Feb 2023 15:00:00 GMT

두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요. 예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 1…

프로그래머스 | #Lv1 "콜라츠 추측"

Sat, 25 Feb 2023 15:00:00 GMT

1937년 Collatz란 사람에 의해 제기된 이 추측은, 주어진 수가 1이 될 때까지 다음 작업을 반복하면, 모든 수를 1로 만들 수 있다는 추측입니다. 작업은 다음과 같습니다. - 1-1. 입…

프로그래머스 | #Lv1 "x만큼 간격이 있는 n개의 숫자"

Sat, 25 Feb 2023 15:00:00 GMT

함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solutio…

프로그래머스 | #Lv1 "문자열을 정수로 바꾸기"

Sat, 25 Feb 2023 15:00:00 GMT

문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. - s의 길이는 1 이상 5이하입니다. - s의 맨앞에는 부호(+, -)가 올 수 있습니다. - s는 부호와 숫자로…

프로그래머스 | #Lv1 "나머지가 1이 되는 수 찾기"

Sat, 25 Feb 2023 15:00:00 GMT

자연수 n이 매개변수로 주어집니다. n을 x로 나눈 나머지가 1이 되도록 하는 가장 작은 자연수 x를 return 하도록 solution 함수를 완성해주세요. 답이 항상 존재함은 증명될 수 있습니…

프로그래머스 | #Lv1 "하샤드 수"

Sat, 25 Feb 2023 15:00:00 GMT

양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입…

프로그래머스 | #Lv1 "정수 내림차순으로 배치하기"

Sat, 25 Feb 2023 15:00:00 GMT

함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다.…

프로그래머스 | #Lv1 "문자열 내 p와 y의 개수"

Fri, 24 Feb 2023 15:00:00 GMT

대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y…

[SENTENCE U] SweetAlert/버그 수정

Thu, 23 Feb 2023 15:00:00 GMT

기존에 모든 알림창은 redhot-toast를 사용했고, 프롬프트창은 기본 window.promt를 사용했다. SweetAlert를 사용하게 된 계기는 iOS 디바이스에서 window.prompt…

FE취준생 혼자서 만든 동기부여 공유 서비스 프로젝트 후기(ver1)

Thu, 23 Feb 2023 15:00:00 GMT

약 1개월 간 뼈를 갈아서 만들어 공식적으로 오픈했습니다. SENTENCE U | 문장공유 커뮤니티 센텐스유는 짧은 글로 사람들에게 동기부여와 여러 긍정적인 메시지를 담기위해 만들어진 공간입니다.…

[SENTENCE U] 세션 구현/PWA 설정

Thu, 23 Feb 2023 15:00:00 GMT

쿠키로 로그인 정보를 저장하고 인증 미들웨어에서는 쿠키에서 유저정보를 가져와 DB에서 복호화한 토큰으로 유저 정보를 찾아 인증상태를 넘겨줬다. - 가장 큰 단점은 보안에 취약하다는 점이다. - 요…

Day 35 | 정적파일 캐싱/하위페이지 서빙

Thu, 23 Feb 2023 15:00:00 GMT

정적파일들을 브라우저에 캐싱을 해놓지 않아 로드할 때마다 약 2~3초의 로드시간이 소요됐다 express에서 폰트/이미지/JS파일 등 정적파일들을 캐싱처리해줬다. 첫 접속 이후에는 정적파일들이 캐…

Day 34 | 카카오 로그인

Thu, 23 Feb 2023 15:00:00 GMT

간편하게 로그인 할 수 있게 카카오 API를 이용해서 로그인/로그아웃을 구현했다. Kakao Developers 카카오 개발자에서 애플리케이션에 진행중인 프로젝트를 등록한다. 그럼 앱 키가 발행된…

Day 33 | REST API 정리/스타일 코드 컨벤션

Thu, 23 Feb 2023 15:00:00 GMT

스타일 코드에서 컨벤션이 존재한다는 사실 일반 CSS나 SCSS를 작성 할 때에는 CSS Sort 익스텐션을 사용해서 쉽게 정렬했지만 지금 이 프로젝트는 emotion을 사용해 css-in-js형…

Day 30 | PWA/폰트 최적화

Thu, 23 Feb 2023 15:00:00 GMT

유저들 대부분 모바일 환경에서 사용하고있어, PWA(Progressive Web App)를 추가했다. 보통 CRA로 리액트 환경을 만들때 PWA를 사용하지만, 나는 CRA도 사용하지 않았고 이미…

Day 27 | 개인 프로필 설정페이지

Thu, 23 Feb 2023 15:00:00 GMT

수정 버튼 클릭 시 flag State 변경으로 수정모드로 변경한다. 포스트 변경과 동일한 구조로 유저명과 유저타이틀도 변경된 내용을 POST로 서버로 보낸다. 계정 삭제 기능은 포스트와 댓글 삭…

Day 26 | 이미지 AWS S3 업로드

Thu, 23 Feb 2023 15:00:00 GMT

서버 하드에 저장하면 서버 재배포 시 새로 생긴 경로는 모조리 삭제되서 초기화된다.. 이 문제를 마주하고 처음에는 서버를 재배포 할 때마다 서버에 있는 새로 생긴 폴더를 다 다운받으면 되지 않을까…

Day 23 | 이미지업로드/클라우드타입 배포자동화

Thu, 23 Feb 2023 15:00:00 GMT

이미지 업로드 버튼 클릭 시 파일을 첨부할 수 있도록 input태그를 사용했다. onUploadHandler 함수 실행 시 유저가 input창에서 선택했던 파일을 FormData를 사용해 avat…

Day 22 | 프로젝트명 변경/가배포

Thu, 23 Feb 2023 15:00:00 GMT

왜? 이제와서? 기존의 Life Is a Sentence, 즉 LIS 는 독특하고 기억에 남기 때문에 좋은 옵션이지만, 웹이 무엇을 하는지 처음에는 사용자에게 명확하지 않을 수 있다고 생각했다.…

Day 17 | 포스트 날짜별 구분/시계/날씨/캘린더

Thu, 23 Feb 2023 15:00:00 GMT

최신글 처럼 날짜별로 보이면 좋을 것 같은 리스트는 섹션별로 나눠서 보여주는 것이 좋을 것 같았다. dayjs를 사용해서 postList라는 매개변수를 받아 그 글의 createdAt을 최신순으로…

Day 16 | useQuery 최적화/로컬폰트/soket-io 최적화

Thu, 23 Feb 2023 15:00:00 GMT

홈페이지와 개인 프로필 페이지의 UI는 완성했다. 다이어리 페이지에는 캘린더와 유저 본인만 볼수있는 다이어리 리스트를 추가할 것이고, 요청페이지에는 관리자에게 보낼수있는 요청사항을 담은 Form을…

Day 15 | 포스트 CRUD/댓글기능/유저페이지

Thu, 23 Feb 2023 15:00:00 GMT

일단 수정/삭제 기능을 추가하기 위해서 post카드를 클릭했을 때 수정버튼과 삭제버튼이 나오도록 구현했다. post카드를 눌렀을때 높이를 조절하는 것은 ref와 css를 사용해서 적용했다. 처음에…

Day 14 | 메인페이지/온라인리스트/react-scroll-bar

Thu, 23 Feb 2023 15:00:00 GMT

layout은 아래와 같이 나눴다. 상단에는 NavBar와 네이버 명언에서 크롤링해온 데이터가나오는 롤링배너를 위치시켰다. 메뉴의 구성은 아래와 같이 나눴다. - Write : 글쓰기 - Coll…

Day 13 | NavBar/명언데이터 크롤링

Wed, 22 Feb 2023 15:00:00 GMT

NavBar의 프로필 부분을 모달창의 컴포넌트는 만들어놨지만 작동을 안해서 수정할 경 스타일을 적용했다. 약간 어두운 흰색을 배경으로 채도가 조금 빠진 검정색을 이용했다. 유저프로필쪽에 호버를 하…

Day 12 | LIKE버튼/유저페이지

Wed, 22 Feb 2023 15:00:00 GMT

UI는 아래와 같이 스타일을 적용했다. Like 버튼의 데이터는 글, 날짜, 작성자와 동일하게 가져왔다. Like 버튼은 데이터만 가져오면 끝나는게 아니다. 누를 때 마다 데이터가 업데이트 되어야…

프로그래머스 | #Lv1 "자연수 뒤집어 배열로 만들기"

Wed, 22 Feb 2023 15:00:00 GMT

자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 \[5,4,3,2,1\]을 리턴합니다. - n은 10,000,000,000이하인 자연수입니…

[FE 면접질문] React (2)

Wed, 22 Feb 2023 15:00:00 GMT

- 먼저 클래스 컴포넌트는 자바스크립트의 class 키워드로 시작하여 React.Component를 상속받는 형태를 가지고 있다. - 컴포넌트별로 state 속성을 정의할 수 있고, state 초…

[FE 면접질문] React (1)

Wed, 22 Feb 2023 15:00:00 GMT

- 공식문서에서도, 리액트는 View에 관련된 기능 개발을 위한 라이브러리라고 소개하고 있다. - 리액트를 사용할 때, 라우팅이나 상태관리와 같은 개발에 필요한 여러 기능들은 서드파티 라이브러리에…

[FE 면접질문] Javascript (3)

Wed, 22 Feb 2023 15:00:00 GMT

- 웹 브라우저에 사용자가 입력한 URL 주소를 DNS를 통해 IP 주소를 검색하고, 그 IP 주소에 HTTP GET 요청 메시지를 전송한다. - 네트워크를 통해 웹서버로부터 요청에 대한 웹 서버…

[FE 면접질문] Javascript (2)

Wed, 22 Feb 2023 15:00:00 GMT

- 현실 세계의 사물처럼, 프로그래밍에 필요한 개념을 객체라는 개념으로 추상화하고, 객체들간의 상호작용을 중심으로 프로그래밍하는 패러다임을 의미한다. - 좁은 의미로 객체는 클래스의 인스턴스라고…

[FE 면접질문] Javascript (1)

Wed, 22 Feb 2023 15:00:00 GMT

- 프로그래밍이란 문제상황을 이해하고 분석하여 도출한 해결 방법을 컴퓨터에게 실행 요청하는 것이다. - 컴퓨터에게 어떤 문제 해결을 요청할 때는 프로그래밍 언어라고 하는 사람이 이해할 수 있는 문…

Day 11 | 전체 글 가져오기/반응형 레이아웃/글 상세페이지

Tue, 21 Feb 2023 15:00:00 GMT

전체글을 가져오는 기능을 필요로 하는 페이지가 점점 많아지다보니 페이지마다 동일한 코드를 작성할 수 없었다. 그래서 Hook으로 만들어 필요한 정보를 리턴해 원하는 페이지에서 데이터를 가져가다 쓸…

Day 10 | 온라인 유저/레이아웃/글작성 모달창

Tue, 21 Feb 2023 15:00:00 GMT

서버에서 전체 유저 리스트를 받아와 현재 온라인인 유저만 불이 들어오도록 했다. 일단 useQuery를 사용한 서버의 전체 유저 데이터를 받아왔다. 그리고 실시간으로 접속중인 유저의 데이터는 so…

프로그래머스 | #Lv1 "정수 제곱근 판별"

Tue, 21 Feb 2023 15:00:00 GMT

임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을…

프로그래머스 | #Lv1 "평균 구하기"

Tue, 21 Feb 2023 15:00:00 GMT

정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. - arr은 길이 1 이상, 100 이하인 배열입니다. - arr의 원소는 -10,000 이상 10…

프로그래머스 | #Lv1 "약수의 합"

Tue, 21 Feb 2023 15:00:00 GMT

정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. - n은 0 이상 3000이하인 정수입니다. 약수를 구해서 모든 약수의 합을 구하는 문제였다. 약수…

Day 9 | 유저 실시간 접속상태

Sat, 18 Feb 2023 15:00:00 GMT

socketio로 유저 접속 시 백에서 배열에 저장해놨다가 중복검사를 해서 돌려주는 코드를 작성했었다. 그 배열을 돌려주는 객체에서 토큰과 유저명을 가져와 로그인중인지 확인 하는 방법을 선택했지만…

Day 8 | 랜덤 포스트 ID

Sat, 18 Feb 2023 15:00:00 GMT

글을 누르면 해당 글의 페이지로 이동되는 기능을 추가했다. 일단 글을 누르면 서버로 글의 번호를 보내고 몽고디비에서 params의 id와 게시물의 번호가 동일한 글을 가져와서 돌려준다. 새 글을…

Day 7 | 랜딩페이지 레이아웃/글 작성/React Query

Sat, 18 Feb 2023 15:00:00 GMT

메인 랜딩페이지를 그냥 기본적인 구조로 만들었다. - NavBar: 로고와 로그인/로그아웃/내정보 기능 - Write: 바로 글 작성 할 수 있는 공간 - TopPosts: 좋아요를 많이 받은 순…

Day 6 | 토스트/로그인/회원가입/정규표현식

Sat, 18 Feb 2023 15:00:00 GMT

레드핫 토스트 라이브러리를 설치해서 성공/실패 시 토스트알림으로 나오게 구현했다. 예를들어 로그인 컴포넌트에서 토스트를 하면 랜딩페이지로 넘어가면서 토스트가 먹통이 되는 경우가 생겼는데, 이때 각…

[Mac] 터미널(Terminal) 꾸미기

Sat, 18 Feb 2023 15:00:00 GMT

iTerm2과 Oh My Zsh를 이용해서 터미널을 커스텀 해봤다. - 사용자 이름 변경 + 이모티콘 - 테마 바꾸기 - New line 적용하기 - VisualStudio Code에 적용하기 피…

백준 | #10926 "??!"

Sat, 18 Feb 2023 15:00:00 GMT

백틱(\) 기호와 ${변수} 를 사용 해서 문자열과 변수를 같이 출력하는 문제였다. 반응형

Day 5 | React Query/CSS-in-JS

Sat, 18 Feb 2023 15:00:00 GMT

유저 로그인 상태 쿼리 키 관리하는 커스텀 훅 유저 정보 가져오는 쿼리 키 관리하는 커스텀 훅 이렇게 두 개 만들어서 필요한 컴포넌트나 페이지에서 깔끔하게 두줄로 원하는 데이터를 가져올 수 있게…

Day 3,4 | React Query/웹팩개발용,배포용구분)

Sat, 18 Feb 2023 15:00:00 GMT

이번 주말동안 크게 한 것은 로그인 상태관리(서버)를 Redux에서 ReactQuery로 바꿨다는 점 작업하는동안 크게 느꼈던 것 부터 적고가자.. - Redux는 클라이언트의 상태관리, Reac…

Day 2 | Schema 작성/유저 가입 기능/React Query/Redux

Sat, 18 Feb 2023 15:00:00 GMT

MongoDB에 저장할 데이터 구조 즉, schema를 작성하고 외부에서 사용할 수 있도록 export 했다. 일단은 유저 회원가입 및 로그인에 필요한 내용만 작성했다. root에서 model 디…

Day 1 | Express/MongoDB/Mongoose/Webpack 설정

Sat, 18 Feb 2023 15:00:00 GMT

한 문장으로 여러사람들에게 동기부여와 여러 메세지들을 담을 수 있는 공간을 제작하고 싶었다. 개인 프로젝트를 제작하기 위해 서버를 구축하는 법부터 알아야했다. Node, Express, Mongo…

백준 | node.js 문제 풀이법

Fri, 17 Feb 2023 15:00:00 GMT

백준에서 Node.js로 입력을 받는 방법은 크게 두 가지가 있다. - readline 모듈 - fs 모듈 - readline보다 fs모듈을 사용하는 것이 더 빠르다. 위 코드는 백준 언어 도움말…

[Git] 에러 모음 및 해결집

Fri, 17 Feb 2023 15:00:00 GMT

내가 직접 겪고 해결한 에러들을 모아둔 글이다. 새로운 에러를 맞이할 때마다 업데이트할 예정. 해당 디렉터리를 다시 add 하기 위해 git 캐시 제거 .git 파일 검색 root 경로의 .git…

[Github] 리드미(README) 꾸미기

Fri, 17 Feb 2023 15:00:00 GMT

Markdown 언어를 이용해 작성한다. - 기술 스택이나 사용 툴 등을 간결하게 표현하고 싶을 때 - 인스타, 블로그 등 다양한 바로가기 링크들을 깔끔하게 나타내고 싶을때 - 로고와 공식컬러를…

[Git] Git & CLI 명령어

Fri, 17 Feb 2023 15:00:00 GMT

Mac 사용자의 기준에서 작성되었음 명령어 인터페이스는 (마우스나 각종 UI 컴포넌트 대신) 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식이다. 반응형

[Git] 설치 및 사용법

Thu, 16 Feb 2023 15:00:00 GMT

Mac 사용자의 기준에서 작성되었음 깃은 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템이다. 홈브루를 통해 깃과 VScode…

프로그래머스 | #Lv1 "자릿수 더하기"

Thu, 16 Feb 2023 15:00:00 GMT

자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. -…

프로그래머스 | #Lv1 "짝수와 홀수"

Thu, 16 Feb 2023 15:00:00 GMT

정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요. - num은 int 범위의 정수입니다. - 0은 짝수입니다. 입력 받은…