Jaymyong66

CSS in JS vs CSS in CSS

각각의 장단점과 어떨 때 무엇을 쓰면 좋을까?이전 우테코 프로젝트를 할때는 Emotion CSS를 사용한 바 있고, 해당 기술 사용을 결정할 때 조사했던 부분이 있다.(Github Wiki)그럼에도 CSS in JS의 기술적 기반, 배경에는 뭐가 있는지 명확히 알아보았다. 비슷한 볼륨의 프로젝트는 아니지만, SCSS 기반보다 Emotion CSS 기반 프로젝트가 초기 로딩 속도가 300ms 느린 것을 확인했다.왜 그럴까?각각의 장단점CSS in CSS장점초기 렌더링이 빠르다. CSS는 HTML 파싱 중 병렬로 로드되므로 렌더링을 차단하지 않는다.CSS 정적파일이므로 브라우저 캐싱이 쉽다. (재방문시 속도 빠름)스타일 적용 시점이 CSS 파일 로드 직후이다.따라서 런타임 비용이 없다모든 CSS 파일을 로딩..

왜 시작했는가? 요즘 어떤 글을 쓸 때, 꼭 GPT와 함께 시작하거나 막힐 때도 함께 하였다.문득 그런 생각이 들었다. GPT가 없을 때는 어떻게 했지? 조금씩 AI에 대한 의존을 많이 할수록 혼자 힘으로 생각해내고 나의 사고 근육, 뇌의 힘이 줄어드는 느낌을 받았다.사고가 정지된달까?점점 더 쉬운 길을 찾게 되고 한번 편한 맛을 보니 자꾸만 그 맛을 떠올리게 되었다. 하지만 무협지에서는 정도를 걷고 정진해야 고수가 된다.기연에만 의존해서는 안되고 그 기연을 잘 받아 내 것으로 만드려면 그 만큼의 큰 그릇과 준비가 되어있어야한다. 욕심을 부려 마성에 물들지 않게 조심해야한다. NotGPT(낫지)는 AI가 없으면 빈 문서에서 깜빡이는 커서만 멍하니 바라보고 있는 우리 세대와 함께,한달에 한두편이라도 작은 ..

최근 CS 기술 면접 대비에 시간을 많이 쓰고 있다.여러 자료 + 이전 강의에서 본 내용을 보면서 GPT와 모의면접을 하고 있는데, 생각보다 시간이 엄청 쓰인다.이렇게 시간을 많이 쓰는데 면접이 끝나고, 붙으면 좋겠지만 혹여 떨어지면 지금 준비하는 이 시간이 아무것도 안한 시간이 될까봐. 그리고 분명히 작년 11월 즈음 면접 준비를 하긴 했는데, 기억에서 날라가버렸다..뭐라도 남겨보자는 심정과 노션에 흩어진 글을 조금이라도 정제해보자는 마음으로 이 포스팅을 시작하였다.주로 GPT + VSFe 님의 기술면접 질문 모음집을 참고하였다.질문과 답변 모두 신입 개발자의 입장에서 쓰여진 것이니 오류나 말이 안 맞는 것이 있을 수 있다. 혹은 더 좋은 답변이 있을 수 있다.이를 발견하여 제게 알려주신다면 커피..라..

최근 CS 기술 면접 대비에 시간을 많이 쓰고 있다.여러 자료 + 이전 강의에서 본 내용을 보면서 GPT와 모의면접을 하고 있는데, 생각보다 시간이 엄청 쓰인다.이렇게 시간을 많이 쓰는데 면접이 끝나고, 붙으면 좋겠지만 혹여 떨어지면 지금 준비하는 이 시간이 아무것도 안한 시간이 될까봐. 그리고 분명히 작년 11월 즈음 면접 준비를 하긴 했는데, 기억에서 날라가버렸다..뭐라도 남겨보자는 심정과 노션에 흩어진 글을 조금이라도 정제해보자는 마음으로 이 포스팅을 시작하였다.주로 GPT + VSFe 님의 기술면접 질문 모음집을 참고하였다.질문과 답변 모두 신입 개발자의 입장에서 쓰여진 것이니 오류나 말이 안 맞는 것이 있을 수 있다. 혹은 더 좋은 답변이 있을 수 있다.이를 발견하여 제게 알려주신다면 커피..라..

