일상의 기록/🌷DAILY 회고록 : 코드스테이츠 54

[230530] Typescript찍먹 + 환경 설정 세팅

분명 작년에 프론트 엔드 공고를 볼 때는 타입스크립트는 우대사항에 있었던 것 같은데 최근에 공고들에서는 타입스크립트가 자격 요건에 들어가 있는 공고들이 많았습니다. 그래서 그런지 코스에서도 타입스크립트가 추가되었고 이왕 배우는거 제대로 배우고자 스터디도 시작했습니다. 주말마다 인터넷에 있는 다양한 무료 강의 와 자료집을 우선 훑고 '이펙티브 타입스크립트'와 함께 공부할 예정입니다. 가능하다면 만들어두었던 프로젝트를 타입스크립트로 리펙토링 해보는 것도 좋을 것 같아요. 기본 타입스크립트 환경 설정 # mkdir typescript-project 을 통해 새로운 폴더에 프로젝트를 생성한 후 # npm init -y 으로 npm 초기화를 통해 package.json파일을 생성합니다. (npm init -y을 ..

[230523] 중간 회고 : 여름을 맞으면서 다시금 각오를 다진다.

꽤 오랜만에 블로그 글을 쓰는 것 같습니다. 꽤나 해이해진 것도 있지만 프로젝트 이것 저것 벌여놓은 일을 수습하느라 블로그 글을 정리할 시간이 없었다는 것도 맞는 말이겠지요.. 저는 여름을 정말 정말 좋아합니다. 다른 어떤 계절보다 제일 좋아합니다. 여름에만 E 성향으로 바뀌는 걸지도 모릅니다. 밀린 업보들을 매 회고 마다 청산하겠다고 하지만 정작 제대로 된 것은 하나도 없습니다. 빨리 취업하고 싶은 마음에 내가 잘못 된 길을 선택한 건 아닐까.. 라는 걱정이 들지만 사실 이러한 걱정은 이전 회사에서의 업무들을 생각하면 다시 음 아냐.. 아주 잘 한 선택이었지라는 결론을 내리게 됩니다. 저는 성격이 좀 급합니다. 이게 빨리빨리 해야 된다는 의미이기보다 내가 모르는 것이 있는 상태가 싫습니다. 문제를 풀 ..

[230515][solo 프로젝트 진행] styled-component 에러

1. Styled components 설치 에러 0 verbose cli C:\Program Files\dev\node.exe C:\Users\jhj19\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js 1 info using npm@9.6.6 2 info using node@v18.16.0 3 timing npm:load:whichnode Completed in 2ms 4 timing config:load:defaults Completed in 2ms 5 timing config:load:file:C:\Users\jhj19\AppData\Roaming\npm\node_modules\npm\npmrc Completed in 2ms 6 timing config:l..

[230427 ~ 28] 좋은 구조란 무엇일까? : 웹 표준 + WAI-ARIA

