TIL

시작하기전 자바스크립트 어디에 쓸까? 본래는 웹 브라우저에 복잡한 동적 기능 처리를 목적으로 사용되기 위한 언어이다. node.js 와 같은 서버 환경에서도 사용되며 자바스크립트를 기반으로하는 많은 웹 앱 프레임워크들이 존재하여 널리 쓰이고 있다. 왜 배울까?

배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형임\[] 대괄호를 사용해 생성한다.key가 순서가 있는 index이고 이를 활용해 접근할 수 있는 특수한 객체형 자료라고 볼 수 있음순서가 있는 자료를 저장하고 관리하는 용도에 특화된 객체라고 생각하자배열 요

항해 입학 시험을 제출 후기, 제출을 위한 배포과정에 대해 기록해보았다 항해99 입학 시험 웹 개발 종합반 수업 내용을 베이스로 한 시험이었다. 어떤 간단한 기능 구현 문제가 주어지면 구현하고 클라우드 인스턴스에 배포하면 시험 완료! 시험 내용물을 언급하는 건

Day2 - 배열 다루기 (1) 에서 미처 다루지 않았던 배열 조작 함수들을 알아보았다.배열 내부의 요소 각각에 대해 내부 콜백 호출 결과를 만들어 새로운 배열로 반환한다.새로운 배열 요소를 생성시킬 함수로 순서대로 다음과 같은 세가지 매개변수를 가진다.현재 처리할 요

함수 코드의 집합을 나타내는 자료형 작업을 수행하거나 값을 계산하는 문장의 집합으로 구성된 블록 중 하나임 왜쓸까? 재사용 유사한 로직에 대한 처리를 반복하여 수행하지 않고 함수로 한 번 정의해두고 재사용한다. 가독성 복잡한 로직들을 하나의 역할만 수행하

Day5 - Javascript 함수 에서 다루지 못한 자바스크립트 함수에 대해 좀 더 공부해보고 기록하였다.다른 코드의 파라미터로 전달하는 함수를 콜백함수라고 한다.어제 자바스크립트의 함수는 일급객체 라고 언급했었는데 일급객체 가 되는 그 조건 중 하나가 콜백함수를

실습과제 보기 실습과제 1. > number 숫자 자료형 핸들링 시 숫자가 아닌 잘못된 결과를 얻었을 때 나오는 변수로 타입은 number 임 2. > true 빈 배열은 object형 자료이고 undefined가 아님. 따라서 ! 를 붙여 논리형으로

이번 주는 알고리즘 및 언어 학습 주차라 알고리즘 문제를 많이 풀게 되었다.오늘은 개인적으로는 1문제만 풀었고 스터디 팀원들끼리 풀었던 문제들에 대해 대화를 나누고 코드리뷰하는 시간을 가졌다.재밌는 문제라 간단하게 리뷰해보려 한다.프로그래머스 - 키패드 누르기문제를 요

HTML에서 엘리먼트 구조에 대한 스타일을 적용하고자 할 때 늘 flex와 grid 를 잘 몰라 고통받았었다.웹 디자인툴로 만들어서 복붙하거나 구글링해서 찾아서 넣는 식으로 대충 때우고는 했었다.

HTML에서 엘리먼트 구조에 대한 스타일을 적용하고자 할 때 늘 flex와 grid 를 잘 몰라 고통받았었다.웹 디자인툴로 만들어서 복붙하거나 구글링해서 찾아서 넣는 식으로 대충 때우고는 했었다.그마저도 속성 하나하나들이 뭔지를 몰라서 입맛대로 수정하는 것도 불가능했다

배열은 아니지만 인덱스로 접근할 수 있고length 속성을 가지는 특수한 객체 가져 배열 처럼 보이는 객체배열에 있는 기본 기능을 제공하지 않게 하거나 기존 배열과 차별화하여 특정 기능만을 제공하게 한다거나 할 때 사용한다고 한다.배열처럼 인덱스로 접근하여 값을 가져올

JWT Authentication에 대해 학습하였다인증에 필요한 정보들을 암호화 시킨 토큰을 말함JWT(Access Token) 를 Http 헤더에 같이 넣어 서버가 클라이언트를 식별하도록 한다.aaaaa.kkkkk.zzzzz. 을 구분자로 나누어지는 세 문자열의 조합

를 간단하게 알아보았다.솔직히 아직 이해가 잘 안되고 어렵게 느껴져서 짧게나마 알게 된 부분들을 정리해보려고 한다.추후에 더 강해지면서 내용을 업데이트 해볼까 한다.DOM기존 DOM의 경우도 변경된 부분에 대한 업데이트를 하지만 실제 DOM구조의 특정 요소에 접근해 C