최근 CS 기술 면접 대비에 시간을 많이 쓰고 있다.여러 자료 + 이전 강의에서 본 내용을 보면서 GPT와 모의면접을 하고 있는데, 생각보다 시간이 엄청 쓰인다.이렇게 시간을 많이 쓰는데 면접이 끝나고, 붙으면 좋겠지만 혹여 떨어지면 지금 준비하는 이 시간이 아무것도 안한 시간이 될까봐. 그리고 분명히 작년 11월 즈음 면접 준비를 하긴 했는데, 기억에서 날라가버렸다..뭐라도 남겨보자는 심정과 노션에 흩어진 글을 조금이라도 정제해보자는 마음으로 이 포스팅을 시작하였다.주로 GPT + VSFe 님의 기술면접 질문 모음집을 참고하였다.질문과 답변 모두 신입 개발자의 입장에서 쓰여진 것이니 오류나 말이 안 맞는 것이 있을 수 있다. 혹은 더 좋은 답변이 있을 수 있다.이를 발견하여 제게 알려주신다면 커피..라..

최근 CS 기술 면접 대비에 시간을 많이 쓰고 있다.여러 자료 + 이전 강의에서 본 내용을 보면서 GPT와 모의면접을 하고 있는데, 생각보다 시간이 엄청 쓰인다.이렇게 시간을 많이 쓰는데 면접이 끝나고, 붙으면 좋겠지만 혹여 떨어지면 지금 준비하는 이 시간이 아무것도 안한 시간이 될까봐. 그리고 분명히 작년 11월 즈음 면접 준비를 하긴 했는데, 기억에서 날라가버렸다..뭐라도 남겨보자는 심정과 노션에 흩어진 글을 조금이라도 정제해보자는 마음으로 이 포스팅을 시작하였다.주로 GPT + VSFe 님의 기술면접 질문 모음집을 참고하였다.질문과 답변 모두 신입 개발자의 입장에서 쓰여진 것이니 오류나 말이 안 맞는 것이 있을 수 있다. 혹은 더 좋은 답변이 있을 수 있다.이를 발견하여 제게 알려주신다면 커피..라..

최근 CS 기술 면접 대비에 시간을 많이 쓰고 있다.여러 자료 + 이전 강의에서 본 내용을 보면서 GPT와 모의면접을 하고 있는데, 생각보다 시간이 엄청 쓰인다.이렇게 시간을 많이 쓰는데 면접이 끝나고, 붙으면 좋겠지만 혹여 떨어지면 지금 준비하는 이 시간이 아무것도 안한 시간이 될까봐. 그리고 분명히 작년 11월 즈음 면접 준비를 하긴 했는데, 기억에서 날라가버렸다..뭐라도 남겨보자는 심정과 노션에 흩어진 글을 조금이라도 정제해보자는 마음으로 이 포스팅을 시작하였다.주로 GPT + VSFe 님의 기술면접 질문 모음집을 참고하였다.질문과 답변 모두 신입 개발자의 입장에서 쓰여진 것이니 오류나 말이 안 맞는 것이 있을 수 있다. 혹은 더 좋은 답변이 있을 수 있다.이를 발견하여 제게 알려주신다면 커피..라..

- 이전 글: AI Agent의 동작방식 알아보기(With web2)AI Agent in Web3이전 글에서 소개한 것 처럼, Web2 환경에서의 AI Agent는 어쨋든 중앙화된 서버에서 동작하며, 사용자 데이터를 수집하고 처리합니다. 이 모든 과정이 특정 기업이나 기관이 통제하는 중앙화된 인프라에서 이루어집니다. 이런 구조에서 데이터 수집 정책 논란이나 개인 정보에 대한 우려가 끊이지 않고 있습니다.2023년 OpenAI에서는 ChatGPT에서 사용자 대화 기록, 개인 식별 정보를 유출하기도 하고, 삼성의 회사 기밀을 유출하여 삼성에서는 GPT 사용 금지 조치가 내려지기도 했습니다. 2024년 Anthropic의 Claude에서도 외부 협력사 시스템의 취약점을 이용해 특정 사용자 대상 데이터가 유출..

AI Agent란AI Agent가 동작하는 방식에 대한 조사AI AgentAI Agent(agentic AI)는 최근 마케팅 용어처럼 사용되기도 하지만, 본질적으로 LLM이 자체 판단으로 목표 달성을 위해 도구/다른 AI를 활용해 인간을 지원하는 시스템입니다. 단순 반복 작업부터 복잡한 문제 해결까지, 학습 능력과 환경 적응성을 바탕으로 다양한 역할을 수행합니다. LangChain, LangGraph, AutoGen 등 기존 AI 워크플로우를 발전시킨 형태가 현재의 AI Agent로 불립니다.AI Agent와 기존의 ChatGPT 같은 LLM 서비스의 차이점은 목적과 능력에 있습니다.기존의 LLM 서비스의 경우, 기본적으로 챗봇의 형태로 인간과 상호작용 하도록 설계되었습니다.따라서 인간을 보조하기만 할 ..

