컴퓨터 구조 기초 폰 노이만 구조 정의 오늘날의 컴퓨터는 대부분 를 따른다. 폰 노이만 구조는 크게 CPU - Memory - Program로 구성된다. CPU와 메모리를 분히라여 명령어를 따로 저장하는 프로그램 내장 방식이다. 정의 명령어 가져오기 (IF, Instruction Fetch) : 기억장치로부터 명령어를 가져온다. 명령어 해석 (ID, Instruction Decode) : 앞서 가져온 명령어가 어떤 명령어인지 해석을 진행한다. 피연산자 인출(OF,Operands Fetch) : 명령의 실행에 필요한 정보를 기억장치에 접근해 가져온다. 명령어 실행 (EX, Instruction Execution) : 앞서 가져온 연산자와 데이터를 가지고 연산을 수행하고 저장한다. 인터럽트 체크 👉🏻 작업을 수행하던 중 인터럽트가 발생했을 때의 처리과정 컴퓨터는 수행하던 일을 중지하고 현재 상태 (CPU 내부의 레지스터 값 등)를 보관한다. 발생한 인터럽트를 처리하기 위해 인터럽…

컴퓨터의 구성 : 기계적 장치 중앙처리장치(CPU) : 컴퓨터 시스템 전체를 제어하는 장치로서, 입력장치에서 데이터를 입력 받아 처리한 후 출력장치와 기억장치로 데이터를 전달 : 산술 연산(사칙연산)과 논리연산(참과 거짓 판단)을 수행하는 장치 : CPU 내부에서 일어나는 모든 작업 통제 및 관리 : 연산 중간 값, 명령어 등 일시적으로 저장하는 임시 기억 장치 기억장치(Memory) : 컴퓨터 시스템에서 수행되는 프로그램과 수행에 필요한 데이터를 기억하는 장치 RAM : 반영구적으로 데이터를 저장하고 보존할 수 있는 장치 하드 디스크, 플로피 디스크, CD-ROM, DVD 입출력장치(I/O) : 컴퓨터에서 처리할 데이터와 정보를 외부에서 입력해주는 역할 마우스, 키보드, 마이크 : 컴퓨터 내부에서 처리된 결과를 사용자에게 전달해주는 역할 프린트, 스피커, 모니터 : 하드웨어의 동작을 제시하고 지시하는 프로그램 시스템 소프트웨어 : 사용자가 컴퓨터를 효율적으로 사용하기…

position 정의 CSS  속성은 문서 상에 요소를 배치하는 방법을 지정한다. 속성 값 static 기본 값. 요소를 일반적인 문서 흐름에 따라 배치하며, top, right, bottom, left, z-index 속성이 아무런 영향을 주지 않는다. relative 요소를 일반적인 문서 흐름에 따라 배치하며, top, right, bottom, left 값에 따라 offset을 적용한다. offset은 다른 요소에는 영향을 주지 않아 레이아웃에서 요소가 차지하는 공간은 static과 같다. z-index 값이 auto가 아니라면 새로운 쌓임 맥락을 생성한다. absolute 요소를 일반적인 문서 흐름에서 제거하고, 레이아웃에 공간도 배정하지 않는다. 가장 가까운 static이 아닌 다른 포지션 값을 가진 부모를 기준으로 상대적으로 배치한다. 상위 요소 중 static이 없을 시 초기 컨테이닝 블록을 기준으로 삼는다. 최종 위치는 top, right, bottom, l…

SCSS 정의 란 CSS pre-processor(전처리기)로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주어 유지보수를 쉽게 해준다. 사용 중괄호와 세미콜론을 모두 사용한다. 특징 변수(Variable) 할당 자주 사용하는 속상 값을 변수로 지정하여 재사용할 수 있다. 중첩(Nesting) 구문 중첩 구문을 사용해 가독성을 높일 수 있다. 모듈화(Modularity) 를 사용하여 파일을 모듈화 할 수 있다. 믹스인(Mixins) 함수처럼 default parameter를 지정할 수 있고, parameter를 받아 속성을 부여할 수 있다. 확장 / 상속 (Extend / Inheritance) 를 사용하여 scss 속성 집합을 상속 받을 수 있다. 연산자(Operators) div, random, max, min, sin, cos 등 여러 가지 수학적 기능을 사용할 수 있다. 장점 선택자를 중첩하여 반복되는 부모 요소 사용 감소 …

우아한테크코스 프론트엔드 5기 프리코스 회고 우여곡절 많았던 우테코 5기 프리코스 회고를 적어본다..! 1차 코테에서 광탈했던 4기와 다르게 이번 5기는 프리코스를 지원자 모두가 참여할 수 있었기에, 4주 동안 미션을 진행하며 정신없는 나날들을 보냈다. 최종 코테까지 가지 못하더라도 그만큼 얻어 가는 것이 많았으니 그 내용들을 블로그에 기록하려고 한다. 세 단어로 이번 프리코스를 정의할 수 있을 것 같다. ✨ #도전 #몰입 #경험 🥊도전 클래스형 프로그래밍 함수형 프로그래밍에 익숙해져 있어 클래스형 프로그래밍으로 미션을 진행해야 하는 것이 어렵게 느껴졌다. 클래스, 생성자, 객체 생성을 몇 년 만에 해보려니 감이 안 잡혀 헤매기도 했고 특히 생성자를 사용하는 것이 낯설어 그 부분에서 오류도 많이 겪었다. 그래도 미션을 진행하면서 점차 익숙해졌고, 마지막 미션쯤에는 클래스형 프로그래밍에 조금 다가간 기분이 들었다. 리팩토링 리팩토링을 해본 경험이 거의 없었는데 좋은 코드가…

