전체 글 85

책을 읽다 ] 일단 오늘은 나한테 잘합시다 - 글 • 그림 도대체

고양YWCA 법인 워크숍을 양주로 갔을 때, 이 책을 한권씩 나눠주고, 수목원을 산책하면서 자유롭게 읽으라고 했었다. 그림도 많고, 짧은 글 위주로 되어 있어 읽기가 편했던 기억이 있었다. 최근 취업도 어렵고, 내 스스로에 대한 자존감이 많이 떨어진 것 같아 책이라도 읽으면 나아질까 싶어 책장을 들여다 보았다. 마침 눈에 띄는 책한권! 노란 표지에 "일단 오늘은 나한테 잘합시다" 가 보였다. 이야기의 시작은 고구마와 인삼의 이야기로 시작된다. 인삼밭에 낀 고구마가 자기를 인삼이라 생각한다. 인삼은 그런 고구마를 보고 왜 특별하지 않은 고구마가 저렇게 해맑은지 이해할 수가 없어 고구마에게 "너는 인삼이 아니고 고구마다."라고 이야기해준다. 고구마는 그걸 듣고 충격을 받기는 커녕 "나는 고구마~ 나는 고구마..

감정일기장 만들기 연습 1 - React router

2023/ 08 /06(일) React router 라이브러리 연습 App.js에 페이지를 연결하는 연습을 해보았다. React router는 라우팅에 따라 다른 뷰를 보여주기 위해 React에서 자주 사용하는 라이브러리이다. React router 라이브러리를 이용하면 SPA(Single Page Application) 구현에 용이하다. SPA가 구현되면, 화면 깜빡임 없이(화면 전체가 리렌더링 되지 않는다.) 페이지 전환이 가능하다. 연결 시연영상 Github 레포지토리 생성 - add - commit - push 오늘 연습한 코드를 깃헙 레포지토리를 생성해 푸시하였다. github은 뭔가 익숙하지가 않아서 그런지 좀 조심스럽다.. 내가 연습한 코드들은 그냥 무작정 올려보도록 해보자! github은 ..

[Deploy] CI/CD - Proxy

Proxy CORS 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS) : 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 USER의 민감한 데이터의 보안을 위해 권한이 없는 접근을 제한 출처 URL의 스킴(프로토콜), 호스트(도메인), 포트로 정의 두 객체의 스킴, 호스트, 포트가 모두 일치하면 같은 출처 일부 작업은 동일 출처 콘텐츠로 제한, CORS를 통해 제한을 해제 가능 Proxy 정석적인 CORS 설정 방법 : FE 개발자가 BE 개발자에게 FE개발 서버 도메인을 허용해 달라고 요청해야 하고, BE개발자는 응답 헤더에 필요한 값들을 담아서 전달해줘야 함 위 과정 없이 React ..

[Deploy] CI/CD 과

CI/CD CI(Continuous Integration) : 지속적 통합 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트 되어 공유 리포지토리에 통합되므로 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결할 수 있다. Code(원격저장소에 코드를 push) - Build(원격 코드 저장소로부터 코드를 가져와 유닛 테스트 후 빌드) - Test(코드 빌드의 결과물이 다른 컴포넌트와 잘 통합되는지 확인) CD(Continuous Delivery) : 지속적 배포 파이프라인의 추가 단계에 대한 자동화를 뜻한다. Release(배포 가능한 소프트웨어 패키지를 작성) - Deploy(프로비저닝 실행, 서비스를 사용자에게 노출, 실..

AWS BE 배포 실습 과제

nvm 설치 과정이 너무 힘들었다... Command 'nvm' not found 에러가 계속 발생했다. nvm 깃헙 페이지에서 문제를 해결해보려고 했으나, 방법을 모르겠어서 구글링과 챗GPT를 통해 문제를 해결했다. 이 오류는 nvm (Node Version Manager)이 시스템에서 찾을 수 없다는 것을 나타냅니다. 이 오류를 해결하기 위해 다음과 같은 단계를 따라서 nvm을 설치하고 설정할 수 있습니다: 1. **nvm 설치 확인**: 먼저, 이미 nvm이 설치되어 있는지 확인해보세요. 터미널에 다음 명령어를 입력해보세요. ``` nvm --version ``` 만약 nvm이 이미 설치되어 있다면, 설치된 버전 정보가 표시될 것입니다. 만약 설치되어 있지 않다면, 아래의 단계를 따라 설치해주세요...

데일리코딩]두 수의 나머지 구하기

