전체 글

이것은 나의 랜선 선생님인 정환님(winterlood)의 새 강의 오픈 소식을 듣고 부랴부랴 해보는 포스팅...! 이래 봬도 나는 정환님 강의는 나오는 대로 족족 수집하는 열혈 수강생이다.- 유데미 | 한 입 크기로 잘라먹는 리액트(React.js)- 인프런 | 한 입 크기로 잘라먹는 타입스크립트(TypeScript)- 유데미 | 프로젝트로 배우는 React.js & Next.js 마스터리 클래스3개 강의 다 소장 중....이란 사실 부트캠프에서 한입 리액트 강의를 하도 추천하고 다녀서 바이럴이냐는(...) 소리도 들었었고디스코드 커뮤니티에도 속해 있고, 오픈 카톡에도 속해있다.심지어 유데미에서 열린 라이브 세션도 참석했었다. 진짜 열혈 수강생 맞음  아무튼 때마침 정환님 새 강의 소식을 보게 돼서이 참..

왜 줄 바꿈이 적용되질 않는 거야?다음은 내가 만든 텍스트 입력 폼이다. 내용  를 이용해서 폼을 만들다 보면 매번 맞닥뜨리는 문제가 하나 있는데Enter 키를 쾅쾅 쳐서 위 이미지와 같이 긴 텍스트를 입력했는데도 불구하고값을 화면에 렌더링 하면 줄 바꿈이 공백으로 대체된다. {value} {/* textarea의 value 값 */}   이 현상에 대한 ChatGPT의 답변을 한 번 정리해 보았다. 사용자가 에서 줄 바꿈을 입력하면이는 텍스트 형태로 저장되면서 newline character(줄 바꿈 문자)로 표현된다고 한다.그리고 이 줄바꿈 문자는 운영체제에 따라서 `\n` 또는 `\r\n` 으로 저장된다고 한다.Unix/Linux, macOS: Line Feed(LF)로 표현. ..

개요책에 대한 이야기를 하기 이전에 배경을 설명하자면 나는 프론트엔드 개발자 취준생이다. 신입으로 발돋움하기 위하여 많은 개발자 취준생들이 그렇듯이 채용 공고를 보며 '아 이런 기술 스택을 요구하는구나', '이런거 공부해야 하는구나'하고 도움을 얻곤 하는데, 여러가지 중에서도 가장 생소하게 느껴지는 스택이 바로 테스트 도구였다. Jest, Cypress,... 어... 뭐.. 조금은 알 것 같기도 한데 그래도 이게 뭘까요? 어떻게 공부해야하죠? 어째 접할수록 막막하기만 했다. 어쩔 수 없이 학습 후순위로 밀리면서 테스트에 대해서 알아가기 어려웠는데(실제로도 다른 스택들과 비교하여 우선순위가 낮기는 하다. 신입일 때보다 연차가 있을 때 요구되는 경우가 훨씬 많았다 아무래도..), 이 때 접하게 된 책이 아..

Supabasehttps://supabase.com/ Supabase | The Open Source Firebase AlternativeBuild production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.supabase.com Supabase는 데이터베이스와 API를 쉽고 간단하게 구축할 수 있는 severless DB 솔루션.PostgreSQL을 데이터베이스 엔진으로 사용하고 있어 복잡한 쿼리 작업도 용이하게 사용할 수 있다. "Supabase is an open source Fireba..