UMC React Study 7주차 🤝리액트로 협업하기 회사에서 인수인계 받은 코드가 일반적이지 않고 이해하기 어렵다면? 동료 개발자가 내 코드를 이해하는데 너무 오랜 시간이 소요된다고 불편함을 토로하면? 위와 같은 문제들을 회사에 가서 협업을 본격적으로 하기 시작하면서 많이 발생한다. 협업을 위해 코딩 컨벤션에 익숙해지는 것이 중요하다. 코딩 컨벤션 코딩 컨벤션(Coding Conventions)은 협업 시 유지보수 및 가독성, 코드 이해를 위해 지켜지는 개발자들 사이의 규칙을 의미한다. 코딩 컨벤션은 규칙이기 때문에 지키지 않는다고 에러가 발생하지는 않는다. 팀 혹은 회사마다 각기 다양한 코딩 컨벤션들을 볼 수 있다. ☘️ 뱅크샐러드 웹 코딩 컨벤션 ☘️ 카카오 개발자의 팀 코딩 컨벤션에 대한 고찰 ☘️ 리액트 코딩 컨벤션 예시 소셜 로그인 : 인증코드 요청 및 받기 : 카카오 서버로부터 받은 인증 코드를 로 전달 : 인증 코드로 토큰 요청 및 받기 …

UMC React Study 6주차 🌐React Network 서버(Server) Server = Serve + -er : 서브하는 사람 실생활에서 서브하는 사람을 종업원(홀 알바)로 비유할 수 있다. 손님이 많은 경우에 홀 알바를 고용하는 것처럼, 서버 또한 클라이언트가 많아야 존재 이유가 있다. Server : Client = 1 : N 네트워크 통신의 흐름 손님 = Client Android, iOS, Safari, Chrome, Firefox 홀 알바 = Web Server Apache, Nginx 주방 = Backend Language PHP → Laravel , codeigniter ASP → ASP.net JSP → Spring, Spring boot JS → Node.js Python → Django 스마트 냉장고 시스템 = DBMS MySQL, MongoDB, MSSQL, Oracle 식료품 창조 = DB 네트워크 통신 시 클라이언트가 …

UMC React Study 5주차 🌳상태관리 라이브러리의 필요성 React.js는 단방향 데이터 흐름을 가진다. 부모 컴포넌트에서 자식 컴포넌트 방향으로 를 통해 데이터를 전달하는 것이 일반적이다. 이러한 특징은 서비스의 구조를 직관적으로 만들어주지만, 몇 가지 비효율적인 특징도 발생한다. 1-depth 사이의 부모-자식 컴포넌트 간에 함수를 전달하여 state를 끌어올리는 것은 간단할 수 있다. 하지만 만약 여러 depth 차이가 나는 컴포넌트 간에 state를 전달하려면 쓸데없이 state가 전달되는 bridge 컴포넌트가 반드시 존재해야 해서 비효율적이다. 또한, 여러 컴포넌트에서 동일한 state 값을 사용하고 싶은 경우에 state를 local storage에 저장하여 사용 할 수도 있지만, 변화를 즉시 화면에 반영해줘야 하는 경우에는 state를 모두 공유해야 하는 번거로움이 생긴다. 최상위 부모에 state를 정의해두고, 해당 state를 공유하기를 …

UMC React Study 4주차 🎨CSS-technology CSS-in-JS 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법. 최근 웹 애플리케이션을 여러 개의 재활용이 가능한 빌링 블록으로 분리하여 개발하는 컴포넌트 기반 방법이 주가 되고 있다. , : styled-components , : CSS-Modules CSS-Frameworks 사용자 친화적인 UI를 그대로 가져다가 쓸 수 있으며, 개발 속도 향상 및 간결한 CSS 코드 작성이 가능하다. Tailwind CSS React Bootstrap Ant Design Semantic UI SCSS CSS를 전처리 해주는 기능을 제공하며, CSS Preprocessor라고 부르기도 한다. CSS의 단점을 보완하기 위한 CSS의 확장으로 나온 스크립트 언어이다. 기존의 복잡한 CSS 코드를 쉽게 입력하고, CSS가 동작하기 전에 CSS로 변환시켜준다. CSS…

UMC React Study 3주차 🎡리액트 라우팅(React Routing) 라우팅(Routing)이란, 사용자가 요청한 URL에 맞는 페이지를 보여주는 것이다. 리액트는 SPA 방식으로 렌더링하기 때문에 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태로 동작한다. 은 신규 페이지를 불러오지 않는 상황에서 각각의 URL에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리이다. 설치 주요 요소 : 라우팅에 포함시킬 페이지들은 모두 컴포넌트로 감싸줘야 한다. : 컴포넌트는 여러 Route를 감싸서 그중 규칙이 일치하는 Route 단 하나만을 렌더링 시켜주는 역할을 한다. : 모든 Route에 공통으로 들어가는 요소가 있다면, 밖으로 빼줘야 한다. (ex-Header.jsx) : 태그의 속성에는 경로, 속성에는 해당 경로에 띄워줄 컴포넌트를 넣어준다. : 특정 컴포넌트에 여러 경로를 매칭하고 …

2022년 7~8월 회고 정신 없었던 여름🌊 원래 매달 월 말 회고를 작성하며 부족했던 부분들은 돌아보는 것을 목표했는데 7월은 회고를 작성하지 못했다…! 블로그 포스팅도, 알고리즘 풀이도 못할 만큼 정신없는 여름이었다.. 많이 아프기도 했고.. (사진에서 스포) 하지만 그만큼 그동안 해보지 못했던 경험들을 할 수 있어서 정말 정말 의미 있는 시간들이었다. 특히 매년 힘든 일이 생겨서 무서워했던 계절인 여름을 잘 이겨내고 또 성장한 것 같은 기분이 들어 뿌듯했다.✌🏻 이제 시간이 생겼으니 밀렸던 포스팅과 공부들을 다시 열심히 해야겠다!🏃🏻‍♀️ UMC 2기 프로젝트🖨 UMC 2기 프로젝트를 마쳤다! 여태 이론 공부나 알고리즘 풀이만 하다가 개발을 하니 역시 너무 재밌었다. 리액트 스터디를 한 후 개발을 하니 도움이 많이 되기도 했고, 제대로 된 API 통신을 처음 해보며 오류를 많이 겪고 헤맨 만큼 공부가 많이 되었다. 협업이 얼마나 즐거운지 경험해 봤기에 이번 프로젝트가 …

