티스토리

개발하고 싶은 초심자

검색하기

블로그 홈

개발하고 싶은 초심자

hsly22xk.tistory.com/m

정새얀 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

230227 D+4 OOP(Object Oriented Programming/객체 지향 프로그래밍) in Typescript ✷ OOP 관련 링크(1) ✷ OOP 관련 링크(2) 1. How to create Classes in Typescript class Profile { constructor ( private firstName: string, private lastName: string, // private 필드 public age: number // public 필드 ) {} } // private keyword는 오직 TS가 보호해주기 위해 사용하는 것임. const kimcoding = new Profile("coding", "kim", 15); // 동작하지 않음 // Property 'firstName' is private and only accessible within class 'Profile'. // 'fi.. 공감수 0 댓글수 0 2023. 2. 27.
230226 D+3 호출 시그니쳐(Call Signatures), 오버로딩(overloading), 다형성(polymorphism) 1. call signatures : 파라미터와 와 반환(return)값의 타입을 모두 type으로 미리 선언하는 것. 이전에 함수를 작성할 때는 아래와 같은 방식으로 타입을 항상 작성했었다. function multiply(a, b) { return a * b; // arguments인 a와 b의 타입을 체크해주지 않았기 때문에 코드가 동작하지 않음 } function multiply(a: number, b: number) { // function multiply(a: number, b: number): number return a * b; } const multiply = (a: number, b: number) => a * b; 하지만 이번에는 타입을 작성해주지 않고, 아래 코드와 같이 특정 함수에.. 공감수 0 댓글수 0 2023. 2. 26.
230226 D+3 타입스크립트의 타입들(3) 1. unknown : 변수의 타입을 미리 알지 못할 때 사용할 때마다 변수타입 지정을 요구한다. unknown타입은 모든 값을 나타낸다. let a: unknown; if(typeof a === 'number') { // a의 타입이 number임을 먼저 체크 let b = a + 1; // 코드 동작 }; if(typeof a === 'string') { // a의 타입이 string임을 먼저 체크 let b = a.toUpperCase(); // 코드 동작 }; ✅ any vs unknown ① any 모든 타입을 할당받을 수 있는 타입. 사용자로부터 받은 데이터 혹은 써드 파티 라이브러리 같은 동적인 컨텐츠로 오는 불특정한 값을 컴파일 검사를 하지 않고 사용하고자 할때 사용하며, 컴파일 중 타입검.. 공감수 0 댓글수 0 2023. 2. 26.
230221 D+2 타입스크립트의 타입들(2) 1. readonly 속성 타입에 추가하기 ✷ readonly : 말 그대로 요소들을 읽기 전용으로 만들 수 있는 속성. type Profile = { readonly name: string, age?: number } const profileList = (name: string) : Profile => ({name}); const kimcoding = profileList('kimcoding'); kimcoding.name = 'kim'; // 작동하지 않음 상기 코드처럼 name이라는 요소에 readonly 속성이 붙게 되면, name을 수정할 때 TS가 막아준다. const numbers: readonly numbers[] = [1, 2, 3, 4]; numbers.push(5); // 작동하지 않.. 공감수 0 댓글수 0 2023. 2. 21.
230221 D+2 타입스크립트의 타입들(1) 1. TS의 타입들 앞의 글에 작성한 대로, number, string, boolean 등 기본적인 타입들도 있지만 TS에서 쓰는 타입들에 대해 정리한다. // 기본 타입들 let a : number = 1; let b : string = '1'; let c : boolean = true; // number, string, boolean으로 된 array let a : number[] = [1]; let b : string[] = ['1']; let c : boolean[] = [true]; 2. 변수에 타입을 할당하는 방법 ① 선택적 변수(optional parameter) 지정하기 const profile = { name: 'kimcoding' } 상기 예시에서, profile 안에 name은 모두 .. 공감수 0 댓글수 0 2023. 2. 21.
[React/CSS] NavLink에서 밑줄 없애기 & 스타일 지정하기(with styled-components) Link의 밑줄을 없애는 방법까지 알아냈는데, 똑같은 방법으로 NavLink를 넣었을 때는 제대로 동작하지 않았다. NavLink는 Link와 다르게 isActive라는 속성이 있어 삼항연산자를 활용하여 스타일을 지정해 줄 수 있는데, NavLink를 사용했을 때 밑줄이 나오지 않게 하면서 클릭했을 때 글씨 색깔도 바꿀 수 있는 방법이 없을까? 하다가 &(ampersand)를 활용하여 해결했다. import { NavLink } from "react-router-dom"; import styled from "styled-components"; const AllNavLink = styled(NavLink)` color: black; &:link { text-decoration: none; } &.activ.. 공감수 0 댓글수 0 2023. 2. 20.
[React/CSS] 왜 나의 text-decoration: none;은 동작하지 않을까(with styled-components) 리액트를 사용할 때, Link 혹은 NavLink를 활용하여 내가 이동하고자 하는 url을 링크할 수 있다. 이때, 밑줄이 그어져 있는 것이 기본이라 없애려고 많은 사람들이 text-decoration: none;을 활용하는데, 이상하게 내가 똑같이 하면 안 된다. 똑같은 상황이 생겼을 때 구글링이 아닌 내 블로그에서 찾아볼 수 있도록, 그리고 혹여 누군가가 구글링을 하다가 흘러들어오게 되었을 때 도움이 되길 바라면서 정리해두기로 했다. 우선, text-decoration 속성은 말 그대로 텍스트를 꾸며주는 속성이다. 기본값이 none이며, 다른 상황에서도 필요에 맞게 사용할 수 있다. 간단하게 text-decoration이 뭔지 설명했으니, 본론으로 들어가서 내가 하는 none 속성은 왜 동작하지 않을.. 공감수 0 댓글수 0 2023. 2. 20.
232220 D+1 타입스크립트의 개념과 타입 시스템 1. Typescript(TS) : 작성한 코드를 Javascript(JS)로 변환해 주는 strongly typed(강타입) programming language. → Node.js는 TS와 JS 모두 이해하지만, 브라우저는 TS가 아닌 JS를 이해한다. 2. TS를 사용하는 이유 : JS는 어떠한 코드를 실행할 때 런타임 에러 현상 해결을 도와주지 않지만, TS는 코드를 실행하기 전에 이러한 런타임 에러를 잡아줄 수 있음. ✷ 런타임 에러: 코드를 실행할 때 발생하는 에러 → 컴파일은 작성한 TS 코드를 JS로 바꿔준다. 하지만 TS 코드에 에러가 있으면 그 코드는 JS로 컴파일되지 않는다. ⇒ (이 과정은 유저가 코드를 실행하는 런타임에 발생하는 것이 아니며, 일반 유저들은 JS 코드만 사용한다) .. 공감수 0 댓글수 0 2023. 2. 20.
[React] 특정 컴포넌트를 특정 페이지에서 안보이게 하기 이전에도 한 번 정리해둔 글이 있었는데, 이 때는 리액트 버전이 17이라서 useLocation()과 index.js 파일 구조를 BrowserRouter로 감싸줌으로서 해결했었다. 하지만 지금은 리액트 버전이 18이기 때문에 해당 방법으로는 해결할 수 없었다. 그래서 이번에는 조금 더 간단한 방법으로 해결하면 좋을 것 같아 구글링하다 해결한 방법으로 정리해보았다. 일단, 현재 경우에서는 로그인을 할 때는 Header와 Sidebar를 나오지 않도록 하는 것이다. (Outlet을 활용하여 상위 컴포넌트 레이아웃화 시키기는 여기 정리해두었다) 이제 로그인 화면에서 Header와 Sidebar를 나오지 않게 하는 것은 더 쉽다. // App.js ... function App() { return ( ); }.. 공감수 0 댓글수 0 2023. 2. 19.
[React] Outlet의 정의와 사용법 (참고링크) 페이지를 만들어보다가, 간단한 페이지 하나를 만들어도 레이아웃을 짤 때 계속 복잡해지고 있어 조금 더 간단하게 레이아웃을 짤 수 있는 방법을 찾게 되었다. 그리고 지금은 모든 페이지에 Header와 Sidebar 컴포넌트가 나올 수 있도록 만들지만, 추후 나오지 않을 페이지도 만들 것까지 고려하여 코드를 작성할 때 어떻게 할 수 있을까?를 고민하다 찾은 방법이 Outlet이다. Outlet을 설명하기 위해서는 먼저 중첩 라우팅이 뭔지, 어떻게 사용하는 것인지에 대한 이해가 먼저다. ✅ 중첩 라우팅 (지금은 중첩 라우팅을 활용하지 않는 페이지들만 있지만, 추후 들어갈 수 있게 하기 위해 설명을 같이 작성한다) v6에서 중첩 라우팅이 컴포넌트의 children과 같은 개념으로 중첩이 가능해졌고.. 공감수 6 댓글수 0 2023. 2. 19.
[CSS] flex: 1; 이 뭘까? (참고링크1) (참고링크2) (참고링크2는 CSS flex에 대해 헷갈리면 자주 들어가보는데, 도움이 많이 된다) 예전에 부트캠프에서 CSS flex를 학습할 때도 언급되었던 내용이었지만, 정확하게 어떤 의미인지 잘 알지 못한 채 넘어갔고, 그러다보니 제대로 활용할 수 없었다. 이번에는 뭔지 제대로 알고 넘어가기 위해 찾아보고 정리한 내용들을 글로 작성하게 되었다. 일단 flex 속성은 flex의 세 속성을 한 번에 작성하기 위한 단축 표현이다. 세 속성은 각각 flex-grow, flex-shrink, flex-basis다. 각각의 의미는 이렇게 정리해볼 수 있다. 1. flex-grow • flex-basis(flex item의 기본 크기)보다 늘어날 수 있는지 결정하는 속성 • 디폴트 값은 0, i.. 공감수 0 댓글수 0 2023. 2. 19.
[CSS] 밑줄과 밑줄의 길이를 변경하고 싶을 때 항상 Header와 Footer를 구분 지을 때는 색상으로 구분을 지었었는데, 생각해 보면 항상 그렇게 해야만 구분을 지을 수 있었던 것은 아니었다. 그래서 밑줄(이라는 표현이 맞는지는 모르겠지만)을 그어 Header와 Sidebar, Footer를 구분짓고 길이를 조절할 수 있는 방법에 대해 찾아보기로 했다. MDN 을 찾아보면서, border 속성으로 할 수 있다는 것을 알게 되었다. 단순 border속성은 테두리를 지정할 수 있는 속성이지만 top, bottom, left, right의 위치를 지정해 줌에 따라 내가 원하는 대로 줄을 지정할 수 있다. .classNameOne { ... border-bottom: thick double #32a1ce; } 이렇게 순서를 맞추어 줄의 두께, 종류, 색.. 공감수 0 댓글수 0 2023. 2. 19.
[React] Uncaught Error: useRoutes() may be used only in the context of a <Router> component. 퇴사 후 자꾸 써먹지 않으면 머리가 굳어버릴 것 같아 다시 한 번 이것 저것 기본적인 부분들부터 만들어보고 있었는데, 에러 메시지가 나왔다. Uncaught Error: useRoutes() may be used only in the context of a component. useRoutes는 로 감싸야합니다, 라고 나왔는데... App.js에서 를 로 감싸주지 않아 나온 에러였다. 정말 기본적인 부분이라서 놓친 것에 대해 어이가 없었지만, 그만큼 내가 기본적인 부분도 놓칠 정도였구나 싶어 더 열심히 해야겠다 다짐하게 되었다. 공감수 0 댓글수 0 2023. 2. 18.
CSE 업무를 정리하며 공식적인 근무 종료는 2월 3일이었지만, 근무를 종료하는 마지막 날까지 맡은 업무를 마무리하느라 한동안 블로그에 글을 작성하지 못했다. 결론적으로는 코드스테이츠 내의 다른 포지션으로의 전환을 시도해 볼 수 있었지만, 고민해 본 결과 그렇게 하지 않기로 했다. 내가 결정을 내리는 데 기준을 세우려 스스로 던졌던 질문들은 다음과 같았다. 나는 개발자가 되고 싶은걸까? 내가 해당 포지션으로 전환을 하면, 이 길에 만족할까? 이 선택을 했을 때, 언젠가는 후회할까? 세 가지 질문은, 어떻게 보면 같은 결의 질문이다. 하지만 이 질문들은 내가 마구잡이로 했던 생각들과 질문들 중, 제일 중요하다고 생각하는 부분들을 작성해 본 것이다. 그렇다면 먼저 첫 번째와 두 번째 질문에 대한 답변들을 함께 정리해보고자 한다. .. 공감수 0 댓글수 0 2023. 2. 17.
230126 D+112 CSE의 하루 실질적으로 업무를 한 기간(주말, 연휴 제외)만 따지니 굉장히 짧아 보이는 기간이다. 하지만 플렉스에 보니 입사한지 158일이라고 적혀있네...시간이 빠르게 지나갔다. 입사했을 때와 상황이 달라지기도 했고, 눈떠보니 정규직 전환을 위한 오프보딩을 준비하고 있는 기간이다. 아직 제대로 정해진 것이 없기 때문에 이렇다 저렇다 내가 쓸 수는 없지만, 어떻게 보면 새로운 길을 위한 준비를 하고 있다. 처음 코드스테이츠에 입사할 때만 해도, 전형 진행하는 동안 여기 입사하게 되기만 하면 소원이 없겠다 라는 생각을 했던 적이 있었다. 사람이 참 간사한 것이, - 그렇기 때문에 사람인걸까 - 지금은 정규직 전환만 시켜주면 좋겠다 라는 생각을 한다. 이 회사에 있으면서 느낀 점도 많고, 배운 것도 많지만, 정작 내 스.. 공감수 0 댓글수 0 2023. 1. 26.
[React] 배열에서 인덱스가 밀리는 이유 수강생의 질문을 받다가, 어김없이 내가 학습하게 된 내용에 대해 간단하게 작성해보고자 한다. 질문내용은 항목을 수정할 때 처음 입력했던 내용이 나오지 않고 새로고침하기 이전의 내용으로 나온다는 것이었다. 소스코드를 제공받아 직접 레포지토리를 포크하고 클론하여 코드를 살펴보았는데, 페이지네이션을 활용하여 인덱스를 주고 있었는데 map을 활용하는 과정에서 key값이 문제가 되었다. import React, { useState, useEffect } from "react"; import Board from "./Board"; import dummyData from "../dummyData"; import uuid from "react-uuid"; function MainPage() { ... const [co.. 공감수 0 댓글수 0 2023. 1. 11.
[Error] Jump target cannot cross function boundary 해당 글을 작성하다가 나온 에러 메시지인데, if문 안에 return 대신 continue를 작성했을 때 발생했다. Jump target cannot cross function boundary. 직역하면 점프 대상은 함수 경계를 넘을 수 없습니다, 라는 의미인데, 이는 when we try to use a break/continue statement outside of a for loop, e.g. inforEach()or a function, 즉 forEach()나 함수 등 for loop 바깥쪽에 break/continue를 사용하려고 할 때 발생하는 오류인 것이다. (에러에 대한 해결책 레퍼런스 링크) 이를 해결할 수 있는 방법은 두 가지가 있는데 ① try ... catch문을 사용한다. // e.. 공감수 0 댓글수 0 2023. 1. 9.
[DOM] 자식요소 중 일부를 제외하고 삭제하는 방법 교육 엔지니어로서 근무하면서, 수강생들의 질문을 받게 되는데 그 질문으로부터 내가 공부를 더 하게 되기도 한다. DOM의 CRUD에 대해 학습하면서 이런 궁금증을 가져본 적이 없었는데, 질문의 내용과 답변 내용이 나의 학습 수준 향상에 도움이 많이 되어 블로그 글로 정리해보게 되었다. Title 1 2 3 4 5 6 container 안에서 Title만 남기는 방법으로 for ... of 반복문으로 순회를 하고, remove 메소드를 활용했다. const container = document.querySelector('#container'); for (const element of container.children) { if(element.textContent === 'Title') continue; .. 공감수 0 댓글수 0 2023. 1. 9.
230103 D+97 CSE의 하루 오늘은 오후에 세션을 진행했다. 39기에서도 세션을 진행하기는 했지만, 10분 남짓 조차 되지 않는 시간이었고, 전체적으로 봤을 때 내가 메인인 세션은 아니었다. 오늘 진행한 세션은 내가 주축이 되어 진행했기 때문에, 어제 그리고 오늘 정말 많은 긴장을 했다. 손에 땀이 찰 정도로. 하지만 막상 진행을 하는 중에는 리허설 때보다는 덜 긴장한 것 같다. 리허설은 미리 진행을 해보고, 시니어 분들의 피드백을 받는 시간이라 더 많이 긴장을 했던 것 같다. 막상 수강생분들 앞에서 진행을 해보니, 다들 리액션이 좋으셔서 상대적으로 긴장을 덜할 수 있었던 것 같다. 물론, 리허설로 미리 긴장을 해보고 세션 중에도 서포트를 해주시는 엔지니어 분이 계셨기에 잘 해낼 수 있었다. 세션을 두 번에 나누어 진행해서, 첫 번.. 공감수 0 댓글수 0 2023. 1. 3.
221230 D+93 CSE의 하루 벌써 입사한 지 오늘이 131일 차라니. 시간이 너무 빨리 지나간다. 93일이라고 작성하는 것은 주말을 빼고 업무를 진행한 평일만 계산해서이지만, 실제로 131일이라는 숫자가 찍혀있는 것을 보니, 진짜 시간이 지나가고 있다는 게 느껴진다. 하긴, 덥다고 반팔을 입을 때 입사해서 지금은 춥다며 긴팔을 입고 있으니, 이런 계절감만으로도 시간은 지나가고 있다. 실질적인 계약 종료일은 2월 초지만, 1월부터는 오프보딩도 생각하고 있어야 하기 때문에 더욱 정신없이 지나갈 것 같다. 내가 여기 4개월 간 있으면서 뭘 했을까, 라는 생각이 들 때마다 취업 일기와 노션의 위즈덤을 들여다보는데, 성실하게 기록하기를 잘한 것 같다. 내가 뭘 했는지 명확하게 나와있고, 내가 무슨 생각을 하고 있었는지, 그리고 앞으로는 어떻.. 공감수 0 댓글수 0 2022. 12. 30.
221227 D+90 CSE의 하루 (제목을 좀 바꾸고 싶은데 처음부터 이렇게 작성해놔서 못 바꾸는 중...) 요즘에는 개발보다는 행정적인 업무를 조금 더 보고 있다. 그러면서 이번 아이디어 미믹 세션 진행을 맡게 되었다. 처음 들어왔을 때부터 진행해보고 싶었지만, 조금 더 지켜보고 할 수 있으면 해 보자는 판단 하에 진행하지 않았는데, 이번 기수에 진행해볼 수 있게 되었다. 사실 두 번이나 진행되어온 세션이기 때문에, 해왔던 분의 세션 기록을 보고 나만의 방식으로 진행할 수 있게끔 대본을 짜두고 리허설을 진행하면 된다. 처음 회고 세션은 10분 내로 끝났고, 내가 메인인 세션 진행이 아니었기 때문에 긴장은 많이 되었지만 그래도 그냥저냥 지나간 느낌이라면, 이번 세션은 수강생이 진행하는 시간을 제외하고 40분 정도, 거의 완전한 세션 하나.. 공감수 0 댓글수 0 2022. 12. 27.
[HTTP Method] PUT vs PATCH 수강생 시절에도 배웠던 내용들이지만, 요즘 개발을 하면서 더욱 잘 알 필요성이 느껴져 글로 작성하게 되었다. put과 patch가 수정할 때 사용하는 http 메소드라는 것은 어렴풋이 알고 있었다. 하지만 둘의 차이점을 경험하지 못했다. 수강생 시절에 진행했던 프로젝트에서는 수정 요청을 받을 때마다 patch 메소드만을 사용해왔기 때문이다. 그러나 현재 진행하고 있는 개발에서 put과 patch 메소드 사용에 명확한 이유가 있어야 했다. 일단 put과 patch의 정의부터 알아보자. put: 요청 페이로드를 사용해 새로운 리소스를 생성하거나, 대상 리소스를 나타내는 데이터를 대체합니다. patch: 리소스의 부분적인 수정을 할 때에 사용됩니다. 그렇다면 put과 patch는 어떻게 사용할 수 있을까? e.. 공감수 0 댓글수 0 2022. 12. 21.
221221 D+86 CSE의 하루 지난 일기를 9일에 작성했더라...생각보다 많이 밀림에 당황스러웠다. 역시 사람은 염두에 두고 있지 않으면 자꾸 까먹게 되는구나 싶었다. 그러면서 일기들을 작성하지 않은 지난 날들동안 내가 어떤 일들을 했는가, 생각해봤다. 다행히 블로그는 아니지만, 노션에 체크리스트를 만들어 그날의 일정 정리를 해두어 수월하게 정리하고 블로그에 작성할 수 있었다. 제일 큰 이슈는 역시 한 기수의 프로젝트가 끝났다는 것이었다. KDT 첫 기수의 프로젝트 진행 중간에 들어와, 그 다음 기수의 프로젝트 종료까지 함께해보면서 고도화가 이렇게 빨리 될 수도 있구나를 많이 느끼게 되었다. 물론 고도화를 해야할 부분들이 더 생기기도 하고, 고도화가 되었지만 앞으로 더 세부적인 고도화가 필요한 부분들도 많지만, 그래도 회고와 회의들,.. 공감수 0 댓글수 0 2022. 12. 21.
[React] useState는 비동기인가 동기인가 useState는 비동기인가 동기인가. 이런 주제를 왜 생각하게 되었냐면, api 요청을 patch로 하면서 상태를 변경하게 되었는데, 내가 생각한 로직대로 작성하면 제대로 상태가 변경되지 않은 채로 서버에 변경 요청이 가지 않았다. 그래서 내가 생각한대로 상태 변경이 되려면 어떻게 해야할까 생각하며 구글링을 해보다가, useState가 비동기인가 동기인가 라는 흥미로운 주제를 보게 되었다. 그래서 그 부분에 대한 내용을 찾기 시작했고, 정리한 내용을 블로그에 정리해보게 되었다. 결론부터 말하자면 useState는 비동기로 동작한다. 정확하게는, setState가 비동기로 동작한다. ✸ setState는 React에서 사용하는 비동기 함수로, 개발자들이 어플리케이션 상태를 변경할 때 매우 유용합니다. 비.. 공감수 0 댓글수 0 2022. 12. 20.
[React Error]Uncaught TypeError: Cannot read properties of undefined (reading 'map') map을 사용하고 있었는데, Uncaught TypeError: Cannot read properties of undefined (reading 'map') 에러 메시지가 콘솔에 뜨면서 코드가 작동되지 않았다. 콘솔에 찍어봤을 때 map을 돌린 배열이 찍혔는데, 왜 undefined라고 뜨는지에 대해 한참 고민했다. React 는 렌더링이 화면에 커밋 된 후에야 모든 효과를 실행하기 때문이다. 즉 React는 return에서 배열.map(...)을 반복 실행할 때 첫 턴에 데이터가 아직 안들어와도 렌더링이 실행되며 당연히 그 데이터는 undefined로 정의되어 오류가 나는 것이다. 그러면 어떻게 해결할 수 있을지에 대해 구글링을 해본 결과, && 연산자를 쓰는 방법이었다. true && expressi.. 공감수 0 댓글수 0 2022. 12. 14.
221209 D+78 CSE의 하루 이번 주 월,화,수는 프로젝트 마무리에 모든 날들이 정신 없이 지나간 것 같다. 월요일에는 야근도 해봤다. 내가 일했던 모든 회사들 포함하여 야근을 처음해봐서 낯설기도 하고, 재미있기도 하고(?) (재미있었던 건 코드스테이츠여서 그런가...?)아무튼 바쁜 시간을 보내고 오늘 오랜만에 일기를 써본다. 이번 기수의 프로젝트는 그래도 무사히 마쳤고, 다음 주 화요일에 회고 시간이 있다. 입사 초에는 지난 기수의 프로젝트 기간에 걸쳐져서 들어와, 제대로 뭘 어떻게 진행했는지조차 팔로업을 제대로 하지 못한 채 회고 시간을 보냈지만, 다음 주에 있을 회고 시간에는 그래도 이야기할 수 있는 것들이 많아질 것 같다. 프로젝트 관련 일 뿐만 아니라 나에게는 할 일이 아직도 많지만, 그래도 프로젝트 잘 끝마쳤다! 좋은 분.. 공감수 0 댓글수 0 2022. 12. 9.
zsh: command not found: nvm 오류 해결책 (참고링크) 진작에 그렇게 했어야했지만...회사 노트북에 개발 환경을 구축하려다가 nvm을 설치하고 터미널을 재시동했음에도 불구하고 nvm 명령어를 사용할 수 없다는 메시지가 자꾸 떴다. homebrew를 설치하고 brew install nvm, brew install wget 등등 모든 방법을 사용해보았지만 이미 설치되었다는 문구만 계속 뜰 뿐...해결이 되지는 않았다. 그러던 차에 터미널에 zsh: command not found: nvm이 뜨는 것을 발견했다. 그래, 안되면 터미널에 뜬 문장 그대로 검색을 해보면 되지! 라는 생각으로 바로 구글링을 해보았다(처음부터 구글링을 했으면 삽질도 안했을텐데 난 왜 그랬을까...). 그 결과 해결한 방법이 상단의 참고링크였다. 우선, 터미널에 어떤 문구가 뜨.. 공감수 0 댓글수 1 2022. 12. 9.
[React] 절대경로와 상대경로 항상 리액트에서 경로를 지정하여 import 해올 때 상대경로를 사용하게 될 때가 많은데, 경로를 불러오는 게 너무 헷갈려서 애를 먹다가, 아예 절대경로로 사용하는 방법을 쓰고 있다. (여기 리액트에서 절대경로 사용하는 방법 에 대해 미리 기술해둔 바 있다) 하지만 항상 절대경로로 지정해두는 것은 그다지 좋은 방법이 아니기 때문에, 이번 기회에 상대경로로 불러오는 방법에 대해 알아보고, 그 방법을 기술해보고자 한다. 먼저, 파일의 구조가 어떻게 되어있는지부터 살펴보고자 한다. App.js src ㄴ components ㄴ Modal ㄴ LoginModal.js ㄴ LogoutModal.js ㄴ Nav ㄴ Header.js ㄴ pages ㄴ Login.js ㄴ Logout.js 이러한 파일 구조가 있다고 .. 공감수 0 댓글수 0 2022. 12. 4.
221201 D+72 CSE의 하루 (당일에 작성해놓고 비공개를 공개로 돌리지 않아 이제서야 올라가는 12월 1일의 글...) 항상 생각해보면, 이런 일기의 시작은 오늘은 어떤 일을 했다, 인 것 같다. 뭔가 그렇게 시작하지 않으면 어색하고, 꼭 그래야하는것처럼. 매번 그렇게 시작을 했던 것 같다. 그게 잘못되었다는 의미는 아니지만 항상 똑같이 시작하는 글은 읽기가 재미 없으니까. 나는 항상 글을 작성할 때 어떻게 서두를 시작했나, 오늘은 한 번 생각해보는 시간도 가졌다. ...그래서 오늘은 뭘 했나? 언제나 그랬듯, 오늘도 코드를 작성하고, 에러를 잡아내고, 중간에 있었던 업무 관련 스몰톡도 들어가고 했다. 개발을 하면서 어떻게 해야할 지 감을 못잡아 머리가 아플 때도 있고, 그런 과정에서 해결할 때도 있고 못할 때도 있지만 괜찮다. .. 공감수 0 댓글수 1 2022. 12. 2.
221130 D+71 CSE의 하루 요즘 내가 힘들기도 하고, 일이 많다고 느끼기도 하고, 개발을 하면서 못맞추는 일정에 부담이 될 때도 있다. 그래도 그 힘듦과 부담보다 내가 개발을 하면서 에러를 해결하거나 내가 생각한대로 작동하는 기능 구현, 구글링을 하면서 새롭게 알게 되는 것들이 나를 더 즐겁게 한다. 오늘도 새로운 것을 알게 되었고, 새로운 것을 활용하여 내가 생각한대로 동작할 수 있게 만들었다는 것이 더 재미있었다. 그러면서 '아, 내가 이래서 개발자 되려고 했지' 라는 생각을 다시금 하게 되었다. 혼자 생각하면서 코드를 작성하기도 하고, 구글링을 하다가 도저히 안될 것 같으면 주변에 도움도 요청한다. 도움을 요청하면서 내가 어떤 점이 부족했는지 알게 되기도 하니 더 발전하고 성장할 수 있는 계기가 되기도 한다. 내일이면 12월.. 공감수 0 댓글수 0 2022. 11. 30.

문의안내

티스토리
로그인
고객센터

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