화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 일치시키는 것을 의미한다.부모컴포넌트와 자식 컴포넌트 간의 데이터가 양방향으로 흐름둘 중 하나만 변경되어도 함께 갱신된다.HTML(뷰)과 jav

예외란 뭘까 일반적으로 예외라 하면 런타임 도중 발생하는 에러를 말한다. 코드동작을 방해하는 조건 같은 것이라고 설명하고 있다. 구문오류 는 런타임 이전에 식별할 수 있다고 치고 예외는 개발자의 논리적 실수 또는 사용자에 의해 발생될 수 있는 유사상황 같은 것

에 대해 알아보자리액트 컴포넌트가 어떻게 돌아가는지 확인하기 앞서 컴포넌트가 무엇이고 어떤게 있는지 알아보자In a React application, the basic structure item is a component. Developers use them to sp

를 알아보자

을 알아보자!사실 브라우저가 어떻게 동작하여 사용자게에 페이지를 보여주는지도 잘 모르는 상태에서 어쩌다보니 리액트의 렌더링 방식을 먼저 접하게 된 것 같다.사용자에게 웹 페이지가 보여지기까지의 과정 중 브라우저의 동작에 대해 간단하게 요약해 정리해보았다.하나의 웹 사이

검색엔진 최적화(search engine optimization) > 검색 엔진 최적화는 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정이다. 검색엔진이 웹 페이지의 자료들을 수집해서 검색 우선순위를 매기고 순위에 따라

react setState() 복습하면서 함수형 업데이트와 일반형 업데이트의 차이로 batch를 하느냐 마느냐가 나오는데,왜 batch update를 하고, 함수형 업데이트는 batch update를 하지 않는지 이해해보면 좋을거 같습니다.automatic-batchi

를 알아보자ES2021에서 나온 문법으로 객체의 내부 속성 nullish check를 보다 간결하게 해줌선언된 객체에 대해 사용할 수 있다.?. 연산자는 . 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 nullish (null 또는 undefined)이라면, 에러

함수 메모이제이션첫번째 인자로 넘어온 함수를 두번째 인자로 넘어온 의존성 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해준다.useCallback(fn, deps)컴포넌트가 리렌더링되어도 함수를 캐싱하여 남아있도록 해줌특정 함수를 리렌더링 시 새로 만들지

URL과 URI에 대해서 알아보자Uniform Resource Identifier위치나 이름 또는 둘 다로 리소스를 식별한다.인터넷 상에 있는 자원을 나타내는 유일한 주소를 말한다.자원?웹 아키텍처의 일부가 될 수 있는 문서, 파일, 이미지, 웹 페이지 등의 모든 것을

npm i json-server가짜 DB와 API 서버를 생성해주는 패키지실제 서버의 개발 또는 프로덕션 환경의 api를 사용하여 프론트엔드 개발이 힘들다.서버에의 의존성을 줄이고 독립적으로 api가 있는 것 처럼 구성하여 이를 사용함으로써 프론트엔드 개발을 독립적으로

Portal 은 부모 컴포넌트 DOM 계층 구조 바깥에 있는 특정 DOM으로 자식을 렌더링 시켜주는 방법을 제공함child: Element,문자열,Fragment 같은 렌더링할 수 있는 React 자식container: 넣으려는 DOM ElementJSX 컴포넌트는 R

PATCH , DELETE 등의 요청을 할 때 EROFS: read-only file system, open ...라는 오류가 발생했다.아니 뭔 read-only 인가 싶어서 구글링을 좀 해보고 힌트를 얻어 해결했던 것 같다.This error is most often

json-server 관련 어제 해결했던 문제가해결은 잘 되었는데 실제로 배포해보니까 복사해둔 파일 읽기가 오락가락 한지어쩔 때는 복사하기 전 db.json을 읽고 어쩔 떄는 /tmp로 복사해서 쓰기작업하는 db.json을 읽고 그랬다.아마 복사가 아니라 싱크를 맞춰주

최종 프로젝트를 시작 하기 전 했었던 두번의 프로젝트를 겪으면서 느낀 것이 있었다.프로젝트가 점점 복잡해지고 컴포넌트나 함수들을 다양한 이름이나 계층의 폴더에 두고 import 해서 사용하다보니 import 경로 깊이가 너무 깊어져 사용이 힘들고 알아보기도 힘들었다.n

