안녕하세요, 컴퓨터공학전공 IT개발동아리 𝘾𝙤𝙧𝙣𝙚𝙧입니다. 이번 정기 콘텐츠는 Team 병아리에용의 HTMX에 대한 이야기인데요, HTML에 추가하여 사용하는 특수한 속성인 HX에 대해 알아봅시다!

Corner 코너 2024. 1. 26. 11:00

I. INTRODUCTION TO JAVASCRIPT 1. What is JavaScript? JavaScript는 웹 개발의 핵심으로 웹 사이트에 움직임을 주는 동적 처리를 가능하게 합니다. JavaScript는 발전을 거듭하며 현대 웹 브라우저의 주 언어로 자리 잡았습니다. JavaScript를 통해 다양한 라이브러리를 사용하고 서버 개발 등 여러 개발에 활용할 수 있습니다. 2. Console / 콘솔 Console(콘솔)은 개발자에게 오류 등의 중요한 메시지를 표시하는 패널입니다. 이 콘솔을 통해 화면에 원하는 항목을 표시할 수 있습니다. console.log( )를 통하여 ( )안의 내용을 출력할 수 있습니다. console.log(5); // Output: 5 일반적으로 JavaScript 코..

22-23/22-23 리액트 스타터 2 2022. 9. 22. 10:00