UMC React Study 2주차 🪝 Hooks Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다. 클래스형 컴포넌트는 문법이 어렵고, 코드의 재사용성이 낮으며 축소가 어렵다. 이러한 클래스형 컴포넌트의 단점을 보완하기 위해 가 등장하였다. 하지만 함수형 컴포넌트에서는 클래스형 컴포넌트의 장점인 State나 Life Cycle Method을 다루는 기능을 사용하지 못한다. 이를 해결하기 위해 이 등장했다. 은 함수형 컴포넌트에서 state와 lifecycle 기능을 사용할 수 있게 해주는 함수이다. Hooks의 대표적인 기능인 와 를 살펴보도록 하자. 🧘🏻‍♀️ useState 지난 시간에 배웠던 가 컴포넌트의 외부 input 값이라면, 는 컴포넌트 내부 input 값이라고 할 수 있다. 함수형 컴포넌트는 리렌더링될 때 내부의 모든 코드가 재실행되기 때문에 …

2022년 6월 회고 정처기 실기 합격🎖 2022년 5월 7일 정보처리기사 실기 시험을 봤다. 한 달 조금 넘는 시간 동안 총 12과목을 공부해야 했고, 아는 내용이어도 서술형으로 풀어 쓰는 건 정말 쉽지가 않았다.. 양이 많아서 어디서 나올지 예측이 안 돼서 너무 걱정이 됐던 실기 시험.😂 사실 시험지를 받자마자 1번부터 처음 보는 내용이라 아, 떨어졌구나..하며 시험을 봤고, 가답안으로 채점을 해보니 딱 10 문제를 틀린 상황이었다..ㅎㅎ 부분 점수가 있다는 이야기는 들었지만, 기준을 공개하지 않아 내가 붙은지 떨어진지 확신할 수 없는 상황이기에 결국 합격 발표까지 기다리는 수밖에 없었다. 무려 한 달 넘게 기다려 결과를 조회한 결과..! 합격했다!🎉 합격 기준인 60점에 간당간당한 점수였지만 그래도 필기·실기 둘 다 한 번에 합격한 게 어디인가..!! 나도 이제 정보처리기사 자격증 있는 사람이라고요.😎 리액트 스터디🛫 UMC 지부 내에서 여름방학 동안 리액트 …

Git & GitHub 실습 - 브랜치 & 협업 branch 각자 브랜치에서 따로 개발한 후 merge(병합)하는 것이 더 편리하다. 이때 merge해달라는 요청이 pull request이다. PR을 수락하면 브랜치가 합쳐지면서 merge가 된다. branch 목록 현재 생성되어 있는 브랜치의 목록을 본다. branch 생성 new_branch라는 새로운 브랜치를 만든다. branch 이동 branch_name이라는 브랜치로 이동한다. branch push 특정 브랜치를 깃허브에 푸시한다. (로컬 ➡️ 깃허브) branch pull 브랜치를 깃허브에서 가져와서 최신화한다. (깃허브 ➡️ 로컬) branch 병합 합쳐주고 싶은 브랜치를 선택하여 pull request를 통해 요청을 하고 충돌이 없다면 컨펌하여 merge할 수 있다. 협업 원본 리포지토리 클론 → 브랜치 생성 → 각자 브랜치에서 개발 → PR(요청…

Git & GitHub 실습 - 로컬 & 원격 Local & Remote : 내 컴퓨터 : 다른 사람 컴퓨터 local ➡️ remote github repository 생성 github에서 새 리포지토리를 생성한다. git remote add origin 리포지토리 리포지토리와 내 로컬 폴더를 연결한다. git push origin main github 리포지토리 mian 브랜치에 현재 커밋들을 넣는다. (로컬 → 서버) local ⬅️ remote git clone github 리포지토리에서 모든 커밋들을 내 로컬로 가져온다. git pull origin main 서버에서 변경사항이 일어난 것을 로컬로 동기화한다. (서버 → 로컬) .gitignore 올리고 싶지 않은 파일을 포함한 파일 .gitignore.io 홈페이지 활용 pro설정✨ → 다양한 혜택 제공, 대학생에게는 무료! 참고 강의 https://www.inflearn.co…

Git & GitHub 실습 - 기초 Git 소스코드 관리에 특화된 버전 관리 프로그램 → 파일은 한 개로만 유지되면 좋겠는데 언제든지 특정버전으로 돌아가고 싶어! 형상 관리 = 버전 관리 = 구성 관리 Server & Client ex) 크롬 브라우저() — 웹 페이지 줘!() → 네이버() 네이버() — 코드로 된 데이터() → 크롬 브라우저() ❓내 컴퓨터가 서버가 될 수 있을까? → YES! 내 컴퓨터의 주소를 알려주고 접속했을 때 데이터를 주면 내 컴퓨터도 서버가 될 수 있다. Git vs GitHub : 로컬(내 컴퓨터)에서 돌아가는 버전 관리 프로그램 : 원격(다른 사람 컴퓨터)에 버전들을 저장해놓는 소스코드 버전 저장소 Git 설치 git 버전 확인 터미널에서 다음 명령어 입력 git defaultBranch 기본 브랜치 를 으로 명칭 변경을 하여 생기는 오류를 방지하는 명령어. 설치 후 한 번만 실행해주면 된다. opti…

UMC React Study 1주차 🌏 React의 탄생 배경 동일한 뷰에서 불필요하게 코드 반복하는 문제점 페이지 이동 시 새로고침이 발생하며 매번 데이터를 불러오는 문제점 →️ 기존의 웹에 이러한 문제점을 개선하기 위해 라는 라이브러리가 탄생하게 되었다. 🧩 React의 특징 Virtual DOM 우선 은 Document Object Model의 약자로서, HTML 문서에 접근하기 위한 인터페이스이다. DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트를 이용해 콘텐츠를 추가, 수정, 삭제하거나 이벤트를 처리할 수 있도록 한다. 은 가상 DOM을 의미하는데, virtual DOM을 이용하면 실제 DOM에 접근하여 조작하는 대신에 이를 추상화시킨 자바스크립트 객체를 구성하여 사용한다. React에서 변한 데이터를 실제 DOM에 업데이트하는 과정은 다음과 같으며, 연산 횟수가 줄어들어 더 효율적으로 작업을 처리할 수 있다. 데이터가 업데이트 되면, …

