전체 글 119

프론트엔드 개발을 위한 더미 서버 구축 <JSON Server Usage>

1. 서론 프론트엔드 개발을 할 때, 종종 API 서버가 준비되지 않았거나, 빠른 기능 개발과 테스트를 위해 간단한 더미 서버가 필요할 때가 있습니다. 이를 위해 JSON Server는 가장 손쉽게 사용할 수 있는 도구입니다. 이 글에서는 npx를 통해 JSON Server를 실행하는 방법부터 실제 API와의 차이점, 장단점까지 알아보겠습니다. 참고로 아래의 예시는 제가 하고있는 프로젝트 의 로그인 로직과 회원가입 UI/UX를 설계 및 개발 한 후, 백엔드의 API (server)가 나오기 전 프론트 자체에서 서버동작을 예비로 구현하며 공부했던 내용입니다. 2. JSON Server란? JSON Server는 JSON 파일을 기반으로 RESTful API를 빠르게 구축할 수 있게 해주는 도구입니다.백엔드..

FrontEnd Develop 2025.01.11

React x Style <Global Style과 Routing의 조합> : 프로젝트 구조의 최적의 사용법

React 프로젝트에서 글로벌 스타일링을 적용하면서 **라우팅(Routing)**을 사용하는 방법은 매우 중요합니다. 이 두 가지를 효과적으로 결합하면 프로젝트의 유지보수성과 일관성을 높일 수 있습니다. 이번 글에서는 Emotion의 글로벌 스타일링과 React Router를 조합하는 방법을 다루어 보겠습니다. 이 방식은 실제로 제가 저희 개발 팀 NOVA에서 진행하고 있는 프로젝트 :  명지대학교 검색 커뮤니티 (MJS)의 프론트엔드 개발자를 맡게되며, 짜고 있는 코드의 폴더 구조와 방식입니다. 많은 스타일링 방식을 써보았지만 리액트의 라우팅 구조를 활용하고 있다면 스타일 또한 라우팅을 활용하면 어떨까 ? 하는 궁금증에 공부했던 내용입니다.  1. 글로벌 스타일링 적용 시 기본 구조 전역 스타일링은 앱..

React x Styles <우린 어떤 방식의 스타일을 써야하는가?>

