전체 글62 [일경험 인턴] 10주간의 경험을 뒤돌아보기! Intro 10주간의 인턴 과정이 끝이 난다. 분명 기록을 조금씩 해놨는데 정리하려고 보니 생각이 잘 나지 않는다. 끝나고 나면 더 기억이 안나겠다는 생각이 들었다. 좋은 점도 있었고 아쉬운 점도 있었고 일경험 인턴에 대해 가지는 아쉬움도 있는데 잘 정리해보려고 한다. 1주차 목요일은 현충일이었고 금요일은 창립기념일이어서 3일만 일하게 된 행복한 첫주였다. 물론 프론트엔드 인턴이 아니라 기획 인턴인줄 알고 뽑았다는것에 다소 충격을 먹었지만.. 간단한 안내를 듣고 서비스 파악하다 끝났다. 다음주에 할 일은 솜씨당 어플 전체 유저 플로우를 피그마로 정리하면 된다는 것이었다. 그리고 CTO님과 대화 하면서 프론트엔드 과제를 주시는 걸로 이야기가 마무리되었다. 2주차본격적으로 피그마를 정리하는데 화면별로 분리되.. 2024. 8. 9. [7월] 인턴과 면접으로 채운 한달의 기록 Intro저번달 회고를 한번 읽어봤다. 7월 계획에는 애초에 어떤 합격도 기대하지 않았다. 지원할 생각을 1도 안했기 때문이다..무슨 일이 일어났는지 돌아보자면 먼저 시작은 스터디였다. 프로젝트를 같이 했던 친구들과 캠 스터디를 하기로 했다. 우리는 모두 개인 프로젝트를 진행 혹은 준비하고 있었고 모두 취준생이었는데 취준 기간이 길어지다보니 혼자 하는게 버겁게 느껴졌기 때문이다. 그러면서 매일 스크럼을 작성하고 간간히 대화하면서 이력서도 피드백을 하자는 이야기가 나왔다. 지금 하는 개인 프로젝트를 제외하고 일단 작성해서 이력서를 돌려보자고 이야기가 나왔기 때문에 얼레벌레 이력서를 업데이트 하고 피드백하고 수정해서 지원했다. 아무 생각 없이 하루에 2-3군데씩 이력서를 지원했다. 근데 또 상시모집은 떨어지.. 2024. 7. 29. [My Little Rosemary] vanilla-extract 기본 세팅하기 설치하기vanilla-extract 설치하기npm install @vanilla-extract/css 통합 플러그인 설치하기npm install --save-dev @vanilla-extract/next-plugin 플러그인 설정next.config.jsconst { createVanillaExtractPlugin} = require('@vanilla-extract/next-plugin');const withVanillaExtract = createVanillaExtractPlugin();/** @type {import('next').NextConfig} */const nextConfig = {};module.exports = withVanillaExtract(nextConfig); 참고한 페이지 ht.. 2024. 7. 28. [My Little Rosemary] Next.js에서 어떤 도구로 스타일링 해야 될까? 프로젝트를 시작해서 기본적인 레이아웃을 잡으면서 고민이 시작되었다. 원래 react에서 사용했던 건 Styled Components였는데 이번 프로젝트에서 사용하려고 하니 생각해봐야 하는 부분이 있었다. 생각보다 번들 크기가 커진다는 것, 그리고 SSR방식이기 때문에 반짝임 현상이 발생하는 것 등등이었다. 그래서 이 부분에 대해 정리가 필요하겠다는 생각이 들었고 사용해봤거나 사용할 수 있는 것들을 모아서 비교해보기로 했다. 1. CSS Moduleshttps://nextjs.org/docs/app/building-your-application/styling/css-modulesCSS Modules는 CSS를 모듈화하여 작성할 수 있게 해주는 기술이다. CSS 파일에서 클래스나 ID를 정의할 때, 전역으로.. 2024. 7. 17. [cs] Observer Pattern 왜 알아야 할까? 정보처리기사 준비하기 전 나는 옵저버를 사용한 적이 있지만 무엇인지 제대로 모른채 사용했었다. 사용하면 왜 좋은지, 사용하지 않으면 무슨 문제가 생길 수 있는지에 대해 큰 고민 없이 사용하라는 말에 무지성으로 코딩했었다. 그러다가 정보처리기사 시험 준비를 하면서 GoF의 무수히 많은 디자인 패턴을 보며 기가 질림과 동시에 익숙한 단어들을 발견하게 됐는데 그 중하나가 옵저버 패턴이었다. 프론트 개발자가 Observer Pattern을 알아야 하는 이유는 뭘까? 프론트엔드 개발에서는 유저와의 직접적인 상호작용이 많다. 유저의 액션 하나하나에 민감하게 반응하고 그 데이터를 효율적으로 관리하는 것은 필수이다. 예를 들어, 사용자가 버튼을 클릭하면 UI가 즉시 업데이트 되어야 하고, 입력 폼의 데이터가 실시간으.. 2024. 7. 11. [React] 로컬 스토리지를 사용한 데이터 캐싱 문제개요상품 리스트 페이지에서 상품을 클릭해 상세 페이지로 이동 후, 뒤로가기 버튼을 눌렀을 때 페이지가 새로고침되면서 리스트의 상단으로 이동하기 때문에 UX가 떨어진다는 피드백을 받음.페이지에 카테고리와 필터가 중복으로 적용되고 있고 상품 데이터의 양이 많아 서버로부터 많은 리소스를 받아와야 함.위치값 사용의 문제화면의 높이값을 저장했다가 불러와서 로드해주는 방법을 사용했지만 새로고침이 되고 그 위치까지 자동으로 스크롤 되는 액션이 발생함위치까지 빠르게 이동하면서 그 사이의 데이터를 빠르게 받아와 보여주는 과정에서 많은 리소스가 낭비됨기획자의 요구사항새로고침 없이 이전 리스트 화면을 보여주기를 원함.현재는 페이지 위치값을 넘겨서 스크롤하는 방식으로 구현됨.런칭이 임박했고, 런칭 후 이벤트 때문에 유저.. 2024. 7. 1. [6월] 어느새 올해의 절반이 지나갔다 Intro일단 6월 한달에 대한 회고를 정리하고 나서 상반기 회고를 해보려고 한다.6월은 상반기를 수습하는 느낌도 들었고 다가올 하반기를 준비하는 느낌도 들었다. 인턴 하루에 5시간, 왕복 3시간 20분 총 8시간 20분을 쏟아부어야 하는 일이 생겼다. 작년 이맘때 멋쟁이 사자처럼 프론트엔드 스쿨을 한참 열심히 할 때 강의 듣던 시간이랑 얼추 비슷하다. 원래는 프론트엔드 직무 경험을 기대하고 지원한거였는데 막상 가보니 기획을 생각하면서 뽑으셨다고 했다. 분명 자소서에 개발이라고 적었던 기억이 있어 질문했더니 기획도 개발이라는 용어를 사용하는데 그것 때문에 혼선이 생긴 것 같다고 하셨다. 그렇게 첫날 멘붕이 왔지만 그래도 프론트엔드 직무도 경험할 기회를 주신다고 해서 일단 주어진 일을 열심히 하기로 했다.. 2024. 6. 29. [React] 쉽지 않은 유효성 검사(Debouncing, Throttling) 1. 유효성 검사유효성 검사(Validation)는 입력된 데이터나 정보가 특정 조건이나 규칙에 부합하는지를 확인하는 과정입니다. 이는 데이터의 정확성과 일관성을 보장하기 위해 중요하며, 다양한 분야에서 사용됩니다. 유효성 검사는 주로 입력된 데이터가 예상된 형식과 범위 내에 있는지 확인하는 것을 목표로 합니다.주요 유효성 검사 종류형식 유효성 검사(Format Validation)데이터의 형식이 올바른지 확인합니다. 예를 들어, 이메일 주소 형식이 올바른지, 전화번호가 정해진 형식을 따르는지 등을 검사합니다.범위 유효성 검사(Range Validation)데이터가 특정 범위 내에 있는지 확인합니다. 예를 들어, 나이가 0 이상 120 이하인지, 점수가 0점에서 100점 사이인지 등을 검사합니다.존재 유.. 2024. 6. 23. 이전 1 2 3 4 5 6 ··· 8 다음