순열과 조합N사 등 여러 코딩테스트에서 유용하게 쓴from itertools import permutations, combinationspermutations(arr, 2) # 들어갈 배열과 몇개 뽑을건지. 순서를 고려해 (A,B)와 (B,A)는 다른 것combinations(arr, 2) # 순서를 고려하지 않는다. (A, B)와 (B, A)는 같은 것 이외에 zip(), chain(), all(), any() 등 iterable 관련 함수들 filterfilter 함수를 쓰면 type이 이니 list로 바꿔줘야함def func(num): return num > 100arr = [1,2,3,101,102]list(filter(func, arr) # 100 이상의 수만 filterlist(filter(..

결국 의문사한 라즈베리파이...정확히 말하면 라즈베리파이가 의문사한 것은 아니고 유플러스 공유기 때문에 외부 접속이 되지 않는 것 같다.공유기 외부 IP로 라즈베리파이 접근이 갑자기 어제부터 안되기에...(안되는 이유는 1편 참고) 제우스의 조언으로 기존 GUI로 설치한 라즈베리파이 OS를 포맷하고 라즈베리파이 OS Lite CLI 버전으로 설치하기로 한다.깔고 보니 정말 아무것도 없어서 오히려 좋았다. 딱 필요한 것만 있는 태초의 상태.지난번 print 관련 모듈의 에러로그 때문에 저장공간을 다 써서 모든 docker container가 내려간 사건도 있었다. 라즈베리파이 OS 포맷하기라즈베리파이 OS를 싹 밀어버리는 것은 간단하다.SD카드 포맷을 해버리면 된다 ㅎㅎ.맥에서 '디스크 유틸리티'로 접근해..

1. Tanstack-query에 캐싱 기능이 필요한 이유Tanstack-query는 비동기 상태, 서버 상태를 관리해주는 라이브러리이다.브라우저와 서버 자체적으로도 캐시 관리를 할텐데, 서버의 상태를 관리하는 라이브러리에서도 캐싱이 필요한 이유가 궁금했다.클라이언트 측에서 서버의 상태를 알고 싶다면 항상 최신의 상태를 알도록 요청하고, 이에 대한 캐싱은 브라우저나 서버의 책임이지  tanstack-query의 책임이 아니지 않을까? 라는 생각이었다.  하지만 tanstack-query는 갖고 있는 서버 상태를 유효성 검사를 하며 네트워크 요청 자체를 효율적으로 관리하고자 했던 것이다. 간단히 정리하자면,네트워크 요청을 최소화한다. 동일한 데이터를 반복적으로 서버에 요청하지 않도록 한다. 이는 서버 부..

기본적이지만 가끔 까먹어서 다시 한번 정리해보고자 한다.결론은 의도에 맞는 연산자를 사용하자! 이다. `useQuery`와 `useSuspenseQuery`의 차이점은 초기값이 보장되는가에 있다. 만약 `useQuery`를 사용한다면 `undefined`가 타입에 적용되기에 지금까지 반환되는 `data`에 옵셔널 체이닝(?)이나 널 병합 연산자(??)를 사용했었다. 문제 상황은 코드리뷰를 하다가 동료가 `||` 연산자를 `data` 초기값에 넣어주었다. const { data } = useSomethingQuery();const name = data?.name ?? '기본값';// 또는const name = data?.name || '기본값'; 이때, || 연산자를 사용하면 어떤 문제가 있을까?상황에 따..

