티스토리
관련 서비스
  • Symbols스토리 홈바로가기바로가기
  • 브런치브런치스토리바로가기바로가기
  • 카카오스토리카카오스토리바로가기바로가기

공부하는 수댕
검색하기
블로그 홈

블로그 홈

공부하는 수댕

let-d0-study.tistory.com/m
신고

프론트엔드 개발자 하고 싶은 취준생

구독자
6
방명록 방문하기
공지 Github, Velog 주소 모두보기

주요 글 목록

  • [모던 자바스크립트 Deep Dive] 08장 제어문 ▶️ 목차ch.08 제어문 👀 읽은 내용 정리제어문조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용. 블록문(Block statement)0개 이상의 문을 중괄호로 묶은 것. 코드 블럭, 블럭이라고 함.자바스크립트는 블록문을 하나의 실행 단위로 취급블록문은 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론 생략한다. 조건문주어진 조건식의 평가 결과에 따라 코드 블록(블록문)의 실행을 결정. boolean 값으로 평가됨.if-else(else if)조건식의 평가 결과에 따라 실행할 코드 블록 결정. 따라서 조건식은 boolean 값으로 평가되어야 함.조건식의 평가 결과가 boolean 값이 아닌 경우 JS엔진에 의해 암묵적으로 boolean 값으로 강제 변환된다.  조건에 따라.. 공감수 0 댓글수 1 2025. 4. 4.
  • [TIL] 2025년 03월 26일 수요일 ✔️ 오늘 한 일- 포트폴리오 피드백- 한입 리액트 강의 ch07- 노마드 코더 자바스크립트 챌린지 3일차 ➕ 학습한 내용- 포트폴리오 피드백1. 면접관이 보기에 가독성 좋고 편한 이력서가 되도록 작성하자2. 내 장점(다양한 언어 사용, 많은 프로젝트 경험 등)을 잘 살리는 부분으로 내용을 수정하자3. 시각 자료를 많이 사용하자.4. 포트폴리오는 만들자.5. 기술적 능력 외에도 소프트스킬이나 프로젝트에 대해 보여줄 수 있는 부분을 감성적으로 보여줘도 좋겠다. 🔎 하루 회고 (KPT 회고)Keep: 1. 이른 시간 기상하기2. 기상 후 1시간 이내 자리에 앉기Problem:1. 늦게 잠들기. 늦게 잠들어서 늦게 일어나게 된다.2. 집에서는 공부를 시작하는데 오랜 시간과 에너지가 소모됨.3. 식후 낮잠 T.. 공감수 2 댓글수 1 2025. 3. 27.
  • [TIL] 2025년 03월 25일 화요일 ✔️ 오늘 한 일- 도서관 다녀오기- 정보처리산업기사 실기 접수- 자바스크립트+리액트 디자인 패턴 도서 ch01-ch04- 한입 리액트 강의 ch07- 노마드 코더 자바스크립트 챌린지 2일차 ➕ 학습한 내용- 자식 컴포넌트 사이에서 state 값을 전달하고 싶을 때자식 컴포넌트 사이에서는(즉 형제 컴포넌트) state값을 전달할 수 없다.왜? 리액트는 단방향 데이터 흐름(One-way data flow)을 따르기 때문이다.그럼 어떻게 전달할까? 공통된 부모 컴포넌트를 두고 부모 컴포넌트에 state를 선언한다.그 값을 props로 전달 받으면 된다.해당 방식을 상태 끌어올리기, 리프팅 업(lifting state up)이라고 한다. - document.write를 사용하는 것이 왜 안티 패턴인가?자바스크.. 공감수 2 댓글수 3 2025. 3. 25.
  • [자바스크립트+리액트 디자인 패턴] ch.01 - ch04 ▶️ 목차ch.01 디자인 패턴 소개ch.02 패턴성 검증, 프로토 패턴 그리고 세 가지 법칙ch.03 패턴 구조화 및 작성ch.04 안티 패턴🖋️ 세 줄 요약1. 리액트의 Context API도 공급자 패턴이라는 디자인 패턴임2. 결국 좋은 디자인 패턴이란, 사용자가 이해하고 활용하기 쉬우며 규칙에 의거해 작성된 패턴이다.3. document.write는 함수 자체가 안티 패턴. mdn에서도 사용을 강력하게 만류한다.❗️ 새롭게 알게 된 내용패턴이 뭔데?패턴: 소프트웨어 설계에서 반복되는 주제에 적용 가능한 재사용 템플릿 디자인 패턴의 이점1. 검증됨2. 재사용이 쉽다3. 공통 표현을 사용해 알아보기 쉽다.4. 이미 작성된 코드 구조를 사용해 개발 시 사소한 실수를 방지할 수 있다.5. 언어나 애플리.. 공감수 0 댓글수 0 2025. 3. 25.
  • 수료한지 한달이 지나서야 적어본 코드캠프 회고 시작2024년 08월 더울 때 시작한 새싹X코드캠프 과정이 2025년 01년 끝이 났다.불안한 마음에 방황하다가 우연히 보게된 광고를 따라 홀린 듯 신청했었다.단순히 리액트만 진행하는게 아닌 리액트 네이티브도 동시 병행이라고 해서 신청했다.항상 앱에도 관심이 많았고 웹앱 둘 다 하면 후에 혼자서도 앱까지 있는 서비스를 운영할 수 있을 것 같았다.신청하고 잊고 있다가 면접을 보러 오라고 하셨다.깔끔한 흰 반팔에 청바지를 입고 본 면접에서, 이곳에서 떨어진다면 계획도 물어보셔서 '안 됐나 보다'라고 생각하고 있었다..포기하고 다음엔 뭘 해야하나 고민하고 있었는데 합격 문자를 받았다. 초반반 분위기가 조용해 한동안 조용하게 내 할 일을 하면서 보냈다.새로운 시작이기도 하고, 오프라인 교육은 처음이라 학교 다닐.. 공감수 1 댓글수 1 2025. 2. 26.
  • Failed to execute command: npm install --silent ERROR 분명 설치도 확인했고 이제 프로젝트를 만들려는데 갑자기 에러 뚜둥찾아보니까 23년부터 있던 kt 인터넷망과 관련된 이슈인 거 같은데 왜 아직도...https://minyakk.tistory.com/26 [NestJS] Failed to execute command: npm install --silent 에러문제 NestJS 의 새로운 프로젝트를 생성하는 과정에서 에러가 발생했다. 이전에는 잘만 됐었는데, 환경을 바꾼 것도 아닌데 왜 이럴까 의아했다. $ npm i -g @nestjs/cli $ nest new project-name Installation in prominyakk.tistory.com이 글을 참고해서 npm config set registry https://registry.npmjs.cf.. 공감수 0 댓글수 0 2024. 12. 12.
  • [강의 수강] NomadCoder NestJS로 API 만들기 #0 들어가며원래 파이어베이스를 사용하기로 했던 코촉촉 팀 ERD를 대충이나마 생각해놓고 구현하기 위해 그려봤다.다른 부분은 크게 어려움이 없었는데, 채팅 부분에 대해 연관성이 너무 높았다.테이블 최소 4개여서 파이어베이스만으로는 구현이 불가능했다.노선을 바꿔 백엔드를 구축해야겠다는 생각을 했고 그 과정은 아래 글에 작성할 예정이다.https://let-d0-study.tistory.com/entry/%ED%8C%8C%EC%9D%B4%EC%96%B4%EB%B2%A0%EC%9D%B4%EC%8A%A4%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%A7%80-%EB%AA%BB%ED%95%9C%EB%8B%A4%EA%B5%AC%EC%9A%94-%EA%B7%B8%EB%9F%BC-%EC%96%B4.. 공감수 1 댓글수 1 2024. 12. 12.
  • EACCES ERROR @nestjs/cli & command not found: nest npm install -g @nestjs/cli 명령어로 nest를 설치해주려고 했다.근데 아래 이미지처럼 좌자작하고 에러가 나왔다. EACCES. 즉 권한 문제였다.처음에는 npm 캐시문제있은 줄 알고 npm cache clean --force 명령어로 해결해보려고 했는데 실패. sudo를 사용하기 싫었지만 결국 sudo npm install -g @nestjs/cli를 사용해서 설치했다.후에 sudo없이 설치하는 방법을 찾았는데 테스트해보진 못해서 후에 테스트해 봐야겠다.https://github.com/sindresorhus/guides/blob/main/npm-global-without-sudo.md guides/npm-global-without-sudo.md at main · sindresorh.. 공감수 0 댓글수 0 2024. 12. 12.
  • [Lv.0] l로 만들기 2024.12.02 푼 문제https://school.programmers.co.kr/learn/courses/30/lessons/181834 ✅ 문제알파벳 소문자로 이루어진 문자열 myString이 주어집니다. 알파벳 순서에서 "l"보다 앞서는 모든 문자를 "l"로 바꾼 문자열을 return 하는 solution 함수를 완성해 주세요.제한 사항1 ≤ myString ≤ 100,000myString은 알파벳 소문자로 이루어진 문자열입니다.입출력 예myStringresult"abcdevwxyz""lllllvwxyz""jjnnllkkmm""llnnllllmm"🔎 풀이 방법I가 있는 곳의 인덱스 위치를 알아내서 그 앞을 자르고, 해당 부분 길이만큼 I를 앞에서 추가해준다.저거 아님. 유니코드 상 소문자 L보.. 공감수 0 댓글수 0 2024. 12. 11.
  • 코촉촉팀 기획 발표 피드백 https://www.notion.so/dingco/3-150c86f4086180079ec2cd57bd956d30?pvs=4  해당 기획서에서 팀원 소개, 기획 의도, 와이어프레임 그렸다. 정도 이야기 하고, 주요 기능과 개발 일정에 대해 설명.작업 환경과 기술 스택만 발표했다. 10분 이내의 발표였고, 기획의도와 주요 기능, 기술 스택에 초점을 맞춰 발표해 달라고 부탁받았기 때문이다.평소 발표 경험이 많지 않고 긴장을 많이 했어서 걱정은 조금 됐다. 전날 저녁에 기획서를 정리하며 3~4번가량 읽고 녹음하는 연습을 했다.연습의 덕분인지 내용적인 부분에 있어 빼먹거나 더듬는 부분은 많이 줄었다. 발표 끝나니까 다들 잘했다 해주셔서 감동 & 걱정으로 대표님께 가서 여쭤봤다."기획 말고 발표만, 어땠는지 피드.. 공감수 0 댓글수 0 2024. 12. 9.
  • [초기 설정] 멀티 레포 관리와 Netilfy 배포 모노 레포 방식으로 한 레포지토리에서 web과 moblie, 둘 다 관리하려고 했지만 브랜치 관리의 편의성을 위해 멀티 레포방식을 사용하기로 결정했다.모노 레포에서는 개인 레포지토리에서 만들었기 때문에 Vercel로 관리가 가능했지만, Vercel에서 Organization의 레포는 유료로 배포해야 한다.Next.js와 찰떡인 Vercel을 사용하지 못한다는게 아쉬웠지만, 단순히 배포용이라면 Netlify로 배포해도 괜찮아보였다. 코촉촉 Organition : https://github.com/ko-chock-chock 코촉촉반려동물 구인 및 판매 서비스 코촉촉. 코촉촉 has 2 repositories available. Follow their code on GitHub.github.com 우선은 웹만.. 공감수 1 댓글수 1 2024. 12. 9.
  • [초기 설정] 모노 레포와 Vercel 배포에 관하여 배포 ToolNext.js 14 : vercelReact Native Expo : expo cli 배포 과정Next, React 어떤 라이브러리/프레임워크를 사용하더라도 웹은 Vercel로 배포하려고 했었다.딸깍 몇번이면 끝나는 배포에, 애초에 Next 자체가 vercel에서 만들어졌기 때문이다.그래서 열심히 배포를 하고?!생각해보니까 웹뷰를 보여주는 웹앱을 할 예정인데 웹만 repository에 담아 배포했다...참고로 우리 조는 모노레포 형식이다. (모노레포: https://f-lab.kr/insight/advantages-of-monorepo-20240625)expo는 배포를 어떻게 하면 좋을지 몰라 찾아보고 생각해본 결과, CLI에서 expo start 등을 이용해서 실행시키는 걸 배포라고 하더라.. 공감수 0 댓글수 0 2024. 12. 6.
  • [초기 설정] Git & Github 초기 설정 초기 설정 이유와 방법팀프로젝트 시작을 위해 레포지토리(오가니제이션)을 만들어야 한다.Vercel로 배포하려고 하는데 오가니제이션 안의 레포지토리는 유로이다.무료로 사용하기 위해 개인 레포로 fork 해온 다음, Github Action을 사용해 설정해주는 과정이 필요해서 초기 설정을 빠르게 해야하는 우리 팀에게는 이 방식은 맞지 않다고 생각했다.기간이 짧기 때문에 배포에도 많은 시간을 투자할 수 없어 Vercel을 포기하진 못했다...그래서 생각한 방법이 개인 레포를 만들어 해당 레포를 배포하고 다른 팀원들은 내 레포를 fork해서 작업하는 방식으로 가기로 결정헀다.나도 브랜치 관리를 위해 해당 레포를 fork해서 사용할 예정이었지만 본인이 본인 레포를 fork하는게 안된다...(방법이 없나...)그래.. 공감수 2 댓글수 2 2024. 12. 6.
  • [오블완] 20일차 20일! 공감수 0 댓글수 0 2024. 11. 26.
  • [오블완] 19일차 월요일 좋아~! 공감수 0 댓글수 0 2024. 11. 25.
  • [오블완] 18일차 아 어제 까먹고 못썻다 공감수 0 댓글수 0 2024. 11. 24.
  • [오블완] 16일차 16일~! 공감수 1 댓글수 0 2024. 11. 22.
  • [오블완] 15일차 보름이 지났다 공감수 0 댓글수 0 2024. 11. 21.
  • [오블완] 14일 올해가 40일 남았다고? 벌써? 공감수 0 댓글수 0 2024. 11. 20.
  • [오블완] 13일차 절반 넘게 했다 공감수 1 댓글수 0 2024. 11. 19.
  • [오블완] 12일차 12일 공감수 1 댓글수 0 2024. 11. 18.
  • [오블완] 11일 바쁘다바빠 현대사회 공감수 0 댓글수 1 2024. 11. 17.
  • [오블완] 10일차 열심히 살자 공감수 0 댓글수 0 2024. 11. 16.
  • [오블완] 9일차 9일~~ 공감수 0 댓글수 0 2024. 11. 15.
  • [오블완] 8일차 5년 전 오늘 나도 수능봤는데...그땐 롱패딩 입고 봤었는데!날씨가 따뜻해진만큼 다들 따뜻한 마음으로 시험장을 나올 수 있길! 공감수 0 댓글수 1 2024. 11. 14.
  • [오블완] 일주일 일주일이나 지났다! 공감수 1 댓글수 2 2024. 11. 13.
  • [오블완] 6일차 6일차도 완료! 공감수 1 댓글수 0 2024. 11. 12.
  • GraphQL 응답 구조 확인을 통한 로그인 API 문제 해결 React Hook Form을 사용해 로그인 폼을 구성했지만, onSubmit과 onClick을 직접 처리하여 loginUser API를 호출하고 accessToken을 localStorage에 저장하려 했다.내가 생각하기엔 문제는 없어 보였는데 로그인 페이지가 렌더링 됨과 동시에 onClick안의 함수와 토큰 값을 출력하는 콘솔이 출력되는 문제가 발생했다.token=nulltoken=nullonClickFunction {}onClickFunction {}콘솔이 이런 식으로 나와 당황스러웠다.우선, 같은 콘솔 로그가 두 번 출력되는 이유는 React의 Strict Mode 때문인 것 같아 Strict Mode를 비활성화했다. 그럼 두 번째. 토큰은 왜 null이 나올까?코드를 보면서 설명해보려고 한다.우.. 공감수 3 댓글수 0 2024. 11. 11.
  • Next.js에서 strict mode 비활성화하기 리액트의 strict mode는 예상하지 못한 에러를 방지해 주는 역할을 한다.배포할 때는 strict mode가 자동으로 비활성화되지만, 개발하는 과정에서는 예상치 못한 에러를 만들기도 한다.그래서 strict mode를 비활성화하고 사용하는 걸 선호하는데, React에서는 app.js 또는 index.js 파일에서 부분을 없애주면 된다.import React from "react";import ReactDOM from "react-dom/client";import App from "./App";ReactDOM.createRoot(document.getElementById("root")).render( // // 이 부분을 주석 처리하거나 제거 // );  하지만 Next.js는 R.. 공감수 3 댓글수 1 2024. 11. 11.
  • [오블완] 5일차 빼빼로 데이다빼빼로 너무 비싸 공감수 4 댓글수 1 2024. 11. 11.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.