Development Study
-
[ComputerScience] 비전공자의 시선으로 바라본 TCP와 UDP, 이쯤되면 다시 한번 복습해 봐야겠죠? TCP, UDP, 근본적인 개념이라 이미 알고 있는 내용이긴 한데 다시 자세히 말해보라하면 기억이 잘 나지 않으신가요? 그렇다면 다시 한 번 봐야겠죠! medium.com
[ComputerScience] 비전공자의 시선으로 바라본 TCP와 UDP, 이쯤되면 다시 한번 복습해 봐야겠죠?[ComputerScience] 비전공자의 시선으로 바라본 TCP와 UDP, 이쯤되면 다시 한번 복습해 봐야겠죠? TCP, UDP, 근본적인 개념이라 이미 알고 있는 내용이긴 한데 다시 자세히 말해보라하면 기억이 잘 나지 않으신가요? 그렇다면 다시 한 번 봐야겠죠! medium.com
2024.01.08 -
이 글은 코딩 테스트를 풀다가 다른 사람들의 풀이를 확인하던 도중 신기한 코드를 발견해서 알아본 내용들을 정리한 글이에요. 정말 신기하게 생겨서 공유하고자 이 글을 작성합니다. 제너레이터 함수란 무엇일까요? 이런 상상을 해봐요. 평화로운 오후, 당신은 서재에서 시간을 보내고 있었어요. 평화롭게 읽고싶었던 책을 읽고 있었는데, 갑자기 중요한 전화가 온 거에요. 책에 책갈피를 꽂아두고 잠시 덮어두고 전화를 받았어요. 업무 관런해서 질문이 들어왔었네요. 당신은 대답을 해주고 다시 책을 펼쳐 정확히 읽던 부분부터 읽기 시작했습니다. 제너레이터 함수도 이와 비슷하게 돌아가요. 함수의 실행을 '일시 중지'했다가 '다시 시작'할 수 있다는 것이죠! 어떻게 작동할까요? function 키워..
[JavaScript ES6] function*? yield? 이거 자바스크립트 맞아?? 제너레이터 함수(Generator Functions)를 알아보자이 글은 코딩 테스트를 풀다가 다른 사람들의 풀이를 확인하던 도중 신기한 코드를 발견해서 알아본 내용들을 정리한 글이에요. 정말 신기하게 생겨서 공유하고자 이 글을 작성합니다. 제너레이터 함수란 무엇일까요? 이런 상상을 해봐요. 평화로운 오후, 당신은 서재에서 시간을 보내고 있었어요. 평화롭게 읽고싶었던 책을 읽고 있었는데, 갑자기 중요한 전화가 온 거에요. 책에 책갈피를 꽂아두고 잠시 덮어두고 전화를 받았어요. 업무 관런해서 질문이 들어왔었네요. 당신은 대답을 해주고 다시 책을 펼쳐 정확히 읽던 부분부터 읽기 시작했습니다. 제너레이터 함수도 이와 비슷하게 돌아가요. 함수의 실행을 '일시 중지'했다가 '다시 시작'할 수 있다는 것이죠! 어떻게 작동할까요? function 키워..
2023.12.12 -
들어가며 React Native Expo를 통해 프로젝트를 생성했다면, 이제 각각의 화면마다 이를 넘겨주는 기능이 필요하다. 이에 TypeScript와 함께 사용하는 방법을 보도록 하겠다. React에 React Router DOM이 있듯이 React Native에는 react-navigation이 있다. 이 글에서는 프로젝트를 생성한 상태에서 "home", 그리고 "login"을 만들어 두 페이지끼리 이동하도록 해볼 것이다. 1. Install Packages 먼저 네비게이션과 관련되어있는 모듈들을 설치한다. # 이 부분은 이상하게 npx expo를 통해 설치하면 오류가 발생한다. yarn add @react-navigation/stack # 나머지 패키지 설치(expo cli 사용) npx expo..
React Native Expo Navigation 설정하기 (+TypeScript)들어가며 React Native Expo를 통해 프로젝트를 생성했다면, 이제 각각의 화면마다 이를 넘겨주는 기능이 필요하다. 이에 TypeScript와 함께 사용하는 방법을 보도록 하겠다. React에 React Router DOM이 있듯이 React Native에는 react-navigation이 있다. 이 글에서는 프로젝트를 생성한 상태에서 "home", 그리고 "login"을 만들어 두 페이지끼리 이동하도록 해볼 것이다. 1. Install Packages 먼저 네비게이션과 관련되어있는 모듈들을 설치한다. # 이 부분은 이상하게 npx expo를 통해 설치하면 오류가 발생한다. yarn add @react-navigation/stack # 나머지 패키지 설치(expo cli 사용) npx expo..
2023.12.07 -
들어가며 크로스 브라우징 이슈는 현대 웹 개발의 중요한 과제입니다. 오늘날, Microsoft Edge, Safari, Chrome, Arc와 같은 다양한 브라우저가 존재하면서, 웹 개발자들은 이들 각각의 특성을 고려하여 웹서비스를 개발해야 합니다. 그리고 이러한 상황에서 발생하는 중복과 호환성 문제를 '크로스 브라우징 이슈'라고 부릅니다. 그렇다면, 이 이슈는 왜 발생하는 것일까요? 이 문제를 깊이 이해하기 위해, 먼저 크로스 브라우징의 원인을 살펴보고, 그로 인해 발생하는 문제들을 탐구해보겠습니다. 크로스 브라우징 이슈란? "크로스 브라우징 이슈"는 여러 웹 브라우저 간의 호환성 문제로 인해 발생합니다. 다음과 같이 몇가지 주요한 원인들이 존재합니다 브라우저 간 차이 웹 표준 준수 사용..
크로스 브라우징 이슈가 발생하는 이유는 무엇일까?들어가며 크로스 브라우징 이슈는 현대 웹 개발의 중요한 과제입니다. 오늘날, Microsoft Edge, Safari, Chrome, Arc와 같은 다양한 브라우저가 존재하면서, 웹 개발자들은 이들 각각의 특성을 고려하여 웹서비스를 개발해야 합니다. 그리고 이러한 상황에서 발생하는 중복과 호환성 문제를 '크로스 브라우징 이슈'라고 부릅니다. 그렇다면, 이 이슈는 왜 발생하는 것일까요? 이 문제를 깊이 이해하기 위해, 먼저 크로스 브라우징의 원인을 살펴보고, 그로 인해 발생하는 문제들을 탐구해보겠습니다. 크로스 브라우징 이슈란? "크로스 브라우징 이슈"는 여러 웹 브라우저 간의 호환성 문제로 인해 발생합니다. 다음과 같이 몇가지 주요한 원인들이 존재합니다 브라우저 간 차이 웹 표준 준수 사용..
2023.11.27 -
들어가며 굳이 테스트 코드가 필요해?? 그냥 실행해보면서 개선사항들을 찾으면 안되려나? 나는 지금까지 프론트엔드 개발을 접해오면서 이런 생각을 해왔다. 그도 그럴것이 백엔드보다는 테스트가 덜 중요한 것이 이 프론트엔드였고, 프론트엔드에서는 렌더링만 잘하고 화면을 멋지게 잘 구성하기만 하면 된다라는 인식이 널리 퍼져있기 때문이었다. 하지만 이는 내 오판이었다. 실제로 개발을 하면서 규모가 커지고 복잡해지자 어디서부터 오류가 발생하였는 지 찾는 데 걸리는 시간이 훨씬 더 오래 걸리게 되었고, 테스트코드를 작성하지 않음으로 인해 생겨나는 디버깅 시간이 테스트코드를 작성하는 데 걸리는 시간보다 더 길게 걸린다는 사실을 얼마 뒤 알 수 있었다. 그렇다면 테스트코드, 왜 필요한 것이고 어떻게 작성해야 할까? 우아한..
<Jest, Unit Test> 쉽고 빠르게 단위테스트 알아보기들어가며 굳이 테스트 코드가 필요해?? 그냥 실행해보면서 개선사항들을 찾으면 안되려나? 나는 지금까지 프론트엔드 개발을 접해오면서 이런 생각을 해왔다. 그도 그럴것이 백엔드보다는 테스트가 덜 중요한 것이 이 프론트엔드였고, 프론트엔드에서는 렌더링만 잘하고 화면을 멋지게 잘 구성하기만 하면 된다라는 인식이 널리 퍼져있기 때문이었다. 하지만 이는 내 오판이었다. 실제로 개발을 하면서 규모가 커지고 복잡해지자 어디서부터 오류가 발생하였는 지 찾는 데 걸리는 시간이 훨씬 더 오래 걸리게 되었고, 테스트코드를 작성하지 않음으로 인해 생겨나는 디버깅 시간이 테스트코드를 작성하는 데 걸리는 시간보다 더 길게 걸린다는 사실을 얼마 뒤 알 수 있었다. 그렇다면 테스트코드, 왜 필요한 것이고 어떻게 작성해야 할까? 우아한..
2023.11.13 -
들어가며 최근 참여하고 있는 우아한테크코스 프리코스의 1, 2주차를 지나며 그동안 해오던 것과는 다른 방식인 객체지향 프로그래밍을 사용하여 코드를 작성하기 시작했습니다. 이젠 서로 다른 두 방법을 모두 익히게 되어 이를 통해 프로그래밍 그 자체에 대한 더 깊은 이해로 나아가기 위한 초석이 될 것이라 믿고 있습니다. 그리고 여기에 스스로 익힌 클래스에 대한 내용을 정리해두도록 하겠습니다. https://time-map-installer.tistory.com/258 1주차 후기: 숫자야구게임, 그런데 객체로 만든다고? 이 포스팅은 회고 겸 TroubleShooting 겸 한 주 간의 고민과정을 모두 정리해둔 글임을 알립니다 Visit GitHub Repository 프리코스가 그렇게 유명하다던데? 지난 번 ..
[JavaScript] class는 교실이 아니라 객체이다들어가며 최근 참여하고 있는 우아한테크코스 프리코스의 1, 2주차를 지나며 그동안 해오던 것과는 다른 방식인 객체지향 프로그래밍을 사용하여 코드를 작성하기 시작했습니다. 이젠 서로 다른 두 방법을 모두 익히게 되어 이를 통해 프로그래밍 그 자체에 대한 더 깊은 이해로 나아가기 위한 초석이 될 것이라 믿고 있습니다. 그리고 여기에 스스로 익힌 클래스에 대한 내용을 정리해두도록 하겠습니다. https://time-map-installer.tistory.com/258 1주차 후기: 숫자야구게임, 그런데 객체로 만든다고? 이 포스팅은 회고 겸 TroubleShooting 겸 한 주 간의 고민과정을 모두 정리해둔 글임을 알립니다 Visit GitHub Repository 프리코스가 그렇게 유명하다던데? 지난 번 ..
2023.10.27 -
Automatic Batching이란 무엇일까? [[React]] 18에서 나온 새로운 기능, Automatic Batching에 대한 문서이다 여기서 Batching이란, 이벤트 핸들러나 hooks 안에서 상태 업데이트를 묶어서 동작하도록 만들어준다. 즉, 렌더링을 한 번만 일어나도록 해주는 것이다 따라서 Automatic Batching = 자동화된 일괄 렌더링 이라고 생각할 수 있다 사실 생각해보면 이상하다. 기존의 함수 내부에서 여러 setState()를 실행시키면 이미 Batching이 이루어졌을까? 그 이유는 React에는 여러 번의 state update 작업을 Queue에 몰아넣고 일정 주기마다 Queue에 등록된 작업을 순차적으로 일괄 시행하면서 불필요한 리렌더링을 방지하는 특징이 있기..
[Automatic Batching] 리액트 18에 등장한 렌더링 묶음판매Automatic Batching이란 무엇일까? [[React]] 18에서 나온 새로운 기능, Automatic Batching에 대한 문서이다 여기서 Batching이란, 이벤트 핸들러나 hooks 안에서 상태 업데이트를 묶어서 동작하도록 만들어준다. 즉, 렌더링을 한 번만 일어나도록 해주는 것이다 따라서 Automatic Batching = 자동화된 일괄 렌더링 이라고 생각할 수 있다 사실 생각해보면 이상하다. 기존의 함수 내부에서 여러 setState()를 실행시키면 이미 Batching이 이루어졌을까? 그 이유는 React에는 여러 번의 state update 작업을 Queue에 몰아넣고 일정 주기마다 Queue에 등록된 작업을 순차적으로 일괄 시행하면서 불필요한 리렌더링을 방지하는 특징이 있기..
2023.10.06 -
전부터 궁금한 것이 있었다 비동기 처리는 API에서만 할 수 있는 것일까? 사용자가 상호작용하는 모든 것에 API가 들어있지는 않을 텐데, 그렇다면 어떡하지? 이런 질문들이 나를 감싸고 있을 때, 갑자기 스쳐지나가는 질문 하나가 있었다 Web Worker, 이거 Promise랑 다른건가? 생각해보니 궁금해졌다. 둘 다 비동기, 병렬의 키워드를 가지고 있는 개념이 아닌가 그래서 이참에 Web Worker에 대해 알아보기로 했다 Web Worker란 무엇일까? 싱글스레드인 자바스크립트에서 많은 양의 데이터를 받아와 가공해야하는 경우 시간이 오래걸리게 되면서 병목이 발생, 따라서 다른 스레드에서 병렬적으로 처리해주는 역할을 하는 것이 web-worker다 웹 API의 일부 함수는 멀티 스레드로 처리가 되는 것..
UI 버벅임은 이제 그만! Web Worker 를 적절히 이용하여 UX 증진시키기전부터 궁금한 것이 있었다 비동기 처리는 API에서만 할 수 있는 것일까? 사용자가 상호작용하는 모든 것에 API가 들어있지는 않을 텐데, 그렇다면 어떡하지? 이런 질문들이 나를 감싸고 있을 때, 갑자기 스쳐지나가는 질문 하나가 있었다 Web Worker, 이거 Promise랑 다른건가? 생각해보니 궁금해졌다. 둘 다 비동기, 병렬의 키워드를 가지고 있는 개념이 아닌가 그래서 이참에 Web Worker에 대해 알아보기로 했다 Web Worker란 무엇일까? 싱글스레드인 자바스크립트에서 많은 양의 데이터를 받아와 가공해야하는 경우 시간이 오래걸리게 되면서 병목이 발생, 따라서 다른 스레드에서 병렬적으로 처리해주는 역할을 하는 것이 web-worker다 웹 API의 일부 함수는 멀티 스레드로 처리가 되는 것..
2023.10.06 -
.with Route Handlers 목표 : (구) API Routes라고 불리는 현 Route Handler를 활용해서 API를 Mocking해보자 Framework : NextJS 13(App Router) 여기서 사용 할 예시 API는 POST api/v1/users/login 로그인 기능이다. 돌아가는 지 확인만 해 볼 예정으로 간단하게만 mocking 해 볼 예정 1. app directory에 api 경로 생성 우선, API 명세서의 엔드포인트에 맞게 경로를 생성한다. app directory 내부에 다음과 같이 생성한다. app ┗ api ┃ ┗ v1 ┃ ┃ ┗ users ┃ ┃ ┃ ┣ login ┃ ┃ ┃ ┃ ┗ route.ts만약 엔트포인트 끝에 id와 같은 특정 값이 들어오는 경우 ..
[NextJS AppRouter] 초간단 API Mocking 하기(with Route Handlers).with Route Handlers 목표 : (구) API Routes라고 불리는 현 Route Handler를 활용해서 API를 Mocking해보자 Framework : NextJS 13(App Router) 여기서 사용 할 예시 API는 POST api/v1/users/login 로그인 기능이다. 돌아가는 지 확인만 해 볼 예정으로 간단하게만 mocking 해 볼 예정 1. app directory에 api 경로 생성 우선, API 명세서의 엔드포인트에 맞게 경로를 생성한다. app directory 내부에 다음과 같이 생성한다. app ┗ api ┃ ┗ v1 ┃ ┃ ┗ users ┃ ┃ ┃ ┣ login ┃ ┃ ┃ ┃ ┗ route.ts만약 엔트포인트 끝에 id와 같은 특정 값이 들어오는 경우 ..
2023.09.28 -
React 18에 등장한 React Server Components React 18에서 새롭게 도입된 개념인 React Server Component(RSC) 에 대해 살펴봅시다. React Server Components(RSC)란? RSC는 서버에서만 렌더링되어 전달되는 컴포넌트를 의미합니다. 이는 HTML이 아닌 특별한 형태로 서버에서 렌더링되어 클라이언트에게 전달됩니다. 특히, NextJS App Router는 이를 기본적으로 지원합니다. 기존 방식의 문제점 컴포넌트 구조는 다음과 같이 설정됩니다 const App = () => { return ( ) } 기존의 방식은 각 컴포넌트에서 API 호출을 통해 데이터를 렌더링합니다. 이렇게 하면 각 컴포넌트는 자신에게 필요한 데이터만을 받게 됩니다. 각..
클라이언트까지 꼭 데이터가 와야할까? RCS(React Server Components)에 대해 알아보자React 18에 등장한 React Server Components React 18에서 새롭게 도입된 개념인 React Server Component(RSC) 에 대해 살펴봅시다. React Server Components(RSC)란? RSC는 서버에서만 렌더링되어 전달되는 컴포넌트를 의미합니다. 이는 HTML이 아닌 특별한 형태로 서버에서 렌더링되어 클라이언트에게 전달됩니다. 특히, NextJS App Router는 이를 기본적으로 지원합니다. 기존 방식의 문제점 컴포넌트 구조는 다음과 같이 설정됩니다 const App = () => { return ( ) } 기존의 방식은 각 컴포넌트에서 API 호출을 통해 데이터를 렌더링합니다. 이렇게 하면 각 컴포넌트는 자신에게 필요한 데이터만을 받게 됩니다. 각..
2023.09.28 -
오늘은 Next.js 13버전이 Stable이 되고 시간이 흘러 안정되었다고 하여 이를 프로젝트에 적용해보고자 하였고, Page Router였던 12버전 대신 App Router을 사용할 예정이므로 큰 변환점을 중심으로 하여 리뷰해보려고 합니다. 다들 Next.js가 React를 기반으로 한 프레임워크라는 것을 알고계신다는 전제 하에 진행하도록 하겠습니다! 간단하게 알아볼 5가지 특징들(App Router 기준) 여기서 알아볼 5가지는 다음과 같습니다. App Router로 넘어오면서 새로 등장한 app directory App Router로 넘어오면서 변경된 Rendering 설정방법 개선된 Navigation tag, API Routes를 통한 백엔드 접근 보다 개선된 이미지 렌더링을 위해 사용된 1..
[Next.js App Router] Next.js 13 주요 변경사항 알아보기오늘은 Next.js 13버전이 Stable이 되고 시간이 흘러 안정되었다고 하여 이를 프로젝트에 적용해보고자 하였고, Page Router였던 12버전 대신 App Router을 사용할 예정이므로 큰 변환점을 중심으로 하여 리뷰해보려고 합니다. 다들 Next.js가 React를 기반으로 한 프레임워크라는 것을 알고계신다는 전제 하에 진행하도록 하겠습니다! 간단하게 알아볼 5가지 특징들(App Router 기준) 여기서 알아볼 5가지는 다음과 같습니다. App Router로 넘어오면서 새로 등장한 app directory App Router로 넘어오면서 변경된 Rendering 설정방법 개선된 Navigation tag, API Routes를 통한 백엔드 접근 보다 개선된 이미지 렌더링을 위해 사용된 1..
2023.09.18 -
Spring Boot를 사용하기 위해 학습을 하던 중, 문득 HTTP 요청에 따른 어노테이션들이 무엇이 있고, 어떤 일을 하는 지 궁금했습니다. 그래서 저는 이에 대해 알아보기로 하였고, 나중에 이 글을 읽고 도움이 되었으면 하는 마음에 새 글을 작성하기로 하였습니다. @GetMapping 은 무엇인가요? @GetMapping은 Spring Framework에서 제공하는 annotation이며, 주로 HTTP GET 요청을 처리하는 메소드에 사용됩니다. 이는 @RequestMapping의 특수한 형태라고 볼 수 있습니다. 기본적으로, @GetMapping은 컨트롤러의 메소드 위에 위치하여, 특정 URL에 대한 GET 요청이 오면 그 요청을 처리할 메소드를 지정합니다. 간단한 예를 보자면 다음과 같습니다...
[Spring Boot] About HTTP 요청 관련 어노테이션, @도움!Spring Boot를 사용하기 위해 학습을 하던 중, 문득 HTTP 요청에 따른 어노테이션들이 무엇이 있고, 어떤 일을 하는 지 궁금했습니다. 그래서 저는 이에 대해 알아보기로 하였고, 나중에 이 글을 읽고 도움이 되었으면 하는 마음에 새 글을 작성하기로 하였습니다. @GetMapping 은 무엇인가요? @GetMapping은 Spring Framework에서 제공하는 annotation이며, 주로 HTTP GET 요청을 처리하는 메소드에 사용됩니다. 이는 @RequestMapping의 특수한 형태라고 볼 수 있습니다. 기본적으로, @GetMapping은 컨트롤러의 메소드 위에 위치하여, 특정 URL에 대한 GET 요청이 오면 그 요청을 처리할 메소드를 지정합니다. 간단한 예를 보자면 다음과 같습니다...
2023.06.02