문제출처 : 코드스테이츠 코플 ✅문제 접근 및 회고 우선 주의사항에 나눗셈과 나머지 연산자 사용이 금지된다고 한다. 이에 나눗셈은 빼기의 연속이기에 빼기 연산자를 이용해야 된다고 생각했다! (근데 반복은 어떻게 하지?) 👈여기서 막혀버렸다.. MDN에서 반복문을 찾아보다가 while문을 발견! 비슷해보이는 느낌에 적용해보려고 하는데 어떻게 적용해야 할지 잘 모르겠다... 결국.. 레퍼런스의 도움을 받아 코드를 작성하고, 디버깅해보았다. 왜 내가 칠때는 막막한데... 레퍼런스 코드를 보면 이해가 되는거지;; 반복문을 for문 주로 사용하다보니, while문의 반복이 생소한 느낌이었다. 반복은 어떤 요소의 길이가 있는 것에만 적용할 수 있다는 고정관념을 벗어야 할 것 같다. https://developer...

Unit 6] [네트워크] 심화

SEB_FE_45 Section 3. Unit 6. [네트워크] 심화 ✅TCP/IP 1. 패킷교환 방식의 이점에 대해 이해한다. 패킷교환 방식 이전의 통신 방식은 회선교환 방식이다. 회선교환 방식은 1:1 연결만 가능했기 때문에 즉시성이 떨어지는 단점이 있었다. 이에 개발된 방식이 패킷교환 방식이다. 패킷은 pack와 buket이 합쳐진 단어로, 소포라는 의미이다. 즉, 데이터를 패킷 단위로 나누고, 패킷에 출발지와 목적지 정보를 담아 보내는 방식이다. 이 경우 특정 회선이 전용선으로 할당되지 않기 때문에 빠르고 효율적인 데이터 전송기 가능하다. 2. IP의 비연결성, 비순서성, 비신뢰성에 대해 이해한다. IP(Internet Protocol) 출발지에서 목적지까지 데이터가 전달되기 위한 규칙의 일환으로..

Unit 5] [사용자 친화 웹] 웹 표준 & 접근성

SEB_FE_45 Section 3. Unit 5. [사용자 친화 웹] 웹 표준 & 접근성 ✅웹(web)이란? => '공간' 월드 와이드 웹(World Wide Web)이란 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미합니다. 간단히 줄여서 WWW나 W3라고도 부르며, 간단히 웹(Web)이라고 가장 많이 불립니다. - 출처 : http://www.tcpschool.com/webbasic/www ✅웹표준이란? W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’으로, 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있다. -출처 : 코..

Unit 1. 고차함수(joinArrayOfArrays풀이)

문제 출처 : 코드스테이츠 URCLASS 코플릿 풀이 코드 function joinArrayOfArrays(arr) { return arr.reduce((acc, cur) => acc.concat(cur)) } 배열끼리만 합쳐지는 것이라고 생각했었는데, 값도 기존 배열에 합쳐진다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/concat Array.prototype.concat() - JavaScript | MDN concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다. developer.mozilla.org

과제] Unit 2. 객체지향프로그래밍(beesbeesbees)