웹 개발(프론트엔트 개발)을 할 때 스타일링 방식은 프로젝트와 팀의 스타일에 따라 다릅니다. CSS-in-JS, CSS-in-CSS, 그리고 Utility-First인 Tailwind CSS는 각기 다른 철학과 장점을 가집니다. 오늘은 대표적인 Emotion (CSS-in-JS)과 CSS-in-CSS, 그리고 Tailwind CSS를 비교하며, 언제 어떤 방식을 선택해야 할지 설명해 보겠습니다.  1. CSS-in-JS (Emotion) 개요 CSS-in-JS는 자바스크립트 파일 안에 CSS 스타일을 작성할 수 있게 해 주는 방식입니다.그 중 제가 선호하는 방식인 Emotion은 styled 컴포넌트나 css 함수를 통해 컴포넌트 기반의 스타일링을 제공합니다./** @jsxImportSource @emo..

React로 만든 Fashion Archive 심층분석 #1. 이벤트핸들러 속성과 Redux 상태관리

내가 개인적으로 혼자 하고 있는 자기의 신발 컬렉션들을 전시 및 판매하는 패션 아카이브 프로젝트 코드를 짜면서 공부한 내용이다.  https://github.com/ChoiTheCreator/TheFashionArchive #리액트 코드를 짜다가 무한루프에 빠질수가 있을까?물론 알고리즘 공부하면서 코드 잘못짜서 while문에 늪에 빠진적은 있었을것이다. 그러나 내 개인프젝에서 렌더링이 아예 안되는 이런 경험은 처음이었다.   먼저 화면들을 보자면 아래와같다.  #메인화면여기서 장바구니 (Carts)를 클릭하면,  장바구니 페이지로 넘어가는데, 여기서 무한루프가 발생해서 크롬 브라우저가 먹통이 되는 것이다.  #장바구니 페이지  #무엇이 문제였을까?  1. Redux 상태 관리 특성: Redux는 상태(s..

Frank Ocean - Super Rich Kids의 주관적 해석

Frank Ocean하면 다들 떠올리는 전설적인 앨범 Blonde. 말고,,블론드를 내기 전 그가 만들었던 Channel Orange 앨범의 수록곡중 내가 제일 좋아하는 노래에 대한 주관적 해석을 적고자한다.아래의 링크에서 라이브를 볼 수 있다. (최고임 거의) https://www.youtube.com/watch?v=H0c0yo7NXq4  먼저 노래 제목 Super Rich Kids은 왜 이렇게 지었을까? 그는 단순히 미국의 부유층 청소년들의 부러운 삶을 동경하는 노래가 아닌, 그들이 직면한 삶의 공허함과 자본주의의 허무함을 풍자적으로 나타낸다. Frank Ocean의 대표작인 Channel Orange 앨범 수록곡 Super Rich Kids는 단순히 부유층 청소년들의 삶을 동경하는 것이 아니라, 그..

단편영화 <중독 : 나한테만 보이는> 리뷰

8분 남짓한 단편영화였고 skt에서 도파민 중독에 경각심을 알리는 목적으로 만든 단편영화. 기획은 AI (인공지능)에게 맡겼다 단편영화임을 감안하고 몇가지 리뷰를 남겨보겠다 #1. 분위기딱 처음 보자마자 느낀건 스릴러의 느낌이 강했고 서스펜스가 상당하다. 영화의 분위기 자체가 어두웠고 , 배경도 어두웠으며, 음악적인 부분 또한 긴장감을 조성하는 최적의 연출이었던것 같다.카메라 구도 또한 뭐 적당했다고 생각한다. #2. 카메라 구도개인적으로는 카메라 구도가 참 좋았다고 본다. 스릴러를 다룰때 너무 정적이거나 너무 동적인 즉 극단적인 무빙 혹은 무빙이 전혀없는 느낌이 아니어서 긴장감의 분위기를 쭉 이어나갔던 것 같다. #3. 도파민 중독이 부분은 좀 의아하다. 영화를 처음 보셨다면 이것이 왜 도파민 중독의 ..

Cinema_Review 2024.09.14

난해한 영화의 기준과 매력 그리고 영화를 즐기는 적절한 접근법

세상에는 너무나 많은 영화들이 있고, 앞으로 나올 영화들도 상당히 많을 것이다. 난 이 중 일반적으로 관객들이 난해하게 느끼는, 소위 말해 난해한 영화에 대해 말해보고자 한다.  특이한 오프닝 시퀀스를 갖고 있는 영화 은 대학교 1학년때 우연치않게 시청했던 영화이다. 영화의 충격적인 결말과 그 과정속 단테의 신곡의 일곱개의 대죄를 테마로 살인을 저지른 살인마와 그를 쫒는 두 형사. 사실 갓 성인이 된, 어제까지만 했던 고등학생 이었던 내가 이해하기엔 너무 어려운 영화였다. 하지만 그 점이 나에겐 이런 난해한 영화에 빠지게 된 계기였었다.   영화가 어렵다. 난해하다. 라는 기준의 객관적인 지표가 있을까? 물론 영화를 받아드리는 것은 온전히 개인 몫이기에, 주관적인 측면이 상당하지만 난해한 기준의 척도가 ..

고차원적 사고 2024.09.09

넷플릭스 : 아무도 없는 숲속에서 리뷰 + 평가 (스포 x)

하루만에 다 밤새가면서 다 봤다. 스포 거의 없게 간략하게 평가해보겠다. 1. 간단 줄거리투 트랙을 활용했다. 첫번째 이야기펜션을 하고 있는 김윤석 배우님의 영하는 어떤 여자와 그의 자녀로 추정되는 꼬마 아이를 손님을 받았는데다음날에 수상한 핏자국을 발견하고 그 여자가 사실 그 꼬마를 살해한 후 혼자 유유히 떠나는 영상을 발견 두번째 이야기첫번째 이야기보다 20년 가량 옛날 이야기이고, 윤계상씨가 하는 모텔에 어떤 손님을 받았는데 다음날에 모텔이 난리가남살해현장이 방에서 발견된 후 모텔의 관한 평가가 완전히 난리가 나. 모텔에 손님이 없어지며 경제적 고난으로 인한 가족의 파탄 .. 이 둘을 연결하는 사람은 이 두 사건을 둘 다 경험한 여자 경찰.두번째 이야기때는 신임 경찰이고 첫번째 이야기때는 베테랑 경..

Cinema_Review 2024.08.29

영화 <드라이브> , 지극히 개인적인 평론

라이언 고슬링이라는 매력적인 배우의 연기 영화를 보고나면 한 2일 동안은 시끄러운 남자들(외향적인 남자)들도 과묵해지고 싶어할 것이다.조금은 또라이 기질이 강한 감독의 영화임 (내가 듣기론 난독증이 있다고 들었다) 난독증이 있는 감독의 영화라고 보기엔 사실 굉장히 흐름이 괜찮다.흐름이 괜찮다는 뜻은 영화 보다가 엥? 하는 점이 없다. 난이도가 쉬운 편인 영화다. 상당히 클리셰적인 부분도 의외로 없다. 반전도 군데군데 숨겨져있고 배우들의 연기 말할 것도 없고. 가장 이 영화 매력 포인트는 시각 효과이다. 옛날 배경인 영화들의 특징이 살짝 억지로 옛날 느낌을 내려고 연출을 무리하게 하려다가조금 어색해지는 측면도 없지 않아 있는데, 이 영화는 그렇지 않다.  또한 다른 매력 포인트는 ost.. 이 영화와 os..

Cinema_Review 2024.08.15