이전에 관련된 주제로 가볍게 포스팅한 적이 있지만제대로 학습할 기회가 생겨 차례 차례 정리해본다! [REACT] TDD 와 리액트 테스트 도구TDD Test Driven Development. 테스트 주도 개발 테스트가 개발을 이끌어 나가는 형태의 개발론. 프로그램을 개발하기 이전에 테스트 코드를 작성하고 실행함으로써 예상되는 결과가 출력되는 지 확인s-ryung.tistory.com   describe("회원가입 페이지", () => { test("인풋이 활성화되면 underline의 컬러가 바뀐다", async () => { }); test("아이디가 중복이면 에러메시지가 나타난다", async () => { }); test("비밀번호가 일치하지 않으면 에러메시지가 나타난다", async () =..

경청봉 6기에 소속되어 있는 나😎참여할 수 있는 봉사 활동을 기다리면서 네이버 카페를 들락날락하던 와중 첫 번째 연합봉사 모집 공지가 올라왔다. 경기도어린이박물관에서 진행되는 이번 봉사는전시 및 체험활동 운영 보조와 방문 아동 안전관리를 도와줄 인력을 구하는 내용이였다. 아동 대상 봉사라는 점도 좋았지만 끌리는 포인트는 일정과 거리..!3개월이라는 넉넉한 기간 중 원하는 일자를 골라서 참여할 수 있다는 점에서 자율성이 있어 좋았고용인시에서 설마 했지만 무려 도보 30분 정도로 가까운 곳이라는 것... 이건 내 거다망설임 없이 신청날 정시에 들어가 신청서를 제출하고 선발됐다 🤗  4/18 저녁 시간대에 진행된 줌 OT를 통해서 기초적인 내용을 전달받은 뒤4, 5, 6-7월 각 달마다 희망하는 날짜를 신..

코테는 안한지 오래됐지만... PCCP 무료 응시권을 헛되게 날린 수 없어서... 최대한 해 보는 벼락치기 ⚡️프로그래머스 레벨1, 2 문제들 최대한 다시 풀어보자 !!   🧩 약수와 소수약수 = 어떤 수를 나누었을 때 나머지가 0인 수를 그 수의 '약수'라고 함소수 = 약수로 1과 자기 자신만을 갖는 어떤 수 (= 1과 자기자신으로만 나누어지는 수)ex) 5는 1, 5로 나누어진다. 5의 약수는 1과 5이다. 5는 소수다.4는 1, 2, 4로 나누어진다. 4의 약수는 1, 2, 4이다. 4는 소수가 아니다. 약수를 구할 때에는 for문으로 1부터 해당 값까지 전부 탐색해도 가능은 하지만 보통 시간초과함때문에 1부터 해당 값의 제곱근까지만 탐색하는 방법을 사용 (#136798)- Math.sqrt(숫자..

구글 애널리틱스, 누구세요?https://analytics.google.com/구글에서 무료로 제공하는 웹 분석 서비스 Google Analytics(GA)구글 애널리틱스를 활용한다면 일일 사용자 수부터 페이지 별 사용자 수, 사용자의 이벤트 등 여러가지 지표를 얻을 수 있다.  우리는 웨이브드를 단기간 직접 운영해볼 예정이였고, 구글 애널리틱스를 활용한다면 유의미한 운영 지표를 얻어볼 수 있을거란 기대가 있었기에 리팩토링 스프린트 중 우리 서비스 내에 도입해보았다.   (1) GA 계정 생성하기(+ 우리는 관리자용 구글 계정을 하나 갖고 있었기 때문에 이 계정에서 아래 과정을 진행하고,추후 개인 계정을 초대해 각자가 지표를 볼 수 있도록 설정했다.) 홈페이지에서 좌측 하단 톱니바퀴(⚙️)를 눌러 계정 ..

WAVED와 함께 챌린지의 파도를 넘어 취업으로!   안녕하세요!저희는 멋사로켓단 1기의 팀 세니티 입니다 🦁 🚀 멋사로켓단이란?프로그래밍 교육 업체 멋쟁이사자처럼에서 주관하는 실무 프로덕트 개발 프로그램입니다. 제가 소속된 팀 세니티는 UI/UX 디자이너 2명, 프론트엔드 개발자 3명, 백엔드 개발자 2명, 총 7명으로 구성되어 있습니다. 그리고 저는 이곳에 프론트엔드 개발자로 참여하게 됐어요 👩🏻‍💻   이번에 장장 2개월의 개발 기간을 거쳐개발 직군 취준생을 위한 챌린지 플랫폼 WAVED를 런칭(04/22)하게 되었습니다!! 이 기쁜 마음을 담아 제 블로그를 통해서도 웨이브드를 가볍게 소개해봅니다 🐋   🔗 서비스 링크 : https://waved-likelion.site WAVED챌..

어쩌다 내가 PWA를 맡게 되었을까?는 모바일 기반 웹 서비스. 기획 의도 상 사용자가 모바일 디바이스를 기반으로 서비스를 접근하는 것이 더 적절하다고 판단했고, 화면 역시 모바일 디바이스를 기준으로 제작하고 있었다. 그러다 보니 디자이너분들 눈에 특히 아쉬운 것이다. "앱으로는 못할까요?" 죄송합니다 제가 웹 개발자예요.. 그래도 찾아보니 PWA라는 기술이 있는데 이걸 도입하면 웹을 앱처럼 사용하는 것이 가능하다는 내용을 확인. 문제는 PWA를 사용해 본 인원은 고사하고 뭔 지조 차도 다들 잘 모른다는 사실. 솔직히 처음 들었다. 이 당시 우리는 MVP 모델 완성이라는 목표만으로도 굉장히 쥐어 짜이고 있었기 때문에 "일단은 우선순위를 뒤로 미루고 우리 여유 생기면 도입해요 🥺"라는 마법의 문장으로 일..