stateful 양방향 통신이라는 것만 알고 있었지 한 번도 사용해보거나 공부해본 적은 없는 웹소켓이었다. 최종프로젝트 때 활용이 확정적이라 미리 간단하게 개념에 대해 공부해보기로 하였다.

항해 최종프로젝트를 하면서 `webRTC`로 사용자들 간 영상/음성 연결을 구현하게 되었다. 전혀 처음들어보았던 기술이라 간단하게 어떤 것인지 알아보는 시간을 가졌다.

리액트 앱 배포 자동화를 위한 전체 과정을 요약하여 정리했다. 각각의 인프라, 툴, 서비스들이 무엇이고 왜 사용하는지는 설명하지 않는다. 예전에 맨 위의 이미지로 그려놓았던 흐름을 보고 다시 해보았다 과정 S3, CloudFront 사용을 위한 AWS 계정

React Strictmode란

svg컴포넌트를 만들었는데 그 전에 svg를 못 가져오는 것 같다!nextjs와 storybook에서 svg파일을 컴포넌트처럼 사용하기 위해 @svgr/webpack이라는 라이브러리를 사용하고 있었고 svg파일을 react component로 변환해주는 웹팩로더 설정을

미니 프로젝트를 하는데 백엔드 서버 api의 응답 데이터 포맷이 snake_case로 되어있었다.하지만 나는 이미 타입스크립트로 camelCase를 사용하여 타입을 정의하고 테스트를 위한 msw의 handler api들도 이미 camelCase로 사용하고 있었고 cam

미니 프로젝트를 진행하는데 Styled-Components를 써서 css를 적용하는데ThemeProvider를 통해 공통 스타일 속성을 사용해 일관성 있게 컴포넌트를 스타일링하고다크모드를 사용하고 있었다.위 코드의 ThemeProvider는 다크모드 적용때문에 한번 더

nextjs는 정말 어려운 것 같다.. nextjs에서 서버사이드렌더링을 구현에서 불필요한 중복 방지를 위해 삽질했던 경험을 기록했다.ISR을 적용해야되는 페이지를 제외하고 모든 페이지에 대해서 jwt토큰을 통해 회원 정보를 조회하는 api를 서버사이드 렌더링으로 가져

항해 최종 프로젝트로 게임서비스를 만들었다. 게임이다보니 팀원들이 배경음이나 효과음을 넣으면 어떻겠냐고 해서 구현했는데 효과음의 경우는 문제 없이 잘 동작했지만 배경음을 적용하면서 발생한 문제가 있었다.

공식문서를 활용해 nextjs(13v 기준)의 middleware에 대해 알아보자Middleware allows you to run code before a request is completed, then based on the incoming request, you

브라우저 렌더링 과정 요약했던걸 좀 더 과정 그 자체를 파악하는 것에 중점을 둬 한번 더 요약해보았다.브라우저의 렌더링이 시작되는 것은 위 아키텍쳐의 11번으로부터 시작된다.주소창에 직접 주소를 입력하던가 클릭을 통해 웹 페이지로 사용자가 접근하면 클라이언트에서 해당되

REST(Representational State Transfer)는 소프트웨어 개발 아키텍처 스타일이며, HTTP 프로토콜을 준수합니다. 자원(resource)을 이름(representation)으로 구분하여 해당 자원의 정보(state)를 주고 받는 모든 것을 의미

js 엔진은 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행한다. 런타임 이전에 실행 컨텍스트에 의해 소스코드 평가 과정에서 스코프에 등록되고 이를 마치 코드의 제일 위에 있는 것처럼 변수가 어디에 위치하던지와 상관없이 어디서든지 변수를 참조할 수

우리는 개발할 때 여러 프레임워크 또는 라이브러리를 사용하게 되는데어떤 것은 프레임워크라고 불리고 어떤 것은 라이브러리라고 불린다.프레임워크와 라이브러리의 차이에 대해 알아보자프레임워크는 애플리케이션 개발 시 코드의 품질, 필수 코드, 알고리즘, 암호화 등 여러 기능들

한 번 처리한 데이터를 임시로 저장소에 저장하는 것을 말한다.임시로 데이터를 저장해두고 같은 요청이 왔을 때 해당 저장소에서 바로 읽어와 응답을 해주어 성능과 응답속도를 향상시켜줄 수 있는 기술이다.자주 변경되지는 않지만 요청이 많은 데이터를 처리할 때 네트워크 부하,

Java에서는 클래스의 인스턴스 본인 참조를 위해 this를 많이 사용하고 있었고 거의 해당 역할로만 사용했었어서 익숙했다. Javascript를 사용할 때 리액트를 사용하다보니 클래스를 사용할 일이 없었고 실제로도 this를 사용해본적이 없어서 지금까지 리액트로

