개발의 올바르지 않은 용례 - mysetting

3:49 5/30

usage.tistory.com

mobile screenshot relative

3:49

usage.tistory.com

mobile screenshot

개발의 올바르지 않은 용례
https://usage.tistory.com/

개발 못하는 학생의 공부 노트

저작도구: tistory

최종 피드 수집: 2024-04-15 16:17

전체 (125)

22d

classname으로 스타일 간결하게 관리하기

React에서 CSS in JS를 사용하지 않으면, 다양한 스타일을 적용하기 위해 한 요소에 여러 클래스 네임들을 적용하게 되곤 합니다. 이렇게 여러 클래스 네임들이 중첩되면 보기 어려워지는 경우가 많아지는데, 이럴때 classn

Frontend

classnames

000

29d

useEffect 내부에서는 기명함수를 사용하자

useEffect

useEffect는 외부 시스템과 컴포넌트를 동기화 시켜주는 리액트 훅으로,
공식 문서에 나와있는 useEffect의 예시 코드는 이러한 모양입니다.

코드를 보면, useEffect의 첫 번째 인자

Frontend

REACT

useEffect

000

1M

Redux와 RTK로 상태 관리하기

들어가며
React에서 전역 상태를 관리하는 방법은 다양합니다. React가 공식적으로 제공하는 Context API부터, 얼마전에 소개했던 Zustand 등 수많은 라이브러리들이 있습니다. 오늘은 그중에서도, 꽤 오랜 시간 사용

Frontend

REACT

Redux

Toolkit

000

2M

2024년도 신입의 취업 후기

