전체 글

드디어 국비지원 교육을 통해 들을 수 있는 리액트 강의에 접어들었다. 선생님이 바뀌셔서 그런지 수업 스타일도 약간? 바뀐 것 같았다! 초반에는 클래스를 이용해 컴포넌트를 짰다. 일단.. 리액트를 함수 컴포넌트로만 자주 짜봐서 클래스 컴포넌트로 짜는법이 어색했다. 리액트로 조그마한 어플리케이션 하나를 만들었다. 원래는 완성본을 올리고 싶었지만 아직 진행중이라 완성본은 추후에 넣을 예정이다. 하지만 클래스로 컴포넌트를 짜면서 constructor, super, props의 개념을 다시 잡을 수 있었던 것 같다. 일단 이런식으로 클래스로 기본틀을 짜줬다. constructor안에 super와 state가 바뀔 대상을 지정해준다. 이때 9칸의 네모칸을 만들건데 이 안을 클릭할 때마다 변해야 하는 구조이다. 칸 ..

오늘도 내일배움카드를 통해 수강한 리액트 & 리덕스 강의 5주차 후기를 써보려고 한다. 기간이 얼마 남지 않아서.. 후딱 듣고 빨리 후기를 남겨야하는데 이것저것 할게 너무 많아서 계속 미뤄졌다. 그래서 그냥 자바스크립트 부분을 다 듣고 쓰는게 좋을 것 같아서 자바스크립트 까지 모두 들었다! 이번 강의를 들으면서 좋았던 점은 npm에 익숙하지 않은 사람들에게 좋은 강의가 되었을 것 같다. 개발을 처음 시작할 때 환경설정하는게 어찌보면 제일 힘들고.. 영어가 많아서 어지럽다. 그냥 어찌저찌 npm을 깔고 개발환경을 구축했었는데 이번 강의를 통해서 npm과 nvm의 차이점에 대해서도 정확히 알 수 있었다. 그리고 npm버전에 대해서 자세히 알 수 있었다. 그냥 숫자면 버전인가보다~ 하고있었는데 프로젝트를 배포..

문제링크 https://school.programmers.co.kr/learn/courses/30/lessons/1844 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 간만에 올리는 코테 풀이다.. 최근에 bfs, dfs 개념을 공부하고 정리할 겸 내가 푼 풀이를 다 풀어서 기록해보려고 한다. 이번 문제는 bfs(너비우선 탐색) 방법으로 문제를 풀었다. 이렇게 캐릭터가 위치해 있으면 빨간색 오각형이 있는 위치까지 최단거리로 이동하면 된다. 검은색 부분은 막혀있는 곳이므로 지나갈 수 없고 흰색 부분을 지나되 가장 짧은 거리로 이동하면 승리한다. 여기서 제한..

요즘 할게 많아서 강의를 조금 미뤘더니 너무 쌓여서 css 부분 끝까지 후딱 들어버렸다! 나름 css는 좀 할 수 있다고 생각했는데 많이 써보지 않은 속성까지 배울 수 있어서 좋은 기회였던 것 같다. css 강의가 끝나고 마지막에 예제를 만들어보는 수업을 했다. 오직 HTML과 CSS로만 이루어진 예제라서 약간의 노가다(?)가 필요했다. 오버워치 예제를 만들었는데 원래 이미지를 그냥 자바스크립트로 반복되게 굴려주면 쉬울 것 같은데 자바스크립트를 사용하지 않아서 배경이미지를 32개나 일일이 다 넣어주었다..... 그래도 따라하기 쉬운 예제라서 재미있었던 것 같다. (머리에 휴식을 주는 예제였음) 또 transform 속성을 많이 사용하긴 했는데 skew나 이런 속성은 자주 사용하지 않았어서 더 유용했던 것..