react query와 react-infinite-scroller 라이브러리로 목록 무한 스크롤 조회를 구현하게 되었다.목록을 스크롤로 내려 조회해오고 목록에 데이터를 추가한다던가 하는 것들은 잘 동작했는데 목록에서 데이터를 지울 때 문제가 발생했고 온갖 추측, 구글링

항해 최종프로젝트에서 오디오/비디오 채팅 기능이 있었고 이 때 일부 네트워크 간 P2P 연결이 안되는 문제를 해결하기 위해 TURN 서버를 구현했었다.급하게 구현하느라 기록하지 못했던 점, 복습차원 겸, 계속 켜둬서 AWS 과금이 계속 발생했기에 평생무료인 Oracle

Semantic은 '의미의', '의미론적인'이라는 뜻을 가진 형용사이다. 따라서 시맨틱 태그란 의미가 있는 태그를 말한다.div span같이 의미가 없는 태그는 태그 이름만 보고 어떤 내용인지 유추할 수 없다.form table article 등 의미가 있는 태그는 내

nextjs에서 quill editor를 적용하면서 발생한 문제를 해결한 과정을 기록했다.

아직 너무 생소한 성능과 웹 접근성. 막 부딪히다보면 익숙해지지 않을까라는 생각으로 lighthouse를 돌려보고는 한다.nextjs 빌드 후 실행해서 lighthouse를 돌려보니 웹 접근성 항목에서 아이콘 버튼에 대해 접근 가능한 이름이 없다고 나타내주었다.찾아보니

getServerSideProps 메소드에서 react-query를 이용해 서버사이드에서 데이터를 패치하고 페이지에 전달하는데 이 컴포넌트를 테스트하다가 발생한 문제를 해결했던 과정을 기록했다.특정 페이지 컴포넌트를 테스트하는데 이 페이지는 getServerSidePr

nextjs SSG 연습기록!

알고보니 별 것 아니었던 nextjs앱을 vercel 에 배포한 뒤 발생했던 응답시간 지연 문제를 파악했던 과정에 대해 기록했다. 문제상황 nextjs앱을 vercel에 배포했는데 nextjs로 처리하는 요청에 대한 응답이 매우 느렸다! 정확히는 SSR, Rout

배포환경에서 정적으로 빌드된 페이지에 접근할 때 다음과 같은 오류가 발생했다.React 앱에서 발생하는 오류 중 하나입니다. 이 오류는 주로 React 앱이 프로덕션 모드로 빌드된 후 발생합니다.리액트 앱이 프로덕션 환경에서 빠르고 경량화된 코드 생성을 위해 코드 압축

자잘자잘

SVG 아이콘을 컴포넌트로 사용할 때 RTL에서 발생했던 문제를 해결해보았다.애플리케이션에서 SVG 아이콘들을 직접 public 경로에 두고 사용하는데 이들을 컴포넌트화 해서 사용하고 있었다.@svgr/webpack 라이브러리를 활용해서 컴포넌트로 import해서 사용

Nextjs에서의 Image 사용에 있어 최소한의 최적화 시도는 해봐야지 않겠나라는 마음가짐으로 공부하고 적용한 과정을 기록해나가고 있다.

Nextjs를 사용하며 next / Image 컴포넌트를 사용해서 보여지는 이미지들은 자동 또는 수동으로 최적화할 수 있었지만 Quill 에디터 내부에 삽입하는 이미지들은 그렇지 않았다.이들을 가능한만큼 최적화해봤던 경험을 기록했다.alt 속성없이 이미지가 에디터에 첨

react-query의 useIsMutating hook을 활용해 전역으로 mutation 상태를 처리해보자 문제상황 > 짤로 요약 카드를 등록(POST)할 때 상황이다. 버튼을 클릭하면 카드 등록 API를 호출하고 성공하면 닫히며 목록에 생성한 카드가 식별되는

userEvent, fireEvent 차이를 알아보자 fireEvent React Testing Library에서 제공하는 유틸리티 함수 중 하나로 테스트 중에 이벤트를 발생시키는 데 사용한다. React 컴포넌트를 테스트할 때 사용자 동작을 모의하고 특정 이벤트

Storybook에 MSW를 적용해보자Service Worker를 사용하여 네트워크 호출을 가로채는 API 모킹 라이브러리브라우저 상에서 백그라운드로 동작하여 지정된 경로의 API 호출을 시도할 때 이를 가로채서 지정된 가짜 응답을 반환하게 해준다.왜 사용했나요??클라