전체 글 36

18장. 서버에서 사려깊게 응답을 준다면 프론트엔드에선 어떻게 처리해야할까?

17장 백엔드에서 성공/실패시 응답을 통일감있게 내려준다. 프론트에서는 이걸 어떻게 받아줘야 디버깅시 편하고 또 유저에게 안정감있게 화면을 보여줄 수 있을까? 버튼을 눌렀는데 아무 동작이 없거나 빈화면이 뜨면 유저는 불편함을 넘어서 사업자체를 의심한다. 사람은 이성적으로 결정하는게 별로 없다. 프론트엔드 개발자는 본질적으로 데이터를 뿌려주는게 아니라 유저의 무의식을 설계하고 행동을 유도하는 임무를 수행한다고 생각한다. 프론트엔드 성공/실패 분기 처리전략일단 서버 개발자가 공감지능이 높아 배려를 잘해줘서 아래와 같이 성공/실패 응답을 잘 주고 있는 상태 { "success": true, "status": 201, "message": "회원가입이 완료되었습니다.", "data": { "use..

카테고리 없음 2025.04.16

17장. 서버에서 대충 응답을 던진다면 프론트엔드에선 어떤 일이 발생할까?

15장 요청 본문 로깅에서는 클라이언트에서 서버에 어떤 Body 데이터를 가지고 서버에 들어오는지를 로그를 찍어서 추적하고 싶었다. 지금까지 개발할 때 @ControllerAdvice 나 @RestControllerAdivce 로 프론트 백사이 응답구조를 맞춰주는것을 정석으로 알고 맞춰했음. 혼자서 기능개발 한다고 포맷을 신경쓰지않고 그냥 하다보니 왜 그렇게 해왔는지 참의미가 이해되어서 파고들다보니 만들어진 글 목차1. 요청 응답시 서버 개발자의 배려가 부족하다면...2. @Controller Advice 와 @ExceptionHandler3. 백엔드 응답 전략 (코드 구현)4. 프론트엔드 응답별 성공/실패 분기 처리전략 1. 요청 응답시 서버 개발자의 배려가 부족하다면... 어차피 HTTP 표준..

16장. 이미지 어디서 어떻게 관리할까 S3? 파이어베이스?

이미지를 바이너리 형태로 DB에 넣는건 말이 안되는 일 비정형 고용량 데이터를 넣어 CRUD 하게 되면 쿼리 I/O 나 백업복원 속도은 둘째치고, RDS 같은 클라우드 DB를 쓴다면 스토리지나 트래픽 요금폭탄이 기대가 된다. DB에는 이미지 링크만 저장하고 이 이미지를 어딘가 올려두어야하는데 서버 인스턴스는 좀 아닌 것 같고 파이어베이스와 S3 중에 고민이 시작됨 다만 파이어베이스 스토리지 대비 S3이 presigned URL 등의 접근제어를 포함해 좀 더 유연하고 확장성있다고들 하는데 각각 어떤 철학이나 아키텍쳐를 갖고 있을까 살펴보다 만들어진 글 "이미지 CRUD에 대한 권한처리는 어떻게 처리하지. 클라우드에서? 혹은 백엔드 서버에서?" 목차1. 이미지를 클라우드에 두는 이유2. 이미지는 백..

React Native CLI 에서 Expo 로 갈아탄 썰 (맥북이 답인가) ※20page 분량 긴글주의※

React Native CLI 에서 프로필 사진업로드를 위해 카메라 권한을 획득하려다보니 iOS, Android 네이티브 코드를 건드려야 했다.(Info.plist, Podfile - iOS혹은 AndroidManifest.xml - Android) Window 에서는 Xcode 를 사용하지 못하기 때문에 iOS 빌드를 못한다. 결과 확인을 못한다. 크로스플랫폼을 사용하는 의미가 없어지는 것이다. Expo 로 전환하기로 했다. 둘이 아키텍쳐적으로 어떤 차이가 있는걸까 가벼운 마음으로 글을 썼지만 어쩌다보니 4일동안 작성하게 되었고 20page 가 넘는 문서가 되어버렸다 4일을 헤엄치다보니 그냥 한마디로 표현하자면 Expo 는 누군가 만들어놓은 브라우저위에 HTML 만 올리면 되는거고, CLI는 브라..

15장. 요청 본문 로깅 어디서 하지? 또 어떤 로그를 찍어놓을까 Filter Interceptor AOP

서버와 화면간 디버깅을 해야하는데 HTTP Request 에서 어떤 식으로 Body 데이터가 나오는지 보고 싶었다. 물론 컨트롤러에 System.out.println() 찍거나 logger 로 요청로깅을 해도 된다.그렇다고 메서드마다 로깅레벨 생각해가며 일일이 다 달기도 곤란하고 그냥 요청 응답정도는 인터셉터같은거로 찍어놓는게 개발환경뿐 아니라 운영상에서도 좋지않을까?  어떤 방법들이 있을까?남들은 무엇을 어떻게 로깅하지? 하다가 만들어진 글  목차1. 스프링 부트에서 자동로깅되는 것들2. Filter, InterCeptor, AOP3. Filter 종류 특성 (CommonsRequestLoggingFilter, OncePerRequestFilter 그리고 그 외 필터)4. InterCeptor 종류특성..

14장. DB에 물리적 FK 걸지마라. 조회가 빈번하면 인덱싱걸어라.

우리 백엔드 팀에서 최근 논의중인 주제 시니어 멘토님께서 던져주신 화두로 모두가 머리싸매고 고민하고 있는 모습이 아주 보기좋다. 나 역시도 잘 몰랐던 내용이라 정리하고 넘어간다 DB에 물리적 FK 걸지마라 외래키는 테이블 간의 관계를 설정하고, 참조 무결성(데이터의 일관성)을 보장하는 중요한 역할을 한다.유효성 체크 혹은 CASCADE 처리를 DB레벨 에서 진행하면서 애플리케이션 레벨에서 복잡한 로직을 생략할 수 있다는 장점도 있다. [단점 : 대규모시스템, 개발편의성, 성능, DB수정] 1. 대규모시스템다만 분산환경에 가면 수평 확장이나 샤딩을 하면서 FK 제약을 유지하는 것이 곤란할 수가 있다. 또 데이터가 복잡해지다보면 차라리 외래키 없이 애플리케이션 레벨에서 데이터 무결성 관리하는게 나을 ..

코딩 인터뷰 면접 질문 아카이빙 (16Q/1000Q)

내가 채용을 하기 위해 면접을 보든,입사하기 위해 면접을 받든, 묻고 답할 1000제 컨텐츠를 기획하며 동시에 공부하려고함 (나중에 제로투원 쇼츠로 뿌릴 컨텐츠로도 좋을듯)   (25.3.27) 배열과 문자열 GPT 평가 # 1.0 [배열과 문자열] : 해시테이블, ArrayList, String Builder 에 대해 설명하라 My Ans : 가령 'user1' 이라는 Key와 'Alice' 라는 Value 가 있다고 가정하자. user1 을 해시함수에 넣어서 해시코드(임의의 숫자) 로 만들고 해당 해시코드를 인덱스에 대응시켜 인덱스에 Alice 를 저장한다. Key를 인덱싱하여 자료탐색을 O(1) 수준으로 빠르게 하기위해 사용한다. 해시코드가 같아지거나, 해시코드가 같은 인덱스를 가리키는 충돌에 대응..

카테고리 없음 2025.03.27

13장. MySQL에서 되던게 PostgreSQL 에선 왜 안돼? (JPA의 @GeneratedValue 전략 차이)

JPA에서 @GeneratedValue(strategy = GenerationType.IDENTITY)를 사용하면 기본 키(ID)를 자동 증가(AUTO_INCREMENT)하도록 설정된다. MySQL에서는 IDENTITY 전략을 사용하면 JPA가 AUTO_INCREMENT 속성을 추가하며 알아서 작동한다. PostgreSQL에서는 IDENTITY 전략을 사용하더라도 SERIAL 또는 IDENTITY를 사용해야한다. MySQL만 쓰다가 PostgreSQL 로 넘어오면서 생긴 시행착오와 공부 목차1. JPA의 기본키 생성전략2. PostgreSQL 에서 IDENTITY 전략 사용하려면3. PostgreSQL 에서 SEQUENCE 전략 사용하려면 1. JPA의 기본키 생성전략 JPA의 @Generate..

생성형 AI 와 AI 추천,요약 시스템 입문

결국 AI를 붙여야한다. IT 교육채용 플랫폼 같은 경우엔 궁극적으론 사업기획서에 써놓은 것처럼 AI로 기업-유저 추천 매칭이 들어가야하고, 블로그 글 AI요약 후 교육서비스 제안을 붙여 차별화 요소를 가져갈 예정임. 또 생성형 AI 써서 마케팅에도 활용할 것. 개발하면서 CS는 CS도 대로 파되 AI 쪽도 이제는 공부해나갸아함을 느꼈다 목차1. Stable Diffusion 파인튜닝2. web UI 와 커스터마이징3. 추천 및 요약 시스템 구축방안 1. Stable Diffusion 파인튜닝 이미지 생성도 결국 딥러닝 사용. 다량의 input, output 을 넣고 학습시키면 내부 알고리즘을 만들어내고 이 '알고리즘'을 AI 라고 부름 생성형 AI라는 것도 결국 input 에 prompt 를 ..

아카이빙/AI 2025.03.25

12장. IntelliJ가 해주는 역할이 뭐였을까. Cursor AI로 넘어오면서 생긴 일들 (=Cursor 쓰면 새로운 디펜던시 반영 어떻게

스프링 프로젝트 하면서 아무생각없이 ▶ 눌러서 프로젝트 실행시켰고 디펜던시 추가하면 코끼리모양 버튼 하나만 눌러서 refresh 해주고 다시 ▶ 눌렀다. 커서쓰게 되면서 IDE가 달라지다보니 삽질을 좀 했다. 디펜던시를 추가했는데... 그다음 뭘해야하지? ▶ 은 없고... main 실행하면 되나?안된다 이래서 기본기가 중요하다.그러면서 배우게 된 것들 목차1. Gradle 이란?2. 스프링 애플리케이션을 실행시키는 3가지 방법3. main 을 실행해도 디펜던시가 반영이 안됐던 이유4. 스프링 애플리케이션에서 main 을 실행하면 일어나는 일들 1. Gradle 이란 우선 모두가 알다시피 Gradle 은 Java 프로젝트를 빌드,테스트,배포하는 도구다. - build.gradle -> 의존성, ..

팀 제로투원 코드리뷰 - 백엔드

팀원들의 코드를 리뷰하며 배운 것 혹은 생각해보게 된 것들을 정리해보자  1회차 - > 클래스를 만들어 PostConstruct 으로 상세한 로깅찍기package com.codezerotoone.mvp.config;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.beans.factory.annotation.Value;import org.springframework.boot.info.BuildProperties;import org.springframework.context.ApplicationCont..

코드리뷰/Spring 2025.03.14

[이해안되면 클릭] 재귀함수는 공간복잡도가 O(n) 이며 Stack Overflow 를 야기한다

알고리즘에서는 시간 뿐 아니라 메모리(혹은 공간) 또한 신경 써야한다.크기가 n인 배열을 만들고자 하면 O(n) 공간이 필요하고 n x n 이차원 배열을 만들고자하면 O(n^2) 공간이 필요하다. "재귀호출에서는 호출될때마다 스택의 깊이가 깊어지지만 ( n번 호출시 O(n) 공간 )단순히 호출을 여러번 했다고 해서 O(n)이 되지는 않는다" 머릿속에 그림이 안려져서 메모리구조를 다시 정복하려고 한다.   목차1. 메모리 계층구조2. RAM의 역할3. RAM의 구조4. 문장해석 (재귀 호출과 반복문 호출의 차이) + 고수로 나아가자 (재귀호출과 Stack Overflow)   1. 메모리 계층구조  본질적으로 메모리란 data 와 Program 을 저장하는 장치.용량, 접근속도, 가격이 중요한 요소가 될 ..

아카이빙/CS 2025.03.14

React Native 어떻게 동작하는지 모른다면 클릭 (네이티브앱과 차이는? 메트로 서버는 뭐야?)

React Native 입문 npx react-native doctor 로 개발도구의 설치 상태를 체크하고, npx react-native start 으로 메트로서버를 실행시킨후 npx react-native run-android  로 Andorid 앱을 빌드하고 실행한다. 일단 따라하면 뭔가 실행이 되는 것 같은데 프로세스를 모르니 디버깅이 잘 안된다. 전체적으로 개념을 잡아보자     목차0. React Native 앱 구조 1. Metro 가 서버인 이유2. 앱 빌드 과정 이해하기 3. 앱 빌드에 필요한 개발 도구들    0. React Native 앱 구조[25.4.4 보충] 앱개발을 한다면 Java Kotlin 으로 Android 개발을 한다. XML 로 화면 UI 를 구성한다. 혹은 Swif..

11장. 상태관리 라이브러리 Context API 말고 다른거 쓰자. Redux? Zustand?

페이지 라우팅하는 최상위 컴포넌트에서 로그인정보를 props drilling 하여 페이지마다 뿌려주고 있다. 페이지 내에서 로그인 정보를 사용해야하는 컴포넌트의 depth 가 깊다면 context API 사용해서 정보를 가져오게끔 했다. 그런데 페이지가 많아지다보니 로그인정보를 수십개씩 내려줘야하고 또 어떤 곳에선 useContext로 가져오고 뒤죽박죽하며 가독성이 떨어지기 시작. 상태관리 정책을 재점검 해보았다.   목차1. 리액트는 상태다.2. 상태관리 라이브러리들3. Flux 패턴이란4. Redux (@reduxjs/toolkit)5. Zustand - 불변성관리, 비동기처리6. Zustand 쓰기로함  1. 리액트는 상태다리액트가 왜 React 일까 상태(state) 변경에 반응해서(React) ..

[모른다면 클릭] 쿠키 딥다이브 (feat. Version 0 쿠키, 써드파티 쿠키, Cache-Control과 쿠키)

쿠키... 별거 없다고 생각하면 별게 없다.그냥 서버에서 심어주고 브라우저는 쿠키를 들고 있다가 다시보내며 식별성을 유지하는 것이 일반적인 사용법이다. 알면 알수록 신비롭고 조심히 다뤄야할 대상이란걸 깨닫게 된다.쿠키에 대해 딥다이브 해보자   목차1. 쿠키 왜 씀2. 쿠키의 형태 (Version 0 쿠키)3. 어마무시한 써드파티 쿠키의 위력4. 쿠키 캐싱잘못하면 난리가 난다   1. 쿠키 왜 씀HTTP 는 stateless 하다.그러나 여러가지 이유에서 접속자를 식별하는 과정이 반드시 필요하다.  ㅡ어떻게? 먼저 클라이언트가 요청에 담아 보낸 HTTP 의 From(이메일주소), User-Agent(브라우저), Referer(요청 전 머물렀던 페이지) 등의 헤더를 통해 사용자 정보를 가볍게(?) 추적할 ..

10장. 운영환경에서 시크릿 파일 관리 노하우

현재 개발단계에서 은밀하게 관리해야할 파일은 두 개다. 리액트에서는 각종 라이브러리 키들이 포함된 .env 스프링에서는 s3, mail 인증등에 사용된 계정정보들이 포함된 application-private.yml 로컬환경에서는 이를 개발자들끼리 알아서 공유해서 빌드하면 되지만 CI/CD 파이프라인을 만드려면 어딘가에는 올려놓고 관리를 해야한다. 이 과정에서 2~3일정도 삽질을 했고 그에 대한 노하우를 기록해둔다.    목차1. CICD 파이프라인 점검1. 리액트는 빌드 후 환경변수 적용안됨2. 스프링은 환경변수 적용에 우선순위가 있음   1. CICD 파이프라인 점검 현재 github Actions 에서 사용하는 CI/CD 파이프라인 Actions.yml 의 프로세스는 다음과 같다.먼저 github 에..

9장. 프록시 서버가 포함된 HTTPS 아키텍쳐에서 발생가능한 이슈 (Mixed Content, CORS Policy)

HTTP 프로토콜에서 HTTPS 프로토콜로 변경하면서 예상치못한 문제들 덕분에 2~3일 정도 씨름하며 인프라 아키텍쳐에 대한 깊은 고민과 큰 깨달음 얻을 수 있었다. 주제는 크게 Mixed Content 와 CORS Policy 다. 첫번째는 기존에 브라우저가 백엔드 서버에 HTTP 요청을 보내며 통신하던 것이, HTTPS 페이지로 변환되면서 Mixed Content 문제를 야기했고 두번째는  Application Load Balancer 가 포함된, 즉 프록시 서버가 하나 붙은 상황에서 CORS 대응을 고민하다보니 프록시 서버의 X-Forwarded 헤더와 CORS 관련된 Access-Control-Allow-Origin 헤더에 대한 정확한 깨달음을 얻게 되었다.    목차1. Mixed Content..

8장. EC2 .pem 파일을 분실했을 때 해결방법을 생각해보자 (a.k.a /home/ubuntu 폴더를 삭제해버렸다)

운영환경을 만들며 CICD는 편의성을 위해 github Actions 를 사용하기로 했다  jenkins 는 또 별도의 컨테이너를 올려 빌드를 해야하는데 지금 EC2 프리티어를 쓰고 있는 상황이라 이 친구가 힘들어할 것 같았다. github Actions 는 EC2에서 빌드하는 것이 아니라 자체적으로 클라우드에서 빌드 작업을 끝내고 EC2에 올려주는 과정이니 리소스가 크게 절약된다. (게다가 빌드를 병렬로 진행한다) 또한 코드 레포지토리와 통합관리한다는 점이 매력적이었다.  여튼 github Actions 를 쓰게 되면 EC2의 HOST 나 SSH KEY 같은 것은  github secrets 으로 개별관리한다.스프링서버의 application-private.yml, 리액트서버의 .env 파일 또한  g..

7장. 도메인에 HTTPS 설정해야지. 인증서는 어디서?

웹을 운영한다면 https 를 사용하는 것이 너무나 자연스럽다.http 로 접속하게 되면 '안전하지 않음' 이 뜬다.인증서를 발급받고 https 설정을 하면된다이것은 영리한 초딩들도 할 수 있다. https 라는게 뭐지? 인증서는 왜 발급받지?애초에 http가 뭐지? 라는 물음에서 책을 파고들며 알게된 지식이다   "HTTPS 는 HTTP 요청과 응답을 SSL/TLS 로 암호화하여 보안을 강화한 HTTP 보안 버젼이다. HTTPS를 사용하려면 SSL/TLS 인증서가 필요하며 이 인증서는 서버가 신뢰할 수 있는 서버임을 보증한다"   (만약 이 문장을 보고 뒤로가기를 누르고 싶어졌다면 아래의 글을 보고 오길 추천합니다) https://biz-ninza.tistory.com/19  HTTPS를 왜 써야하는지..

HTTPS를 왜 써야하는지, 암호화가 뭔지 모른다면 클릭

웹을 운영한다면 https 를 사용하는 것이 너무나 자연스럽다.http 로 접속하게 되면 '안전하지 않음' 이 뜬다.인증서를 발급받고 https 설정을 하면된다이것은 영리한 초딩들도 할 수 있다. https 라는게 뭐지? 인증서는 왜 발급받지?애초에 http가 뭐지? 라는 물음에서 책을 파고파고들며 알게된 지식이다 "HTTPS 는 HTTP 요청과 응답을 SSL/TLS 로 암호화하여 보안을 강화한 HTTP 보안 버젼이다. HTTPS를 사용하려면 SSL/TLS 인증서가 필요하며 이 인증서는 서버가 신뢰할 수 있는 서버임을 보증한다" 쫄지말자!우선 당신이 쫄았다면 그 이유는 배경지식이 없기 때문이다. HTTPS 에서 핵심 키워드는 보안, SSL, 인증서이다. 이 글을 한 번 읽게 되면 다음 질문에 대해..

ch 2. 백엔드 15년차 개발자가 팀에 합류하다.

로스쿨나와 변시합격하면 '변호사' 가 된다.의대나와 국시합격하면 '의사' 가 된다. 개발자는 어떤 면에서는 변호사, 의사보다 더 높은 전문성이 요구되는 직종이다.(카카오톡이 30분만 먹통이 되면 어떤 일이 발생할까? 선관위의 보안에 문제가 생겼다면 어떤 일이 발생할까?) 그런데 개발자는 이런 지식과 기술의 전문성을 보장해주는 그 무엇도 없다.여기서 문제의식을 느끼고 그러한 역할을 해줄 수 있는 교육기관을 향해 달려가고 있다.   15년차 개발자 분이 프로젝트 합류 의사를 건네주셨다.프로젝트의 취지와 나의 진정성에 설득이 되었다고 했다. 현재 우리팀은 10명 정도의 스프린트를 준비하고 있다.백엔드 개발 5명, 프론트 개발 3명, 디자이너 1~2명 (예정), AI 1명  설계, 인프라 아키텍쳐, 운영, 일정..

6장. 도메인 만들어야지. Gabia와 Route53 중에 뭘 쓸까?

도메인을 구입하는 것은 매우 쉽다.결제하고 레코드에 내 IP주소만 붙여주면 된다. 이건 초등학생도 따라서 할 수 있다. 장기간 서비스를 운영하다 보면 필연적으로 에러들을 마주칠 것이고, 이에 대해 빠르게 대응하며 트러블슈팅을 해야하는데 그냥 '되네~' 하고 넘어가기엔 불안하다. 또 근본원리를 이해하면 창의적인 방법으로 고정비를 아낄 수도 있다 (이게 제일 큼 ㅋㅋ) 하루에도 수십번씩 도메인을 마주한다.우리가 도메인을 입력하고 엔터를 눌렀을 때 어떤 일이 일어날까?어떻게 클라이언트가 우리 서버의 IP주소를 찾아 들어오게 할 수 있을까? 이 글을 읽은 이후에는 두 질문에 대해 명쾌하게 답할 수 있길 기대하며 글을 작성했다. 목차1. Route53는 DNS 서비스다2. 클라이언트는 이렇게 IP주소를 찾..

HTTP란 무엇인고

www에서 가장 중요한 기술 두가지는 HTML과 HTTP다.이 둘은 웹을 발명할 때 함게 만들어졌다. HTTP는 웹의 요소들이 서로 대화할 때 사용하는 프로토콜이다.HTTP를 이해한다는 것은 웹이 어떻게 동작하는 것인지 이해한다는 것이며, 이를 이해해야 웹 프로그래밍을 어떻게 할지, 웹 서버를 어떻게 만질지, 네트워크는 어떻게 관리할지에 대한 뼈대가 된다. 35년 가까지 온갖 언어와 프레임워크가 등장했다가 사라졌어도 웹은 기본적으로 HTTP 를 베이스로 동작한다는 사실은 변하지 않았다. PC, 스마트폰, 아이패드 그리고 향후 비전프로, 스마트글라스 등 어떤 하드웨어가 등장해도 이 메인스트림은 유지될듯하다.  (그리고 어떤 차세대 프로토콜이 나와도 HTTP 를 기반으로 하거나, HTTP 의 약점을 보완하는..

5장. 프론트엔드 서버는 Nginx 에 올려라. 왜?

스프링부트에는 톰캣이라는 내장 WAS가 있어서 정적페이지 제공도 가능하다.그런데 '리액트 쓸거면 Nginx 올려라' 는 강사의 조언을 받고 배포를 한 경험이 있다.이번에는 why 를 생각하며 다시 그 의미를 되새김해보자. 웹서버와 WAS에 대해서 정리를 해놓았으니 아직 개념이 모호한 독자라면 (내가 그랬어서 ^^;) 이를 읽은 이후 본 글을 읽어내려가는 것을 추천한다.   https://biz-ninza.tistory.com/12 웹서버와 WAS웹 서버와 WAS (Web Application Server) 1. 웹서버 웹이란 인터넷을 기반으로 한 정보를 공유 검색할 수 있게 하는 서비스.구성요소에는 URL(주소), HTTP(통신규칙), HTML(내용) 이 있겠다. 서버란 클라이언트biz-ninza.tis..

ch 1. 프론트엔드 4년차 개발자가 팀을 이탈하다.

대학원에서 석사생끼리 서로 주제에 대해 발표하고 꼬리를 무는 질문을 던지며 공부해가는 방식이 매우 도움이 되었다. 프로그래밍공부에도 이를 도입하여 자신이 쓴 글을 상대방이 1:1 면접해주고, 또 내가 상대의 글을 보고 면접을 보는 포맷으로 돌아가면 어떨까란 가설에서 스터디를 만들었다. (1) 면접 볼 글을 작성하면서 (2) 면접을 기다리면서 (3) 면접을 보면서 (4) 면접 본 이후에 몰랐던 것을 보충하면서 공부한 내용을 자동으로 n회독하게 된다. (1) 상대의 면접 글을 이해하면서 (2) 질문과 예상답변을 준비하면서 (3) 면접을 진행하면서상대가 공부하는 내용이 내 것이 되면서 자연스럽게 지식을 확장하게 된다.  3달만에 스터디원이 60명이상 모이며 매우 높은 만족도를 보였다. 이제 내가 수작업으로 관..

아직 웹서버와 WAS 구분이 안된다면 클릭

웹 서버와 WAS (Web Application Server) 1. 웹서버 웹이란 인터넷을 기반으로 한 정보를 공유 검색할 수 있게 하는 서비스.구성요소에는 URL(주소), HTTP(통신규칙), HTML(내용) 이 있겠다. 서버란 클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터시스템이다. 즉 웹서버란 인터넷을 기반으로 클라이언트에게 웹 서비스를 제공하는 컴퓨터라고 볼 수 있다. 웹서버는 한마디로 클라이언트의 요청을 기다리고 요청이 들어오면 필요한 데이터를 만들어서 응답하는 PC.단 이 때 데이터는 웹에서 처리할 수 있는 html, css, js, 이미지 등 정적인 데이터로 한정된다. 대표적인 웹서버에는 Apache HTTP Server (아파치), Microsoft IIS, nginx 가 ..

리액트 화면 최적화를 하는 17가지 방법

화면 최적화를 하려다가 내공이 부족하여 지난시간에는 리액트의 라이프사이클과 훅에 대해서 파고들었다.다시 돌아와 화면 최적화해 대해 생각해보자   목차1. 화면 최적화란?2. 첫째, '유저가 관심있는 화면만' 먼저 보여주기3. 둘째, 불필요한 리렌더링을 막기4. 셋째, 기타 잡(?) 스킬  1. 화면 최적화 프론트엔드, 특히 리액트에서 화면 최적화란 무엇을 의미할까 리액트는 내 관점에서 동적 렌더링 그리고 컴포넌트 기반 설계가 강력한 장점이다. 그렇다면 사용자에게 빠르게 화면을 보여주는 것. 그리고 컴포넌트를 잘 나누어 계층구조를 만들어 코드의 가독성과 유지보수성을 높이는 것.이 두가지로 생각해볼 수 있겠다. 오늘은 전자, 즉 어떻게 사용자에게 빠르고 부드러운 화면을 보여줄 것인가에 집중을 해보자.  웹 ..

아카이빙/React 2024.12.24

Life cycle method 와 Hooks 완전정리

"Hooks 도입 전에는 클래스형 컴포넌트에서 HOC(고차 컴포넌트)나 Render Props를 사용해 코드 재사용성을 높이려고 했지만, 이 방식은 코드 중첩이 많아지고 가독성을 떨어뜨리는 경우가 많았습니다" "React.memo 는 고차 컴포넌트 (HOC) 로 감싸서 자식 컴포넌트 리렌더링을 방지하고 useCallback 은 훅 (Hooks) 을 사용하여 함수 재생성을 방지합니다" 화면을 최적화하며 개발하기 위해 예제코드를 스터디 하던 중 위의 문장이들이 하나도 이해 안되어 파고 파고 들다보니 이 글이 만들어졌다.   목차1. 리액트를 사용하는 이유2. 리액트 렌더링 과정3. 라이프 사이클이란?4. 라이프사이클 메서드 (클래스형 컴포넌트에서 라이프사이클관리)5. Hooks (함수형 컴포넌트에서 라이프사..

아카이빙/React 2024.12.19

4장. 객체의 상속관계는 데이터베이스에 어떻게 표현하지...?

현재 서비스상 회원은 '학생', '학부모', '강사' 3가지 타입이 존재한다.회원들은 유저라는 기본 테이블 정보를 가지며 타입별로 다른 정보를 저장해야한다 (그림1)객체는 상속이라는 기능을 가지고 있지만 테이블은 상속이라는 기능이 없다.이 미스매치를 어떻게 해결할 것인가?   서론 : (상속관계에서 또 한 번 드러나는) JPA의 파워1. 상속 매핑을 해보자2. 부모 자식관계 클래스에서 빌더패턴을 사용한다면? @SuperBuilder3. 부모 엔티티의 기본 키를 자식 엔티티의 기본키로 사용한다면? @PrimaryKeyJoinColumn4. (마지막 한 걸음 더 - 고수가 됩시다) 상속관계와 식별/비식별 관계 그리고 JOIN 방식     내 서비스를 비롯 현대 어플리케이션은 유지보수성이 생명이다. 객체지향적..

3장. JWT 토큰을 어디에 넣을까? 헤더 vs쿠키

대부분의 실무 프로젝트에서 JWT 토큰을 사용하는 듯하다.가장 큰 이유는 JWT 방식이 세션을 유지하는 방식보다 RESTful 하기 때문아닐까 생각이 들고따로 세션서버를 운영할 필요가 없으니 그 자체로 성능상의 이점이 있고 특히 서버 스케일링이 필요할 정도의 대용량 트레픽이 발생하는 서비스에서는 JWT 토큰이 거의 필수적이겠다. JWT 토큰을 쿠키에 담을까... 아니면 그냥 Authorization 헤더로 보내서 클라이언트가 관리하게 할까그 고민에 대한 글이다.    쿠키 완벽하게 모른다면 클릭 (feat. Version 0 쿠키, 써드파티 쿠키, Cache-Control과 쿠키)쿠키... 별거 없다고 생각하면 별게 없다.그냥 서버에서 심어주고 브라우저는 쿠키를 들고 있다가 다시보내며 식별성을 유지하는 ..