2022년 5월 회고 습관 다잡기🌞 휴학생이라 패턴이 무너질까 봐 걱정을 많이 했는데 걱정했던 것보단 나름 열심히, 그리고 꾸준히 공부하고 있는 것 같아 다행이라는 생각을 한다. 잘못된 습관은 쌓이게 되면 참 무섭고, 좋은 습관은 사소하더라도 사람을 나아가게 만드는 것 같다. 작은 습관들이 모여서 일상이 될 테니, 더 나아가는 내가 될 수 있도록 좋은 습관을 더 쌓기 위해 노력하고 있다. 이렇게 매달 회고를 쓰며 돌아보는 시간을 갖는 건 또한 좋은 습관이라고 생각한다! 아쉬운 부분들은 반성하고, 성장한 부분들은 곱씹으며 더 나은 사람이 되어가는 중이다. 다음 달에는 조금 일찍 기상하는 습관을 가져보자🐣 스터디 마무리🍦 10주 동안 진행되었던 UMC JavaScript 스터디가 끝이 났다! html & css 기초부터 백엔드와의 협업까지 자바스크립트의 전반적인 부분을 차근차근 공부할 수 있던 유익한 시간이었다. 기초를 다시 제대로 쌓은 것 같아 든든했고, 앞으로 진행할 …

UMC 10주차 워크북 서버와의 협업 협업 → 개발 ( 프론트엔드 + 백엔드 ) 협업 시 어떤 가 필요할지 회의 → 의견 취합, 적극 의견 제시 API 및 데이터 없이 프론트 개발을 시작해야 하는 경우 대부분 → 디자인 시안대로 하는 것이 중요 API 명세서가 나올 때쯤 퍼블리싱 완료한 화면에 데이터 코드 작성 경청 및 수용, 의견 적극 제시, 책임감, 존중, 소통, 믿음, 역지사지••• 퍼블리싱 : HTML, CSS을 위주로 화면을 디자인대로 구현하는 작업. 동적인 데이터가 들어가는 곳이라면 더미 데이터를 사용하여 구현. 더미 데이터 : 가짜 데이터. 간단하게 JSON 파일을 만들어서 최소한의 데이터를 만들어 놓은 것. 더미 데이터를 만들어 보는 과정을 통해 데이터에 대해 고민해보고, 백엔드와의 소통이 수월해질 수 있다. figma UI 디자인 툴. 색상, 폰트 등 간략한 코드 및 정보 확인 가능(30% 정도 참고) api 명세서 api 내용을…

javascript 원시값과 참조값 자바스크립트 변수는 크게 두 가지 타입으로 분류할 수 있는데, 바로 과 이다. 원시 값(Primitive Type) 원시 값은 단순한 데이터이며, 모든 원시 값은 변경이 불가능하다. 원시 값을 변수에 할당하면 변수에 이 저장된다. Number String Boolean Null Undefined Biglnt Symbol 원시 값을 할당한 변수 에 새로운 값 을 재할당하면, 초기화했던 이 저장된 메모리 안의 원시 값 자체를 수정하는 것이 아니라 새 메모리 공간에 재할당한 원시 값을 저장한다. 변수 의 메모리 주소는 재할당한 원시 값인 이 저장된 로 바뀐다. 원시 값은 변경 불가능하므로 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당한 값을 저장한 후, 변수가 참조하던 메모리 공간의 주소를 변경한다. 원시 값은 실제 값 자체를 비교하기 때문에 각각 다른 변수에 같은 값을 저정한 후 비교하면 두 값이 같다. 값에 의한…

UMC 9주차 워크북 라우팅(Routing) 이란 URI(또는 경로) 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 말한다. 👉 https://expressjs.com/ko/starter/basic-routing.html CRUD 는 데이터 처리 기능 4가지를 의미한다. HTTP 요청 메서드와 연결하면 다음과 같다. Create(생성) ⇒ Read(조회) ⇒ Update(갱신) ⇒ Delete(삭제) ⇒ HTTP 상태 코드(http status codes) 는 클라이언트가 보낸 HTTP 요청에 대한 서버의 응답 코드로, 상태 코드에 따라 요청의 성공/실패 여부를 판단한다. 1xx : 요청을 받았으며 프로세스를 계속한다. 2xx : 요청을 성공적으로 받았으며 인식했고 수용했다. 3xx : 요청 완료를 위해 추가 작업 조치가 필요하다. 4xx : 요청 문법이 잘못되었거…

UMC 8주차 워크북 HTTP = HyperText Transfer Protocol → 프론트와 서버 간의 데이터 통신 방법 중 하나 = HyperText Transfer Protocol Secure → HTTP + 보안 URL address HTTP Request Method : 기존의 데이터를 접근해서 사용하는 메서드(read 기능) : 기존 데이터에 새로운 데이터를 추가하는 메서드 : 기존의 데이터를 수정하는 메서드 : 데이터를 삭제하는 메서드 XML 👉 https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction JSON 👉 https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON 데이터 통신 fetch 는 브라우저에서 제공해주는 메서드이므로 별도의 설치가 필요 없다. Promise async & await…

UMC 7주차 워크북 동기 & 비동기 : 순서대로 일을 처리하는 방식 : 순서대로 일을 처리 하지 않고 빨리 처리할 수 있는 것들을 먼저 처리하는 방식 자바스크립트는 이지만, 비동기적으로 처리하기 위해 사용할 수 있는 함수가 이다. 1, 3, 4, 6, 8, 10은 동기적으로 먼저 처리되고, 5, 2, 9, 7은 동기적으로 처리가 된 후에 설정된 시간이 작은 것부터 순차적으로 비동기적으로 처리된다. : 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정한다. : 타이머가 만료된 뒤 실행할 function : 함수 대신 문자열을 지정하는 대체 구문 (optional) : 주어진 함수 또는 코드를 실행하기 전에 기다릴 밀리초 단위 시간 (optional) : function에 전달할 추가 매개변수 Callback (콜백함수) : 함수 안에 인자로 들어가는 함수 (비동기적으로 사용될 수도 있고, 동기적으로 사용될 수도 있다.) 콜백함수…