들어가며
23년도 회고를 작성한지 얼마 되지 않았는데 좋은 일이 생겨 후기를 작성하게 되었다. 겨울동안 줄기차게 진행했던 취업 준비를 마무리하고, 2월부터 프론트엔드 개발자로 커리어를 시작하게 되었다. (이 글을 쓰는 지금이 출근

주저리

취업

회고

002

2M

Cookie와 Web Storage (Local Storage와 Session Storage)

서버에서 유저를 기억하고, 유저의 데이터를 저장하는 방법은 대표적으로 쿠키(Cookie)가 있습니다. 쿠키는 이전부터 전통적으로 사용되어 왔던 방법이고, 현재까지도 많은 웹 서비스에서 쿠키를 이용해 사용자의 데이터를 다루고 있습니

Frontend

JavaScript

브라우저

000

3M

good bye, 2023!

2023년이 시작한게 엊그제 같은데 벌써 끝이라니...
아직 달리 한 것도 없는 것 같은데 오늘이 2023년의 마지막 날이라는게 믿기지가 않는다.
분명 이것저것 했을텐데, 막상 적어보려하니 기억이 흐릿해지는게
적어두지 않았다면 큰

주저리

2023년

회고

000

3M

주소창에 google.com을 입력하면

들어가며

"브라우저 주소창에 google.com을 입력하면 어떤 일이 일어날까요?"

위 질문은 기술 면접에 종종 나오는 단골 주제로 굉장히 유명합니다.
"개발자 신입 기술 면접 대비" 와 같은 주제의 글에서는 빠지지 않

Frontend

DNS

브라우저 렌더링

000

3M

Zustand로 전역 상태 관리하기

들어가며
React에서 전역 상태를 관리하는 방법에는 대표적으로 Context API가 있습니다. 단방향의 데이터 흐름을 해치지 않으면서도, Provider를 통해 각 컴포넌트에서 상태를 사용할 수 있게 해주는 기능입니다. Rea

Frontend

REACT

Zustand

상태 관리

000

4M

자바스크립트로 비동기 처리하기 : Generator

들어가며

지난 시간까지 자바스크립트에서 효과적인 비동기 작업을 위해 사용하는 Promise 와 Async / Await 키워드에 대해 알아보았는데, 여기에 이어 오늘은 Generator 까지 한 번 공부해보겠습니다.

Gen

Frontend

generator

JavaScript

002

4M

우아콘 2023 후기

우아한형제들의 기술 공유 컨퍼런스인 우아콘 2023이 11월 15일 삼성역 그랜드 인터컨티넨탈 서울 파르나스 5층에서 열렸습니다. 그동안 유튜브 생중계를 통해 진행되었던 우아콘의 첫 오프라인 컨퍼런스였는데, 그래서인지 당일 현장에

주저리

woowacon

우아콘

후기

0013

5M

자바스크립트로 비동기 처리하기 : Async / Await

들어가며
지난 포스트인 자바스크립트로 비동기 처리하기 : Callback 과 Promise 와 이어지는 글입니다. 자바스크립트는 Callback에 이어 Promise라는 객체를 맞이하며 좀 더 편리하고 안전한 방식으로 비동기 작업

Frontend

async

await

+ 더보기

000

5M

Next.js 13에서 Kakao 로그인 처리하기 with Firebase (2)

들어가며
지난 글에서는 카카오 API를 이용하기 위해 프로젝트에 환경 설정을 하고,
카카오 서버와 통신까지 진행해보았습니다.

이번 포스팅에서는 받아온 데이터를 토대로 Firebase와 연동하여 저장하는 과정을 알아보겠습니다.

Frontend

Firebase

kakao api

Next.js

0091

5M

자바스크립트로 비동기 처리하기 : Callback과 Promise

들어가며
자바스크립트는 한 번에 하나의 작업만 처리할 수 있는 싱글 쓰레드 언어입니다. 따라서 모든 작업은 동기적으로 처리되는것을 기본으로 합니다. 그러나 실제로는 네트워크 통신 등 비동기적인 처리가 꼭 필요한 상황들이 많기 때문

Frontend

Callback

JavaScript

promise

000

6M

Next.js 13에서 Kakao 로그인 처리하기 with Firebase (1)

들어가며
오늘은 Next.js 13에서 Firebase와의 연동을 이용해 Kakao 로그인을 구현하는 방법을 알아보겠습니다. 비교적 공식 문서가 자세히 설명되어있고, 각종 정보가 많은 편이라 어렵지 않게 구현할 수 있습니다.

Frontend

Firebase

kakao api

Next.js

000

6M

Next.js Page Router와 App Router

Next.js 13 버전에서 새롭게 공개된 App Router 방식은 몇 번의 업데이트를 거쳐 현재(포스팅 작성 시점 기준 13.5) 는 꽤 높은 수준의 안정성을 가지게 되었습니다. 저도 작은 프로젝트들에서 App Router 방

Frontend

App Router

Next.js

Page Router

000

6M

Github에 2FA 설정하기

들어가며

오는 2023년 말부터 Github를 이용하려면 2FA(2단계 인증, Two-Factor Authenication)를 반드시 설정해야합니다. 2FA 자체는 이전에도 지원했던 기능이지만 Github 정책의 변경으

기타

2fa

github

000

6M

Next.js로 metadata 구성하기

얼마 전 작은 규모의 신규 프로젝트에 프론트엔드로 참여할 기회가 생겼습니다. 프로젝트 특성상 외부에 노출되는 빈도 수가 매출에 큰 영향을 끼치기때문에 SEO(Search Engine Optimization, 검색 엔진 최적화)가

Frontend

metadata

Next.js

SEO

000

6M

오픈 소스 라이센스에 대해 (Open Source License)

소프트웨어 개발을 직업으로 하고 있는 사람들이라면 이미 수많은 오픈 소스 라이브러리를 사용했던 경험이 있을겁니다. 시중에는 훌륭한 퀄리티의 오픈 소스 프로그램들이 무료로 배포되고 있기 때문에, 오픈 소스에 대한 경험 자체는 개발자

기타

라이센스

오픈 소스

000

7M

Cloudflare로 https 적용하기

지난 인터넷 프로토콜 HTTP와 HTTPS 포스트에서는 https가 무엇이며, 어떤 역할을 하는지에 대해 알아보았습니다. 오늘은 운영중인 사이트에 실제로 https 연결을 적용해보는 방법에 대해 알아봅니다.

적용 방법
ht

기타

CloudFlare

https

인증서

000

7M

인터넷 프로토콜 HTTP와 HTTPS

오늘은 네트워크 기본 지식이자 면접 단골 질문 주제이기도 한 HTTP와 HTTPS에 대해 정리해보겠습니다.

TCP/IP란?
HTTP와 HTTPS에 대해 알기 위해서는, TCP/IP의 개념부터 알아야합니다. 컴퓨터가 네트워크

네트워크

cs

http

https

000