티스토리

공부하는 수댕
검색하기

블로그 홈

공부하는 수댕

let-d0-study.tistory.com/m

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

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

주요 글 목록

  • [오블완] 4일차 4일차다 헤헤 공감수 0 댓글수 0 2024. 11. 10.
  • [오블완] 3일차 벌써 3일차다 이거 끝나면 짝꿍 휴가 나오겠지? 공감수 0 댓글수 0 2024. 11. 9.
  • [오블완] 휴 오늘 못쓸뻔 공감수 0 댓글수 0 2024. 11. 8.
  • [오블완] 1일차 오와 그냥 글쓰면 되는건가?신기하다 공감수 2 댓글수 0 2024. 11. 7.
  • Next.js에서 tailwind가 적용이 안되요. 열심히 tailwind를 작성했는데 common 폴더 안의 파일에 tailwind가 적용이 되지 않아서 이것저것 찾아봤다.CNA 할 때 분명 tailwind도 설치해 줘서 안될 이유를 더 찾지 못했던 것 같다.tailwind 설정해주고 tailwind config 파일도 확인했는데 딱히 잘못된 게 없었다(그런 줄 알았다)다른 분들이 올리신 글은 나랑 다른 문제인 것 같아 검색을 멈추고 생각해 봤다. tailwind.config.ts 파일을 뜯어보다가 문제가 뭔지 알았다.tailwind.config.ts는 tailwind 관련 설정을 해주는 파일인데, 여기서 content 영역은 tailwind를 적용할 범위를 나타낸다.나는 당연히 common 폴더가 src/app/ 하단에 있을 거라고 생각했었는데 알고 .. 공감수 1 댓글수 0 2024. 11. 6.
  • 여행자들의 공간, Tripper 프로젝트 시작 (수정 중) 프로젝트 시작코드캠프 프론트엔드 13기를 진행하면서 과제로 받게 된 여행 프로젝트가 있다.중간에 과제를 몇 번 놓치기도하고 비어있는 요구사항도 많아 개인 프로젝트 포폴로 사용할 겸 새로 만들기로 했다. 리팩토링 안하고 새로 만드는 이유?1. tailwind css를 적용해보고 싶어서2. 시험 대비 겸 전체적인 복습을 하고 싶어서3. 공부를 할 때, 이해하지 못하고 무의식 중에 외워서 한다고 생각하는데 과제 역시 그런 방식으로 구현한 것 같아서4. 순도 100 공부를 위해 연습하는 프로젝트이다 => 기존 코드를 리팩터링해도 이해를 못 하고 한다면 의미가 없다고 생각해서 프로젝트 기간구현할 내용은 과제 목록에 어느정도 있고, API 없이도 프론트적으로 구현하고 싶은 기능들을 추가할 예정이다.과정을 반으로 잘.. 공감수 0 댓글수 0 2024. 11. 6.
  • 변수명 짓기 힘들다면? 항상 변수명 짓는 게 너무 x100000 힘들어서 찾다가 찾은 사이트! https://var.gg/ko/variables 변수명 및 모델명 생성기 var.gg 변수명 및 검색 단어에 따라 함수명까지 지을 수 있다. 공감수 0 댓글수 0 2024. 11. 6.
  • mac에서 숨겨진 파일/폴더 찾기 window에서는 숨겨진 파일을 볼 수 있게 선택할 수 있었는데 우리 불친절한 mac은 그런게 없어서...개인적으로 숨겨진 폴더, 파일을 볼 일 이 많았어서 단축키를 정리해두려고 한다. command +shift + . 이렇게 해주면 안보이던 폴더와 파일들도 함께 보인다! 공감수 0 댓글수 0 2024. 11. 2.
  • [241031] 메인캠프 Day44 - 1 (유틸리티 타입) 수업 중 기억하고 싶은 내용1. Typescript Utility Type유틸리티 타입은 미리 정의된 타입 도구로,  기존 타입의 속성이나 구조를 조작하여 원하는 형태의 타입을 쉽게 생성할 수 있도록 하는 타입이다.즉, 기존 타입을 편리하게 변형하고 재사용하기 위한 타입 도구이다. 유틸리티 타입의 주요 목적으로는 타입의 변형 및 조정으로 반복적인 타입 정의를 줄이고, 타입의 안정성과 유지보수성을 향상하는 데 있다. 아래 유틸리티 타입을 설명하기 전에 우선 타입 하나를 선언하고 시작해보자.interface IProfile { name: string; age: number; school: string; hobby?: string;} 2. Partial Typetype aaa = Partial;Part.. 공감수 1 댓글수 1 2024. 10. 31.
  • [회고] 코드캠프 13기 웹 중급 과정 두 번째 (짧은) 회고 회고를 시작하며매일, 매주 작성해 보겠다고 하고 한 달 만에 돌아왔다ㅋㅋ10월은 중간고사도 있어서 더 정신없고 바쁘게 지났던 것 같다. 웹 중급 과정 Day23 ~ Day 39 KPT한 달 동안 중요한 내용이 엄청 빠르게, 많이 지나갔다.제대로 복습을 못하고 같이 달리기 바빴다.벌려둔 일도 많아 수업에 더 집중 못했다.과제도 밀리고 강의도 밀리고 아주 멋져일단 이렇게 지내면 안 될 것 같다는 느낌이 아주아주 강하게 들었다 웹 중간고사 회고오전 9시 30분부터 오후 7시까지 이렇게까지 하나에 집중해 본 적은 없었다.밥 먹으면서도 코드 보고 중간에 나온 오류를 어떤 방법을 사용해서라도 해결해 나가는 과정이 너무너무 즐거웠다.맞아 이래서 개발자 하려고 했지. 시간이 타이트한 게 아쉬웠다.css도 더 연습하고 .. 공감수 0 댓글수 0 2024. 10. 30.
  • 티스토리에도 블챌이? 옆동네 네이버 블로그 챌린지 열심히 참여했었는데 이번엔 티스토리 차례인가 보다.네이버는 주간일기의 개념이었다면, 티스토리는 3주간 매일 올려야 한다.https://www.tistory.com/event/write-challenge-2024 작심삼주 오블완 챌린지오늘 블로그 완료! 21일 동안 매일 블로그에 글 쓰고 글력을 키워보세요.www.tistory.com 3주 동안 공부한 내용을 정리하고 쓰려고 했던 주제들을 정리해서 또 작성하는 시간을 가져야지.이런 챌린지들이 많아졌으면 좋겠다! 공감수 3 댓글수 3 2024. 10. 29.
  • mac에서 백틱(`) 사용하기 나 맥린이 개발자.지금은 알고 있지만 구입하고 일주일 지났을 때, 개발자의 필수 키라고 할 수 있는 백틱을 눌러도 적용이 안 되는 것이다...알고 보니 키보드 영어 입력 상태에서 백틱키를 눌러줘야 백틱이 나온다...한글 입력 상태일 때는 ₩ 기호가 나온다! 공감수 1 댓글수 0 2024. 10. 18.
  • mac에서 새로고침 단축키 mac을 구입한 지 어언 2달, 아직도 새로고침을 하는 단축키를 몰랐다...윈도우에서는 F5키 자체가 새로고침이었는데...우연히 아무키나 눌렀다가 찾았다!! command + shift + r 이었다...앞으로 새로고침 일일이 안 눌러도 된다... 야호 공감수 1 댓글수 0 2024. 10. 18.
  • GraphQL 뮤테이션 에러: 'Variable not provided' 에러 문제 상황그래프 큐엘을 사용해서 데이터를 불러오는데 자꾸 속성을 찾을 수 없다는 에러가 발생했다."Variable "$createBoardInput" of required type "CreateBoardInput!" was not provided." youtubeUrl 속성 추가와 동시에 graphql에서 mutation 호출 시 사용하는 createBoardInput 객체로 변경해주었다.그랬는데 잘 동작하던 코드가 갑자기 위와 같은 에러가 발생했다. 원본 query.ts// 게시글 생성하기export const CREATE_BOARD = gql` mutation createBoard($writer: String, $password: String, $title: String!, $contents: St.. 공감수 1 댓글수 0 2024. 10. 17.
  • git 연결을 하위에서 상위로 변경할 때 발생한 문제 해결 원래 kisa_next라는 폴더를 만들어 깃을 연결해 두고 a의 하단에 코드를 작성했다.그 후 kisa 폴더를 만들어 kisa 폴더 안에 kisa_next 폴더를 넣어준 뒤, 다시 kisa 폴더에 git init으로 연결해 줬다.그리고 kisa_next 폴더에 있는. git을 삭제해 git과의 연결을 끊어주었다.그러니까 정상적으로 staging 되고 있던 파일들이 전부 staging을 못한다고 나왔다. 깃잘알분께 여쭤보니 커밋은 정상적으로 올라가 있다고 하셔서 pull을 다시 받고 문제가 생긴 아래 폴더를 지우고 다시 올리면 될 거라고 하셨다. 하지만... pull을 받으려고 해도 Already up to date만 나오고 해결되지 않았다...이것저것 찾아보다가 결국 이렇게 해결했다. 1. kisa 폴더.. 공감수 3 댓글수 4 2024. 10. 16.
  • [JS Library] Swiper 사용하기 Swiper?슬라이드 쇼나 이미지 캐러셀과 같은 기능을 제공하는 라이브러리이다.https://swiperjs.com/ Swiper - The Most Modern Mobile Touch SliderSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.swiperjs.com Next.JS 환경에서 사용하기CDN으로 사용할 수도 있지만, 나는 yarn을 사용하고 있어서 아래와 같이 설치해 줬다.// yarnyarn add Swiper// npmnpm i Swiper https://swiperjs.com/react Swiper - The Most Moder.. 공감수 4 댓글수 7 2024. 10. 10.
  • GraphQL-Codegen : Not all operations have an unique name Not all operations have an unique nameGraphQL CodeGen을 설치하고 condegen.ts , package.json 파일까지 다 설정해 줬다. 그리고 yarn codegen을 실행시켜 줬는데? 짜잔 저게 뭐람 문자 그대로 updateBoards가 유니크한 이름이 아니어서 발생한 문제였다...저 많은 파일을 보니 어떻게 수정하지 막막했는데... 다행히!!!!전부를 수정할 필요는 없고 graphql 구문에서 같은 updateBoard라는 이름으로 선언했지만안에 받아오는 값이 다르다거나, 보내는 값이 다른 경우 발생하는 문제여서 해당 부분을 잘 보면 된다. 왜냐하면 얘는 같은 이름의 함수라면 같다고 생각하고 실행시키는데 그 안에 다른 매개변수를 가진 돌연변이가 갑자기 나.. 공감수 1 댓글수 5 2024. 10. 4.
  • [240930] 메인캠프 Day23 (정적라우팅 & 동적라우팅) 수업 중 기억하고 싶은 내용1. 정적라우팅NextJS에서 기본적으로 라우팅을 지원한다.useRouter() 훅을 사용하면 push() 메서드를 통해 경로를 이동할 수 있다. 이전에 쓰던 와 차이?Link태그는 단순히 페이지 간 이동에 더 중점적이고, useRouter()를 사용하면 특정 기능 실행 후 이동한다. (기능이나 비동기 처리 등을 완료하고 이동하는 조건부 제어) 그럼 useRouter() 어떻게 사용하는데?1. 일단 import 해줘야겠지?// 리액트 17 이하import { useRouter } from "next/router";// 현재import { useRouter } from "next/navigation";현재 사용하는 방식처럼 next의 navigation에서 useRouter를 가.. 공감수 4 댓글수 5 2024. 9. 30.
  • Git add에 staged된 파일 삭제 $git add를 하다보면 $git add .이나 $git add 특정폴더/를 하게되는 경우가 많이 생긴다.매일 명령어 찾아보고 하기 귀찮아서 한 번 정리해두려고 한다. git add$git add [원하는 파일이나 폴더 경로 || 전체(.)] add 후 staged된 파일 tracked(modified) 상태로 변경하기// 골라서 취소하고 싶은 경우$git reset HEAD [원하는 파일이나 폴더 경로]// add된 파일 모두 취소하고 싶은 경우$git reset HEAD add 후 수정한 파일의 경우 다시 add를 해줘야 한다. https://wotres.tistory.com/entry/git-add-%ED%95%9C-%ED%8C%8C%EC%9D%BC-%EC%B7%A8%EC%86%8C%ED%95%9.. 공감수 0 댓글수 0 2024. 9. 30.
  • [회고] 코드캠프 13기 웹 중급 과정 첫 번째 회고 회고를 시작하며일수로는 2주 가까운 시간이었지만, 추석 연휴도 있었고 주말도 있어 이제 (수업 일수로는) 7일이 지났다.웹 중급 과정 첫 주, 어떤 일들이 있었는지 정리도 하고 다음 주를 어떻게 보내면 좋을지 생각해보려고 한다. 웹 중급 과정 Day16 ~ Day22 KPT지난 일주일 동안 React, TypeScript, Next.js, GraphQL에 대해서 공부했다.환경설정하고 가볍게 다루는 느낌에 이미 (경험이라 하기 민망하지만) 한 번 해봤던 과정이라 쉽게 따라갔다.전에는 Rest API만 사용해 봤어서 GraphQL이 조금 낯선 걸 빼고는 과제도, 수업도 따라갈 만했다. K: 수업 시간에 들으면서 노션 정리하는 건 이제 적응이 된 것 같다.블로그에 올리진 못해도 매일 기록해 둔 내용만 봐도 어.. 공감수 6 댓글수 6 2024. 9. 28.
  • [Lv.1] 평균 구하기 2024.09.23 푼 문제https://school.programmers.co.kr/learn/courses/30/lessons/12944?language=javascript ✅ 문제정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요.제한 사항arr은 길이 1 이상, 100 이하인 배열입니다.arr의 원소는 -10,000 이상 10,000 이하인 정수입니다.입출력 예arrreturn[1,2,3,4]2.5[5,5]5🔎 풀이 방법배열을 돌면서 안에 있는 거 다 더하고 배열의 길이로 나누기💻 코드function solution(arr) { let answer = 0; const length = arr.length; for(let i = 0; i .. 공감수 0 댓글수 0 2024. 9. 24.
  • [Lv.1] 문자열을 정수로 바꾸기 2024.09.22 푼 문제https://school.programmers.co.kr/learn/courses/30/lessons/12925 ✅ 문제문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요.제한 사항s의 길이는 1 이상 5이하입니다.s의 맨앞에는 부호(+, -)가 올 수 있습니다.s는 부호와 숫자로만 이루어져있습니다.s는 "0"으로 시작하지 않습니다.입출력 예예를들어 str이 "1234"이면 1234를 반환하고, "-1234"이면 -1234를 반환하면 됩니다.str은 부호(+,-)와 숫자로만 구성되어 있고, 잘못된 값이 입력되는 경우는 없습니다.🔎 풀이 방법Number() 사용해서 변경💻 코드function solution(s) { return Number(.. 공감수 0 댓글수 0 2024. 9. 23.
  • [Lv.1] 짝수와 홀수 2024.09.21 금 푼 문제https://school.programmers.co.kr/learn/courses/30/lessons/12937?language=javascript ✅ 문제정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요.제한 사항num은 int 범위의 정수입니다.0은 짝수입니다.입출력 예numreturn3"Odd"4"Even"🔎 풀이 방법2로 나눠서 0이면 짝수, 아니면 홀수💻 코드function solution(num) { var answer = ''; answer = num % 2 === 0 ? "Even" : "Odd"; return answer;}🔖 채점 결과정확성: 100.0합계: 10.. 공감수 0 댓글수 0 2024. 9. 23.
  • [Lv.1] 같은 숫자는 싫어 2024.09.20 금 푼 문제https://school.programmers.co.kr/learn/courses/30/lessons/12906?language=javascript전에 계속 겁먹고 0단계에 머물러 있었는데, 1단계 문제도 어쨌든 풀었다...!효율성 28점이라 당연히 더 많이 공부하고 풀어봐야겠지만 일단은 맞춰서 기쁘다. ✅ 문제배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면,arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 r.. 공감수 0 댓글수 0 2024. 9. 21.
  • [회고] 코드캠프 13기 웹 기초 과정 후기 회고를 시작하며15일간의 웹 기초 과정이 끝났다.추석 연휴 이후 시작될 웹 중급 과정을 어떻게 보낼지 생각해보려고 한다...!그래서 회고는 어떻게 하는데?처음 작성하는 회고니까 나름 회고하는 방법에 대해 조금 찾아봤다.대표적인 회고 양식으로는 KPT, 5F, 4Ls, PMI가 있다. 주간 인프런 #41 개발자의 공유 문화 대부분 회고하고자 하는 일에 대해 스스로 칭찬과 반성을 하고 앞으로 어떻게 나아갈지 방향을 잡는 방식이다.나는 위 회고 양식 중 KPT 양식으로 회고해보려고 한다.KPT 회고 양식KPT에서 K는 Keep, P는 Problem, T는 Try이다.Keep은 좋았었고, 앞으로도 계속 유지하고 싶은 부분을 정리한다.Problem은 반성할 부분, 아쉬운 부분에 대해 정리한다.Try는 Proble.. 공감수 5 댓글수 5 2024. 9. 16.
  • [240902] CSS & JS 마스터 3일차 TIL (스크롤 & 이벤트 버블링) 수업 중 기억하고 싶은 내용CSS 1. 상대위치 & 절대위치절대위치: 좌상단, (0, 0)을 기준으로 하는 위치 (0, 0)애서 고정되어 있기 때문에 전체에서 고정된다. 스크롤의 이동에 영향을 받지 않고 위치를 유지한다.position: absolute -> 부모 요소 중, position의 속성이 [relative, absolute, fixed, sticky]인 요소를 찾아 절대좌표의 기준으로 잡음. 부유 객체(다른 요소와 겹치지 않음)상대위치: 현재 좌표를 기준으로 하는 위치position: relative -> 원래 있던 자리 기준으로 위치 조정position: fixed -> viewport 기준으로 위치 조정 (브라우저 창 기준 -> 위치가 변하지 않음)position: sticky -> 부모 .. 공감수 0 댓글수 0 2024. 9. 2.
  • [240826] 프리캠프 1일차 TIL 늦게라도 올려보는 1일 차 TIL Expo?OT 도중 Expo는 처음 들어봐서 찾아봤다.Expo는 하이브리드 앱 개발을 쉽게 할 수 있도록 하는 프레임워크이다.CLI와 비교한 글들이 많이 보였는데, 둘 다 아직은 잘 모르지만 간단하게 정리하면,Expo는 하이브리드 앱 개발에 처음 입문할 때 추천한다.React Vite 처럼 앱 개발 시 필요한 세부 설정들을 간단하게 할 수 있다.CLI는 각 운영체제 별로 설정해줘야 하는 부분이 많아 처음 배울 때 추천하지는 않는다.개인이 설정하는 부분이 많은 만큼 더 많은 기능을 상세하게 구현할 수 있다. 수업 중 기억하고 싶은 내용select-option의 속성의 name 속성으로, 같은 name을 가진 radio input이 하나의 그룹이 된다.radio에서 labe.. 공감수 0 댓글수 0 2024. 8. 29.
  • [Lv.0] 개미 군단 https://school.programmers.co.kr/learn/courses/30/lessons/120837?language=javascript거의 2달만에 문제를 풀려고 하니까 알던 함수도 생각이 안났다.하루 한 문제라도 꾸준하게 풀어야겠다.✅ 문제개미 군단이 사냥을 나가려고 합니다. 개미군단은 사냥감의 체력에 딱 맞는 병력을 데리고 나가려고 합니다. 장군개미는 5의 공격력을, 병정개미는 3의 공격력을 일개미는 1의 공격력을 가지고 있습니다. 예를 들어 체력 23의 여치를 사냥하려고 할 때, 일개미 23마리를 데리고 가도 되지만, 장군개미 네 마리와 병정개미 한 마리를 데리고 간다면 더 적은 병력으로 사냥할 수 있습니다. 사냥감의 체력 hp가 매개변수로 주어질 때, 사냥감의 체력에 딱 맞게 최소.. 공감수 0 댓글수 0 2024. 7. 4.
  • 바로가기 주소 모음 깃허브 (Github)https://github.com/kimsudang kimsudang - Overview프론트엔드 개발자(가 되고 싶다 \'O'/ ). kimsudang has 15 repositories available. Follow their code on GitHub.github.com 벨로그 (Velog)https://velog.io/@ksy1221/posts ksy1221 (수댕이) / 작성글 - velog velog.io 공감수 0 댓글수 0 2024. 6. 29.
  • 노개북 클린코드 #14 TIL (Today I Learned) 날짜2024년 05월 23일 수요일 오늘 읽은 범위독후감 클린코드 읽은 소감 & 챌린지 완주 소감많이 들어봤지만 섣불리 도전하지는 못했던 '클린코드' 책을 펼쳐보는 기회가 되었다.아직 아는 내용이 많지 않아 공감하기 힘들었던 부분도 있었고, 이해가 되지 않는 부분도 많았다.그래도 지금 작성하는 코드와 변수명 등에 있어서는 책에서 읽었던 것처럼 주석 없이도 다른 팀원들이 이해할 수 있도록 작성하려고 노력 중이다. 좋은 코드, 깨끗한 코드를 지금 당장 작성하지는 못하지만 계속 의식하려고 하면 내 코드도 좋아지지 않을까?지금은 코드를 더 많이 작성해 보고 다른 사람들이 작성한 코드를 보는 식으로 공부를 할 예정이다.가능하다면 코드 리뷰를 많이 받아보기도 하고 해보기도 하.. 공감수 0 댓글수 0 2024. 5. 24.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

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

    © Kakao Corp.