🔍 ES2015+ 2015년 일어난 자바스크립트 문법의 대격변, ES2015 (a.k.a ES6)의 등장이 있었다. 📌 왜 ES2015+인가? 노드 6 버전부터 ES2015 문법을 사용할 수 있으며, 현재는 ES2022까지 등장한 상황이므로 ES2015+라 통칭하여 부른다. 🔍 꼭 알아두어야 하는 자바스크립트 문법 모음.zip 📌 const, let var과 유사한 변수 선언 방법이다. 그러나 var은 함수 스코프로 블록의 범위에 상관없이 사용할 수 있으나, const나 let는 블록 스코프로 블록 밖에서는 사용할 수 없다. 📌 템플릿 문자열 기존 문자열과 다르게 키보드 좌측 상단에 있는 백틱 문자로 감싼다. (다만 맥북은 백틱 대신 ₩가 나온다. 속상해라...) 백틱 안에 변수를 넣을 수 있는데, ${..

22-23/22-23 Node.js 2022. 9. 19. 19:00

안녕하세요, 컴퓨터공학전공 개발 소모임 𝘾𝙤𝙧𝙣𝙚𝙧입니다. 코너의 12번째 정기 콘텐츠를 공개합니다! 이번 정기 콘텐츠는 Team de:Burger의 코딩컨벤션에 대한 이야기인데요, 코딩컨벤션의 필요성과 자바스크립트의 코딩컨벤션에 대해 알아봅시다!

Corner 코너 2022. 4. 6. 13:00

8. Objects ● Objects 1. Introduction to Objects 객체를 들어가며 자바에는 7개의 데이터 타입이 있다. - string, number, boolean, null, undefined, symbol, objects -자바스크립트(Javascript)의 기본 타입은 객체(Object) 객체를 사용하면 실제 사물을 모델링하거나 데이터 구조를 구축할 수 있다. 사과(apple), 테이블(table), 아기(baby), 지렁이(worm)을 객체로 만들 수 있다. *객체: 속성값과 행동을 가진 데이터 타입 *객체 모델링: 객체의 속성과 동작을 추려내어 객체로 구현하는 과정 2. Creating Object Literals 객체 리터럴 만들기 객체를 선언할 때 기본구조 - 객체를 변..

21-22/21-22 리액트 스타터 -2 2021. 10. 11. 14:02

7. Iterators ● High-order Functions 1. Introduction 고차 함수는 다른 함수를 인수로 받아들이거나 반환값을 함수로 내보내는 함수이다. 함수에 함수를 포함함으로써 프로그래밍의 추상화 수준을 높여주는 고차 함수에 대해서 알아보자. 2. Function as Data 데이터로서의 함수 자바스크립트의 함수는 다른 여느 자료형과 같은 용례를 갖는다. 함수를 변수에 할당할 수도 있고, 새로운 변수에 재할당할 수도 있다. const announceThatIAmDoingImportantWork = () => { console.log("I’m doing very important work!"); }; 가독성을 해칠 정도로 긴 이름을 가진 함수가 있다고 하자. 이 함수의 동작을 반복..

21-22/21-22 리액트 스타터 -2 2021. 10. 11. 14:01

6. Loops ● Loops 1. Loops : 반복문 반복문은 특정 조건에 도달할 때까지 일련의 명령을 반복하는 구문이다. 프로그램이 특정 작업을 반복할 필요가 있을 때 반복문을 사용하면 효율적으로 유지보수하기 쉬운 코드를 작성할 수 있다. 반복문의 동작을 두고 iterate라는 표현을 사용한다. 2. Repeating Tasks Manually : 수동으로 작업 반복하기 반복문을 사용하지 않고 반복 작업을 수행하려는 경우의 번거로움을 살펴보자. Instruction 1. 변수 vacationSpots를 문자열 세 개를 가진 배열로 만든다. let vacationSpots=['A','B','C']; 2. 배열의 각 요소를 console.log()로 출력한다. console.log(vacationSpo..

21-22/21-22 리액트 스타터 -2 2021. 10. 11. 14:00

5. Arrays ● Arrays 1. 배열 목록을 만들어서 데이터를 저장하는 것을 말한다. let newYearsResolutions = ['Keep a journal', 'Take a falconry class', 'Learn to juggle']; 2. Create an Array 배열 만들기 배열을 변수에 저장이 가능하다. let newYearsResolutions = ['Keep a journal', 'Take a falconry class', 'Learn to juggle']; Instruction 1. 변수에 3개의 문자열을 넣는다. 2.console.log()를 사용해서 출력한다. const hobbies=["dance", "sing", "study"]; console.log(hobbies..

21-22/21-22 리액트 스타터 -2 2021. 10. 8. 21:02

4. Scope ● Scope 1. Scope 식별자의 유효범위 스코프는 식별자 접근 규칙에 따른 유효 범위를 의미하며 변수가 어디서 접근하고 참조할 수 있는 지를 정의한다. 전체 코드 어디에서나 접근이 가능한 변수(전역 스코프 변수)가 있다면, 특정한 곳에서 접근이 가능한 변수(지역 스코프 변수)도 있다. 2. Blocks and Scope 블럭과 스코프 블럭은 중괄호({ })를 사용하여 코드들을 묶어주는 역할을 하며, 하나 또는 여러 줄의 코드들을 그룹화한다. 블럭은 주로 함수와 for문, if 문에서 사용된다. const logSkyColor = () => { let color = 'blue'; console.log(color); // blue } console(logSkyColor); // Out..

21-22/21-22 리액트 스타터 -2 2021. 10. 8. 21:01

3. Functions ● Functions 1. What are Functions? 함수란 무엇인가? 함수는 특정한 작업을 수행하기 위해, 일련의 명령을 그룹화한 재사용 가능한 코드 블록이다. 프로그래밍에서는 특정 작업을 여러 번 수행하기 위해 코드를 반복 사용하는 경우가 많다. 이때 동일한 코드를 반복해서 적는 대신, 함수를 이용하면 보다 간편한 방법으로 코드를 재사용할 수 있다. 이번 학습에서는 함수를 사용하는 방법과, 명확하고 간결한 코드를 작성하는 법을 배운다. 2. Function Declarations 함수 선언 함수를 선언하면, 특정 코드 블록을 함수 이름 또는 식별자에 할당한다. 변수를 선언할 때, 변수 이름에 값을 할당하는 것과 비슷하다. https://content.codecademy..

21-22/21-22 리액트 스타터 -2 2021. 10. 8. 21:00

1. 코드 이해하기 import React from 'react'; 리액트를 불러와서 사용할 수 있게 해주는 코드 리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되는데, 프로젝트 생성 과정에서 node_modules 디렉터리에 react모듈이 설치된다. 이로 인해 import 구문을 통해 리액트를 불러와 사용할 수 있게 된다. ▶ 번들러의 사용 위처럼 모듈을 불러와 사용하는 것은 브라우저엔 없는 기능이며, Node.js에서 지원하는 기능이다. 이런 기능을 브라우저에서 사용하기 위해 번들러(bundler)를 사용한다. 번들(bundel)은 묶는다는 뜻이며 파일을 묶듯이 연결한다. 리액트는 웹팩 번들러를 사용한다. 번들러 도구를 사용하면 import(또는 require)로 모듈을 ..

21-22/21-22 리액트 마스터 2021. 10. 4. 14:01

2. Conditionals ● Conditional Statements 1. 조건문이란 무엇인가? - 조건문이란 프로그램이 조건을 평가하여 결정을 내리고 코드에 논리를 넣는 것을 말한다. 2. IF문 프로그래밍에서 if명령문을 사용하여 조건에 따라 작업을 수행할 수도 있다. if (true) { console.log('This message will print!'); } // Prints: This message will print!코드 Instruction 1. let을 사용해서 변수를 선언한다. 2.if문을 작성하고 if문 안에 console.log()를 이용해 문자열을 넣는다. 3.sale을 false로 변경시킨 후 관찰한다. let sale = true; sale = false; if (sale..

21-22/21-22 리액트 스타터 -2 2021. 10. 4. 14:01