문제 상황코드잽 (https://code-zap.com/) 서비스에서 코드 템플릿을 업로드(POST)할 때 누르는 "저장"버튼이 있다.정보를 모두 작성하고 "저장" 버튼을 빠르게 두번 누르면 같은 템플릿이 두개 생겼다.  이를 막기 위해서 무엇부터 해볼까 생각해보았다. 우선 브라우저 네트워크 창을 보니 "저장" 버튼을 누른 횟수만큼 POST 요청이 갔다. '아니 이거 서버에서 막아야하지 않나요?' 할 수 있지만 아직 막지 않은 이유는 1) 같은 title로 생성되는 템플릿을 막을 것인가? 2) 어떤 데이터로 같은 템플릿이란 것을 구분할 것인가? 등의 논의가 있었다. 어떤 단위 시간동안 같은 title로 들어오는 생성 요청을 막는다던지... 하지만 사실 결제 기능같이 크리티컬한 부분은 아니었기에 이 부분은..

추억팔이KUCC에 들어온지가 언젠지.. 도 가물가물한데, 채널톡과 KUCC의 인연도 오래된 것 같다.채널톡에서는 동아리 지원금 뿐만 아니라 매학기 오피스 투어를 열어 대학생들에게 맛있는 저녁도 사주고 현직 개발자들과의 치킨챗(?)을 해준다. 이와 더불어 채널톡 챌린저스에 참여하는 각 대학 동아리 간의 해커톤인 채널톡 챌린저스 HACKY-TALKY를 개최한다.고려대 KUCC뿐만 아니라 DevKor 연대 YCC, 서울대 SCSC와 멋사, 카이스트 SPARCS, 세종대 엔샾 이렇게 구성되어있다.(여기서 인연을 맺은 사람들과 SKYST 연합 행사도 개최하고 했다) 작년 채널톡 해커톤에도 나왔었는데, 그 당시에도 랜덤매칭으로 나왔던 것으로 기억한다. 쿠씨(KUCC)의 민재형, 성철이와 YCC의 소효은님과 나왔었는..

사실 과제테스트를 끝내고 회고를 하다보니, 아래의 예시는 useEffect, useLayoutEffect 둘 다 쓸 필요가 없는 상황이었다... ㅎㅎ하지만 이를 위해 useLayoutEffect에 대해 알아봤던게 아까워서 일단 글을 써본다! --- 엘리스 회사 과제테스트를 보다가 아래와 같은 UI에서 가격 필터링을 구현해야했다.해당 가격 필터링은 URL search params로 저장하며 새로고침해도 해당 필터링 값이 남아있어야했다.이를 구현은 했지만, 새로고침하면 처음에는 "무료" 필터링이 선택되지 않은 상태였다가 선택된 상태로 바뀌면서 화면 렌더링이 두번 되는 이른바 "깜빡"이는 현상이 발생했다. `react-router-dom`의 `useSearchParams` 훅을 선언했고, `setSearchP..

문제 상황MSW에서 다음과 같은 에러를 주었다.하지만 MSW handler에 분명히 해당 endpoint와 method를 구현해주었는데, 왜 이렇게 나오는지 원인을 찾지 못했다.console.error [MSW] Error: intercepted a request without a matching request handler: • POST /templates If you still wish to intercept this unhandled request, please create a request handler for it. Read more: https://mswjs.io/docs/getting-started/mocks 원인 파악우선 원인을 ..

보통 6기 동기 친구들은 합격하자마자 이런 글을 작성하는데, 레벨 4가 지나가는 이 타이밍에 갑자기 우테코 합격후기라니...대신 조금 더 생활을 해본 사람의 관점에서 글을 쓸 수 있다는 장점이 있다고 생각하자.완전 럭키마위잖앙~! 6기 합격하고 처음 페어프로그래밍을 접한게 그저께 같은데, 벌써 7기를 모집한다고 한다.그래서인지 학교 동아리 후배한테 7기를 지원할까 고민중이라며 커피챗 요청이 왔다.1년도 안됐지만 그동안 엄청난 지식 주입의 시간을 보내왔기에 기억을 끄집어내는데 고생을 좀 했다. 기억을 되살린 김에 써보는 우테코 웹 프론트엔드 6기 합격후기/수기, 시작. 우테코 도움이 되었나요?커피챗을 요청해온 친구는 프론트엔드를 독학해서 우테코의 커리큘럼을 알려줬을 때, 이런 개념들을 어느 정도 알고 있는..

상황은 이렇다.우리 팀은 dev/fe 브랜치에서 각자 feature 브랜치 따서 작업을 하고 다시 dev/fe로 합치는 과정으로 진행한다. 즉 dev/fe가 develop 브랜치이다.(Git flow 관점) 나는 로그인 기능을 개발하기 위해 dev/fe 브랜치에서 feat/authentication 브랜치를 따서 작업을 하고 있었다.이후 동료의 디자인 토큰 기능과 헤더 기능이 완료가 되어 동료의 작업 브랜치에서 dev/fe 브랜치로 Merge가 되었다. 이때 나의 feat/authentication 브랜치로 최신의 dev/fe 브랜치의 작업물을 가져오고 싶은 상황이다.Pull을 해야할까? Rebase를 해야할까? Rebase할 때 주의점개념적인 Pull과 Rebase의 차이와 장단점은 다른 글에서 설명을..

내 사이트인데 왜 나를 막아..S3 + CloudFront로 배포해놓은 사이트에 대체 도메인으로 등록해놓은 사이트로 접근 시 다음과 같은 에러가 났다.또 처음에는 도메인으로 사이트에 접근이 되었는데 새로고침 시에도 같은 에러가 났다.InvalidRequestRequests using x-amz-source-account or x-amz-source-arn must be made over HTTPS and AWS Signature Version 4원인을 파악하다가 http로 요청이 보내지고 있음을 확인했다.하지만 유저가 http로 요청을 보내도 안전하게 우리 서비스에 접근할 수 있는 방법이 없을까 고민하다가.. CloudFront의 뷰어 프로토콜 정책을 알게 되었다.유저에게 https를 요구하는 것으로 H..