2022년 4월 회고 일상 복귀🤹🏻 사실 휴학생이라 대면 수업, 이런 면에서 큰 변화는 못 느꼈지만.. UMC 첫 회식도 하고, 점점 예전의 일상 모습을 찾는 것 같아서 좋았다. 2년 동안 거의 모든 스터디를 비대면으로 하면서 느끼는 아쉬움이 컸었는데, 앞으로 사람들과 대면으로 함께 공부할 수 있다는 생각에 기대된다. 나는 누가 시키지 않으면 공부 동기 부여가 잘 안 되는 사람이라, 스터디처럼 주기적으로 강제적인 부분이 있어야 공부를 하는 편인데 특히 대면일 때가 공부 강도가 더 높은 것 같다. 비대면이라고 대충한다는 의미는 아니지만 그래도 만나서 스터디를 진행할 때 내가 더 제대로 공부하는 느낌이라고 할까,, 그래서 2년만의 일상 복귀는 나한테 너무 반가운 소식!! 앞으로 회식도 더 자주 하면 좋겠다ㅎㅎㅎ 즐거웠습니다, UMC 회식💗 자료구조🌲 알고리즘을 최대한 하루에 하나씩 꾸준히 풀고 있지만, 자료구조는 많이 약하다고 느꼈다. 트리나 탐색 알고리즘을 풀 때마다 막히…

UMC 6주차 워크북 Local Storage 로그인 정보와 같이 계속 유지되어야 하는 데이터를 저장하기 위해 를 사용한다. 말 그대로 로컬 환경의 저장 공간에 정보를 저정하는 것이다. 개발자 도구를 통해 Application - Local Storage를 누르면 해당 페이지에서 로컬 스토리지에 저장되고 있는 정보 목록을 확인할 수 있고, Key - Value 형태로 저장된다. Local Storage가 사용되는 기능 중요 CSS 저장용 웹페이지간 정보 전달(웹서버를 경유하지 않고 정보 로컬에 유지) Canvas나 이미지에 대한 임시 저장 기능(base64로 변환) 현재 읽은 글의 히스토리 저장(카운팅, 읽은글 표시 등으로 활용) 웹페이지의 개인화 설정들에 대한 저장과 제공(캐쉬로 활용) 웹서버에 필수적으로 접근해야 하는 캐쉬용(캐쉬로 먼저 서비스 제공, 차후에 업데이트) 글쓰기를 하다가 사용자가 창을 벗어난 경우 관련 작성하던 내용 백업/복구용 Sesstion Stora…

UMC 5주차 워크북 이벤트 핸들러(Event Handler) 콜백함수를 라고 한다. 이벤트 핸들러는 가독성 및 유지보수를 위해 따로 작성하는 것이 좋다. 함수 뒤에 호출 기호가 없는 이유는 콜백함수이기 때문이다. 콜백은 클릭이 이루어질 때마다 함수를 자동적으로 호출해준다. 이벤트 핸들러의 단점은 동일한 이벤트에 서로 다른 콜백함수를 지정할 경우 뒤의 이벤트 핸들러가 앞의 이벤트 핸들러를 덮어씌운다. 이벤트 리스너(Event Listner) 이벤트 핸들러와 다르게 동일한 이벤트에 서로 다른 콜백함수를 실행할 수 있다. addEventListener는 아래와 같이 사용할 수 있으며, 인자들은 다음과 같다. - type listener options useCapture 설명 수신할 이벤트 유형을 나타내는 대소문자 구분 문자열(이벤트명) 지정한 이벤트(이벤트 인터페이스를 구현한 객체)를 수신할 객체(콜백함수) 이벤트 수신기의 특징을 지정할 수 있는 객체(옵션) 이벤트 대상…

UMC 4주차 워크북 document document = html. 개발자 도구를 켜서 console에 document를 입력하면 전체 선택되는 것을 확인할 수 있다. DOM을 선택한 변수는 다른 변수와 구분하기 위해 $ 표시를 하는데, 생략해도 무관하다. DOM을 제어하는 것이 곧 HTML을 제어하는 것이다. 자바스크립트는 HTML의 DOM 객체를 가져와 조작할 수 있다. element를 가져오고, element의 텍스트를 읽고, element를 생성, 삭제, 수정할 수 있다. ➕참고 : https://grace-go.tistory.com/78 dom elements 가져오기 : 해당되는 태그를 모두 지정해서 유사 배열(HTMLCollection)에 넣는다. document가 아닌 dom을 선택한 변수를 선택하여 영역을 제한할 수 있다. : 해당되는 클래스를 모두 지정해서 유사 배열(HTMLCollection)에 넣는다. : 해당되는 id를 배열이 아닌 eleme…

UMC 3주차 워크북 변수(Variable) : 데이터를 저장하는 상자 : 변하지 않는 데이터 값 넣을 때 사용. 한 번 값을 할당하면 재할당 할 수 없다. : 데이터 값이 변할 때 사용. 선언 : 변수를 정의하는 것 초기화 : 정의한 변수에 넣는 첫 번째 값 재할당 : 이미 값이 존재하는 변수에 다시 값을 넣는 것 자료형(Data type) : 문자열 : 숫자 : 큰 값의 숫자 : true, false : 중복되지 않는 고유값 : 비어있는 값. 수동적으로(의도적으로) 값이 없음을 나타낸다. : 비어있는 값. 자동적으로 값이 없음을 나타낸다. : 함수, 배열, 객체 연산자(Operator) : +, -, /, *, %, **, ++, — : = : +, += : ==, ===(데이터 타입까지 비교), !=, !==, >, <, >=, <= : : 조건 중 하나라도 false이면 false : 두 개의 조건이 모두 false여야 false …

