[ Programming ] Basic19 Mac에서 PuTTy 안쓰고 터미널로 SSH 접근하는 방법 배경 외부에서 SSH로 서버에 접근해야해서 PuTTy를 설치하려 함. 하지만 이런 문제가 발생. 맥 전용 PuTTy는 유료. 맥 유저들은 PuTTy를 잘 사용하지 않는 것 같음. 사용한 사람들의 후기를 보니 평가가 별로였음. 따라서 다른 솔루션을 찾아보다가 맥을 쓰고 있으면 굳이 PuTTy 안쓰고 터미널에서 충분히 사용 가능하다는 글을 발견. ㅇ_ㅇ 그래서 터미널에서 SSH로 서버에 접근 성공! 두 가지 방법으로 접근 가능하니 원하는 방법을 선택하여 사용하셈. GUI로 실행하기 사실 GUI라는 느낌은 딱히 들지 않지만 ㅋㅋ 그나마... 무튼 아래 순서로 실행하면 됨. Spotlight Search (상단 메뉴바에 있는 돋보기) 클릭 terminal 검색한 후 terminal 실행 메뉴에서 Shell > .. 2024. 2. 22. [C 기초] C언어 구문(Syntax) 구문이 뭔 말이지 다른 언어가 그렇듯, C언어를 작성할 때도 지켜야 할 규칙이 있음. 이를 구문(Syntax)이라 하는데, 문법이라 생각하면 됨. 간단히 살펴보자! 01. 주석 (Comments) 주석(Comments)은 메모라 생각하면 됨. 누군가에게 말로 아닌 글로 코드를 설명해주거나, 내가 나중에 까먹지 않기 위해 작성하는 메모. 또한 실행하고 싶지 않은 코드에다가도 주석처리 해주면 됨. C가 코드를 컴파일하는 과정에서 주석은 실행하지 않음. 주석은 한 줄 또는 여러 줄로 작성할 수 있음. 한 줄 주석은 주석으로 처리할 문장 맨 앞에 슬래시( / ) 2개를 연속으로 작성. 여러 줄 주석은 주석으로 처리할 문장 앞에 /*로 시작해서 맨 마지막에 */ 이걸로 닫아주면 끝. 아래 참고. 2024. 1. 30. [C 기초] 환경설정 Intro (빠르게 글 쓰기 위해 음슴체로 작성하겠습니다. 양해부탁드림ㅇㅋ?) C언어를 갑자기 배워야 하는 상황이 생겼음. 하나도 모르는데 어떻게 배움? 막막하단 말이지. 그래서 일단 무작정 이것저것 자료 찾아보면서 C언어 기초에 대해서 학습하게 됨. 그런데 나 혼자만 알고 있기엔 뭔가 아까워서 C언어 뉴비들을 위해, 또한 내가 학습한 내용을 기억하기 위해 내가 학습한 내용을 글로 작성하기로 결심함. 누가 보겠냐만, 누가 되었든 내 글을 읽고 조금이라도 도움이 된다면 뿌듯할 듯. 환경설정 mac의 vscode에서 C언어를 실행하려 환경을 설정했음. 하지만 워낙 복잡해서 C언어를 시작도 하기 전에 좌절할까봐 여러분들을 위해 초 간단한 실행환경을 준비했음. 아래 사이트에 접속한 후 실행하면 됨. 회원가입을 .. 2024. 1. 30. React Fragments React Fragments 리액트 v16.2부터 'Fragments' 기능을 지원합니다. 렌더링을 할 때 단일 요소만 다룰 수 있음로 불필요한 DOM을 삽입하는 경우가 많았습니다. 그러나 Fragments를 사용하면 여러 개의 요소를 직접 화면에 표시할 수 있습니다. React.Fragment로 감싼 부분은 DOM은 출력하지 않고 자식 요소만 렌더링합니다. 그럼 코드를 볼까요. 먼저 Fragment를 적용하지 않은 것을 작성하고, Fragment를 적용한 것을 작성하여 비교해보도록 하겠습니다. Fragment 적용하지 않은 컴포넌트 import React from 'react'; const Hello = () => { return ( Hello World ! );}; export default Hell.. 2020. 2. 24. 소스 코드 빌드 (Source Code Build) 소스 코드 빌드 빌드란 프로그램 소스 코드에 배포할 파일을 생성하거나 관련 문서를 생성하는 공정을 가리키는 단어 입니다. 패키지 소프트웨어나 게임 소프트웨어 등에서는 일반적인 공정입니다. 개발자가 직접 손을 대는 파일과 최종 사용자에게 사용하는 실제 파일은 다르므로 빌드 실행 후의 상태에서는 프로그램이 어떻게 동작하는지 알기 어려운 상태일 때가 대부분입니다. 최근 프론트앤드 개발에서는 당연한 듯 빌드 프로세스가 포함됩니다. 또한 빌드 환경이 자주 업데이트되기 때문에 "프론트앤드 개발의 흐름이 빠르다."로 여겨지기도 합니다. 그만큼 개발 환경이 성숙하지 않았음을 의미하며 발전시키고자 많은 개발자가 관여하는 세계라 할 수 있습니다. 아울러 항상 최신 정보를 확인하고 적용함으로써 개발 환경을 업데이트하며 개발.. 2020. 2. 22. 아토믹 디자인(Atomic Design) 아토믹 디자인(Atomic Design) 아토믹 디자인을 설명하기에 앞서... 구글(Google)이 '머터리얼 디자인(Material Design)'이라 불리는 디자인 가이드라인을 공개한 이후, 디자인을 언어화하여 그 법칙성을 시스템으로 운용하는 접근법이 웹 개발에 널리 퍼지게 되었습니다. 물론 이전에도 인터페이스를 패턴으로 다루는 방법과 관련한 많은 해설서가 있었습니다. 심지어 1970년대에도 넓은 의미의 디자인 영역 관련 서적은 있었습니다. 따라서 웹 사이트 제작에서도 '컴포넌트' 단위가 중요해졌으며, 이 때문에 리액트의 특징 중 하나인 '컴포넌트 기반(Component-Based)'에도 반영되었습니다. 이러한 흐름 가운데 웹 디자이너 브래드 프로스트(Brad Frost)는 '아토믹 디자인'을 주장했.. 2020. 2. 21. [리액트(React) 학습자를 위한 기초지식] 컴포넌트 생명주기(Lifecycle of Components) - #3 Unmounting (3/3) 리액트(React) 학습자를 위한 기초지식컴포넌트 생명주기(Lifecycle of Components) - #3 Unmounting (출처: https://twitter.com/dan_abramov/status/981712092611989509) Unmounting 리액트 컴포넌트 생명주기의 마지막 단계인 Unmounting입니다. Unmounting은 컴포넌트를 DOM에서 제거할 때 발생합니다. 이 Unmounting 단계에서 호출되는 함수는 단 하나 입니다, componentWillUnmount() componentWillUnmount componentWillUnmount() 함수는 DOM에서 컴포넌트를 제거하려 할 때 호출됩니다. 컴포넌트를 제거할거면 그냥 컴포넌트 파일을 지우면 안되나 생각했지만,.. 2020. 2. 20. [리액트(React) 학습자를 위한 기초지식] 컴포넌트 생명주기(Lifecycle of Components) - #2 Updating (2/3) 리액트(React) 학습자를 위한 기초지식컴포넌트 생명주기(Lifecycle of Components) - #2 Updating (2/3) (출처: https://twitter.com/dan_abramov/status/981712092611989509) Updating 리액트 컴포넌트 생명주기의 첫번째 단계인 Mounting 단계를 거치면 Updating 단계로 들어갑니다. Updating은 Mounting과정을 거쳐 DOM을 형성한 컴포넌트에 state값이나 props값을 변경할 때 발생합니다. 지난글인 [컴포넌트 생명주기 - #1 Mounting]에서 예시로 적어둔 것 처럼, componentDidMount() 함수를 이용해 state값을 변경했습니다. 이미 DOM을 형성한 컴포넌트에 state값을 .. 2020. 2. 19. [리액트(React) 학습자를 위한 기초지식] 컴포넌트 생명주기(Lifecycle of Components) - #1 Mounting (1/3) 리액트(React) 학습자를 위한 기초지식컴포넌트 생명주기(Lifecycle of Components) - #1 Mounting (1/3) 리액트 컴포넌트에는 생명주기가 있습니다. 컴포넌트의 생명주기라 함은 컴포넌트가 처음으로 import되어 DOM을 형성하는 단계, 형성된 컴포넌트 내부를 수정하는 단계, 마지막으로 컴포넌트를 사용하지 않겠다고 선언하는 단계로 말 그대로 컴포넌트가 탄생하여 소멸되기까지 일련의 과정입니다. 이러한 생명주기 안에서는 특정 시점에서 자동으로 호출되는 생명주기와 관련된 함수들이 있습니다. 그리고 컴포넌트가 실행될 때, 이 함수들은 정해진 순서에 따라 실행이 됩니다. 이를 통해 리액트 컴포넌트를 보다 더 심층적으로 다룰 수 있습니다. 생명주기는 크게 3단계로 나누어집니다. Mou.. 2020. 2. 10. 이전 1 2 3 다음