SEB_FE_45 Section 2. Unit 2. 객체지향 프로그래밍 과제 beesbeesbees ✅ 과제에서 학습해야 할 개념 클래스, 인스턴스, 프로토타입 this 키워드 클래스 생성자(constructor) 상속(extends, super 키워드) 1️⃣클래스와 인스턴스 클래스 : 특정 객체를 표현하기 위한 객체의 구조(틀 또는 템플릿)이며, 객체 내 속성과 메서드를 정의하는 역할을 하며, 클래스는 함수이다. 클래스의 코드 구조는 아래와 같다. class 클래스 () { method1 () { prop1 prop2 ... } method1 () {...} method1 () {...} . . . } //클래스 - 메서드 묶음, 메서드 - 속성 묶음 인스턴스 : 클래스 구조에 데이터 값을 입력한 객..

2023. 06. 23] miracleMorning!

간만에 올리는 인증샷! 이게 은근 매일 인증하기가 어려운 것 같다. 그리고 최근에는 컨디션 난조와 날씨 때문에 걷지도 못했다.. 루틴이 한번 만들때는 엄청 어려운데.. 깨지는 건 순식간이다. 다시 정신 붙들고! 미라클! 아. 근데 걷고 들어오면 수업 전까지 1시간 30분 정도가 여유가 생기는데, 이 시간을 활용을 잘 못하는 것 같다.. 무조건 7시 30분에는 책을 보던, 블로깅을 하던 알차게 시간을 활용해보고자 한다!

손 더럽히기 - 리액트 ] 카운터 앱 구현

- 리액트로 카운터 앱 만들기 - useState를 활용하여 동적 상태 관리 사용 - onClick, onKeyUp 이벤트 사용 - 카운터 앱 동작 화면 -코드 - 회고 리액트를 이용해서 처음으로 혼자 리액스 설치부터 카운터 앱 작동까지 작성해보았다. 예제로만 연습을 하다보니, useState를 어디에 써야 하는지, 증감 함수는 어떻게 작성해야 하는지 감이 안왔다. 작성하면서 발생한 에러는 우선 return 문에 요소의 이름을 내 마음대로 지어봤다. ex) 를 로 하자 브라우저 콘솔에 아래와 같은 경고가 떴다. 이를 해결하기 위해 를 수정하였다. 다음으로는 input 요소에 숫자를 입력하고 'Enter'를 입력하면 count에 렌더링 될 수 있게 해보려고 하였다. 이 과정에서 onKeyUp 이벤트를 사용..

Unit 3] [React] Custom Component(CDD, 개발도구)

SEB _ FE _ 45 Section 3. Unit 3. [React] Custom Component React로 프론트엔드 구축 시 보다 구조적으로 코드를 작성하는 방법을 주제로 CDD(Component Driven Development)와 CDD를 도와주는 개발도구, React Hook인 useRef에 대해 공부하였다. CDD는 컴포넌트 기반의 개발 방법을 의미한다. 즉, 부품단위로 UI 컴포넌트를 만든 후, 부품끼리 이어붙여 완성품을 만드는 방법이다. React 라이브러리와 Styled Component 라이브러리를 이용하여, HTML, CSS, JavaScript를 모두 묶어서 개발할 수 있는Custom Component가 가능해졌다. CSS 구조화 노력과 각 단계별 특징 및 장/단점 구분 특징..

데일리코딩 ] 가장 짧은 문자열과 가장 긴 문자열을 제거한 배열 리턴하기

// 풀어보려고 했던 코드 function removeExtremes(arr) { let result = []; for(let i = 0; i < arr.length; i++){ // arr[i].length와 arr[i+1].length를 비교해서 치환을 해야하나 생각함. // 그리고 막힘.. 결국 레퍼런스의 힘으로 풀어냄..ㅜㅜ 회고 우선, 볼때는 이해가 간다. 그리고 개발자 도구로 디버거를 돌려보면서 어떻게 작동하는지도 알겠다. 다만.... 다음에 다시 풀면 풀수 있을까?ㅎㅎ 공부하자! 문제 출처 : 코드스테이츠 URCLASS 코플릿 - 데일리코딩