profile
차근차근
태그 목록
전체보기 (60)스파르타코딩클럽(40)내일배움캠프(40)국비지원(21)초보(19)코딩(18)개발자(18)자바스크립트(14)React(10)파이썬(6)리액트(6)typescript(5)trouble shooting(4)JavaScript(4)배열(3)WIL(3)기초프로젝트(2)함수(2)반복문(2)데이터할당(2)Props(2)조건문(2)코딩초보(2)데이터타입(2)Firebase(2)react native(2)modal(2)알고리즘(2)State(2)시간복잡도(1)코딩공부(1)실행컨텍스트(1)튜플(1)최빈값(1)null(1)useEffect(1)useState(1)점근표기법(1)비동기(1)form태그(1)파일불러오기(1)가변성(1)문자열(1)json(1)VariableEnvironment(1)얕은복사(1)filter(1)foreach(1)css자료정리(1)Native Stack Navigator(1)useMemo(1)navigation(1)메서드(1)예외처리(1)reset(1)html(1)useCallback(1)useselector(1)reduce(1)CSR(1)SSR(1)에러(1)cpu(1)IncrementalStaticRegeneration(1)클래스(1)LexicalEnvironment(1)프로젝트(1)StaticSiteGeneration(1)spa(1)재사용(1)배우는중(1)useLocation(1)github(1)reactnative(1)집합(1)JSX(1)next.js(1)ssg(1)변수(1)참조형데이터(1)rendering(1)리액트네이티브(1)Map(1)최댓값(1)리액트렌더링(1)스파르타(1)스크립트실행오류(1)ISR(1)children(1)ServerSideRendering(1)git(1)React.memo(1)undefined(1)콜백지옥(1)promise(1)id(1)깊은복사(1)불변성(1)동기(1)함수형업데이트(1)리스트(1)한줄쓰기(1)콜스택(1)기본형데이터(1)불변객체(1)ClientSideRendering(1)객체(1)딕셔너리(1)컴포넌트(1)선언적프로그래밍(1)
post-thumbnail

Next.js | 프로젝트 시작

프로젝트 생성 명렁어프로젝트 생성 명령어 (typescript 포함)localHost 실행 명령어프로젝트 생성이 완료되면 아래와 같은 폴더 구조를 볼 수 있다.그리고 next.js 프로젝트를 생성하면 기본적으로 react, react-dom 역시 설치된다.package

3일 전
·
0개의 댓글
·

React | React.Memo, useMemo, useCallback

지금까지 리액트를 사용하면서 '최적화'에 대한 생각은 그렇게 많이 하지 못했다. 사용해 본 React hook은 useState, useEffect, useRef 정도? 솔직히 지금까지 useMemo나 useCallback은 이름만 알고 있었지 무슨 기능을 하는지,

3일 전
·
0개의 댓글
·

CS | Rendering 종류

브라우저의 Rendering 기본적인 렌더링의 설명이다. 아래 링크에 자세한 자료와 설명이 있다. 영상 - https://www.youtube.com/watch?v=oLC_QYPmtS0 자료 - https://davidhwang.netlify.app/Develop

4일 전
·
0개의 댓글
·
post-thumbnail

Alert Modal 컴포넌트 재사용에 관한 고민

고민 사항 아래와 같이 댓글을 쓰는 페이지가 있다. 아래와 같은 기본적으로 제공하는 alert를 쓰기 싫어서 컴포넌트로 Alert Modal을 만들기로 했다. 새로 만든 Alert Modal을 보면 이렇게 생겼다. 여기서 Alert에 표시되는 텍스트를 여러 경우

5일 전
·
0개의 댓글
·

Typescript에서 전역 모달창 구현

아래 링크에서 설명이 잘 되어있다.https://mygumi.tistory.com/406지금까지는 alert, confirm 모달을 따로 만들고 모달을 사용할 컴포넌트로부터 import한 후 사용했다. 그러다보니 state관리가 너무 힘들어졌고 props를 내

2023년 1월 28일
·
0개의 댓글
·

Typescript에서 children을 사용하는 방법

아래 포스트에 잘 설명되어있다.https://blog.logrocket.com/using-react-children-prop-with-typescript/

2023년 1월 28일
·
0개의 댓글
·

firebase에서 가져 온 데이터를 제대로 렌더링하지 못하는 현상

결과 화면(Result.tsx)에서 firebase 유저의 displayName을 설문조사 테스트의 결과(result)로 update하려 했다.그러나 Result.tsx의 하위 컴포넌트인 CommentsList.tsx와 Comment.tsx에서 authService.c

2023년 1월 27일
·
0개의 댓글
·
post-thumbnail

Typescript | To-Do List를 typescript로 만들기 1

Typescript로 To-Do List를 만들다가 다음과 같은 오류를 만났다.item의 type은 object인데 object에는 isDone이라는 property가 없다고 한다.위 그림에서 isDone에 오류가 발생한 것을 빨간 밑줄로 확인할 수 있다.일단 todo

2023년 1월 18일
·
0개의 댓글
·

Typescript 기초 | 초기 설정

Typescript 초기 설정 > npm init -y 프로젝트 초기 설정을 하겠다는 의미이다. 터미널에 위 명령어를 입력하고 나면 package.json 파일이 만들어지고 아래와 같다. > npm install typescript 또는 npm install -