ESLint 설정을 마쳤으니 마지막으로 Prettier를 설정해보자!! 일단 Prettier 및 ESLint + Prettier 구성 패키지를 설치해주자. npm i -D prettier eslint-config-prettier 그리고 .eslintrc.cjs 파일을 열어서 extends 배열 맨 마지막에 추가해준다. extends: [ // ... 'prettier', ], 그리고 .prettierrc.json 파일을 생성해준다. 그 안에 설정하고 싶은 내용을 작성해주면 된다. { // 화살표 함수 식 매개변수 () 생략 여부 (ex: (a) => a) arrowParens: 'always', // 닫는 괄호(>) 위치 설정 // ex: htmlWhitespaceSensitivity: 'css', br..

초기 환경설정에이어 이제 ESlint 설정을 해보려고 한다. 1. ESLint 구성 파일 ESlint 구성 파일을 npm 초기화 명령을 사용해 생성한다. npm init @eslint/config 그러면 파일구조에 .eslintrc.cjs 라는 파일이 생성된다. 2. ESLint 린팅 제외 파일 특정 파일 또는 디렉토리의 경우 린팅을 수행하지 않도록 ESlint에 지시할 수 있다. .eslintignore 파일을 생성하고 린팅(linting) 검사에서 제외할 디렉토리를 작성하자. .eslintignore build coverage dist 3. ESLint 플러그인 구성 ESLint가 제공하는 다양한 플러그인 중 React 개발과 관련된 항목 구성에 대해 살펴보자. 1) eslint-plugin-reac..

이것 저것 하느라 강의 듣고 글 쓰는게 미뤄졌다..🥲 이번엔 CSS 속성에 관한 글을 작성하려고 한다! 나름.. CSS는 못하지 않는다고 생각하지만 flex나 grid 같은게 아직 익숙치 않은 것 같다. flex는 그래도 예전에 예제 만들며 직접 해봐서 많이 늘은 것 같다! 처음에는 가상선택자니.. 선택자 개념이 좀 헷갈렸는데 확실히 하면서 많이 익숙해지는 것 같다. 개발은.. 하면 할수록 느는(?) 과정인 것 같다. 그리고 이 강의를 들으면서 처음으로 :not 에 대해서 알 수 있었다. 개발하면서 써보지 않아서 있는지도 몰랐던.. 개념강의라 세세하게 다 알려주시는 것 같았다. 예를들어 이런 코드가 있다. p:not(.classy) { color: red; } body :not(p) { color: gr..

이전 프로젝트에서도 Vite로 환경설정을 해서 진행했었는데 기록해서 남기기위해 다시 처음부터 해보려고 한다. Vite로 환경설정 시작하기 먼저 터미널창을 열어서 Vite를 설치해보자. npm create vite@latest 그다음 순서대로 눌러줘야하는데 1. React 2. JavaScript (원하는 걸로 고르면 된다.) 그러면 설치했다고 나오고 실행하는 방법을 가르쳐준다. 이때 우리가 만든 vite-project로 들어가서 작업을 진행해야한다. 위에서 나온 명령어 그대로 따라치면 된다! 만약 npm run dev 까지 잘 진행했다면 이런 새창이 뜨게된다! 만약에 새창이 안뜨고 터미널 창에 이렇게만 나올 수가 있다. 나는 처음에 했을 때 작동은 되는 것 같은데 새창이 바로 안떠서 뭐지? 내가 잘못했나..

💻 DNS(Domain Name System) DNS는 사람이 읽을 수 있는 도메인 이름을 기계가 읽을 수 있는 IP주소로 변환하거나 IP를 넣으면 해당하는 도메인을 반환하는 시스템이다. 예시 네이버에 접속하자. 우리는 네이버의 IP 주소를 알고 있어야하고 그 아이피 주소를 통해 접속해야 한다. 하지만 우리는 일반적인 대명사로서 naver.com을 사용한다. 그러면 DNS Server는 naver.com이 가리키는 IP를 브라우저에게 반환한다. 즉 DNS Server는 웹 서버 주소에 해당하는 IP 주소 테이블을 가지고 있는 서버라고 보면 된다. 1. DNS Query DNS 서버에서 Domain Name을 이용해 IP를 받아온다. 이때 Domain Name Server에 접속하는 유저에 대해서 Roun..

📔 HTTP, HTTPS 📝 HTTP(Hyper Text Transfer Protocol) 서버/클라이언트 모델을 따르는 프로토콜로 인터넷에서 데이터를 주고받기 위해 사용된다. 인터넷에서 Hyper Text를 교환하기 위한 통신 규약으로 80번 포트를 사용한다. HTTP 서버는 80번 포트에서 요청을 기다리고 클라이언트는 80번 포트로 요청을 보낸다. 1989년에 팀 버너스리에 의해 처음 설계되었고 WWW(World-Wide-Web) 기반에서 세계적인 정보를 공유하는데 큰 역할을 했다. 📝 HTTP 동작 사용자가 브라우저를 통해 어떤 서비스를 URL을 통해 요청(Request)하면 서버에서 해당 요청사항에 맞는 결과를 찾아 사용자에게 응답(Response)하는 형태로 동작한다. 요청 : Client → ..