🍀 오늘의 날짜 : 23년 04월 27~ 28일 🍀 오늘의 주제 : 웹 표준 : 시멘틱 태그 / 마크업 / ..etc 스크린 리더를 통해 본 TAB 의 좋은 구조 예시 1 예시 1 setCurrentTab1(0)}>{tab.tab1.title} setCurrentTab1(1)}>{tab.tab2.title} setCurrentTab1(2)}>{tab.tab3.title} {tab.tab1.content.map((el,idx)=> {el})} {tab.tab2.content.map((el,idx)=> {el})} {tab.tab3.content.map((el,idx)=> {el})} 예시 2 예시 2 setCurrentTab2(0)}>{tab.tab1.title} {tab.tab1.content.map((..

[230424 ~25] 리덕스 REDUX 정의

🍀 오늘의 날짜 : 23년 04월 24일 🍀 오늘의 주제 : 리덕스 Redux Redux 에서 애플리케이션을 만들 때, 보통은 하나의 루트 App.js 컴포넌트에서 상태를 관리합니다. 보통은 부모 컴포넌트가 중간자 역할을 하면서 컴포넌트끼리 직접 소통하는 방법은 권장되지 않습니다. React는 SPA(Single Page Application)을 만들기 위해 주로 사용되는데요 , React가 자체적으로 state와 props 를 관리할 수는 있지만 프로젝트 규모가 커지고 컴포넌트가 많아짐에따라 상태를 관리하기 힘들어집니다. 이러한 상태를 보다 편하게 관리할 수 있도록 도와주는 역할의 (독립형) 라이브러리가 Redux 입니다. * ref 를 사용해서 컴포넌트끼리 직접 소통할 수는 있다고 함 * (엄밀히 말..

[230419~20] React Component 건드리기

헉헉 대면서 간신히 따라가는 중..? 아니 이건 따라간다기보다 거의 끌려가는 중인데..? https://react.vlpt.us/basic/13-array-insert.html https://velog.io/@party3205/React-%EB%B2%84%ED%8A%BC-%ED%81%B4%EB%A6%AD%EC%8B%9C-input-%EC%B4%88%EA%B8%B0%ED%99%94 https://styled-components.com/docs/api styled-components: API Reference API Reference of styled-components styled-components.com https://velog.io/@tnqls1211v/TIL-Day49 [TIL] Day49 #Rea..

[230418] Storybook 과 useRef

* * 작성 중인 글입니다. * * 🍀 오늘의 날짜 : 23년 04월 18일 🍀 오늘의 주제 : 컴포넌트 UI 개발을 위한 Storybook + useRef 🔖 Storybook 이란? UI 개발 도구의 일종으로 Component Driven Development가 트렌드로 자리 잡으며 이를 지원하는 도구 중 하나인 Component Exploer (컴포넌트 탐색기) 가 등장합니다. Storybook은 이 도구의 UI 개발 도구 중 하나 입니다. 각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업 할 수 있다. 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인 할 수 있다. 전체 UI를 한 눈에 보고 개발 할 수 있다. 버그를 사전에 방지할 수..

[230413] UI와 UX 찍먹

🍀 오늘의 날짜 : 23년 04월 13일 🍀 오늘의 주제 : UI 와 UX 그리드에 대해서는 따로 CS 항목에서 정리하고자 합니다. * "그리드"의 모든 것 * [CSS] 레이아웃 뿌셔뿌셔 🔖 UI 와 UX UX ⊃ UI UI : User Interface [ 사용자 인터페이스 ] 사람과 사물 / 시스템 / 기계 / 컴퓨터 프로그램 등 사이에서 의사소통을 위한 목적으로 만들어진 물리적/가상적 매개체 # 사용자 조작환경 # GUI , CLI, NUI(스마폰 터치, 명령어 인식), OUI (모든 사물,물질들이 변형 없이 그대로 인터페이스 장치 ex. IOT) UX : USer Experience [ 사용자 경험 ] 사용자가 제품/서비스를 사용하면서 얻는 경험 즉, 사용하면서 느끼는 감정적인 경험을 의미 # ..

[230412] 즐겁지만 괴로운 알고리즘 (feat. 재귀함수)

Chapter 1 . 재귀함수 연습 + 복습 어떠한 특정 조건에 걸려서 멈추기 전까지 계속 나를 부르는 재귀함수를 이용해서 다양한 예제를 연습해보았습니다. # Solve_flattenArr * 함수 flattenArr을 재귀함수의 형태로 작성하여, 입력받은 다차원 배열을 1차원 배열로 리턴하세요. - Array Method flat(), flatMap() 사용 금지 - 반복문(for,while) 사용 가능. - 원본 배열 변경 금지 - 빈 배열을 입력 받은 경우는 빈 배열 리턴 예시를 생각해보면 다음과 같이 입력을 받고 출력을 해야 합니다. 1) 입력 : [ [1], 2, [3, 4], 5] 2) 출력 : [ 1, 2, 3, 4, 5] 배열 안에 배열이 있는 입력 이므로, 반복문으로 배열을 계속 (재귀)..

[230410] Section 02 회고 : 스스로에게 실망..

🍀 오늘의 날짜 : 23년 04월 10일 🍀 오늘의 주제 : SECTION 02회고 벌써 Section 02 가 완료되었고 회고의 시간이 돌아왔습니다. 생각해보면 많은 발전을 이룬 부분도 오히려 더 부족한 점들만 발견한 부분들도 있는 것 같습니다. section02에서는 사실 해이해진 부분이 있다고 생각합니다. section 01에서는 스스로 만족할 만큼 정말 최선을 다했다면 section 02에서는 스스로에 대해 100% 만족하지 못하고 한 60% 정도 만족하고 있습니다. section 01 회고 🔖KEEP # 친해진 페어분과의 주 1회 자체 스터디를 진행 + 아우디 스터디 주2회 참석 * 그 주에 배운 내용을 응용하고 적용하여 복습의 기간을 가지고 있음 # 간단한 웹 페이지의 구조를 CSS/HTML/..