2023년 1월 17일
·
0개의 댓글
·

React-Native | 수정 로직으로 변경된 값이 화면에 바로 렌더링되지 않는 오류

리액트 네이티브 프로젝트를 하면서 아래와 같은 문제가 있었다.모달창에 input을 하고 그 데이터들은 update 로직을 거친다.모달창이 꺼진 후, 화면에 변경된 값들이 바로 최신화가 되기를 기대했으나,그러지 못했다.다른 스크린으로 이동 후 해당 스크린에 복귀해야 최신

2023년 1월 16일
·
0개의 댓글
·

Weekly I Learned (230116)

처음 네이티브를 접했을 때, 리액트로 웹 앱을 만드는 것과 많이 비슷하다는 느낌을 받았다.다만, 같은 기능의 내장 함수나 메서드 단어의 차이가 있었고 import를 해야 쓸 수 있는 태그들이 있어서 좀 더 헷갈리는 경우도 있었다. (하지만 적응하고 나니 크게 이질감을

2023년 1월 16일
·
0개의 댓글
·

React-Native | Native Stack Navigator

React Navigation의 하위 라이브러리로 모바일 스크린 상단(헤더 부분)에서 스크린(컴포넌트)간의 이동을 도와주는 라이브러리이다.사용하기 위해서 터미널에 아래 명령어를 입력하여 우선적으로 설치한다.그리고 import하고 변수에 할당해주어야 한다.

2023년 1월 7일
·
0개의 댓글
·

React-Native | React Navigation

리액트 네이티브에서 리액트의 react-router와 같은 역할을 하는 라이브러리가 Navigation이다. 그리고 라우팅의 역할 뿐만아니라, 기본적인 레이아웃들도 제공해주는 고마운 라이브러리이다. drawer나 bottom tabs, modal 등 유용하게 사용할 수

2023년 1월 7일
·
0개의 댓글
·

promise 객체

프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다.pending(대기): 비동기 처리가 완료되기 전의 상태fulfilled(완료): 비동기 처리가 완료되어 프로미스 값을 반환한 상태rejected(실패): 비동기 처리 실패 또는 오류이후 내용 추가하기

2023년 1월 5일
·
0개의 댓글
·
post-thumbnail

동기/비동기

기본적으로 자바스크립트는 동기적으로 작업을 처리한다.동기적이라 함은 순서대로 작업을 처리한다는 뜻이다.한 작업에 대한 요청과 결과가 동시에 일어난다.비동기적이라 함은 한 작업의 요청에 대한 결과가 바로 나오지 않는다는 뜻이다.그리고 요청에 대한 응답을 기다리지 않으니

2023년 1월 4일
·
0개의 댓글
·
post-thumbnail

useLocation의 활용하여 현재 위치의 컴포넌트에서 id 얻어내기 / id 중복 에러

이번 프로젝트인 '프로젝트 관리형 어플리케이션'을 만들면서 한 가지 어려운 점이 있었다.이러한 형태의 칸반보드는 보통 Todo를 클릭하면 해당 Todo와 관련된 상세페이지로 넘어간다.처음에는 상세페이지의 코멘트를 모두 불러오게 하였다.이때, 해당 Todo외에 다른 To

2023년 1월 1일
·
0개의 댓글
·
post-thumbnail

useSelector 사용시 발생한 에러

REDUX-Toolikt과 thunk를 활용하여 '프로젝트 일정 관리 앱'을 만드는 프로젝트를 진행했다.메인 화면에서 해당 박스를 눌렀을 때, 상세 페이지로 화면이 전환되도록 설계했다.아래는 상세페이지이다.여기서 각 상세페이지에 해당하는 id를 가진 todo의 데이터를

2022년 12월 29일
·
0개의 댓글
·

Today I learned (221222) - 30

useEffect는 컴포넌트가 렌더링이 될 때마다 특정 작업을 할 수 있도록 도와주는 hook이다.그렇기 때문에 상태가 변함에 따라 렌더링이 일어나는 useState와 함께 쓸 때,아래 코드와 같이 '무한 렌더링'이 발생하는 경우가 생긴다.위 코드에서 전체 흐름은 아래

2022년 12월 22일
·
0개의 댓글
·

Today I learned (221220) - 29

setState를 사용할 때 함수로 업데이트 할 수 있다. 두 방식에서는 차이가 있다. 아래 코드로 알아보자.onClick에 버튼을 눌렀을 시 동작에 setNumber(number + 1)를 3번 하였다.그래도 버튼 클릭을 하면 number는 1씩 증가한다.이는 세 번

2022년 12월 20일
·
0개의 댓글
·

Today I learned (221219) - 28

브라우저에서 동적으로 변하는 UI를 랜더링을 하기 위해 기존 방식으로는 직접 DOM 객체를 조작하는 명령형 프로그램 방식을 사용했다.일단 기존의 방식과 리액트의 선언적 프로그래밍이 어떻게 다른지 알아야한다.참고로 명령형은 어떻게(HOW)를 중시하기 때문에 프로그램의 제

2022년 12월 20일
·
0개의 댓글
·