2022년 3월 회고 휴학🏫 3월, 평소같았으면 개강으로 정신 없어야 할 시기였지만 휴학을 하니 세상 모든 것이 아름다워 보였다.😆 하지만 아름다움도 정말 잠시.. 공부를 위해 휴학을 한 만큼 마냥 쉴 수만은 없다 보니 개강한 것처럼 스케줄이 바빴다. 휴학하면 꽃 보러 나들이도 가고,, 여행도 가고,, 나름대로 로망 아닌 로망들이 있었지만 현실은 기숙사 방 구석에서 맥북만 두들기고 있었다.ㅎㅎ 그래도 학기 중과 다르게 내 시간을 온전히 다 가질 수 있는 것이 좋고, 앞으로 내가 하고 싶었던 것들로 이 시간들을 알차게 채워나가고 싶다! UMC👨‍👩‍👧‍👦 학생회, 스터디, 교육봉사는 해봤지만 연합 동아리는 처음이어서 설렜다. 휴학하는 동안 팀 프로젝트를 꼭 해보고 싶었는데 UMC를 통해 내가 바라던 것을 이룰 수 있게 되어 기뻤다. 3월에는 OT와 3주 동안의 스터디를 진행해왔는데, 아직까지는 무리없이 잘 따라가고 있다. 개발 공부를 하면서 기본은 쌓으면 쌓을수록 탄탄해지는…

UMC 2주차 워크북(2) CSS 속성(property) 태그는 컨텐츠 크기와 상관 없이 한 줄을 차지하는 태그인 요소와 컨텐츠 크기만큼 차지하는 태그인 요소가 있다. 너비와 높이를 지정해주는 width, height 속성은 block 요소만 사용 가능하다. inline 요소는 적용해도 변화가 없다. 이런 특성을 변경해주는 속성이 이다. block tag : p, div, ul, li, h1-h6 inline tag : span, a, img, button : 요소를 사라지게 한다. : block 요소를 inline 요소처럼 사용한다. : inline 요소를 block 요소처럼 사용한다. : inline과 block이 합쳐진 것으로, inline처럼 한 줄에 여러 요소들을 둘 수 있고 block처럼 width와 height를 지정할 수 있다. : 요소의 테두리를 설정한다. , , 값을 설정한다. (순서대로 작성 시 너비, 스타일, 색 순서로 작성)…

UMC 2주차 워크북(1) CSS html이 뼈대 역할을 했다면, 는 살(외관)의 역할이라고 할 수 있다. 의 줄임말로, 사용자에게 문서를 표시하는 방법을 지정하는 언어이다. 기본 텍스트 문서를 꾸며주는 역할을 한다. html에서 외부 요소와 연결하는 를 사용하여 css를 외부 파일로 만든 후에 html과 연결할 수 있다. CSS 선택자 CSS의 문법은 다음과 같다. 는 html 요소 선택하는 역할을 한다. 태그 : 를 선택한다. 클래스 : 태그와 상관없이 동일한 스타일을 에 주고 싶을 때 사용한다. 하나의 요소에 여러 개의 클래스를 사용할 수 있고(공백으로 구분), 중복일 경우 위에서 순차적으로 실행되기 때문에 마지막에 실행되는 코드로 적용된다. 예시: 영희 = 학생, 알바생, 안경 쓴 사람 id : 클래스는 동일한 클래스 이름을 여러 요소에 사용할 수 있었지만, id는 동일한 id 값을 가진 id가 있으면 안 되고 에만 사용해야 한다. 하나의 요소가 여러 …

UMC 1주차 워크북 Web 웹이란 무엇일까? 이란 의 줄임말으로서, 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미한다. 인터넷 서비스의 일종이며, 전 세계적으로 많은 정보들이 오가는 공간이다. 웹의 역사 웹은 아이디어를 주고 받을 때 공통된 공간에 각자의 정보를 올리고 관리할 수 있는 정보 관리 시스템에서 시작되었으며, 1989년 팀 버스너리가 발명하였다. Web의 특징 웹은 인터넷 상에서 텍스트, 이미지, 비디오 등 멀티미디어 정보를 하이텍스트 방식으로 연결하여 제공한다. 란, 문서 내부에 또 다른 문서로 연결되도록 하는 (다른 문서에 관한 참조 정보)를 사용하여 여러 문서를 연결하는 기술이다. HTML tag 란 정보를 정의 하는 형식을 의미한다. plain text에 의미를 부여하기 위해 사용되며, 태그마다 지원하는 다양한 속성을 사용할 수 있다. 태그는 와 가 세트로 구성되어있으며, 닫는 태그가 없는 도 있다. dom 은 의 줄임말…

UMC 2기 합격 후기 UMC⭐️ 👉UMC 홈페이지 https://makeus-challenge.oopy.io/umc 는 University Makeus Challenge의 약자인 이다. 디자이너, PM과 함께 협업하여 개발하고, 앱을 런칭하는 활동을 한다. 스터디, 해커톤, 팀 프로젝트까지 모든 과정을 6개월 동안 진행한다. 자세한 커리큘럼은 사진에서 확인 가능👇 지원 동기🙌 과 단톡방에 UMC 홍보가 올라온 것을 보고 바로 1기 서비스 랜딩 페이지를 구경했다. 1기는 우리 학교가 없기도 했고, 안드로이드 파트만 있었어서 조금 고민되긴 했지만 나에게 좋은 기회가 될 것 같아서 지원했다. 작년에 교내 스터디를 하면서 협업을 조금이나마 경험해볼 수 있었는데, 그때 다른 사람들과 함께 개발하는 즐거움을 깨달아버렸다. 그래서 휴학한 동안 연합 동아리나 부트 캠프를 알아보고 있던 중이었는데 마침 운명처럼☄️ 나타난 UMC. iOS, Android, Web, Node.js…

정보처리기사 필기 시험 후기 서론 나는 여유롭게 공부할 거야!라며 당당하게 공부 계획을 당차게 세웠지만.. 나는 역시 어쩔 수 없는 INFP의 피가 흐르는지(?) 계획을 지키지 못해 결국 벼락치기를 하게 되었다ㅎㅎ 이론과 기출을 2번씩 보는 게 목표였지만, 이론 1번 겨우 보고 기출도 한 번씩 푸니 시험 전날이지 뭐람,, 특히 기출 풀면서 2과목과 5과목이 끝까지 불안불안해서 걱정도 많았지만 결론적으로는 합격! 했다는 기분 좋은 후기🌺 시험 난이도 2022년 정기 기사 1회 시험을 응시했고, 3월 5일 토요일 13시 시험이었다. 처음에 걱정했던 2과목이 생각보다 어렵지 않아서 다행이라고 생각하며 신나하면서 문제를 풀었다. 예상치 못하게 4과목에서 조금 어렵네,, 싶었는데.. 갑자기 5과목에서 폭탄을 맞아버리게 됐다💣 교재에서 공부하지 않았던 처음 보는 것들이 나와서 당황스러웠고, 찍기 운도 하나 없이 찍은 문제를 다 틀려버렸다. 개인차가 있긴 하겠지만, 내 주변에서도 5과목 뭐야…

javascript 알림 창 경고 창(Alert) 은 으로, 사용자에게 알릴 메세지를 표시한다. 선택 창(Confirm) 은 으로, 취소 버튼이 있어 사용자의 확인을 요구한다. 어떤 버튼을 누르는지 결과에 따라 프로그램이 동작한다. 사용자가 을 선택하면 를 반환하고, 를 선택하면 를 반환한다. 입력 창(Prompt) 는 으로, 텍스트 필드 안에 메세지를 입력할 수 있다. 입력한 내용은 프로그램에서 사용 가능하며, 을 지정할 수도 있다. 입력된 값의 자료형은 문자열이다. 사용자가 값을 입력하고 버튼을 누르면 사용자가 을 반환하고, 버튼을 누르면 을 반환한다.

javascript 객체 배열(Array) 배열은 ‘예약어 변수명 = [];’의 형태로 선언하고, 쉼표로 구분하여 값을 넣어줄 수 있다. 배열의 자릿수는 index로 나타내며 0부터 시작한다. 배열 내부의 값을 요소(element)라고 한다. 배열 메서드 함수(Function) 함수는 일정한 동작을 수행하는 코드를 의미한다. 예약어 function을 사용하거나 ⇒(화살표)을 사용하여 함수를 만든다. 함수를 선언하는 방식은 크게 세 가지가 있다. 함수를 사용하려면 함수를 호출한다. return은 함수의 종료와 반환을 의미한다. 매개변수(Parameter) & 인수(Argument)를 사용하여 함수 호출 시 인수를 매개변수로 사용한다. 매개변수는 여러 개를 가질 수 있고, 매개변수의 개수와 인수의 개수가 일치하지 않아도 된다. 객체 리터럴(Object Literal) 배열이나 함수가 아닌 객체 중 다음과 같은 모양을 갖춘 객체를 객체 리터럴이라고 한다. 속성과 속성…

package-lock.json 충돌 오류 해결 노트북을 바꾸면서 진행중인 프로젝트를 모두 새 노트북에 클론 받아서 진행해야 했다. git을 잘 다룰 줄 몰라 혹시 잘 되지 않거나 충돌이 나면 어쩌나 걱정을 많이 했는데.. 역시나 한참을 헤맸다.. 누군가 이 글을 본다면 나와 같은 고생을 하지 않기를 바라면서 쓰는 오류 해결 글🥲 npm install & start 오류 새 노트북에 git 저장소를 클론을 해온 후 npm install이 잘 되지 않았다. 오류를 구글링 해서 install 문제를 겨우 해결했더니 이번에는 npm start에서 말썽이고… 구글링해서 해결하면 또 다른 이유로 start가 되지 않는 무한 반복에서 헤어나오지 못하다가 결국 node_modules 디렉토리를 싹 지우고 후, 새로 처음부터 다시 install한 후 start 해보니 되었다. (이 방법은 적절한 해결 방법이 아니니 시도하지 말고 글을 끝까지 읽을 것!!) package-lock.jso…

반복문 while문 while은 조건식이 참인 동안 반복해서 동작문을 실행한다. ‘while (조건식) 동작문;‘의 형태로 작성하며 동작문이 여러 줄일 경우 {}로 감싼다. while문을 사용할 때는 무한 반복이 되지 않도록 주의해야 한다. for문 for은 ‘for (시작; 조건식; 종료식) 동작문;’의 형태로 작성한다. 시작은 처음 한 번만 실행되고, 조건식, 동작문, 종료식 순서대로 반복되어 실행된다. 중첩을 사용하여 반복문의 중괄호 안에 다른 반복문을 쓸 수 있다. continue & break문 continue&break을 사용하면 특정 조건에서 실행되거나 반복문을 멈출 수 있다.

Macbook Pro 14inches unboxing 구매 동기 꺄아아아ㅏ아아 드디어 내가 맥북을 사다니 소리 벗고 팬티 질러..!! 사실 맥북을 구입하기 전까지 나한테 맥북은 디자인이 예쁜 노트북, 스타벅스 직장인 노트북 정도의 인식이었다. 내가 앱등이라지만 맥북까지 사게 될 일은 딱히 없을 거라고 생각했었다. (아이폰, 에어팟, 아이패드 정도는 다들 있잖아..?) 사실 어떻게 생각해보면 인공지능학과 다니면서 목만 잘 꺾이는 문서 작업용 노트북을 쓴 게 더 미스테리인 것 같기도 하고… 🤔 개발자가 될 거라고 생각 못 했던 시절 바라만 보던 맥북을,, 드디어 내가 사게 되었다..!!! 개발을 하면서 성능 차이를 정말 많이 느꼈고, 윈도우 기반 노트북의 한계점을 온 몸으로 깨닫던 중이라 너무 반갑고 설렜다. 처음에는 렘 추가, SSD 추가 한 에어를 살까 고민했지만, 이왕 사는 거 더 좋은 거를 사자는 마음에 덜컥 맥북 프로 m1 14인치를 지르게 된 것이다. (아빠 내가 돈 많이 …

조건문 if문 if는 조건식의 값이 참이면 동작문을 실행하고, 거짓이면 실행하지 않는다. ’if (조건식) 동작문;‘의 형태로 작성하며, 동작문이 하나 이상이면 동작문들을 {}로 감싼다. else if를 if문 뒤에 사용하여 또 다른 조건식과 동작문을 추가하면 여러 분기로 나눌 수 있다. 중첩을 사용하여 조건문의 중괄호 안에 다른 조건문을 쓸 수 있다. switch문 switch는 조건식을 두 개 사용하여 case별로 동작문을 실행하는 조건문이다. ‘switch (조건식) { case 비교조건식: 동작문;}‘의 형태로 작성하며, 보통 조건식에는 변수를 넣고 비교 조건식에는 변수와 비교할 값을 넣는다. 앞의 비교 조건식에 해당되면 해당 case의 동작문만 실행되는 것이 아니라, 아래의 case의 동작문도 모두 실행된다. 따라서 이 특성을 기억하여 실행하고 싶은 case에 break를 사용하여 활용할 수 있어야 한다. 어느 case에도 해당되지 않을 때는 default를 사용한다. 조…

변수 let 잠깐 동안 특정 값을 저장해야 할 때 사용하는 것이 변수이다. ’let 변수명‘의 형태로 변수를 선언하고, 변수를 선언함과 동시에 값을 대입하는 것을 초기화라고 한다. var var 또한 변수를 선언하는 예약어이며, ’var 변수명‘의 형태로 선언한다. let을 사용하여 같은 변수명을 다시 선언하면 오류가 나지만, var는 같은 변수명을 다시 선언하는 것이 가능하며 에약어를 변수명으로 사용할 수도 있다. 이렇듯 var의 난해한 특성 때문에 요즘은 거의 사용하지 않는다고 한다. const const는 상수를 선언하는 예약어이다. 값을 상수로 저장하면 다른 값을 대입하더라도 수정되지 않음이 보장되어 더 안전하다. 상수는 값을 변경할 수 없기 때문에 항상 초기화를 해주어야 한다. const로 선언한 객체에 새로운 값을 대입할 수는 없지만, 객체 내부의 값은 바꿀 수 있다. (ex. 배열)

자료형 문자열 -typeof 값의 자료형을 반환한다. -back slash 역슬래시는 문자열에서 특수한 역할을 한다. 각각의 상황에 맞게 활용할 수 있어야 한다. -연산 문자열과 문자열은 연산이 가능하다. +, -, *, /, % 연산이 모두 가능하다. 숫자 -NaN은 Not a Number라는 의미로, 숫자가 아니라는 의미로 쓰이는 숫자이다. NaN의 자료형은 숫자이다. -연산 parseInt와 Number는 문자열을 숫자로 변환하여 사용하고 싶을 때 사용한다. 숫자와 문자열을 연산하게 되면 숫자가 문자열로 형 변환된다. -연산자 우선순위 우선순위 연산자 20 ()(그룹화) 19 ., [], new, ()함수 호출 18 new(인수 없이) 17 ++(후위), —(후위) 16 !, ~, +(단항), -(단항), ++(전위), —(전위), typeof, void, delete, await 15 ** 14 *, /, % 13 +(다항), -(다항) 12 <<. >>, >>> 11…

javascript 기본 규칙 개발 블로그를 열심히 써야지!라는 다짐을 하자마자 수업 과제 시험의 반복… 종강도 했으니 이제 정말 열심히 채워나가야겠다는 마음에 조금은 설렌다..ㅎㅎ 기초부터 탄탄히 채우기 위해 기본 규칙부터 시작해서 앞으로 차근차근 공부한 걸 정리하려고 한다! 이번에는 정말 작심삼일이 아니길 바라며.. 세미콜론 세미콜론은 하나의 명령이 끝났다는 의미로서, 붙이지 않아도 되지만 일부 명령에서 에러가 발생하는 경우도 있다. 에러 발생을 방지하고, 명확하고 통일성 있는 코드를 위해 자바스크립트에서는 세미콜론을 붙이는 것을 권장한다. 주석 주석은 코드가 아닌 설명을 의미한다. 다른 사람과 코드에 대해 의사소통을 하기 위해 꼭 필요한 것 중 하나로서, 주석으로 자세한 설명을 작성하거나 임시로 사용하지 않는 코드를 작성한다. 들여쓰기 들여쓰기는 코드를 실행할 때는 아무런 영향을 미치지 않지만, 코드를 보기 좋게 2칸 혹은 4칸으로 통일하여 들여쓰기를 해주는 것이 좋다. 공…

npm run deploy 오류 해결 1일 1커밋을 목표로 하자고 포부를 밝혔으나.. introducion post를 수정하고 commit, push, merge까지 다 잘 된 것을 확인 했는데 deploy가 되지 않아 당황했다. 다음과 같은 오류가 떴다. 에러 메세지를 읽어봐도 무슨 말인지 모르겠고.. 뭐지 하고 한참을 찾아봤는데.. Window VS code 터미널에서 git으로 배포할 때 powershell이 아닌 bash에서 해야 하는 거였다!! 처음 Gatsby blog를 만들고 배포할 때도 같은 부분에서 한참 헤맸는데 이걸 또 헤매다니.. 다시는 배포할 때 실수하지 말자는 의미에서 글로 남겨 기억해야겠다. 짜잔 ٩( ˃́▿˂̀ )۶ published가 잘 된 것을 확인했다. Mac에서는 이런 번거로움이 없다고 하는데.. 문득 Mac이 부러워지는 에러였다.

앞으로 Gatsby Blog에 개발 관련 글을 올리려고 한다. 어렵겠지만 1일 1커밋을 목표로! ✧(۶•̀ᴗ•́)۶